CSS Files Styling

src/routes/+error.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import { goto } from '$app/navigation';
-	import TerminalTUI from '$lib/components/TerminalTUI.svelte';
-	import type { TerminalLine } from '$lib/components/tui/types';
-	import { user, site } from '$lib/config';
+	import { page } from "$app/stores";
+	import { goto } from "$app/navigation";
+	import TerminalTUI from "$lib/components/TerminalTUI.svelte";
+	import type { TerminalLine } from "$lib/components/tui/types";
+	import { user, site } from "$lib/config";
 
 	// Fun 404 messages
 	const notFoundMessages = [
@@ -38,13 +38,15 @@
 	};
 
 	const status = $derived($page.status);
-	const errorMessage = $derived($page.error?.message || 'Something went wrong');
+	const errorMessage = $derived($page.error?.message || "Something went wrong");
 	const pathname = $derived($page.url.pathname);
 
 	// Pick a random fun message based on status
 	function getFunMessage(): string {
 		if (status === 404) {
-			return notFoundMessages[Math.floor(Math.random() * notFoundMessages.length)];
+			return notFoundMessages[
+				Math.floor(Math.random() * notFoundMessages.length)
+			];
 		}
 		const msgs = errorMessages[status];
 		if (msgs) {
@@ -55,33 +57,35 @@
 
 	// ASCII art for different errors (use ███ block characters)
 	function getAsciiArt(): string[] {
-		// Cat-shaped block art for 404
+		// 404: Page Not Found (Pink)
 		if (status === 404) {
 			return [
-				'(&pink)   ███   ███   (&)',
-				'(&pink) █ █ █ █ █ █ █ (&)',
-				'(&pink) █ █ █ █ █ █ █ (&)',
-				'(&pink)  ███████████  (&)',
-				'(&pink)   █  █ █  █   (&)',
+				"(&pink) █ █  ███  █ █  (&)",
+				"(&pink) █ █ █   █ █ █  (&)",
+				"(&pink) ███ █   █ ███  (&)",
+				"(&pink)   █ █   █   █  (&)",
+				"(&pink)   █  ███    █  (&)",
 			];
 		}
 
-		// Blocky error box for 5xx
+		// 500: Server Error (Red/Error)
 		if (status >= 500) {
 			return [
-				'(&error)  █████ █████  (&)',
-				'(&error) █  █  █  █  █ (&)',
-				'(&error) █ █ █ █ █ █ █ (&)',
-				'(&error) █████████████ (&)',
+				"(&error) ███  ███  ███ (&)",
+				"(&error) █   █   █ █   █ (&)",
+				"(&error) ███ █   █ █   █ (&)",
+				"(&error)   █ █   █ █   █ (&)",
+				"(&error) ███  ███  ███ (&)",
 			];
 		}
 
-		// Generic small block banner
+		// Generic ERROR (Pink)
 		return [
-			'(&pink)  ███ ███ ███  (&)',
-			'(&pink) █   █   █   █ (&)',
-			'(&pink)  █ █ █ █ █   (&)',
-			'(&pink)   █     █    (&)',
+			"(&pink) ███ ███ ███ ███ ███ (&)",
+			"(&pink) █   █ █ █ █ █ █ █ █ (&)",
+			"(&pink) ███ ███ ███ █ █ ███ (&)",
+			"(&pink) █   █ █ █ █ █ █ █ █ (&)",
+			"(&pink) ███ █ █ █ █ ███ █ █ (&)",
 		];
 	}
 
@@ -91,48 +95,51 @@
 	// Build the terminal lines for the error page (derived to capture reactive values)
 	const lines = $derived<TerminalLine[]>([
 		// Command that caused the error
-		{ type: 'command', content: `curl ${pathname}` },
-		{ type: 'blank', content: '' },
+		{ type: "command", content: `curl ${pathname}` },
+		{ type: "blank", content: "" },
 
 		// ASCII art
-		...asciiLines.map(line => ({ type: 'output' as const, content: line })),
-		{ type: 'blank', content: '' },
+		...asciiLines.map((line) => ({ type: "output" as const, content: line })),
+		{ type: "blank", content: "" },
 
 		// Error status (styled with leading X like the screenshot)
-		{ type: 'error', content: `(&error,bold)X Error ${status}: ${errorMessage}(&)` },
-		{ type: 'blank', content: '' },
+		{
+			type: "error",
+			content: `(&error,bold)X Error ${status}: ${errorMessage}(&)`,
+		},
+		{ type: "blank", content: "" },
 
 		// Fun message as a comment
-		{ type: 'output', content: `(&muted,italic)# ${funMessage}(&)` },
-		{ type: 'blank', content: '' },
+		{ type: "output", content: `(&muted,italic)# ${funMessage}(&)` },
+		{ type: "blank", content: "" },
 
-		{ type: 'divider', content: 'SUGGESTIONS' },
-		{ type: 'blank', content: '' },
+		{ type: "divider", content: "SUGGESTIONS" },
+		{ type: "blank", content: "" },
 
 		// Suggestions
-		{ type: 'command', content: 'cat suggestions.txt' },
-		{ type: 'info', content: 'Check if the URL is correct' },
-		{ type: 'info', content: 'Try refreshing the page' },
-		{ type: 'info', content: 'Contact me if the problem persists' },
-		{ type: 'blank', content: '' },
+		{ type: "command", content: "cat suggestions.txt" },
+		{ type: "info", content: "Check if the URL is correct" },
+		{ type: "info", content: "Try refreshing the page" },
+		{ type: "info", content: "Contact me if the problem persists" },
+		{ type: "blank", content: "" },
 
-		{ type: 'divider', content: 'ACTIONS' },
-		{ type: 'blank', content: '' },
+		{ type: "divider", content: "ACTIONS" },
+		{ type: "blank", content: "" },
 
 		// Navigation buttons
 		{
-			type: 'button',
-			content: 'Go Home',
-			icon: 'mdi:home',
-			style: 'primary',
-			href: '/'
+			type: "button",
+			content: "Go Home",
+			icon: "mdi:home",
+			style: "primary",
+			href: "/",
 		},
 		{
-			type: 'button',
-			content: 'Go Back',
-			icon: 'mdi:arrow-left',
-			style: 'accent',
-			action: () => history.back()
+			type: "button",
+			content: "Go Back",
+			icon: "mdi:arrow-left",
+			style: "accent",
+			action: () => history.back(),
 		},
 	]);
 </script>
@@ -143,12 +150,7 @@
 </svelte:head>
 
 <div class="error-container">
-	<TerminalTUI 
-		{lines} 
-		title="error" 
-		interactive={true} 
-		speed="fast"
-	/>
+	<TerminalTUI {lines} title="error" interactive={true} speed="fast" />
 </div>
 
 <style>