From a0065bbfe33adf3ba869751fdd3775a4666ec3b1 Mon Sep 17 00:00:00 2001 From: punkfairie Date: Sat, 28 Feb 2026 10:26:46 -0800 Subject: [PATCH 1/6] center nav --- src/lib/components/Header.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 4ee9311..a8ea364 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -121,8 +121,8 @@ .nav { --nav-border: solid 1px var(--color-nav-border); - display: block; - position: relative; + display: flex; + justify-content: center; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); @media screen and (width >= 1024px) { From 1db68c0c12c2f3a8990870faea128d3fe28a3724 Mon Sep 17 00:00:00 2001 From: punkfairie Date: Sat, 28 Feb 2026 10:41:32 -0800 Subject: [PATCH 2/6] move span to nest under .nav-link The span hover rules were under .nav-link already, and is inside .nav-link, so it makes more sense to nest it under .nav-link. --- src/lib/components/Header.svelte | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index a8ea364..6e88c14 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -165,14 +165,6 @@ background: unset; border: none; } - - span { - display: inline-block; - padding: 0.5em 1em; - margin: 0 1em; - - transition: margin 200ms, padding 200ms; - } } .nav-link { @@ -189,6 +181,14 @@ } } + span { + display: inline-block; + padding: 0.5em 1em; + margin: 0 1em; + + transition: margin 200ms, padding 200ms; + } + &:hover span { padding: 0.5em 2em; margin: 0; From 3f4e4de1000bb89ebd8eb54ac47cdb676d73c1ee Mon Sep 17 00:00:00 2001 From: punkfairie Date: Sat, 28 Feb 2026 10:43:57 -0800 Subject: [PATCH 3/6] make nav link background color full width on mobile --- src/lib/components/Header.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 6e88c14..e1a92ba 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -182,7 +182,7 @@ } span { - display: inline-block; + display: block; padding: 0.5em 1em; margin: 0 1em; From 4961c9f7ce4e487994305d1033c5eb1dc4186ea1 Mon Sep 17 00:00:00 2001 From: punkfairie Date: Sat, 28 Feb 2026 10:47:30 -0800 Subject: [PATCH 4/6] don't change margin/padding of nav links on mobile Hover effects are barely seen on mobile anyway, and it makes the mobile nav menu look weird. --- src/lib/components/Header.svelte | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index e1a92ba..9c18e76 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -186,15 +186,20 @@ padding: 0.5em 1em; margin: 0 1em; - transition: margin 200ms, padding 200ms; + @media screen and (width >= 1024px) { + transition: margin 200ms, padding 200ms; + } } &:hover span { - padding: 0.5em 2em; - margin: 0; text-shadow: 0 0 1px var(--color-nav-text); background-color: var(--color-nav-background); + + @media screen and (width >= 1024px) { + padding: 0.5em 2em; + margin: 0; + } } &.active span { From edebcab7cd116b0096f60d8dba270f8351d72def Mon Sep 17 00:00:00 2001 From: punkfairie Date: Sat, 28 Feb 2026 10:58:53 -0800 Subject: [PATCH 5/6] make desktop nav fill the screen --- src/lib/components/Header.svelte | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 9c18e76..3139684 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -121,12 +121,10 @@ .nav { --nav-border: solid 1px var(--color-nav-border); - display: flex; - justify-content: center; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); @media screen and (width >= 1024px) { - padding: 0.5em 2em; + padding: 0.5em 0; } } @@ -159,7 +157,9 @@ } @media screen and (width >= 1024px) { - display: inline-block; + display: flex; + justify-content: center; + width: 100%; padding: 0; position: unset; background: unset; @@ -174,10 +174,12 @@ text-decoration: none; @media screen and (width >= 1024px) { + flex-grow: 1; + text-align: center; border-right: var(--nav-border); - &:first-child { - border-left: var(--nav-border); + &:last-child { + border-right: none; } } From e86ca206f6388e1c92a2151724269265ae7e37c5 Mon Sep 17 00:00:00 2001 From: punkfairie Date: Sat, 28 Feb 2026 11:10:34 -0800 Subject: [PATCH 6/6] right-align cta buttons in footer on desktop Looks a little nicer. --- src/lib/components/Footer.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index 2f77c00..c91af85 100644 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -72,9 +72,11 @@ } .ctas { + text-align: right; + > :global(*) { margin-bottom: 1em; } } - \ No newline at end of file +