From 5dba6af72902a924b87c6c42e166bce04f706409 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jun 2025 14:02:35 -0700
Subject: [PATCH] Page styling

---
 src/lib/components/admin/AdminNavBar.svelte | 26 ++++++++++++++++++---
 src/lib/components/admin/AdminPage.svelte   |  2 +-
 src/routes/admin/+layout.svelte             |  2 --
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/admin/AdminNavBar.svelte b/src/lib/components/admin/AdminNavBar.svelte
index d0c0d76..b386de3 100644
--- a/src/lib/components/admin/AdminNavBar.svelte
+++ b/src/lib/components/admin/AdminNavBar.svelte
@@ -1,11 +1,26 @@
 <script lang="ts">
 	import { page } from '$app/stores'
+	import { onMount } from 'svelte'
 	import AvatarSimple from '$lib/components/AvatarSimple.svelte'
 	import WorkIcon from '$icons/work.svg?component'
 	import UniverseIcon from '$icons/universe.svg?component'
 	import PhotosIcon from '$icons/photos.svg?component'
 
 	const currentPath = $derived($page.url.pathname)
+	let isScrolled = $state(false)
+
+	onMount(() => {
+		const handleScroll = () => {
+			isScrolled = window.scrollY > 0
+		}
+
+		window.addEventListener('scroll', handleScroll)
+		handleScroll() // Check initial scroll position
+
+		return () => {
+			window.removeEventListener('scroll', handleScroll)
+		}
+	})
 
 	interface NavItem {
 		text: string
@@ -34,7 +49,7 @@
 	)
 </script>
 
-<nav class="admin-nav-bar">
+<nav class="admin-nav-bar" class:scrolled={isScrolled}>
 	<div class="nav-container">
 		<div class="nav-content">
 			<a href="/" class="nav-brand">
@@ -70,8 +85,13 @@
 		top: 0;
 		z-index: 100;
 		width: 100%;
-		background: $grey-90;
-		border-bottom: 1px solid $grey-70;
+		background: $bg-color;
+		border-bottom: 1px solid transparent;
+		transition: border-bottom 0.2s ease;
+
+		&.scrolled {
+			border-bottom: 1px solid $grey-60;
+		}
 	}
 
 	.nav-container {
diff --git a/src/lib/components/admin/AdminPage.svelte b/src/lib/components/admin/AdminPage.svelte
index 5f3d840..624a5c9 100644
--- a/src/lib/components/admin/AdminPage.svelte
+++ b/src/lib/components/admin/AdminPage.svelte
@@ -28,7 +28,7 @@
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
-		margin: 0 auto $unit-6x;
+		margin: 0 auto $unit-2x;
 		width: calc(100% - #{$unit-6x});
 		max-width: 900px; // Much wider for admin
 		min-height: calc(100vh - #{$unit-16x}); // Full height minus margins
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
index e984818..2b98f94 100644
--- a/src/routes/admin/+layout.svelte
+++ b/src/routes/admin/+layout.svelte
@@ -73,8 +73,6 @@
 
 	.admin-content {
 		flex: 1;
-		padding-top: $unit-4x;
-		padding-bottom: $unit-6x;
 	}
 
 	.admin-card-layout {