src/lib/components/Footer.svelte

@@ -9,8 +9,8 @@
 	let { links }: Props = $props();
 </script>
 
-<div class="flex justify-between">
-	<div class="flex gap-8">
+<div class="flex justify-between text-xs lg:text-lg">
+	<div class="flex gap-2 lg:gap-8">
 		{#each links as link (link.href)}
 			<a
 				href={link.href}

src/lib/components/Navbar.svelte

@@ -1,30 +1,36 @@
 <script lang="ts">
+	import { Menu } from 'lucide-svelte';
+
 	interface Props {
+		drawerId: string;
 		title: string;
 		pages: { slug: string; name: string }[];
 		route: { id: string | null };
 	}
 
-	let { title, pages, route }: Props = $props();
+	let { drawerId, title, pages, route }: Props = $props();
 </script>
 
 <nav class="navbar">
 	<div class="flex flex-1 items-center gap-4">
 		<a href="/">
-			<div class="avatar avatar-placeholder w-12">
+			<div class="avatar avatar-placeholder">
 				<div
-					class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-10 rounded-full ring-2 ring-offset-2 transition-all ease-in hover:w-12 hover:text-2xl"
+					class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-8 rounded-full ring-2 ring-offset-2 transition-all ease-in hover:text-2xl lg:w-12"
 				>
-					<span class="text-2xl"> {title.at(0)} </span>
+					<span class="text-xl lg:text-2xl"> {title.at(0)} </span>
 				</div>
 			</div>
 		</a>
-		<h2 class="text-primary text-3xl font-light">
+		<h2 class="text-primary text-2xl font-light lg:text-3xl">
 			<span class="text-base-content font-semibold">Benjamin</span>
 			Palko
 		</h2>
 	</div>
-	<div class="flex gap-4 text-lg">
+	<label for={drawerId} aria-label="open sidebar" class="btn btn-square btn-outline lg:hidden">
+		<Menu />
+	</label>
+	<div class="hidden gap-4 text-lg lg:flex">
 		{#each pages as page (page.slug)}
 			<a
 				href={page.slug}

src/lib/components/WIP.svelte

@@ -6,11 +6,11 @@
 
 {#snippet Banner(messages: string[], backwards: boolean)}
 	<div
-		class="bg-hazard flex h-fit w-[110%] flex-col bg-black py-6 text-xl font-semibold text-black"
+		class="bg-hazard flex h-fit w-[110%] flex-col bg-black py-3 text-xs font-semibold text-black lg:py-6 lg:text-lg"
 		class:rotate-5={!backwards}
 		class:-rotate-5={backwards}
 	>
-		<div class="scroll-parent w-full overflow-x-hidden bg-amber-400 px-8">
+		<div class="scroll-parent h-4 w-full overflow-x-hidden bg-amber-400 px-8 lg:h-6">
 			<div
 				class="scroll-element flex justify-around"
 				class:primary={!backwards}
@@ -40,9 +40,9 @@
 	</div>
 {/snippet}
 
-<div class="bg-hazard rounded-box h-full w-full border border-amber-400 p-6">
+<div class="bg-hazard rounded-box h-full w-full border border-amber-400 p-4 lg:p-6">
 	<div
-		class="bg-base-200 rounded-box flex h-full flex-col items-center justify-center gap-48 overflow-hidden border border-amber-400"
+		class="bg-base-200 rounded-box flex h-full flex-col items-center justify-center gap-32 overflow-hidden border border-amber-400 lg:gap-48"
 	>
 		{@render Banner(messages, false)}
 		{@render Banner(messages, true)}
@@ -52,7 +52,6 @@
 <style>
 	.scroll-parent {
 		position: relative;
-		height: 1.8rem;
 	}
 
 	.scroll-element {

src/routes/+layout.svelte

@@ -23,16 +23,19 @@
 	let current = $derived(pages.find((p) => p.slug === page.route.id));
 </script>
 
-<div class="h-screen w-screen p-12">
+<div class="drawer drawer-end">
+	<input id="navigation-drawer" type="checkbox" class="drawer-toggle" />
+
+	<div class="drawer-content h-screen w-screen lg:p-12">
 		<div
-		class="bg-base-200 grid min-h-full grid-rows-[max-content_max-content_auto_max-content] rounded-4xl"
+			class=" bg-base-200 grid min-h-full grid-rows-[max-content_max-content_auto_max-content] lg:rounded-4xl"
 		>
-		<header class=" p-8">
-			<Navbar title="Benjamin Palko" {pages} route={page.route} />
+			<header class="lg:p-8">
+				<Navbar drawerId="navigation-drawer" title="Benjamin Palko" {pages} route={page.route} />
 			</header>
 			{#if current && current.slug !== '/'}
-			<div class="bg-base-300 w-full px-12 py-8">
-				<h1 class="text-4xl font-light">{current.name}</h1>
+				<div class="bg-base-300 w-full px-6 py-4 lg:px-12 lg:py-8">
+					<h1 class="text-2xl font-light lg:text-4xl">{current.name}</h1>
 				</div>
 			{/if}
 			<main>
@@ -42,4 +45,15 @@
 				<Footer links={socialLinks} />
 			</footer>
 		</div>
+	</div>
+
+	<div class="drawer-side">
+		<label for="navigation-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+		<ul class="menu bg-base-200 flex min-h-full w-full flex-col-reverse gap-4 p-4">
+			{#each pages as page (page.slug)}
+				<li><a href={page.slug} class="btn btn-primary btn-lg">{page.name}</a></li>
+			{/each}
+			<label for="navigation-drawer" class="btn btn-error btn-lg">Close</label>
+		</ul>
+	</div>
 </div>