From f42caad93b0759979976818149d9f23058ddae47 Mon Sep 17 00:00:00 2001 From: Vincent van der Wal Date: Wed, 22 Jul 2026 12:52:18 +0200 Subject: [PATCH] smoother crossfade with pinned nav, proper footer --- src/app.css | 16 +++++++-- src/routes/+layout.svelte | 71 ++++++++++++++++++++++++++++++++++++--- 2 files changed, 80 insertions(+), 7 deletions(-) diff --git a/src/app.css b/src/app.css index 0b15fa1..6073141 100644 --- a/src/app.css +++ b/src/app.css @@ -99,18 +99,25 @@ box-sizing: border-box; } -/* page transitions: quick cross-fade for content; the map morphs separately */ +/* page transitions: gentle simultaneous cross-fade for content; + the map morphs separately; topbar and footer are pinned and never fade */ @media not (prefers-reduced-motion: reduce) { ::view-transition-old(root) { - animation: 110ms ease both vt-fade-out; + animation: 160ms ease both vt-fade-out; } ::view-transition-new(root) { - animation: 220ms ease 40ms both vt-fade-in; + animation: 160ms ease both vt-fade-in; } ::view-transition-group(streba-map) { animation-duration: 320ms; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); } + ::view-transition-old(topbar), + ::view-transition-new(topbar), + ::view-transition-old(site-footer), + ::view-transition-new(site-footer) { + animation: none; + } } @keyframes vt-fade-out { to { @@ -131,6 +138,9 @@ body { font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; + display: flex; + flex-direction: column; + min-height: 100vh; } h1 { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 68159ad..792cf80 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -158,7 +158,26 @@ - +