diff --git a/src/app.css b/src/app.css index 359c58d..1cc0550 100644 --- a/src/app.css +++ b/src/app.css @@ -28,6 +28,7 @@ /* Design tokens & theme variables (light defaults) */ :root { --page-max-width: calc(1460px * var(--ui-scale)); + --navbar-offset: calc(94px * var(--ui-scale)); --page-padding-inline: clamp( calc(1.5rem * var(--ui-scale)), calc(4vw * var(--ui-scale)), @@ -67,6 +68,7 @@ html { -moz-osx-font-smoothing: grayscale; font-size: calc(var(--fs-base) * var(--ui-scale)); -webkit-text-size-adjust: 100%; + scroll-padding-top: var(--navbar-offset); overflow-x: hidden; } body { @@ -111,7 +113,8 @@ input[type="submit"] { /* Safe area for content below navbar (94px scaled) */ .safe-area-navbar { - padding-top: calc(94px * var(--ui-scale)); + padding-top: var(--navbar-offset); + scroll-margin-top: var(--navbar-offset); } /* Show/hide helpers for breakpoints */ diff --git a/src/layout/Navbar.svelte b/src/layout/Navbar.svelte index ed3a1d9..8327ba4 100644 --- a/src/layout/Navbar.svelte +++ b/src/layout/Navbar.svelte @@ -56,13 +56,13 @@ function headerRowClass() { return isHomePage() - ? "flex items-center w-full relative min-h-10" + ? "flex min-h-16 items-center w-full relative gap-4" : "flex min-h-16 items-center gap-4"; } function headerWrapClass() { return isHomePage() - ? "ml-auto flex w-full items-center justify-end md:w-auto md:border-b-3 md:border-white backdrop-blur-lg bg-black/35 pr-(--page-padding-inline)" + ? "ml-auto flex w-full self-stretch items-center justify-end md:w-auto md:border-b-3 md:border-white backdrop-blur-lg bg-black/35 pr-(--page-padding-inline)" : "flex items-center justify-end ml-auto w-full md:w-auto"; } diff --git a/src/routes/Mentors.svelte b/src/routes/Mentors.svelte index eaa5711..bc44f5c 100644 --- a/src/routes/Mentors.svelte +++ b/src/routes/Mentors.svelte @@ -78,7 +78,7 @@