From 6b7186a9b2f6241f87e578327d6a795ee55ce65a Mon Sep 17 00:00:00 2001
From: Luke Hagar <lukeslakemail@gmail.com>
Date: Mon, 2 Jun 2025 21:35:44 -0500
Subject: [PATCH] really happy with the mobile sizing all the way down to good
 old folds

---
 src/lib/components/Header.svelte | 61 +++++++++++++++++++++++++-------
 src/routes/+layout.svelte        |  8 ++---
 2 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index ae05022..acedb76 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -36,14 +36,14 @@
 				<!-- Main Navigation -->
 				<div class="hidden items-center gap-2 md:flex">
 					<a href="/" class={getNavClasses('/')} aria-label="Go to homepage">
-                        <Home class="size-4" aria-hidden="true" />
-                        <span>Home</span>
-                    </a>
+						<Home class="size-4" aria-hidden="true" />
+						<span>Home</span>
+					</a>
 
 					<a href="/pricing" class={getNavClasses('/pricing')} aria-label="View pricing plans">
-                        <DollarSign class="size-4" aria-hidden="true" />
-                        <span>Pricing</span>
-                    </a>
+						<DollarSign class="size-4" aria-hidden="true" />
+						<span>Pricing</span>
+					</a>
 
 					<a href="/blog" class={getNavClasses('/blog')} aria-label="Read our blog">
 						<BookOpen class="size-4" aria-hidden="true" />
@@ -51,7 +51,11 @@
 					</a>
 
 					{#if session}
-						<a href="/app/dashboard" class={getNavClasses('/app/dashboard')} aria-label="Go to dashboard">
+						<a
+							href="/app/dashboard"
+							class={getNavClasses('/app/dashboard')}
+							aria-label="Go to dashboard"
+						>
 							<LayoutDashboard class="size-4" aria-hidden="true" />
 							<span>Dashboard</span>
 						</a>
@@ -60,7 +64,7 @@
 			</div>
 
 			<!-- Right side - User actions and theme switcher -->
-			<div class="flex gap-1 sm:gap-3">
+			<div class="flex gap-1 md:gap-3">
 				<ThemeSwitch />
 
 				{#if session}
@@ -91,14 +95,47 @@
 					</div>
 				{:else}
 					<!-- Authentication Buttons -->
-					<div class="flex items-center gap-1 sm:gap-3">
+					<div class="hidden md:flex items-center gap-1 md:gap-3 ">
 						<a href="/auth" class={getNavClasses('/auth')} aria-label="Sign in or register">
-                            <User class="size-4" aria-hidden="true" />
-                            <span class="hidden sm:inline">Sign In / Register</span>
-                        </a>
+							<User class="size-4" aria-hidden="true" />
+							<span class="">Sign In / Register</span>
+						</a>
 					</div>
 				{/if}
 			</div>
 		</div>
+		<div class="block pt-4 md:hidden">
+			<nav class="flex flex-wrap items-center justify-center gap-4">
+				<a href="/" class={getNavClasses('/')} aria-label="Go to homepage"> 
+                <Home class="size-4" aria-hidden="true" />
+                    Home
+                </a>
+				<a href="/pricing" class={getNavClasses('/pricing')} aria-label="View pricing plans">
+					<DollarSign class="size-4" aria-hidden="true" />
+					Pricing
+				</a>
+				<a href="/blog" class={getNavClasses('/blog')} aria-label="Read our blog">
+					<BookOpen class="size-4" aria-hidden="true" />
+					Blog
+				</a>
+				<div class="flex justify-center gap-2">
+					{#if session}
+						<a
+							href="/app/dashboard"
+							class={getNavClasses('/app/dashboard')}
+							aria-label="Go to dashboard"
+						>
+							<LayoutDashboard class="size-4" aria-hidden="true" />
+							Dashboard
+						</a>
+					{:else}
+						<a href="/auth" class={getNavClasses('/auth')} aria-label="Sign in or register">
+							<User class="size-4" aria-hidden="true" />
+							Sign In / Register
+						</a>
+					{/if}
+				</div>
+			</nav>
+		</div>
 	</nav>
 </header>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f8e0f4f..0b9840a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -145,14 +145,14 @@
 			class="border-surface-300-600-token mt-8 flex flex-col items-center justify-between border-t pt-8 md:flex-row"
 		>
 			<p class="text-sm opacity-50">© 2025 Sveltey. All rights reserved.</p>
-			<div class="mt-4 flex items-center gap-4 md:mt-0">
+			<div class="mt-4 flex flex-wrap items-center justify-center gap-4 md:mt-0">
 				<span class="text-sm opacity-50">Built with</span>
 				<div class="flex items-center gap-2 text-sm opacity-75">
-					<span>SvelteKit</span>
+					<a class="anchor" href="https://kit.svelte.dev/" target="_blank">SvelteKit</a>
 					<span>•</span>
-					<span>Supabase</span>
+					<a class="anchor" href="https://supabase.com/" target="_blank">Supabase</a>
 					<span>•</span>
-					<span>Skeleton UI</span>
+					<a class="anchor" href="https://skeleton.dev/" target="_blank">Skeleton UI</a>
 				</div>
 			</div>
 		</div>