feat: Write longer content, split Header and Footer components

astro.config.mjs

@@ -2,11 +2,10 @@ import { defineConfig } from "astro/config";
 import sitemap from "@astrojs/sitemap";
 import react from "@astrojs/react";
 
-// https://astro.build/config
 export default defineConfig({
   site: "https://namesake.fyi",
   integrations: [sitemap(), react()],
   devToolbar: {
-    enabled: false
-  }
-});
+    enabled: false,
+  },
+});

src/components/Footer.astro

@@ -0,0 +1,43 @@
+---
+import { RiInstagramLine, RiLinkedinLine } from "react-icons/ri";
+
+const year = new Date().getFullYear();
+---
+
+<footer>
+  <span class="copyright"
+    >&copy; 2022&hairsp;&ndash;&hairsp;{year} Namesake</span
+  >
+  <div class="social">
+    <a
+      href="https://www.instagram.com/joinnamesake/"
+      aria-label="View Namesake on Instagram"
+      title="View Namesake on Instagram"><RiInstagramLine size="24px" /></a
+    >
+    <a
+      href="https://www.linkedin.com/company/namesake-collaborative/"
+      aria-label="View Namesake on LinkedIn"
+      title="View Namesake on LinkedIn"><RiLinkedinLine size="24px" /></a
+    >
+  </div>
+</footer>
+
+<style>
+  footer {
+    display: flex;
+    gap: var(--space-m);
+    align-items: center;
+    padding: var(--space-s) var(--space-l);
+    border-top: 1px solid var(--gray-12);
+    width: 100%;
+  }
+
+  .copyright {
+    font-size: var(--step--1);
+  }
+
+  .social {
+    display: flex;
+    gap: var(--space-s);
+  }
+</style>

src/components/Header.astro

@@ -0,0 +1,20 @@
+---
+import Logo from "./Logo.astro";
+---
+
+<header>
+  <a href="/" aria-label="Namesake homepage"><Logo /></a>
+</header>
+
+<style>
+  header {
+    position: sticky;
+    background-color: var(--pink-7);
+    top: 0;
+    display: flex;
+    justify-content: flex-start;
+    padding: var(--space-m) var(--space-l);
+    width: 100%;
+    border-bottom: 1px solid var(--gray-12);
+  }
+</style>

src/components/Logo.astro

@@ -52,7 +52,7 @@
 
 <style>
   .logo {
-    height: var(--step-2);
+    height: var(--step-0);
     width: auto;
   }
 </style>

src/pages/index.astro

@@ -1,135 +1,100 @@
 ---
 import { Image } from "astro:assets";
-import Logo from "../components/Logo.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
-import {
-  RiArrowRightLine,
-  RiInstagramLine,
-  RiLinkedinLine,
-} from "react-icons/ri";
+import { RiArrowRightLine } from "react-icons/ri";
 import idImage from "../images/id.png";
-
-const year = new Date().getFullYear();
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
 ---
 
 <BaseLayout
   title="Namesake"
   description="Namesake streamlines the legal name and gender marker change process for trans, nonbinary, and gender expansive folks."
 >
+  <Header />
   <main>
-    <a href="/" aria-label="Namesake homepage"><Logo /></a>
-    <div class="hero">
-      <div class="contents">
-        <h1>Be seen for who you&nbsp;are.</h1>
-        <p class="subhead">
-          Namesake streamlines the legal name and gender marker change process
-          for trans, non-binary, and gender expansive folks. Launching in
-          Massachusetts this Summer.
-        </p>
-        <form>
-          <input type="email" placeholder="Your email" required />
-          <button type="submit">Subscribe <RiArrowRightLine /></button>
-        </form>
-      </div>
-      <Image
-        src={idImage}
-        alt="A snail on top of a Massachusetts ID card"
-        width={400}
-        densities={[1, 2]}
-      />
+    <h1>Be seen for who you&nbsp;are.</h1>
+    <div class="subhead">
+      <p>
+        <strong>Legally changing name and gender is a challenge.</strong> You have
+        to navigate the courts, fill out dense paperwork, and tackle steps in a specific
+        and poorly-communicated order. For some, the process can take years to complete.
+        And you have to do it all while navigating big emotions around what it means
+        to embrace a new identity.
+      </p>
+      <p>
+        We’ve been through this process ourselves, and <strong
+          >we think it can be better</strong
+        >. We built Namesake to help you navigate the process, step by step,
+        with community support along the way.
+      </p>
+      <p>
+        We’re finishing up the app right now and we plan to launch this Summer,
+        starting in Massachusetts.
+      </p>
+      <p>
+        Rigid systems weren’t built for us, but we’ll figure them out together.
+      </p>
     </div>
+    <form>
+      <p>Get notified when we launch:</p>
+      <div class="input-group">
+        <input type="email" name="email" placeholder="Your email" required />
+        <button type="submit">Subscribe <RiArrowRightLine /></button>
+      </div>
+    </form>
   </main>
-  <footer>
-    <span class="copyright"
-      >&copy; 2022&hairsp;&ndash;&hairsp;{year} Namesake</span
-    >
-    <div class="social">
-      <a
-        href="https://www.instagram.com/joinnamesake/"
-        aria-label="View Namesake on Instagram"
-        title="View Namesake on Instagram"><RiInstagramLine size="24px" /></a
-      >
-      <a
-        href="https://www.linkedin.com/company/namesake-collaborative/"
-        aria-label="View Namesake on LinkedIn"
-        title="View Namesake on LinkedIn"><RiLinkedinLine size="24px" /></a
-      >
-    </div>
-  </footer>
+  <Footer />
 </BaseLayout>
 
 <style lang="scss">
-  main,
-  footer {
-    padding: var(--space-xl);
-    width: 100%;
-    margin-inline: auto;
-  }
-
   main {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    padding-block-end: 0;
-  }
-
-  .hero {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    gap: var(--space-2xl);
-    padding-block: var(--space-3xl);
-
-    img {
-      mix-blend-mode: multiply;
-      height: auto;
-      max-width: 100%;
-      margin-left: -20px;
-    }
+    padding: var(--space-2xl) var(--space-l);
+    width: 100%;
+    margin-inline: auto;
   }
 
   h1 {
     text-wrap: balance;
-    margin-block-end: var(--space-l);
+    margin-block-end: var(--space-xl);
     line-height: 0.9;
   }
 
-  footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-block-start: 0;
-  }
+  .subhead p {
+    max-width: 54ch;
 
-  .copyright {
-    font-size: var(--step--1);
+    & + p {
+      margin-top: var(--space-m);
+    }
   }
 
-  .social {
-    display: flex;
-    gap: var(--space-s);
-  }
+  form {
+    margin-block-start: var(--space-xl);
+    border: 1px solid var(--gray-12);
+    padding: var(--space-m);
 
-  .subhead {
-    font-size: var(--step-1);
-    max-width: 60ch;
-    text-wrap: balance;
+    @media (width < 540px) {
+      width: 100%;
+    }
   }
 
-  form {
-    // display: flex;
-    display: none; // Until fully implemented
+  .input-group {
+    display: flex;
     gap: var(--space-xs);
-    margin-block-start: var(--space-l);
+    margin-block-start: var(--space-s);
   }
 
   input {
     border: none;
     border-bottom: 2px solid var(--gray-12);
     background: transparent;
     padding: 0;
+    flex: 1;
+    border-radius: 0;
 
     &::placeholder {
       color: var(--gray-a9);
@@ -153,5 +118,10 @@ const year = new Date().getFullYear();
         color: var(--pink-6);
       }
     }
+
+    &:focus-visible {
+      background: var(--gray-12);
+      color: var(--pink-6);
+    }
   }
 </style>

src/styles/base.css

@@ -7,14 +7,14 @@ body {
   color: var(--gray-12);
   background-color: var(--pink-7);
   display: flex;
-  min-height: 100%;
+  min-height: 100dvh;
   position: relative;
   flex-direction: column;
   align-items: flex-start;
   font-size: var(--step-0);
   line-height: var(--line-height-body);
   font-synthesis: none;
-  font-family: "trade-gothic-next", sans-serif;
+  font-family: var(--font-sans);
   font-weight: 400;
   font-style: normal;
   letter-spacing: var(--letter-spacing-condensed);
@@ -26,7 +26,7 @@ body {
 }
 
 h1, h2, h3 {
-  font-family: "rocky-condensed", serif;
+  font-family: var(--font-serif);
   font-weight: 500;
   font-style: normal;
 }

src/styles/theme.css

@@ -34,4 +34,8 @@
 
   /* Radii */
   --radius-sm: 2px;
+
+  /* Fonts */
+  --font-serif: "rocky-condensed", serif;
+  --font-sans: Arial, sans-serif;
 }