fix: Adjust fonts (#17)

src/pages/index.astro

@@ -20,12 +20,11 @@ const year = new Date().getFullYear();
     <a href="/" aria-label="Namesake homepage"><Logo /></a>
     <div class="hero">
       <div class="contents">
-        <h1>Be seen for who you are.</h1>
+        <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. <strong
-            >(Re)launching in Massachusetts this Summer.</strong
-          >
+          for trans, non-binary, and gender expansive folks. Launching in
+          Massachusetts this Summer.
         </p>
         <form>
           <input type="email" placeholder="Your email" required />
@@ -35,7 +34,7 @@ const year = new Date().getFullYear();
       <Image
         src={idImage}
         alt="A snail on top of a Massachusetts ID card"
-        width={300}
+        width={400}
         densities={[1, 2]}
       />
     </div>
@@ -62,7 +61,7 @@ const year = new Date().getFullYear();
 <style lang="scss">
   main,
   footer {
-    padding: var(--space-2xl);
+    padding: var(--space-xl);
     width: 100%;
     margin-inline: auto;
   }
@@ -81,22 +80,19 @@ const year = new Date().getFullYear();
     align-items: flex-start;
     justify-content: center;
     gap: var(--space-2xl);
-    padding-block-end: var(--space-2xl);
-    flex: 1;
+    padding-block: var(--space-3xl);
 
     img {
       mix-blend-mode: multiply;
       height: auto;
-      order: -1;
       max-width: 100%;
       margin-left: -20px;
     }
   }
 
   h1 {
     text-wrap: balance;
-    margin-block-start: calc(var(--space-s) * -1);
-    margin-block-end: var(--space-xl);
+    margin-block-end: var(--space-l);
     line-height: 0.9;
   }
 

src/styles/base.css

@@ -14,9 +14,10 @@ body {
   font-size: var(--step-0);
   line-height: var(--line-height-body);
   font-synthesis: none;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "trade-gothic-next", sans-serif;
   font-weight: 400;
   font-style: normal;
+  letter-spacing: var(--letter-spacing-condensed);
 }
 
 ::selection {
@@ -31,7 +32,7 @@ h1, h2, h3 {
 }
 
 h1 {
-  font-size: var(--step-6);
+  font-size: var(--step-5);
   line-height: var(--line-height-single);
   letter-spacing: var(--letter-spacing-condensed);
 }

src/styles/theme.css

@@ -3,15 +3,14 @@
 @import "@radix-ui/colors/pink.css";
 
 :root {
-  /* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1240,20,1.333,6,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
-  --step--1: clamp(0.9375rem, 0.8462rem + 0.4565vi, 1.2rem);
-  --step-0: clamp(1.125rem, 0.9946rem + 0.6522vi, 1.5rem);
-  --step-1: clamp(1.35rem, 1.1674rem + 0.913vi, 1.875rem);
-  --step-2: clamp(1.62rem, 1.3683rem + 1.2587vi, 2.3438rem);
-  --step-3: clamp(1.944rem, 1.6012rem + 1.7142vi, 2.9297rem);
-  --step-4: clamp(2.3328rem, 1.8704rem + 2.3118vi, 3.6621rem);
-  --step-5: clamp(2.7994rem, 2.1808rem + 3.0927vi, 4.5776rem);
-  --step-6: clamp(3.3592rem, 2.5374rem + 4.1092vi, 5.722rem);
+  /* @link https://utopia.fyi/type/calculator?c=320,18,1.125,1240,22,1.25,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  --step--1: clamp(0.9375rem, 0.881rem + 0.2826vi, 1.1rem);
+  --step-0: clamp(1.125rem, 1.038rem + 0.4348vi, 1.375rem);
+  --step-1: clamp(1.35rem, 1.2217rem + 0.6413vi, 1.7188rem);
+  --step-2: clamp(1.62rem, 1.4362rem + 0.919vi, 2.1484rem);
+  --step-3: clamp(1.944rem, 1.6861rem + 1.2896vi, 2.6855rem);
+  --step-4: clamp(2.3328rem, 1.9766rem + 1.7811vi, 3.3569rem);
+  --step-5: clamp(2.7994rem, 2.3135rem + 2.4292vi, 4.1962rem);
 
   /* @link https://utopia.fyi/space/calculator?c=320,8,1.2,1240,12,1.333,6,2,&s=0.75|0.5,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
   --space-2xs: clamp(0.25rem, 0.2065rem + 0.2174vw, 0.375rem);