Rewrite website as a Hyprland desktop

src/lib/components/shell/Clock.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let now = $state<Date | null>(null);
+
+	onMount(() => {
+		now = new Date();
+		const timer = setInterval(() => (now = new Date()), 15000);
+		return () => clearInterval(timer);
+	});
+
+	function formatClock(date: Date): string {
+		const weekday = date.toLocaleDateString('en-US', { weekday: 'long' });
+		const day = date.toLocaleDateString('en-US', { day: '2-digit' });
+		const month = date.toLocaleDateString('en-US', { month: 'long' });
+		const time = date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
+		return `${weekday} ${day} ${month} ${time}`;
+	}
+</script>
+
+<span class="clock full">{now ? formatClock(now) : ''}</span>
+<span class="clock short">{now ? formatClock(now).split(' ').slice(1).join(' ') : ''}</span>
+
+<style>
+	.clock {
+		white-space: nowrap;
+	}
+
+	.short {
+		display: none;
+	}
+
+	@media (max-width: 640px) {
+		.full {
+			display: none;
+		}
+
+		.short {
+			display: inline;
+		}
+	}
+</style>