Add Layout base

src/app.css

@@ -1,7 +1,11 @@
+@import url('https://fonts.cdnfonts.com/css/roboto-condensed-3');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+
 body {
-    @apply bg-gray-800 text-slate-300;
+    @apply bg-gray-800 text-zinc-100;
+    font-family: 'Roboto Condensed', sans-serif;
 }

src/components/Footer.svelte

@@ -0,0 +1,3 @@
+<footer class="bg-zinc-800 text-white p-6 text-center">
+	<p>&copy; 2024 Levyraati 2024. Yhdessä musiikin parissa.</p>
+</footer>

src/components/Header.svelte

@@ -0,0 +1,24 @@
+<script>
+</script>
+
+<header class="flex items-center p-6 bg-zinc-800 justify-between">
+	<a class="flex items-center" href="/">
+		<enhanced:img src="/static/img/logo.webp?w=50" alt="Levyraati Revived" class="rounded-lg" />
+		<h1 class="ml-4 text-3xl font-bold">Levyraati <span class="revived">Revived</span></h1>
+	</a>
+	<div class="flex items-center space-x-4">
+		<a href="/" class="text-white hover:text-blue-500">Home</a>
+		<a href="/leaderboard" class="text-white hover:text-blue-500">Leaderboard</a>
+		<a href="/events" class="text-white hover:text-blue-500">Events</a>
+		<a href="/login" class="text-white hover:text-blue-500">Login</a>
+	</div>
+</header>
+
+<style>
+	@import url('https://fonts.cdnfonts.com/css/albero');
+
+	.revived {
+		@apply text-amber-700;
+		font-family: 'Albero', sans-serif;
+	}
+</style>

src/routes/+layout.svelte

@@ -1,5 +1,11 @@
 <script>
 	import '../app.css';
+	import Header from '../components/Header.svelte';
+	import Footer from '../components/Footer.svelte';
 </script>
 
-<slot />
+<Header />
+<main class="container mx-auto p-6">
+	<slot />
+</main>
+<Footer />