From 08b05ba97851f5606feaf49719ca7e18b8823ab0 Mon Sep 17 00:00:00 2001
From: Sarah C <144068104+iamawatermelo@users.noreply.github.com>
Date: Thu, 12 Sep 2024 19:05:17 +0100
Subject: [PATCH] WHAT HAPPENED TO LIGHTHOUSE

---
 src/routes/+page.svelte | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7f30dd6..f720f75 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -34,12 +34,16 @@
   <Sparkles />
   <div class="zenith-header">
     <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}
+      <span class="no-break">
+        {#each Array.from("Zenith").entries() as [idx, char]}
+          <span style="--idx: {idx}" class="header-element">{char}</span>
+        {/each}
+      </span>
+      <span class="no-break">
+        {#each  Array.from("2025").entries() as [idx, char]}
+          <span style="--idx: {idx+7}" class="header-element date">{char}</span>
+        {/each}
+      </span>
     </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
@@ -243,15 +247,20 @@
     font-size: 4em;
     line-height: 1;
     width: min-content;
-    overflow: clip;
   }
   
-  h1 > .header-element {
+  h1 .header-element {
     display: inline-block;
     transform: translateY(-200%);
     font-variation-settings: "wght" 400;
     animation: header 1s calc(var(--idx) * 0.05s) forwards;
   }
+  
+  h1 .no-break {
+    display: inline-block;
+    min-width: max-content;
+    overflow: clip;
+  }
 
   .header-promo {
     font-size: 1.2em;