fix 404 error pages

saaqi · saaqi · commit d791d237cb83 · 2025-05-21T11:55:33.000+05:00
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { page } from '$app/state';
+	import { base } from '$app/paths';
 	import { emojis } from '$lib/components/emojis.js';
 </script>
 
@@ -11,16 +12,15 @@
 <div id="notfound">
 	<div class="notfound">
 		<div class="notfound-404">
-			<h1>Oops!</h1>
-			{emojis[page.status] ?? emojis[500]}
-			<h2>ERROR {page.status}: {page.error.message}</h2>
+			<h1>Oops! <span>{emojis[page.status] ?? emojis[500]}</span></h1>
+			<h2 class="my-4">ERROR {page.status}: {page.error.message}</h2>
 		</div>
 		<p>
 			Uh-oh! It seems the page you're looking for has either been removed, relocated, or may not
 			exist at all. Before you venture further, double-check the URL in your browser. If all seems
 			well, consider navigating back to our homepage to explore anew. Thanks for your understanding!
 		</p>
-		<a href="/">Go To Homepage</a>
+		<a href="{base}/">Go To Homepage</a>
 	</div>
 </div>
 
@@ -47,11 +47,11 @@
 		font-size: 1rem;
 		text-decoration: none;
 		text-transform: uppercase;
-		background: #333;
+		background: #fefefe;
 		display: inline-block;
 		padding: 1rem 2rem;
 		border-radius: 1rem;
-		color: #fff;
+		color: #333;
 		font-weight: 700;
 		box-shadow: 0 4px 15px -5px #333;
 	}
diff --git a/static/404.html b/static/404.html
@@ -14,6 +14,8 @@
 
 			body {
 				font-family: sans-serif;
+				background-color: #333;
+				color: #fefefe
 			}
 
 			#notfound {
@@ -42,22 +44,25 @@
 				font-size: 1rem;
 				text-decoration: none;
 				text-transform: uppercase;
-				background: #333;
+				background: #fefefe;
 				display: inline-block;
 				padding: 1rem 2rem;
 				border-radius: 1rem;
-				color: #fff;
+				color: #333;
 				font-weight: 700;
 				box-shadow: 0 4px 15px -5px #333;
 			}
 		</style>
+		<script>
+
+		</script>
 	</head>
 
 	<body>
 		<div id="notfound">
 			<div class="notfound">
 				<div class="notfound-404">
-					<h1>Oops!</h1>
+					<h1>Oops! 🤔</h1>
 				</div>
 				<h2>404 - Page not found</h2>
 				<p>
