Revert "Simplify nav transitions to a single CSS @view-transition rule"

3vcloud · 3vcloud · commit 1bdb200e9d88 · 2026-05-27T11:56:16.000+01:00
This reverts commit f2003ff.
diff --git a/site/src/components/Footer.astro b/site/src/components/Footer.astro
@@ -2,7 +2,7 @@
 import siteConfig from '../../site.config.json';
 ---
 
-<footer class="mt-16 border-t border-(--color-border-glass) bg-(--color-bg)">
+<footer class="mt-16 border-t border-(--color-border-glass) bg-(--color-bg)" transition:persist="site-footer">
   <div
     class="mx-auto flex max-w-7xl flex-col gap-6 px-4 py-8 text-sm text-(--color-fg-meta) sm:px-6 md:flex-row md:items-center md:justify-between"
   >
diff --git a/site/src/components/PageBackground.astro b/site/src/components/PageBackground.astro
@@ -6,20 +6,24 @@ const continents = [
 ];
 ---
 
-<div class="page-bg" aria-hidden="true">
+<div class="page-bg" aria-hidden="true" transition:persist="page-bg">
   <div id="page-bg-image" class="page-bg-image"></div>
   <div class="page-bg-overlay"></div>
 </div>
 
 <script is:inline define:vars={{ continents }}>
-  /* Randomize the continent on each page load. No animation, no random
-     offset — just one of three maps, centered. */
+  /* Pick one of the three continent maps at random on the first page
+     load. Once picked, stay on that map for the rest of the session:
+     the bg element is persisted across view-transition navigations
+     (transition:persist) so re-randomising on every doc click would
+     cause a hard cut underneath an otherwise smooth nav transition. */
   (() => {
-    const img = continents[Math.floor(Math.random() * continents.length)];
     const el = document.getElementById('page-bg-image');
-    if (!el) return;
+    if (!el || el.dataset.bgSet === '1') return;
+    const img = continents[Math.floor(Math.random() * continents.length)];
     el.style.backgroundImage = `url('${img}')`;
     el.classList.add('is-ready');
+    el.dataset.bgSet = '1';
   })();
 </script>
 
diff --git a/site/src/layouts/Base.astro b/site/src/layouts/Base.astro
@@ -1,5 +1,6 @@
 ---
 import '../styles/global.css';
+import { ClientRouter } from 'astro:transitions';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import PageBackground from '../components/PageBackground.astro';
@@ -34,11 +35,12 @@ const release = await getLatestRelease();
       type="font/woff"
       crossorigin="anonymous"
     />
+    <ClientRouter />
   </head>
   <body class="min-h-screen flex flex-col">
     <PageBackground />
     <Header release={release} pathname={Astro.url.pathname} />
-    <main class="flex-1">
+    <main class="flex-1" transition:animate="fade">
       <slot />
     </main>
     <Footer />
diff --git a/site/src/styles/global.css b/site/src/styles/global.css
@@ -1,15 +1,6 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
 
-/* Opt into the browser's native cross-document view transitions for
-   same-origin navigations. Supporting browsers (Chrome/Edge 126+,
-   Safari 18+) apply a default crossfade between the outgoing and
-   incoming page; everything else just navigates normally. No JS, no
-   framework involvement. */
-@view-transition {
-  navigation: auto;
-}
-
 /* Self-hosted display face — sourced from tolkano.com's font kit. */
 @font-face {
   font-family: 'Fremont';

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`import siteConfig from '../../site.config.json';`
`3`	`3`	`---`
`4`	`4`
`5`		`-<footer class="mt-16 border-t border-(--color-border-glass) bg-(--color-bg)">`
	`5`	`+<footer class="mt-16 border-t border-(--color-border-glass) bg-(--color-bg)" transition:persist="site-footer">`
`6`	`6`	`<div`
`7`	`7`	`class="mx-auto flex max-w-7xl flex-col gap-6 px-4 py-8 text-sm text-(--color-fg-meta) sm:px-6 md:flex-row md:items-center md:justify-between"`
`8`	`8`	`>`