add some animation!

zenith-hacks · Sep 12, 2024 · a38e39e · a38e39e
1 parent ab20bb2
commit a38e39e
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 18 deletions.
diff --git a/Makefile b/Makefile
@@ -18,7 +18,7 @@ fonts:
 	pyftsubset raw-fonts/SpaceGrotesk.woff2 $(SUBSET_ARGS) --unicodes=20-7e --output-file=.fonts/SpaceGrotesk-subset.woff2 --layout-features='kern,liga,ss02,ss03,ss04,ss05'
 	pyftsubset raw-fonts/InstrumentSans.ttf $(SUBSET_ARGS) --unicodes=20-7e --output-file=.fonts/InstrumentSans-asciionly-subset.woff2 --layout-features='kern,liga'
 	pyftsubset raw-fonts/InstrumentSans.ttf $(SUBSET_ARGS) --unicodes="U+0020-007F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2200-22FF, U+FB00-FB4F, U+2190-21BB" --output-file=.fonts/InstrumentSans-mostlang-subset.woff2 --layout-features='*'
-	fonttools varLib.instancer $(INSTANCER_ARGS) .fonts/SpaceGrotesk-title-subset.woff2 wght=700:700:700 -o static/fonts/SpaceGrotesk-title-subset-instanced.woff2
-	fonttools varLib.instancer $(INSTANCER_ARGS) .fonts/SpaceGrotesk-subset.woff2 wght=700:700:700 -o static/fonts/SpaceGrotesk-subset-instanced.woff2
-	fonttools varLib.instancer $(INSTANCER_ARGS) .fonts/InstrumentSans-asciionly-subset.woff2 wght=400:400:400 wdth=100:100:100 -o static/fonts/InstrumentSans-asciionly-subset-instanced.woff2 
-	fonttools varLib.instancer $(INSTANCER_ARGS) .fonts/InstrumentSans-mostlang-subset.woff2 wght=400:400:400 wdth=100:100:100 -o static/fonts/InstrumentSans-mostlang-subset-instanced.woff2 
+	fonttools varLib.instancer $(INSTANCER_ARGS) .fonts/SpaceGrotesk-title-subset.woff2 wght=300:700:700 -o src/lib/fonts/SpaceGrotesk-title-subset-instanced.woff2
+	fonttools varLib.instancer $(INSTANCER_ARGS) .fonts/SpaceGrotesk-subset.woff2 wght=700:700:700 -o src/lib/fonts/SpaceGrotesk-subset-instanced.woff2
+	fonttools varLib.instancer $(INSTANCER_ARGS) .fonts/InstrumentSans-asciionly-subset.woff2 wght=400:400:400 wdth=100:100:100 -o src/lib/fonts/InstrumentSans-asciionly-subset-instanced.woff2 
+	fonttools varLib.instancer $(INSTANCER_ARGS) .fonts/InstrumentSans-mostlang-subset.woff2 wght=400:400:400 wdth=100:100:100 -o src/lib/fonts/InstrumentSans-mostlang-subset-instanced.woff2 
diff --git a/src/hooks.server.js b/src/hooks.server.js
@@ -1,3 +1,6 @@
+import SpaceGroteskTitle from '$lib/fonts/SpaceGrotesk-title-subset-instanced.woff2?url';
+import InstrumentSansASCII from '$lib/fonts/InstrumentSans-asciionly-subset-instanced.woff2?url';
+
 export async function handle({ event, resolve }) {
   const response = await resolve(event);
 
@@ -6,7 +9,7 @@ export async function handle({ event, resolve }) {
   // Also, use the link header to preload our fonts because they're the biggest things on the site.
   response.headers.set(
     'link',
-    '</fonts/SpaceGrotesk-title-subset-instanced.woff2>; rel"preconnect", </fonts/InstrumentSans-asciionly-subset-instanced.woff2>; rel="preconnect"'
+    `<${SpaceGroteskTitle}>; rel"preconnect", <${InstrumentSansASCII}>; rel="preconnect"`
   );
 
   return response;

diff --git a/src/lib/fonts/InstrumentSans-asciionly-subset-instanced.woff2 b/src/lib/fonts/InstrumentSans-asciionly-subset-instanced.woff2
diff --git a/src/lib/fonts/InstrumentSans-mostlang-subset-instanced.woff2 b/src/lib/fonts/InstrumentSans-mostlang-subset-instanced.woff2
diff --git a/src/lib/fonts/SpaceGrotesk-subset-instanced.woff2 b/src/lib/fonts/SpaceGrotesk-subset-instanced.woff2
diff --git a/src/lib/fonts/SpaceGrotesk-title-subset-instanced.woff2 b/src/lib/fonts/SpaceGrotesk-title-subset-instanced.woff2
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,5 +1,7 @@
 <script>
   import LogoLarge from '$lib/LogoLarge.svelte';
+  import SpaceGroteskTitle from '$lib/fonts/SpaceGrotesk-title-subset-instanced.woff2?url';
+  import InstrumentSansASCII from '$lib/fonts/InstrumentSans-asciionly-subset-instanced.woff2?url';
 
   import fontCSS from './FontStylesheet.css?url';
 </script>
@@ -8,15 +10,15 @@
   <!-- Look mom, no Google Fonts! -->
   <link
     rel="preload"
-    href="/fonts/SpaceGrotesk-title-subset-instanced.woff2"
+    href={SpaceGroteskTitle}
     as="font"
     type="font/woff2"
     fetchpriority="high"
     crossorigin="anonymous"
   />
   <link
     rel="preload"
-    href="/fonts/InstrumentSans-asciionly-subset-instanced.woff2"
+    href={InstrumentSansASCII}
     as="font"
     type="font/woff2"
     fetchpriority="high"
@@ -76,7 +78,7 @@
 <style>
   @font-face {
     font-family: 'Zenith Title Grotesk';
-    src: url('/fonts/SpaceGrotesk-title-subset-instanced.woff2') format('woff2');
+    src: url('$lib/fonts/SpaceGrotesk-title-subset-instanced.woff2') format('woff2');
     font-display: swap;
     font-feature-settings: 'ss02' 'ss03' 'ss04' 'ss05';
   }
@@ -85,34 +87,34 @@
     font-family: 'Zenith Sans ASCII';
     src:
       local('Instrument Sans'),
-      url('/fonts/InstrumentSans-asciionly-subset-instanced.woff2') format('woff2');
+      url('$lib/fonts/InstrumentSans-asciionly-subset-instanced.woff2') format('woff2');
     font-display: swap;
   }
   
-  html {
+  :global(html) {
     scrollbar-width: thin;
     scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.5);
   }
 
-  html::-webkit-scrollbar {
+  :global(html::-webkit-scrollbar) {
     width: 0.5rem;
   }
 
-  html::-webkit-scrollbar-track {
+  :global(html::-webkit-scrollbar-track) {
     background: rgba(0, 0, 0, 0.5);
   }
 
-  html::-webkit-scrollbar-thumb {
+  :global(html::-webkit-scrollbar-thumb) {
     background-color: rgba(255, 255, 255, 0.5);
     border-radius: 0.25rem;
   }
 
-  html::-webkit-scrollbar-thumb:hover {
+  :global(html::-webkit-scrollbar-thumb:hover) {
     background-color: rgba(255, 255, 255, 0.7);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    html::-webkit-scrollbar-thumb {
+    :global(html::-webkit-scrollbar-thumb) {
       transition: none;
     }
   }

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -33,7 +33,14 @@
   <!-- Header -->
   <Sparkles />
   <div class="zenith-header">
-    <h1>Zenith <span class="date">2025<span></span></span></h1>
+    <h1>
+      {#each Array.from("Zenith").entries() as [idx, char]}
+        <span style="--idx: {idx}" class="header-element">{char}</span>
+      {/each}
+      {#each  Array.from("2025").entries() as [idx, char]}
+        <span style="--idx: {idx+7}" class="header-element date">{char}</span>
+      {/each}
+    </h1>
     <p class="header-promo">
       Zenith is a hackathon in San Francisco for teens led by the Hack Club community coming next year. Join us and make
       something awesome!
@@ -213,12 +220,37 @@
   }
 
   /* Header styles */
+  
+  @keyframes header {
+    0% {
+      font-variation-settings: "wght" 300;
+      transform: translateY(-200%);
+    }
+    
+    50% {
+      font-variation-settings: "wght" 400;
+      transform: translateY(0);
+    }
+    
+    100% {
+      font-variation-settings: "wght" 700;
+      transform: translateY(0);
+    }
+  }
 
   h1 {
     font-family: 'Zenith Title Grotesk', 'Zenith Grotesk', monospace, system-ui, sans-serif;
     font-size: 4em;
     line-height: 1;
     width: min-content;
+    overflow: clip;
+  }
+  
+  h1 > .header-element {
+    display: inline-block;
+    transform: translateY(-200%);
+    font-variation-settings: "wght" 400;
+    animation: header 1s calc(var(--idx) * 0.05s) forwards;
   }
 
   .header-promo {

diff --git a/src/routes/FontStylesheet.css b/src/routes/FontStylesheet.css
@@ -1,12 +1,12 @@
 @font-face {
   font-family: 'Zenith Grotesk';
-  src: url('/fonts/SpaceGrotesk-subset-instanced.woff2') format('woff2');
+  src: url('$lib/fonts/SpaceGrotesk-subset-instanced.woff2') format('woff2');
   font-display: swap;
   font-feature-settings: 'ss02' 'ss03' 'ss04' 'ss05';
 }
 
 @font-face {
   font-family: 'Zenith Sans';
-  src: url('/fonts/InstrumentSans-mostlang-subset-instanced.woff2') format('woff2');
+  src: url('$lib/fonts/InstrumentSans-mostlang-subset-instanced.woff2') format('woff2');
   font-display: swap;
 }
diff --git a/static/fonts/InstrumentSans-asciionly-subset-instanced.woff2 b/static/fonts/InstrumentSans-asciionly-subset-instanced.woff2
diff --git a/static/fonts/InstrumentSans-mostlang-subset-instanced.woff2 b/static/fonts/InstrumentSans-mostlang-subset-instanced.woff2
diff --git a/static/fonts/SpaceGrotesk-subset-instanced.woff2 b/static/fonts/SpaceGrotesk-subset-instanced.woff2
diff --git a/static/fonts/SpaceGrotesk-title-subset-instanced.woff2 b/static/fonts/SpaceGrotesk-title-subset-instanced.woff2