Add +error.svelte handler

src/routes/+error.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { page } from '$app/state';
+import { error } from 'console';
+</script>
+
+<div class="error-wrapper">
+    <div class="signal-icon">
+        <div class="red-light"></div>
+    </div>
+
+    <h2 class="label">Signal Failure: {page.status}</h2>
+
+    <p class="error-message">
+        {page.error?.message ?? "An unexpected derailment occurred."}
+    </p>
+
+    {#if page.error?.owlCode}
+        <div class="debug-info">
+            <code>Ref: {page.error.owlCode}</code>
+        </div>
+    {/if}
+
+    <a href="/" class="retry-button">Return to Home</a>
+</div>
+
+<style>
+    .error-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: calc(100vh - 140px);
+        padding: 20px;
+        text-align: center;
+        font-family: 'URW Gothic', sans-serif;
+    }
+
+    .label {
+        color: #ff4444;
+        letter-spacing: 0.2rem;
+        margin-bottom: 10px;
+    }
+
+    .error-message {
+        font-size: 1.1rem;
+        color: var(--color-title);
+        max-width: 300px;
+        margin-bottom: 30px;
+    }
+
+    .debug-info {
+        background: rgba(255,255,255,0.05);
+        padding: 5px 12px;
+        border-radius: 4px;
+        font-size: 0.8rem;
+        opacity: 0.6;
+    }
+
+    .retry-button {
+        margin-top: 40px;
+        padding: 12px 24px;
+        background: var(--color-brand);
+        color: var(--color-title);
+        text-decoration: none;
+        font-weight: 600;
+        border-radius: 6px;
+        letter-spacing: 0.05rem;
+    }
+</style>

src/routes/+layout.svelte

@@ -18,9 +18,7 @@
 		{ label: 'About', path: '/about', icon: IconHelp},
 	]
 
-	const activePath = $derived(page.url?.pathname ?? '');
+	const activePath = $derived(page.url?.pathname ?? '');	
-	const isHome = $derived(page.url.pathname === '/');
-	
 
 	const moreIcon = IconDots;
 </script>
@@ -31,14 +29,14 @@
 
 <header>
 	<a href="/" aria-label="OwlBoard Home" class="logo-link">
-		{#if isHome}
+		{#if page.data.title}
-			<img src={logoText} alt="OwlBoard Logo" height="55" />
-		{:else}
 			<img src={logoPlain} alt="OwlBoard Icon" height="55" />
+		{:else}
+			<img src={logoText} alt="OwlBoard Logo" height="55" />
 		{/if}
 	</a>
-	{#if !isHome}
+	{#if page.data.title}
-		<h1 class="page-title">{page?.data?.title ?? ""}</h1>
+		<h1 class="page-title">{page.data.title}</h1>
 	{/if}
 </header>