Adding functionality to make the bolt color in as you scroll

includes/header.html

@@ -86,6 +86,7 @@
                 const widthPercentage = (this.lastKnownScrollY / maxScrollHeight) * 100;
 
                 targetElement.style.width = `${Math.min(widthPercentage, 100)}%`;
+                document.getElementById('bolt-yellow').style.height = `${Math.min(widthPercentage, 100)}%`;
                 this.ticking = false;
                 this.ticking = false;
             });

includes/logo.html

@@ -1,6 +1,9 @@
-<button hx-get="/" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="morph" hx-push-url="true" @click="active='home'; fullWidth=false" class="h-5 group text-lg flex items-center space-x-1.5 text-white font-semibold">
+<button hx-get="/" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="morph" hx-push-url="true" @click="active='home'; fullWidth=false" class="flex items-center h-5 text-lg font-semibold text-white group">
+    <div id="bolt-yellow" class="absolute bottom-0 left-0 flex items-end justify-end h-0 overflow-hidden">
+        <svg class="bottom-0 w-auto h-5 text-yellow-400 duration-300 ease-out absolut group-hover:-rotate-12" viewBox="0 0 55 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m37.437.807-9.399 41.176h24.915c1.044 0 1.64 1.193 1.044 2.088L17.744 99.718c-.298.597-1.193.15-1.044-.447l8.951-43.115H1.781c-1.044 0-1.64-1.194-1.044-2.09L36.542.21c.15-.447 1.044-.149.895.597Z" fill="currentColor"/></svg>
+    </div>
     <!-- Lightning Bolt Logo -->
     <svg class="w-auto h-5 duration-300 ease-out group-hover:-rotate-12" viewBox="0 0 55 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m37.437.807-9.399 41.176h24.915c1.044 0 1.64 1.193 1.044 2.088L17.744 99.718c-.298.597-1.193.15-1.044-.447l8.951-43.115H1.781c-1.044 0-1.64-1.194-1.044-2.09L36.542.21c.15-.447 1.044-.149.895.597Z" fill="currentColor"/></svg>
     <!-- Logo Text -->
-    <span class="-translate-y-0.5">static</span>
+    <span class="-translate-y-0.5 ml-1.5">static</span>
 </button>