commit 0afc1df8e7ce268416bb83addcd4ade0ab1e717e
parent 63f4cfd9dcbb68e094cbdfd7de54f8c122fdd794
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date: Sun, 28 Jun 2026 23:44:45 -0400
Homepage masthead shrinks without reflowing the page
The wordmark previously collapsed by animating the sticky header's in-flow
height (h-28 sm:h-40 -> h-14). Since the header sits directly above <main>,
that shrank the document and yanked all content upward on scroll.
Pin the header's layout box to the compact height (h-14) and let the
top-anchored wordmark overflow it; only its font-size and the bar chrome
(border/blur) animate now, so <main> and the document height are identical
at every scroll position. page.tsx reserves a fixed headroom spacer so the
landing clears the enlarged masthead.
Verified via Playwright on the static build (desktop + mobile): document
height, header box height, and the KPI tile's absolute position are
unchanged between scrollY 0 and 400, while the wordmark still shrinks
(54->19px desktop, 32->19px mobile).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Diffstat:
3 files changed, 28 insertions(+), 10 deletions(-)
diff --git a/homepage/CHANGELOG.md b/homepage/CHANGELOG.md
@@ -39,7 +39,11 @@
- **Wordmark masthead = the header.** The big "Archilyzer" wordmark and the small
sticky header logo are one element (`app/components/SiteHeader.tsx`): large as a
masthead at the top of the home page, it shrinks to the compact sticky bar the
- moment you scroll. Other routes always show the compact bar.
+ moment you scroll. Other routes always show the compact bar. The shrink no longer
+ reflows the page: the header's layout box stays pinned to the compact height and
+ the enlarged wordmark overflows it (only its font-size and the bar chrome animate),
+ so `<main>` and the document height never change on scroll. `page.tsx` reserves a
+ fixed headroom spacer so the landing clears the overflowing masthead.
- **Hub Markdown pages dropped.** The `[slug]` doc routes, the `index`-page home
body, the `PageBody` renderer, and the doc nav are removed — the hub is now a
single page (re-addable later if needed). See `app/page.tsx`, the new hub
diff --git a/homepage/app/components/SiteHeader.tsx b/homepage/app/components/SiteHeader.tsx
@@ -8,6 +8,13 @@ import { useEffect, useState } from "react";
// collapses to the compact header bar the moment you scroll; every other route
// always shows the compact state. (Merges what used to be a separate hero
// heading + a small sticky logo into one element.)
+//
+// The header's layout box is pinned to the compact height (h-14) and the wordmark
+// is top-anchored and allowed to overflow it, so growing/shrinking the wordmark
+// changes nothing in the page's flow — `<main>` never reflows on scroll. Only the
+// wordmark's own font-size and the bar's chrome (border/blur) animate. The home
+// page reserves matching headroom (see page.tsx) so content clears the enlarged
+// wordmark.
export function SiteHeader({ title }: { title: string }) {
const isHome = usePathname() === "/";
const [scrolled, setScrolled] = useState(false);
@@ -30,12 +37,11 @@ export function SiteHeader({ title }: { title: string }) {
: "border-b border-[var(--border)] bg-[rgba(12,10,8,0.72)] backdrop-blur-md")
}
>
- <div
- className={
- "max-w-6xl mx-auto px-5 sm:px-6 flex items-center transition-[height] duration-300 ease-out " +
- (large ? "h-28 sm:h-40" : "h-14")
- }
- >
+ {/* Pinned compact height + top-anchored content. The enlarged wordmark
+ overflows this box (overflow visible) without enlarging it, so the page
+ layout is identical at every scroll position. The top padding centers the
+ compact wordmark in the 56px bar; the large state grows downward from it. */}
+ <div className="max-w-6xl mx-auto px-5 sm:px-6 h-14 pt-[18px] flex items-start overflow-visible">
<Link href="/" className="group flex items-end gap-2.5 sm:gap-3.5">
<span
className={
diff --git a/homepage/app/page.tsx b/homepage/app/page.tsx
@@ -47,7 +47,15 @@ function loadSummary(): HomepageSummary {
export default function Home() {
const summary = loadSummary();
- // The wordmark masthead lives in the header now (SiteHeader), large at the top
- // and shrinking on scroll — so the page starts straight into the landing.
- return <HomeLanding summary={summary} />;
+ // The wordmark masthead lives in the sticky header now (SiteHeader), large at the
+ // top and shrinking on scroll. Because the header's box stays compact and the
+ // large wordmark overflows it, this fixed-height spacer reserves the headroom the
+ // overflowing masthead needs so the landing clears it — constant at every scroll
+ // position, so nothing reflows when the wordmark collapses.
+ return (
+ <>
+ <div aria-hidden className="h-7 sm:h-14" />
+ <HomeLanding summary={summary} />
+ </>
+ );
}
