From 691d0cf4647ac107aa2a77319b7f36300339e1ec Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 26 May 2025 15:14:14 -0700
Subject: [PATCH] Some style fixes

---
 src/lib/components/Header.svelte | 30 ++++++++++++++++++++----------
 src/lib/components/Page.svelte   |  4 ++--
 src/routes/+layout.svelte        |  1 -
 src/routes/about/+page.svelte    | 12 ++++++------
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 406fe65..a4c1906 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -3,11 +3,19 @@
 	import SegmentedController from './SegmentedController.svelte'
 
 	let scrollY = $state(0)
-	let hasScrolled = $derived(scrollY > 10)
+	let hasScrolled = $state(false)
+	let gradientOpacity = $derived(Math.min(scrollY / 40, 1))
 
 	$effect(() => {
 		const handleScroll = () => {
 			scrollY = window.scrollY
+			
+			// Add hysteresis to prevent flickering
+			if (!hasScrolled && scrollY > 30) {
+				hasScrolled = true
+			} else if (hasScrolled && scrollY < 20) {
+				hasScrolled = false
+			}
 		}
 
 		window.addEventListener('scroll', handleScroll)
@@ -15,7 +23,7 @@
 	})
 </script>
 
-<header class="site-header {hasScrolled ? 'scrolled' : ''}">
+<header class="site-header {hasScrolled ? 'scrolled' : ''}" style="--gradient-opacity: {gradientOpacity}">
 	<div class="header-content">
 		<a href="/about" class="header-link" aria-label="@jedmund">
 			<Avatar />
@@ -26,20 +34,20 @@
 
 <style lang="scss">
 	.site-header {
-		position: fixed;
+		position: sticky;
 		top: 0;
-		left: 0;
-		right: 0;
 		z-index: 100;
 		display: flex;
 		justify-content: center;
 		padding: $unit-5x 0;
-		transition: padding 0.3s ease;
+		transition:
+			padding 0.3s ease,
+			background 0.3s ease;
 		pointer-events: none;
 
 		&.scrolled {
 			padding: $unit-2x 0;
-			
+
 			&::before {
 				content: '';
 				position: absolute;
@@ -47,13 +55,15 @@
 				left: 0;
 				right: 0;
 				height: 120px;
-				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
-				backdrop-filter: blur(6px);
-				-webkit-backdrop-filter: blur(6px);
+				background: linear-gradient(to bottom, rgba(0, 0, 0, calc(0.15 * var(--gradient-opacity))), transparent);
+				backdrop-filter: blur(calc(6px * var(--gradient-opacity)));
+				-webkit-backdrop-filter: blur(calc(6px * var(--gradient-opacity)));
 				mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
 				-webkit-mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
 				pointer-events: none;
 				z-index: -1;
+				opacity: var(--gradient-opacity);
+				transition: opacity 0.2s ease;
 			}
 		}
 	}
diff --git a/src/lib/components/Page.svelte b/src/lib/components/Page.svelte
index cd70e36..2b485fb 100644
--- a/src/lib/components/Page.svelte
+++ b/src/lib/components/Page.svelte
@@ -17,9 +17,9 @@
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
-		gap: $unit-4x;
+		gap: $unit-3x;
 		margin: $unit-6x auto $unit-6x;
-		padding: $unit-5x;
+		padding: $unit-3x;
 		width: 100%;
 		max-width: 700px;
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a5bc0c4..5fc3620 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -39,7 +39,6 @@ user-scalable=no"
 	}
 	
 	main {
-		padding-top: calc(52px + #{$unit-5x * 2}); // Avatar height + header padding
 		min-height: 100vh;
 	}
 
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 05da347..7f77695 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -36,9 +36,6 @@
 				target="_blank">Carnegie Mellon University</a
 			> in 2011 with a Bachelors of Arts in Communication Design.
 		</p>
-		<p>
-			I occasionally write about design and development on my <a href="/universe">blog</a>.
-		</p>
 	</section>
 </Page>
 <Page>
@@ -91,8 +88,11 @@
 	}
 
 	.bio {
-		font-size: 1rem;
-		line-height: 1.3;
+		font-size: 1.125rem;
+		line-height: 1.5;
+		color: #333;
+		background: $grey-100;
+		border-radius: $card-corner-radius;
 
 		p:first-child {
 			margin-top: 0;
@@ -102,4 +102,4 @@
 			margin-bottom: 0;
 		}
 	}
-</style>
\ No newline at end of file
+</style>