Merge pull request #6 from DrewMcArthur/tweaks-3

v0.0.3 tweaks
DrewMcArthur · Mar 7, 2023 · 23a8b73 · 23a8b73
2 parents ff55f80 + ccec177
commit 23a8b73
Show file tree

Hide file tree

Showing 15 changed files with 141 additions and 75 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "drewmca-contact-page",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "engines": {
     "npm": ">=6.0.0",
     "node": ">=16.12.0"

diff --git a/public/about.txt b/public/about.txt
@@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Arvo
+- Font Author: Copyright 2010 Anton Koovit, Yassin Baggar.
+- Font Source: http://fonts.gstatic.com/s/arvo/v20/tDbD2oWUg0MKmSAa7Lzr7vs.ttf
+- Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/src/components/App.astro b/src/components/App.astro
@@ -1,8 +1,6 @@
 ---
-import Headline from "./Headline.astro";
 import SocialLinks from "./SocialLinks.astro";
 ---
 <div id='app' class='main'>
-  <Headline />
   <SocialLinks />
 </div>
diff --git a/src/components/SocialLink.astro b/src/components/SocialLink.astro
@@ -4,7 +4,7 @@ import SimpleIcon from "./SimpleIcon.astro";
 const {data} = Astro.props;
 ---
 <a 
-  class='social-link' 
+  class={`social-link ${data.type}`} 
   href={data.url} 
   target="_blank" 
   rel='noopener noreferrer'

diff --git a/src/data/links.json b/src/data/links.json
@@ -1,5 +1,9 @@
 {
   "linkData": [
+    {
+      "type": "planet",
+      "text": "hi, i'm drew!"
+    },
     {
       "type": "gmail",
       "text": "[email protected]",

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,12 +1,16 @@
 ---
 import App from '../components/App.astro';
-import '../styles/App.css';
+import '../styles/main.css';
 ---
 <html>
   <head>
     <title>drewmca.dev</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
   </head>
   <body>
     <App />

diff --git a/src/styles/App.css b/src/styles/App.css
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -0,0 +1,123 @@
+:root {
+  --background-color: antiquewhite;
+
+  --main-color: #394f4f;
+  --light-color: #6b7d7d;
+
+  --main-color--hover: #1b3333;
+
+  /* to calculate, put the above hex into https://codepen.io/sosuke/pen/Pjoqqp */
+  --background-color-filter: invert(100%) sepia(86%) saturate(795%) hue-rotate(299deg) brightness(107%) contrast(96%);
+
+  --main-color-filter: invert(27%) sepia(15%) saturate(626%) hue-rotate(131deg) brightness(96%) contrast(91%);
+
+  --main-color-filter--hover: invert(15%) sepia(8%) saturate(2382%) hue-rotate(131deg) brightness(93%) contrast(89%);
+
+  /** animation timing **/
+  --flyin-timing: cubic-bezier(0,1,0,1);
+}
+
+body {
+  display: flex;
+  align-content: center;
+
+  background-color: var(--background-color);
+  color: var(--main-color);
+}
+
+.main {
+  font-family:'Lato','Ubuntu',system-ui,sans-serif;
+  font-weight:300;
+  font-size: 34px;
+  line-height: 1.6em;
+  display: flex;
+  flex-direction: column;
+  margin: 1em auto;
+  align-items: flex-start;
+}
+
+/* headline */
+.planet.social-link {
+  cursor: auto;
+  border: none;
+  /* animation: flyintop 1s var(--flyin-timing); */
+}
+
+.planet.social-link .social-text {
+  font-size: 1.67em;
+  color: var(--main-color--hover);
+}
+
+.planet.social-link .social-icon, 
+.planet.social-link:hover .social-icon {
+  opacity: 0;
+}
+
+.social-links {
+  display: flex;
+  flex-direction: column;
+}
+
+.social-link {
+  color: var(--light-color);
+  cursor: pointer;
+  text-decoration: none;
+  border-top: 1px solid var(--main-color);
+  padding: 1px 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: .6em;
+  transition: color .25s;
+}
+
+.social-icon {
+  margin: 5px;
+  filter: var(--main-color-filter);
+}
+
+.social-text {
+  margin: 5px;
+}
+
+.social-link:not(.planet):hover {
+  color: var(--main-color--hover);
+  border-color: var(--main-color--hover);
+}
+
+.social-link:hover .social-icon {
+  filter: var(--main-color-filter--hover);
+}
+
+.social-link:not(.planet) .social-icon {
+  animation: flyinleft 0.25s var(--flyin-timing);
+}
+
+.social-link .social-text {
+  animation: flyinright 0.25s var(--flyin-timing);
+}
+
+/* idea for fade in taken from https://malone.io */
+/* used for .main on load */
+@keyframes flyinright {
+  from {
+    opacity: 0;
+    transform: translateX(25em);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes flyinleft {
+  from {
+    opacity: 0;
+    transform: translateX(-25em);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}