jimeh/commonflow.org
1
0
Fork 0
mirror of https://github.com/jimeh/commonflow.org.git synced 2026-02-19 05:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: show nav bar earlier

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-10 19:33:24 +00:00
parent 0a74d4eacd
commit 69ea77d236
7 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.html
View File

@@ -58,7 +58,7 @@ Spec
dark:text-[var(--color-dark-text-secondary)] dark:text-[var(--color-dark-text-secondary)]
hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2> hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2>
FAQ 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)] 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)] to-[var(--color-bg-primary)]
dark:from-[var(--color-dark-bg-secondary)] dark:from-[var(--color-dark-bg-secondary)]

2
docs/spec/1.0.0-rc.1/index.html
View File

@@ -58,7 +58,7 @@ Spec
dark:text-[var(--color-dark-text-secondary)] dark:text-[var(--color-dark-text-secondary)]
hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2> hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2>
FAQ 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)] 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)] to-[var(--color-bg-primary)]
dark:from-[var(--color-dark-bg-secondary)] dark:from-[var(--color-dark-bg-secondary)]

2
docs/spec/1.0.0-rc.2/index.html
View File

@@ -58,7 +58,7 @@ Spec
dark:text-[var(--color-dark-text-secondary)] dark:text-[var(--color-dark-text-secondary)]
hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2> hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2>
FAQ 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)] 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)] to-[var(--color-bg-primary)]
dark:from-[var(--color-dark-bg-secondary)] dark:from-[var(--color-dark-bg-secondary)]

2
docs/spec/1.0.0-rc.3/index.html
View File

@@ -58,7 +58,7 @@ Spec
dark:text-[var(--color-dark-text-secondary)] dark:text-[var(--color-dark-text-secondary)]
hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2> hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2>
FAQ 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)] 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)] to-[var(--color-bg-primary)]
dark:from-[var(--color-dark-bg-secondary)] dark:from-[var(--color-dark-bg-secondary)]

2
docs/spec/1.0.0-rc.4/index.html
View File

@@ -58,7 +58,7 @@ Spec
dark:text-[var(--color-dark-text-secondary)] dark:text-[var(--color-dark-text-secondary)]
hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2> hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2>
FAQ 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)] 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)] to-[var(--color-bg-primary)]
dark:from-[var(--color-dark-bg-secondary)] dark:from-[var(--color-dark-bg-secondary)]

2
docs/spec/1.0.0-rc.5/index.html
View File

@@ -58,7 +58,7 @@ Spec
dark:text-[var(--color-dark-text-secondary)] dark:text-[var(--color-dark-text-secondary)]
hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2> hover:text-[var(--color-accent)]" data-astro-cid-3ef6ksr2>
FAQ 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)] 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)] to-[var(--color-bg-primary)]
dark:from-[var(--color-dark-bg-secondary)] dark:from-[var(--color-dark-bg-secondary)]

4
src/components/Header.astro
View File

@@ -136,6 +136,8 @@ const { version } = Astro.props;
if (!header || !hero) return; if (!header || !hero) return;
// Show/hide header based on scroll past hero // 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( const observer = new IntersectionObserver(
([entry]) => { ([entry]) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
@@ -148,7 +150,7 @@ const { version } = Astro.props;
header.classList.add("dark:border-[var(--color-dark-border)]"); 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); observer.observe(hero);