Merge pull request #40 from lindakatcodes/cleanup-tasks

Cleanup tasks

.prettierignore

@@ -0,0 +1,7 @@
+_nuxt-archive
+.astro
+.frontmatter
+.vscode
+dist
+node_modules
+public

astro.config.mjs

@@ -11,4 +11,4 @@ export default defineConfig({
     syntaxHighlight: "prism",
     remarkPlugins: [remarkReadingTime],
   },
-});
+});

frontmatter.json

@@ -131,4 +131,4 @@
     "path": "src/assets",
     "relative": true
   }
-}
+}

package.json

@@ -7,7 +7,8 @@
     "start": "astro dev",
     "generate": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "lint": " prettier --write ."
   },
   "dependencies": {
     "@astrojs/mdx": "^1.0.3",

public/font-faces.css

@@ -0,0 +1,18 @@
+/* latin */
+@font-face {
+  font-family: 'Source Serif 4';
+  font-style: normal;
+  font-weight: 200 900;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/sourceserif4/v8/vEFI2_tTDB4M7-auWDN0ahZJW1gb8tc.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/firasans/v17/va9E4kDNxMZdWfMOD5Vvl4jL.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/components/footer.astro → src/components/FooterBar.astro

@@ -1,46 +1,49 @@
 ---
-import Socials from "./socials.astro";
-
+import SocialsGrid from "./SocialsGrid.astro";
 ---
 
-<div transition:name="footer" class="footer-container">
-  <div class="divider shadow-over"></div>
-  <footer>
-    <section class="email-outro">
-      <h2>Hi there!</h2>
+<footer transition:name="footer">
+    <div class="divider shadow-over"></div>
+    <div class="email-outro">
+      <p class="hey">Hey there!</p>
       <p>Thanks for checking out my site!</p>
       <p>
-        Feel free to email me if you'd like to get in touch: <br />
+        Reach out if you'd like to get in touch: <br />
         <span class="email gradient-text"> [email protected]</span>
       </p>
-    </section>
+    </div>
     <div class="footer-socials">
-      <Socials />
+      <SocialsGrid />
     </div>
     <p class="copyright">© 2020 - 2024 Linda Thompson</p>
   </footer>
-</div>
 
 <style>
-  .footer-container {
-    height: var(--footer-height);
-  }
-
   footer {
-    padding: 0 4rem 0.5rem;
+    align-items: center;
     display: grid;
-    grid-template-areas: "email socials";
     grid-template-columns: 1fr 0.5fr;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas: 
+      "divider divider"
+      "outro socials"
+      "copyright copyright";
+  }
+
+  .divider {
+    grid-area: divider;
+    width: 100%;
   }
 
   .email-outro {
-    grid-area: email;
+    grid-area: outro;
+    margin-left: var(--s24);
   }
 
-  .email-outro h2 {
-    font-family: var(--cursive-font);
-    font-size: 1.75rem;
+  .email-outro .hey {
     color: var(--blue);
+    font-family: var(--cursive-font);
+    font-size: var(--h5);
     margin-bottom: initial;
   }
 
@@ -50,63 +53,63 @@ import Socials from "./socials.astro";
   }
 
   .email {
+    background-color: var(--pink);
+    background-image: none;
     cursor: pointer;
+    font-size: 1.1rem;
     text-decoration: underline solid var(--blue);
     transition: background 0.3s ease-in-out;
-    background-image: none;
-    background-color: var(--pink);
-    font-size: 1.1rem;
   }
 
   .email:hover {
-    text-decoration-style: double;
     background-image: var(--gradient);
+    text-decoration-style: double;
   }
 
   .footer-socials {
     grid-area: socials;
-    display: grid;
+    margin-right: var(--s24);
   }
 
   .copyright {
-    grid-column: 1 / 3;
-    text-align: center;
     font-size: 0.8rem;
+    grid-area: copyright;
+    margin-bottom: var(--s8);
+    text-align: center;
   }
 
   @media (max-width: 520px) {
     footer {
-      grid-template-areas: "email" "socials";
       grid-template-columns: 1fr;
-      padding: 0 2rem 1rem;
+      grid-template-rows: auto 1fr 1fr auto;
+      grid-template-areas: 
+        "divider"
+        "outro"
+        "socials"
+        "copyright";
     }
 
     .email-outro {
-      margin-bottom: 0.75rem;
-      padding: 0 3rem;
       font-size: 0.9rem;
+      margin-left: 0;
       text-align: center;
     }
-    
+
     .email {
       font-size: 1rem;
     }
 
-    .copyright {
-      padding-top: 0.5rem;
+    .footer-socials {
+      margin: 0 auto;
+      width: 85%;
     }
   }
 
   @media (min-width: 520px) and (max-width: 1024px) {
     footer {
       grid-template-columns: 0.75fr 1fr;
-      padding: 0 2rem 1rem;
-    }
-
-    .email-outro {
-      padding: 0 0.5rem;
     }
-  }
+  } 
 </style>
 
 <script>

src/components/HeadMetadata.astro

@@ -0,0 +1,49 @@
+---
+import { ViewTransitions } from "astro:transitions";
+const { metadata } = Astro.props;
+---
+
+<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" />
+
+<meta property="og:image" content={metadata.imagePath} />
+<meta property="og:title" content={metadata.title} />
+<meta property="og:type" content="article" />
+<meta property="og:description" content={metadata.description} />
+<meta property="og:url" content={metadata.url} />
+<meta name="twitter:card" content="summary" />
+
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+<meta name="description" content={metadata.description} />
+<meta name="generator" content={Astro.generator} />
+<title>{metadata.title}</title>
+
+<!--
+  Found from CSS Wizardry: https://csswizardry.com/2020/05/the-fastest-google-fonts/
+  1. Preemptively warm up the fonts’ origin.
+  2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in most modern browsers.
+  3. Initiate a low-priority, asynchronous fetch that gets applied to the page only after it’s arrived. Works in all browsers with JavaScript enabled.
+  4. In the unlikely event that a visitor has intentionally disabled JavaScript, fall back to the original method. The good news is that, although this is a render-blocking request, it can still make use of the preconnect which makes it marginally faster than the default.
+  -->
+<!-- [1] -->
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<!-- [2] -->
+<link rel="preload" as="style" href="/font-faces.css" />
+<script src="../util/fontFaces.js"></script>
+<!-- [3] -->
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap"
+  media="print"
+  onload="this.media='all'"
+/>
+<!-- [4] -->
+<noscript>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" />
+</noscript>
+
+<link href="/prism-theme.css" rel="stylesheet" />
+
+<ViewTransitions />

src/components/navBar.astro → src/components/HeaderBar.astro

@@ -1,17 +1,16 @@
 ---
-import ThemeToggle from "./themeToggle.astro";
+import ThemeToggleSwitch from "./ThemeToggleSwitch.astro";
 const activePath = Astro.url.pathname;
 ---
 
-<header>
-  <nav transition:name="header">
+<header transition:name="header">
+  <nav>
     <a
       class:list={["gradient-text link home", { active: activePath === "/" }]}
       href="/"
     >
       LT
     </a>
-    <span class="spacer"></span>
     <a
       class:list={[
         "link projects",
@@ -20,61 +19,56 @@ const activePath = Astro.url.pathname;
       href="/projects">Projects</a
     >
     <a
-      class:list={[
-        "link blog",
-        { "blog-active": activePath === "/blog" },
-      ]}
+      class:list={["link blog", { "blog-active": activePath === "/blog" }]}
       href="/blog">Blog</a
     >
     <a
       class:list={["link about", { "about-active": activePath === "/about" }]}
       href="/about">About</a
     >
-    <ThemeToggle />
+    <ThemeToggleSwitch />
   </nav>
   <div class="divider shadow-under"></div>
 </header>
 
 <style>
   header {
+    background: var(--background);
     position: sticky;
     top: 0;
     z-index: 2;
-    background: var(--background);
   }
+
   nav {
-    height: var(--header-height);
-    width: calc(100dvw - 20px);
-    display: flex;
-    justify-content: flex-end;
     align-items: center;
+    display: flex;
     gap: 1.25rem;
+    height: var(--header-height);
+    justify-content: flex-end;
+    margin: 0 auto var(--s8);
+    width: calc(100dvw - var(--s24));
   }
 
   .link {
-    color: var(--text-main);
-    font-family: var(--cursive-font);
-    font-size: 1.8rem;
-    font-weight: 700;
-    letter-spacing: 0.07rem;
-    padding: 0.5rem 0.25rem 0;
     border-bottom: thick solid;
     border-bottom-color: transparent;
+    color: var(--text-main);
+    font-family: var(--cursive-font);
+    font-size: var(--h6);
+    letter-spacing: -1px;
+    line-height: 1.15;
+    padding: 0.5rem 0.5rem 0;
     text-decoration: none;
     text-shadow: -1px 1px 3px var(--bg-shadow);
     transition:
-      border-bottom-color 0.2s linear,
-      color 0.2s linear;
-  }
-
-  .spacer {
-    flex-grow: 1;
+      all 0.2s linear
   }
 
   .home {
+    flex-grow: 1;
     font-family: var(--cursive-font);
-    font-size: 3.5rem;
-    width: 7rem;
+    font-size: var(--h2);
+    justify-self: flex-start;
     margin-left: 2px;
     text-shadow: none;
   }
@@ -112,7 +106,6 @@ const activePath = Astro.url.pathname;
   @media (max-width: 520px) {
     nav {
       gap: 0.5rem;
-      width: 100dvw;
     }
 
     .link {
@@ -121,8 +114,8 @@ const activePath = Astro.url.pathname;
 
     .home {
       font-size: 2.5rem;
-      width: 3.5rem;
       margin-left: 0.25rem;
+      width: 3.5rem;
     }
   }
 </style>