feat: additional component and styling choices

apps/web/src/routes/+layout.svelte

@@ -1,5 +1,26 @@
-<script>
+<script lang="ts">
+	import { dev } from '$app/environment';
+	import { Metadata, SiteFooter, SiteNavBar, TailwindIndicator } from '$lib/components/site';
+	import { ModeWatcher } from 'mode-watcher';
 	import '../app.pcss';
+	import { fade } from 'svelte/transition';
 </script>
 
-<slot />
+<ModeWatcher />
+
+<Metadata />
+
+<div class="relative flex min-h-screen flex-col" id="page">
+	<SiteNavBar />
+	<main class="container relative mb-4 max-w-[980px] flex-1">
+		<!-- {#key data.url} -->
+			<div in:fade={{ duration: 200, delay: 100 }} out:fade={{ duration: 100 }}>
+				<slot />
+			</div>
+		<!-- {/key} -->
+	</main>
+	<SiteFooter />
+	{#if dev}
+		<TailwindIndicator />
+	{/if}
+</div>

apps/web/src/routes/+page.svelte

@@ -16,11 +16,3 @@
 	</div>
 {/if}
 
-<style>
-	.links {
-		display: flex;
-		gap: 1rem;
-		align-items: center;
-		font-size: 1.5rem;
-	}
-</style>