From 2458df38038a17e69e83d33c1f697d99e72641ad Mon Sep 17 00:00:00 2001
From: Felix Klement <mail@felix-klement.de>
Date: Fri, 2 Oct 2026 21:38:36 +0200
Subject: [PATCH] df

---
 src/components/Header.astro | 20 ++++++++++++++++++++
 src/styles/tokens.css       |  3 +++
 2 files changed, 23 insertions(+)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 675f6f8..fa8d03d 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -58,6 +58,14 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
   }
   .header__shell {
     padding-block: var(--space-3);
+    transition:
+      max-width var(--dur-slow) var(--ease),
+      padding-inline var(--dur-slow) var(--ease);
+  }
+  /* Once the page scrolls, the bar widens from the content column to the viewport. */
+  .header[data-scrolled] .header__shell {
+    max-width: 100%;
+    padding-inline: var(--header-inset-scrolled);
   }
   .header__bar {
     pointer-events: auto;
@@ -204,6 +212,18 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
     nav.addEventListener('click', (e) => { if ((e.target as HTMLElement).closest('a')) set(false); });
   }
 
+  /* Scrolled: a one-pixel marker at the very top of the document; once it leaves the viewport
+     the page has scrolled. An IntersectionObserver, so nothing runs on scroll. */
+  if (header && 'IntersectionObserver' in window) {
+    const marker = document.createElement('div');
+    marker.setAttribute('aria-hidden', 'true');
+    marker.style.cssText = 'position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;';
+    document.body.prepend(marker);
+    new IntersectionObserver(([entry]) => {
+      header.toggleAttribute('data-scrolled', !entry.isIntersecting);
+    }).observe(marker);
+  }
+
   /* Tone: watch a one-pixel line through the middle of the bar and switch to night while a
      .night section crosses it. An IntersectionObserver, so nothing runs on scroll. */
   const sections = document.querySelectorAll<HTMLElement>('.night');
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 19bc870..a5e3ec2 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -84,6 +84,9 @@
 
   /* Chrome */
   --header-height: 4.5rem;
+  /* Side inset of the menu bar once the page scrolls: it widens to the viewport, keeping the
+     same air as above and below so the corner crosses stay visible. */
+  --header-inset-scrolled: var(--space-3);
 
   /* HUD frame (menu bar): one line width and colour for every line, borders and crosses alike. */
   --hud-line-width: 1px;