Change Styling and code cleanup

src/app.css

@@ -16,4 +16,8 @@ body {
 
 .button-primary {
     @apply bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600;
+}
+
+.button-cancel {
+    @apply bg-orange-500 text-white px-4 py-2 rounded-md hover:bg-red-600;
 }

src/components/Footer.svelte

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

src/components/Header.svelte

@@ -6,13 +6,20 @@
 		<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">
+	<div class="items-center space-x-4 hidden md:flex">
 		<a href="/leaderboard" class="text-white hover:text-blue-500">Leaderboard</a>
 		<p>|</p>
 		<a href="/events" class="text-white hover:text-blue-500">Tapahtumat</a>
 		<p>|</p>
 		<a href="/login" class="text-white hover:text-blue-500">Kirjaudu sisään</a>
 	</div>
+	<div class="md:hidden">
+		<svg viewBox="0 0 100 80" width="40" height="40">
+			<rect x="5" y="0" width="80" height="10" rx="5" fill="#7777aa" />
+			<rect x="5" y="30" width="80" height="10" rx="5" fill="#7777aa" />
+			<rect x="5" y="60" width="80" height="10" rx="5" fill="#7777aa" />
+		</svg>
+	</div>
 </header>
 
 <style>

src/lib/index.js

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/routes/+layout.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <Header />
-<main class="container mx-auto p-6">
+<main class="container max-w-screen-lg mx-auto p-6">
 	<slot />
 </main>
 <Footer />