From 3bd7d54558caf88723751cc0f8108f0f1623ad37 Mon Sep 17 00:00:00 2001
From: Jules <jules@example.com>
Date: Wed, 15 Jul 2026 16:59:46 +0000
Subject: [PATCH 1/2] feat: Add inline horizontal scroll navigation for mobile
 viewports

---
 .../components/navigation/Navigation.svelte   | 73 ++++++++++++-------
 src/routes/+layout.svelte                     |  3 +-
 2 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/src/lib/components/navigation/Navigation.svelte b/src/lib/components/navigation/Navigation.svelte
index e70ed65..4a00ae6 100644
--- a/src/lib/components/navigation/Navigation.svelte
+++ b/src/lib/components/navigation/Navigation.svelte
@@ -4,34 +4,55 @@
 	import Contact from '../Contact.svelte';
 </script>
 
-<nav class="mx-auto flex w-full max-w-[1100px] items-center justify-between px-6 py-4">
-	<a href="/" class="font-serif text-lg tracking-tight transition-opacity hover:opacity-70">
-		Alex Bäuerle
-	</a>
+{#snippet navLinks()}
+	<NavigationElement name="Home" href="/" active={$page.url.pathname === '/'} />
+	<NavigationElement
+		name="Papers"
+		href="/publications"
+		active={$page.url.pathname.startsWith('/publications')}
+	/>
+	<NavigationElement
+		name="Projects"
+		href="/projects"
+		active={$page.url.pathname.startsWith('/projects')}
+	/>
+	<NavigationElement
+		name="Writing"
+		href="/blog"
+		active={$page.url.pathname.startsWith('/blog')}
+	/>
+	<NavigationElement name="CV" href="/cv" active={$page.url.pathname.startsWith('/cv')} />
+{/snippet}
 
-	<div class="flex items-center gap-6">
-		<div class="hidden items-center gap-1 sm:flex">
-			<NavigationElement name="Home" href="/" active={$page.url.pathname === '/'} />
-			<NavigationElement
-				name="Papers"
-				href="/publications"
-				active={$page.url.pathname.startsWith('/publications')}
-			/>
-			<NavigationElement
-				name="Projects"
-				href="/projects"
-				active={$page.url.pathname.startsWith('/projects')}
-			/>
-			<NavigationElement
-				name="Writing"
-				href="/blog"
-				active={$page.url.pathname.startsWith('/blog')}
-			/>
-			<NavigationElement name="CV" href="/cv" active={$page.url.pathname.startsWith('/cv')} />
-		</div>
+<nav class="mx-auto flex w-full max-w-[1100px] flex-col px-6 py-4">
+	<div class="flex items-center justify-between">
+		<a href="/" class="font-serif text-lg tracking-tight transition-opacity hover:opacity-70">
+			Alex Bäuerle
+		</a>
+
+		<div class="flex items-center gap-6">
+			<div class="hidden items-center gap-1 sm:flex">
+				{@render navLinks()}
+			</div>
 
-		<div class="flex items-center gap-0.5 opacity-60 transition-opacity hover:opacity-100">
-			<Contact />
+			<div class="flex items-center gap-0.5 opacity-60 transition-opacity hover:opacity-100">
+				<Contact />
+			</div>
 		</div>
 	</div>
+
+	<!-- Mobile horizontal scroll navigation -->
+	<div class="flex items-center gap-2 overflow-x-auto whitespace-nowrap scroll-smooth pt-3 sm:hidden no-scrollbar -mx-6 px-6">
+		{@render navLinks()}
+	</div>
 </nav>
+
+<style>
+	.no-scrollbar {
+		scrollbar-width: none; /* Firefox */
+		-ms-overflow-style: none; /* IE 10+ */
+	}
+	.no-scrollbar::-webkit-scrollbar {
+		display: none; /* Safari and Chrome */
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 05f7e6d..a3e72be 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -44,8 +44,7 @@
 	{:else}
 		<!-- Sub-pages: constrained layout -->
 		<div
-			class="relative z-10 mx-auto flex w-full max-w-[1000px] justify-center px-4 pb-16"
-			style="margin-top: 80px;"
+			class="relative z-10 mx-auto flex w-full max-w-[1000px] justify-center px-4 pb-16 mt-[110px] sm:mt-[80px]"
 		>
 			<div class="page-shell">
 				{@render children()}

From 2ce24fa407deb3d066206c17e5795ae46c77c43c Mon Sep 17 00:00:00 2001
From: AI Bot <bot@example.com>
Date: Wed, 15 Jul 2026 17:05:01 +0000
Subject: [PATCH 2/2] Fix Prettier formatting in Navigation.svelte to resolve
 CI linting error

---
 src/lib/components/navigation/Navigation.svelte | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/navigation/Navigation.svelte b/src/lib/components/navigation/Navigation.svelte
index 4a00ae6..a2845e1 100644
--- a/src/lib/components/navigation/Navigation.svelte
+++ b/src/lib/components/navigation/Navigation.svelte
@@ -16,11 +16,7 @@
 		href="/projects"
 		active={$page.url.pathname.startsWith('/projects')}
 	/>
-	<NavigationElement
-		name="Writing"
-		href="/blog"
-		active={$page.url.pathname.startsWith('/blog')}
-	/>
+	<NavigationElement name="Writing" href="/blog" active={$page.url.pathname.startsWith('/blog')} />
 	<NavigationElement name="CV" href="/cv" active={$page.url.pathname.startsWith('/cv')} />
 {/snippet}
 
@@ -42,7 +38,9 @@
 	</div>
 
 	<!-- Mobile horizontal scroll navigation -->
-	<div class="flex items-center gap-2 overflow-x-auto whitespace-nowrap scroll-smooth pt-3 sm:hidden no-scrollbar -mx-6 px-6">
+	<div
+		class="flex items-center gap-2 overflow-x-auto whitespace-nowrap scroll-smooth pt-3 sm:hidden no-scrollbar -mx-6 px-6"
+	>
 		{@render navLinks()}
 	</div>
 </nav>