♻️ [Font] Update some headings for the new font

beefchimi · Jul 25, 2024 · 27cf559 · 27cf559
1 parent ae5dde8
commit 27cf559
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 11 deletions.
diff --git a/src/components/Contact.astro b/src/components/Contact.astro
@@ -128,7 +128,7 @@ import {SecretEmail} from '@scripts/SecretEmail';
     display: block;
     padding-left: 1rem;
     font-size: var(--h4-size);
-    font-weight: 600;
+    font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.2em;
     white-space: nowrap;

diff --git a/src/components/ContentBlock.astro b/src/components/ContentBlock.astro
@@ -63,6 +63,10 @@ const inactive = !title || !subtitle;
     /* Just a small nudge for better vertical centering */
     padding-top: calc(var(--space-tightest) + 0.1rem);
 
+    & > h3 {
+      font-weight: 800;
+    }
+
     @media (--min-tablet) {
       padding: var(--space-tighter);
     }

diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
@@ -26,11 +26,10 @@ const {id, controlsId} = Astro.props;
   @import '@styles/shared.css';
 
   :root {
+    /* `height` and `padding` variables come from `globla.css` */
     --hamburger-width-min: 2.4rem;
     --hamburger-width-max: 3rem;
-    --hamburger-height: 2rem;
     --hamburger-line-height: 0.3rem;
-    --hamburger-padding: var(--space-tightest);
 
     /* Computed value: `height - line-height` */
     --hamburger-patty3-y: 1.7rem;

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -38,12 +38,6 @@ const {id, items = []} = Astro.props;
   @import '@styles/shared.css';
 
   :root {
-    /* TODO: Figure out how to share `Hamburger` variables. */
-    --hamburger-height: 2rem;
-    --hamburger-padding: var(--space-tightest);
-
-    /* Component */
-
     --nav-offset-safety: 0.2rem;
     --nav-item-shift-x: 0.3rem;
 
@@ -162,7 +156,7 @@ const {id, items = []} = Astro.props;
     padding-bottom: var(--nav-label-padding-y);
     padding-left: var(--nav-label-padding-left);
     font-size: var(--p-size);
-    font-weight: 700;
+    font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.2rem;
     white-space: nowrap;

diff --git a/src/sections/Intro.astro b/src/sections/Intro.astro
@@ -14,7 +14,11 @@ const {id, thumbnail} = Astro.props;
   <article class="section-interior">
     <div class="Content">
       <h1 class="heading heading--1">Dulmage</h1>
-      <h2 class="heading heading--2">UX Developer</h2>
+
+      <div class="Details">
+        <h2 class="heading heading--2">UX Developer</h2>
+        <h2 class="heading heading--2">Ottawa, ON</h2>
+      </div>
 
       <p class="heading heading--3 visually-hidden">
         Background image photographed by: Curtis Dulmage
@@ -35,6 +39,10 @@ const {id, thumbnail} = Astro.props;
 <style>
   @import '@styles/shared.css';
 
+  :root {
+    --intro-detail-before: none;
+  }
+
   .Content {
     display: grid;
     place-items: center;
@@ -45,4 +53,18 @@ const {id, thumbnail} = Astro.props;
       gap: var(--space);
     }
   }
+
+  .Details {
+    display: grid;
+    gap: var(--space-tightest);
+
+    & > h2 + h2::before {
+      content: var(--intro-detail-before);
+    }
+
+    @media (--min-tablet) {
+      --intro-detail-before: '\002F\0020';
+      grid-auto-flow: column;
+    }
+  }
 </style>