From 69ea77d23654deff5fac720508e69ce45693467e Mon Sep 17 00:00:00 2001
From: Jim Myhrberg <contact@jimeh.me>
Date: Sat, 10 Jan 2026 19:33:24 +0000
Subject: [PATCH] fix: show nav bar earlier

---
 docs/index.html                 | 2 +-
 docs/spec/1.0.0-rc.1/index.html | 2 +-
 docs/spec/1.0.0-rc.2/index.html | 2 +-
 docs/spec/1.0.0-rc.3/index.html | 2 +-
 docs/spec/1.0.0-rc.4/index.html | 2 +-
 docs/spec/1.0.0-rc.5/index.html | 2 +-
 src/components/Header.astro     | 4 +++-
 7 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index b56bfb1..0849665 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -58,7 +58,7 @@ Spec
                dark:text-[var(--color-dark-text-secondary)]
                hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2>
 FAQ
-</a> </div> </nav> </header> <script type="module">function d(){const e=document.getElementById("site-header"),o=document.getElementById("hero"),s=document.getElementById("mobile-menu-btn"),r=document.getElementById("mobile-nav");if(!e||!o)return;new IntersectionObserver(([t])=>{t.isIntersecting?(e.classList.add("translate-y-[-100%]"),e.classList.remove("border-[var(--color-border)]"),e.classList.remove("dark:border-[var(--color-dark-border)]")):(e.classList.remove("translate-y-[-100%]"),e.classList.add("border-[var(--color-border)]"),e.classList.add("dark:border-[var(--color-dark-border)]"))},{threshold:0,rootMargin:"-64px 0px 0px 0px"}).observe(o),s&&r&&(s.addEventListener("click",()=>{r.classList.toggle("hidden")}),r.querySelectorAll("a").forEach(t=>{t.addEventListener("click",()=>{r.classList.add("hidden")})}))}d();document.addEventListener("astro:after-swap",d);</script>  <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
+</a> </div> </nav> </header> <script type="module">function d(){const e=document.getElementById("site-header"),o=document.getElementById("hero"),s=document.getElementById("mobile-menu-btn"),r=document.getElementById("mobile-nav");if(!e||!o)return;const n=Math.floor(window.innerHeight/2);new IntersectionObserver(([t])=>{t.isIntersecting?(e.classList.add("translate-y-[-100%]"),e.classList.remove("border-[var(--color-border)]"),e.classList.remove("dark:border-[var(--color-dark-border)]")):(e.classList.remove("translate-y-[-100%]"),e.classList.add("border-[var(--color-border)]"),e.classList.add("dark:border-[var(--color-dark-border)]"))},{threshold:0,rootMargin:`-${n}px 0px 0px 0px`}).observe(o),s&&r&&(s.addEventListener("click",()=>{r.classList.toggle("hidden")}),r.querySelectorAll("a").forEach(t=>{t.addEventListener("click",()=>{r.classList.add("hidden")})}))}d();document.addEventListener("astro:after-swap",d);</script>  <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
          px-6 py-16 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-secondary)]
            to-[var(--color-bg-primary)]
            dark:from-[var(--color-dark-bg-secondary)]
diff --git a/docs/spec/1.0.0-rc.1/index.html b/docs/spec/1.0.0-rc.1/index.html
index 0ffd8f2..0c00678 100644
--- a/docs/spec/1.0.0-rc.1/index.html
+++ b/docs/spec/1.0.0-rc.1/index.html
@@ -58,7 +58,7 @@ Spec
                dark:text-[var(--color-dark-text-secondary)]
                hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2>
 FAQ
-</a> </div> </nav> </header> <script type="module">function d(){const e=document.getElementById("site-header"),o=document.getElementById("hero"),s=document.getElementById("mobile-menu-btn"),r=document.getElementById("mobile-nav");if(!e||!o)return;new IntersectionObserver(([t])=>{t.isIntersecting?(e.classList.add("translate-y-[-100%]"),e.classList.remove("border-[var(--color-border)]"),e.classList.remove("dark:border-[var(--color-dark-border)]")):(e.classList.remove("translate-y-[-100%]"),e.classList.add("border-[var(--color-border)]"),e.classList.add("dark:border-[var(--color-dark-border)]"))},{threshold:0,rootMargin:"-64px 0px 0px 0px"}).observe(o),s&&r&&(s.addEventListener("click",()=>{r.classList.toggle("hidden")}),r.querySelectorAll("a").forEach(t=>{t.addEventListener("click",()=>{r.classList.add("hidden")})}))}d();document.addEventListener("astro:after-swap",d);</script>  <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
+</a> </div> </nav> </header> <script type="module">function d(){const e=document.getElementById("site-header"),o=document.getElementById("hero"),s=document.getElementById("mobile-menu-btn"),r=document.getElementById("mobile-nav");if(!e||!o)return;const n=Math.floor(window.innerHeight/2);new IntersectionObserver(([t])=>{t.isIntersecting?(e.classList.add("translate-y-[-100%]"),e.classList.remove("border-[var(--color-border)]"),e.classList.remove("dark:border-[var(--color-dark-border)]")):(e.classList.remove("translate-y-[-100%]"),e.classList.add("border-[var(--color-border)]"),e.classList.add("dark:border-[var(--color-dark-border)]"))},{threshold:0,rootMargin:`-${n}px 0px 0px 0px`}).observe(o),s&&r&&(s.addEventListener("click",()=>{r.classList.toggle("hidden")}),r.querySelectorAll("a").forEach(t=>{t.addEventListener("click",()=>{r.classList.add("hidden")})}))}d();document.addEventListener("astro:after-swap",d);</script>  <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
          px-6 py-16 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-secondary)]
            to-[var(--color-bg-primary)]
            dark:from-[var(--color-dark-bg-secondary)]
diff --git a/docs/spec/1.0.0-rc.2/index.html b/docs/spec/1.0.0-rc.2/index.html
index 4bff37e..c446d29 100644
--- a/docs/spec/1.0.0-rc.2/index.html
+++ b/docs/spec/1.0.0-rc.2/index.html
@@ -58,7 +58,7 @@ Spec
                dark:text-[var(--color-dark-text-secondary)]
                hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2>
 FAQ
-</a> </div> </nav> </header> <script type="module">function d(){const e=document.getElementById("site-header"),o=document.getElementById("hero"),s=document.getElementById("mobile-menu-btn"),r=document.getElementById("mobile-nav");if(!e||!o)return;new IntersectionObserver(([t])=>{t.isIntersecting?(e.classList.add("translate-y-[-100%]"),e.classList.remove("border-[var(--color-border)]"),e.classList.remove("dark:border-[var(--color-dark-border)]")):(e.classList.remove("translate-y-[-100%]"),e.classList.add("border-[var(--color-border)]"),e.classList.add("dark:border-[var(--color-dark-border)]"))},{threshold:0,rootMargin:"-64px 0px 0px 0px"}).observe(o),s&&r&&(s.addEventListener("click",()=>{r.classList.toggle("hidden")}),r.querySelectorAll("a").forEach(t=>{t.addEventListener("click",()=>{r.classList.add("hidden")})}))}d();document.addEventListener("astro:after-swap",d);</script>  <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
+</a> </div> </nav> </header> <script type="module">function d(){const e=document.getElementById("site-header"),o=document.getElementById("hero"),s=document.getElementById("mobile-menu-btn"),r=document.getElementById("mobile-nav");if(!e||!o)return;const n=Math.floor(window.innerHeight/2);new IntersectionObserver(([t])=>{t.isIntersecting?(e.classList.add("translate-y-[-100%]"),e.classList.remove("border-[var(--color-border)]"),e.classList.remove("dark:border-[var(--color-dark-border)]")):(e.classList.remove("translate-y-[-100%]"),e.classList.add("border-[var(--color-border)]"),e.classList.add("dark:border-[var(--color-dark-border)]"))},{threshold:0,rootMargin:`-${n}px 0px 0px 0px`}).observe(o),s&&r&&(s.addEventListener("click",()=>{r.classList.toggle("hidden")}),r.querySelectorAll("a").forEach(t=>{t.addEventListener("click",()=>{r.classList.add("hidden")})}))}d();document.addEventListener("astro:after-swap",d);</script>  <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
          px-6 py-16 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-secondary)]
            to-[var(--color-bg-primary)]
            dark:from-[var(--color-dark-bg-secondary)]
diff --git a/docs/spec/1.0.0-rc.3/index.html b/docs/spec/1.0.0-rc.3/index.html
index 6ef7f3d..d0e2676 100644
--- a/docs/spec/1.0.0-rc.3/index.html
+++ b/docs/spec/1.0.0-rc.3/index.html
@@ -58,7 +58,7 @@ Spec
                dark:text-[var(--color-dark-text-secondary)]
                hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2>
 FAQ
-</a> </div> </nav> </header> <script type="module">function d(){const e=document.getElementById("site-header"),o=document.getElementById("hero"),s=document.getElementById("mobile-menu-btn"),r=document.getElementById("mobile-nav");if(!e||!o)return;new IntersectionObserver(([t])=>{t.isIntersecting?(e.classList.add("translate-y-[-100%]"),e.classList.remove("border-[var(--color-border)]"),e.classList.remove("dark:border-[var(--color-dark-border)]")):(e.classList.remove("translate-y-[-100%]"),e.classList.add("border-[var(--color-border)]"),e.classList.add("dark:border-[var(--color-dark-border)]"))},{threshold:0,rootMargin:"-64px 0px 0px 0px"}).observe(o),s&&r&&(s.addEventListener("click",()=>{r.classList.toggle("hidden")}),r.querySelectorAll("a").forEach(t=>{t.addEventListener("click",()=>{r.classList.add("hidden")})}))}d();document.addEventListener("astro:after-swap",d);</script>  <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
+</a> </div> </nav> </header> <script type="module">function d(){const e=document.getElementById("site-header"),o=document.getElementById("hero"),s=document.getElementById("mobile-menu-btn"),r=document.getElementById("mobile-nav");if(!e||!o)return;const n=Math.floor(window.innerHeight/2);new IntersectionObserver(([t])=>{t.isIntersecting?(e.classList.add("translate-y-[-100%]"),e.classList.remove("border-[var(--color-border)]"),e.classList.remove("dark:border-[var(--color-dark-border)]")):(e.classList.remove("translate-y-[-100%]"),e.classList.add("border-[var(--color-border)]"),e.classList.add("dark:border-[var(--color-dark-border)]"))},{threshold:0,rootMargin:`-${n}px 0px 0px 0px`}).observe(o),s&&r&&(s.addEventListener("click",()=>{r.classList.toggle("hidden")}),r.querySelectorAll("a").forEach(t=>{t.addEventListener("click",()=>{r.classList.add("hidden")})}))}d();document.addEventListener("astro:after-swap",d);</script>  <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
          px-6 py-16 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-secondary)]
            to-[var(--color-bg-primary)]
            dark:from-[var(--color-dark-bg-secondary)]
diff --git a/docs/spec/1.0.0-rc.4/index.html b/docs/spec/1.0.0-rc.4/index.html
index a8bb004..0b20da6 100644
--- a/docs/spec/1.0.0-rc.4/index.html
+++ b/docs/spec/1.0.0-rc.4/index.html
@@ -58,7 +58,7 @@ Spec
                dark:text-[var(--color-dark-text-secondary)]
                hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2>
 FAQ
-</a> </div> </nav> </header> <script type="module">function d(){const e=document.getElementById("site-header"),o=document.getElementById("hero"),s=document.getElementById("mobile-menu-btn"),r=document.getElementById("mobile-nav");if(!e||!o)return;new IntersectionObserver(([t])=>{t.isIntersecting?(e.classList.add("translate-y-[-100%]"),e.classList.remove("border-[var(--color-border)]"),e.classList.remove("dark:border-[var(--color-dark-border)]")):(e.classList.remove("translate-y-[-100%]"),e.classList.add("border-[var(--color-border)]"),e.classList.add("dark:border-[var(--color-dark-border)]"))},{threshold:0,rootMargin:"-64px 0px 0px 0px"}).observe(o),s&&r&&(s.addEventListener("click",()=>{r.classList.toggle("hidden")}),r.querySelectorAll("a").forEach(t=>{t.addEventListener("click",()=>{r.classList.add("hidden")})}))}d();document.addEventListener("astro:after-swap",d);</script>  <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
+</a> </div> </nav> </header> <script type="module">function d(){const e=document.getElementById("site-header"),o=document.getElementById("hero"),s=document.getElementById("mobile-menu-btn"),r=document.getElementById("mobile-nav");if(!e||!o)return;const n=Math.floor(window.innerHeight/2);new IntersectionObserver(([t])=>{t.isIntersecting?(e.classList.add("translate-y-[-100%]"),e.classList.remove("border-[var(--color-border)]"),e.classList.remove("dark:border-[var(--color-dark-border)]")):(e.classList.remove("translate-y-[-100%]"),e.classList.add("border-[var(--color-border)]"),e.classList.add("dark:border-[var(--color-dark-border)]"))},{threshold:0,rootMargin:`-${n}px 0px 0px 0px`}).observe(o),s&&r&&(s.addEventListener("click",()=>{r.classList.toggle("hidden")}),r.querySelectorAll("a").forEach(t=>{t.addEventListener("click",()=>{r.classList.add("hidden")})}))}d();document.addEventListener("astro:after-swap",d);</script>  <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
          px-6 py-16 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-secondary)]
            to-[var(--color-bg-primary)]
            dark:from-[var(--color-dark-bg-secondary)]
diff --git a/docs/spec/1.0.0-rc.5/index.html b/docs/spec/1.0.0-rc.5/index.html
index b56bfb1..0849665 100644
--- a/docs/spec/1.0.0-rc.5/index.html
+++ b/docs/spec/1.0.0-rc.5/index.html
@@ -58,7 +58,7 @@ Spec
                dark:text-[var(--color-dark-text-secondary)]
                hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2>
 FAQ
-</a> </div> </nav> </header> <script type="module">function d(){const e=document.getElementById("site-header"),o=document.getElementById("hero"),s=document.getElementById("mobile-menu-btn"),r=document.getElementById("mobile-nav");if(!e||!o)return;new IntersectionObserver(([t])=>{t.isIntersecting?(e.classList.add("translate-y-[-100%]"),e.classList.remove("border-[var(--color-border)]"),e.classList.remove("dark:border-[var(--color-dark-border)]")):(e.classList.remove("translate-y-[-100%]"),e.classList.add("border-[var(--color-border)]"),e.classList.add("dark:border-[var(--color-dark-border)]"))},{threshold:0,rootMargin:"-64px 0px 0px 0px"}).observe(o),s&&r&&(s.addEventListener("click",()=>{r.classList.toggle("hidden")}),r.querySelectorAll("a").forEach(t=>{t.addEventListener("click",()=>{r.classList.add("hidden")})}))}d();document.addEventListener("astro:after-swap",d);</script>  <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
+</a> </div> </nav> </header> <script type="module">function d(){const e=document.getElementById("site-header"),o=document.getElementById("hero"),s=document.getElementById("mobile-menu-btn"),r=document.getElementById("mobile-nav");if(!e||!o)return;const n=Math.floor(window.innerHeight/2);new IntersectionObserver(([t])=>{t.isIntersecting?(e.classList.add("translate-y-[-100%]"),e.classList.remove("border-[var(--color-border)]"),e.classList.remove("dark:border-[var(--color-dark-border)]")):(e.classList.remove("translate-y-[-100%]"),e.classList.add("border-[var(--color-border)]"),e.classList.add("dark:border-[var(--color-dark-border)]"))},{threshold:0,rootMargin:`-${n}px 0px 0px 0px`}).observe(o),s&&r&&(s.addEventListener("click",()=>{r.classList.toggle("hidden")}),r.querySelectorAll("a").forEach(t=>{t.addEventListener("click",()=>{r.classList.add("hidden")})}))}d();document.addEventListener("astro:after-swap",d);</script>  <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
          px-6 py-16 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-secondary)]
            to-[var(--color-bg-primary)]
            dark:from-[var(--color-dark-bg-secondary)]
diff --git a/src/components/Header.astro b/src/components/Header.astro
index e387a38..e8c4ad4 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -136,6 +136,8 @@ const { version } = Astro.props;
     if (!header || !hero) return;
 
     // Show/hide header based on scroll past hero
+    // Show header when top half of hero is above the fold
+    const topMargin = Math.floor(window.innerHeight / 2);
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -148,7 +150,7 @@ const { version } = Astro.props;
           header.classList.add("dark:border-[var(--color-dark-border)]");
         }
       },
-      { threshold: 0, rootMargin: "-64px 0px 0px 0px" }
+      { threshold: 0, rootMargin: `-${topMargin}px 0px 0px 0px` }
     );
 
     observer.observe(hero);