From 8d2fa293c72a6ac73748b8f26956eac25e1dc1f6 Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Thu, 4 Apr 2024 20:05:54 +0200
Subject: [PATCH] +error fix

---
 src/routes/+error.svelte | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 8b0a2a4..1af3d73 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,16 +1,27 @@
-<!-- This page handles any error encountered by the site. -->
 <script>
 	import { page } from '$app/stores';
 </script>
 
 {#if $page.status === 404}
-	<div class="flex flex-col items-center">
+	<div class="flex flex-col items-center m-4 py-8">
 		<div
-			class="relative mb-[3.33vh] flex h-96 w-96 items-center justify-center rounded-full bg-404"
+			class="relative mb-[3.33vh] flex h-24 w-24 md:h-64 md:w-64 items-center justify-center bg-surface-800"
 		>
-			<h1 class="h1 absolute text-h1 leading-[5rem]">404</h1>
+			<img
+				class="object-fill"
+				src="/animations/travolta_confused.webp"
+				alt="Travolta Confused gif"
+			/>
+
+			<h1 class="h1 absolute leading-[5rem] text-white">404</h1>
 		</div>
-		<h2 class="h4 mb-x-small">You just hit a route that doesn't exist</h2>
+		<h2 class="h4 mb-2">
+			? My God, what are you doing here, this page doesn't exist and so on and so on.
+		</h2>
+		<p>
+			This site either never existed or just suddenly committed disappearance from this
+			universe.
+		</p>
 	</div>
 {:else}
 	<h2>{$page.status}</h2>
@@ -19,8 +30,10 @@
 		<p class="subhead">{$page.error.message}</p>
 	{/if}
 
-	<p><strong>Sorry!</strong> Maybe try one of these links?</p>
+	<p><strong>Sorry!</strong> A grave error has occured. Maybe try one of these links?</p>
 	<ul>
 		<li><a href="/">Home</a></li>
+		<li><a href="/blog">Blog</a></li>
+		<li><a href="/projects">Projects</a></li>
 	</ul>
 {/if}