layout shifts

src/routes/+layout.svelte

@@ -17,12 +17,22 @@
 
 	// keep the .dark class in sync with the persisted theme; in 'system' mode
 	// follow the OS preference live
+	let themeSettled = false;
+	let themeTimer = 0;
 	$effect(() => {
 		const theme = $storedTheme;
 		const mq = window.matchMedia('(prefers-color-scheme: dark)');
 		const apply = () => {
-			const dark = theme === 'dark' || (theme === 'system' && mq.matches);
-			document.documentElement.classList.toggle('dark', dark);
+			const root = document.documentElement;
+			// The very first application is just painting the stored theme - only
+			// an actual switch afterwards is worth cross-fading.
+			if (themeSettled) {
+				root.classList.add('theme-transition');
+				clearTimeout(themeTimer);
+				themeTimer = window.setTimeout(() => root.classList.remove('theme-transition'), 400);
+			}
+			themeSettled = true;
+			root.classList.toggle('dark', theme === 'dark' || (theme === 'system' && mq.matches));
 		};
 		apply();
 		mq.addEventListener('change', apply);
@@ -83,15 +93,22 @@
 	<div class="flex min-w-0 flex-1 flex-col h-full">
 		<Header onMenuToggle={toggleMobileMenu} />
 
+		<!-- The padding stays on <main> itself: the day strip sticks with a
+		     negative offset that exactly cancels it, so moving it to an inner
+		     wrapper would dock the strip too high and clip its top row.
+		     flex-col + flex-1 below keeps the footer on the bottom edge even when
+		     the page is too short to fill the viewport. -->
 		<main
-			class={fullBleed ? 'flex-1 overflow-hidden' : 'flex-1 overflow-y-auto p-3 lg:px-8 lg:py-6'}
+			class={fullBleed
+				? 'flex-1 overflow-hidden'
+				: 'flex flex-1 flex-col overflow-y-auto p-3 lg:px-8 lg:py-6'}
 		>
 			{#if fullBleed}
 				{@render children()}
 			{:else}
 				<!-- cap the content width on very large screens; the footer below
 				     gives the page its ending, so only modest bottom room is needed -->
-				<div class="mx-auto w-full max-w-[1536px] pb-24">
+				<div class="mx-auto w-full max-w-[1536px] flex-1 pb-24">
 					{@render children()}
 				</div>
 				<!-- full-bleed footer inside the scroll area (its own inner max-w),