better headers with a new font and treatment

GoogleChromeLabs · Oct 30, 2024 · 90019bf · 90019bf
1 parent 60bea33
commit 90019bf
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 29 deletions.
diff --git a/public/fight.otf b/public/fight.otf
diff --git a/src/components/biome.astro b/src/components/biome.astro
@@ -5,7 +5,7 @@ const { title, description, features } = Astro.props;
 
 <section id={slugify(title)} data-details-target={`details-${slugify(title)}`}>
   <header>
-    <h2>{title}</h2>
+    <h2 class="retro-title">{title}</h2>
     <p>{description}</p>
   </header>
 
@@ -39,16 +39,13 @@ const { title, description, features } = Astro.props;
         border-image: var(--_biome-image) repeat fill 0 //0 100vw;;
 
         > h2 {
-          line-height: 1;
-          font-family: "Jersey10", sans-serif;
-          font-weight: normal;
-          font-size: clamp(1.25rem, 5vw, 5rem);
+          font-size: clamp(5rem, 9vw, 10rem);
 
-          &,
+          /* &,
           & + p {
             color: lime;
             background: #000d;
-          }
+          } */
         }
       }
 

diff --git a/src/components/hero.astro b/src/components/hero.astro
@@ -4,12 +4,12 @@ import NavBento from "./nav.bento.astro";
 ---
 
 <section class="hero">
-  <h1>CSS Wrapped <span>2024</span></h1>
+  <h1 class="retro-title">CSS Wrapped <span>2024</span></h1>
   <div class="video">
     <Icon name="play" />
   </div>
   <div>
-    <p class="hero-title">Driving The Web Forward</p>
+    <p class="hero-title retro-title">Driving The Web Forward</p>
     <p>2024 in 3 main categories</p>
   </div>
   <NavBento />
@@ -26,17 +26,17 @@ import NavBento from "./nav.bento.astro";
       gap: var(--size-8);
 
       > h1 {
-        font-family: "Jersey10", sans-serif;
-        font-size: var(--font-size-6);
-        font-weight: normal;
+        font-size: clamp(3rem, 4vw, 8rem);
         text-align: center;
         max-inline-size: 100%;
 
         > span {
+          display: inline-block;
           border-radius: var(--radius-2);
           margin-inline-start: var(--size-2);
-          padding-inline: var(--size-2);
+          padding-inline: var(--size-3);
           padding-block: var(--size-1);
+          text-box: trim-both cap alphabetic;
           box-shadow: 0 0 0 var(--border-size-2);
         }
       }
@@ -48,10 +48,9 @@ import NavBento from "./nav.bento.astro";
       }
 
       .hero-title {
-        font-family: "Jersey10", sans-serif;
-        font-weight: normal;
         margin-block-start: var(--size-12);
-        font-size: var(--font-size-8);
+        margin-block-end: var(--size-5);
+        font-size: clamp(4rem, 8vw, 13rem);
       }
     }
 

diff --git a/src/components/main.aside.astro b/src/components/main.aside.astro
@@ -7,7 +7,7 @@ const { biomes } = Astro.props;
 
 <nav popover id="mobile-menu" class="mobile-sidenav">
   <header>
-    <h2>CSS Wrapped</h2>
+    <h2 class="retro-title">CSS Wrapped</h2>
   </header>
   {
     biomes.map((biome) => {
@@ -324,8 +324,7 @@ const { biomes } = Astro.props;
 
       > header {
         > h2 {
-          color: light-dark(deeppink, yellow);
-          font-size: var(--font-size-5);
+          font-size: var(--font-size-8);
         }
       }
 
@@ -335,8 +334,6 @@ const { biomes } = Astro.props;
       }
 
       h2 {
-        font-family: "Jersey10", sans-serif;
-        font-weight: normal;
         font-size: var(--font-size-4);
       }
 

diff --git a/src/features/_layout.astro b/src/features/_layout.astro
@@ -18,8 +18,6 @@
       border-radius: var(--radius-3);
       box-shadow: var(--shadow-3);
       font-weight: 300;
-      backdrop-filter: blur(5px);
-      background: var(--surface-1);
 
       @media (width <= 720px) {
         --_inline-padding: var(--size-3);
@@ -31,14 +29,12 @@
         gap: var(--size-6);
 
         > h3 {
-          font-family: "Jersey10", sans-serif;
-          font-size: var(--font-size-7);
-          font-weight: normal;
-          line-height: 0.9;
+          font-size: clamp(3rem, 5vw, 8rem);
           scroll-margin-block-start: 3.5rem;
 
           > code {
             font-size: 0.6em;
+            text-shadow: none;
           }
         }
       }

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -11,10 +11,11 @@
 @import "open-props/switch/dark" layer(theme);
 
 @import "./code.css" layer(components.code);
+@import "./utilities.css" layer(utilities);
 
 @font-face {
-	font-family: 'Jersey10';
-	src: url(/Jersey10-Regular.ttf) format('truetype');
+	font-family: 'Fight';
+	src: url(/fight.otf);
 	font-weight: normal;
 	font-style: normal;
 }

diff --git a/src/styles/utilities.css b/src/styles/utilities.css
@@ -0,0 +1,9 @@
+.retro-title,
+article > header > h3 {
+  font-family: "Fight", var(--font-sans);
+  font-weight: normal;
+  line-height: 0.75;
+  text-shadow:
+    0 .1ex 0 lime,
+    0 .2ex 0 light-dark(#999, #000);
+}