styles: clear the sticky header from every anchor target

Each target carried its own offset, most keyed to a 1200px breakpoint
and one to nothing at all, but the header is sticky except under
`(width >= 1200px) and (hover: hover)`. None of them matched that, so
anchored headings could land under the header instead of below it.

Declare the header height and derive one offset from it.

Author: thomasbuilds

src/components/ui/header/Header.astro

@@ -113,6 +113,8 @@ const navItems = navigationItems.map((item) => {
     align-items: center;
     gap: var(--space-sm);
     padding: var(--space-md);
+    box-sizing: border-box;
+    min-block-size: var(--header-height);
   }
 
   .brand {

src/components/ui/layout/PageSection.astro

@@ -62,7 +62,7 @@ const ariaLabelledBy = ariaLabel ? undefined : anchorId;
     font-size: var(--font-size-2xl);
     color: var(--heading-color);
     margin: 0;
-    scroll-margin-top: 6.5rem;
+    scroll-margin-block-start: var(--anchor-offset);
     letter-spacing: -0.01em;
   }
 
@@ -75,10 +75,4 @@ const ariaLabelledBy = ariaLabel ? undefined : anchorId;
       margin-inline: auto;
     }
   }
-
-  @media screen and (width >= 1200px) {
-    .title {
-      scroll-margin-top: var(--space-2xl);
-    }
-  }
 </style>

src/pages/downloads/community.astro

@@ -231,7 +231,7 @@ const setBuiltinId = (wallet: Wallet) => {
 
 <style>
   :global(#built-in-exchange) {
-    scroll-margin-top: var(--space-4xl);
+    scroll-margin-block-start: var(--anchor-offset);
   }
 
   .subheading {
@@ -244,10 +244,4 @@ const setBuiltinId = (wallet: Wallet) => {
   .compact-grid {
     padding: var(--space-xs) 0 var(--space-md) 0;
   }
-
-  @media (width <= 1200px) {
-    :global(#built-in-exchange) {
-      scroll-margin-top: 6.5rem;
-    }
-  }
 </style>

src/pages/downloads/index.astro

@@ -121,13 +121,6 @@ const tabs = [
 
   #gui,
   #cli {
-    scroll-margin-top: 6.5rem;
-  }
-
-  @media (width >= 1200px) {
-    #gui,
-    #cli {
-      scroll-margin-top: unset;
-    }
+    scroll-margin-block-start: var(--anchor-offset);
   }
 </style>

src/pages/index.astro

@@ -176,10 +176,10 @@ const { t, localizeHref } = Astro.locals;
     min-height: var(--hero-min-height);
   }
 
-  @media (width <= 1200px) {
-    #start-using-monero {
-      scroll-margin-top: 4rem;
-    }
+  #about-monero,
+  #start-using-monero,
+  #get-involved {
+    scroll-margin-block-start: var(--anchor-offset);
   }
 
   @media (width <= 600px) {

src/pages/resources/moneropedia/index.astro

@@ -91,7 +91,7 @@ for (const letter of sortedLetters) {
 
 <style>
   html {
-    scroll-padding-top: 4em;
+    scroll-padding-block-start: var(--anchor-offset);
     scroll-behavior: smooth;
   }
 

src/styles/global.css

@@ -58,6 +58,8 @@
 
   /* Layout Spacing */
   --page-top-margin: var(--space-2xl);
+  --header-height: 4.5rem;
+  --anchor-offset: calc(var(--header-height) + var(--space-xs));
   --desktop-padding-inline: 5rem;
   --mobile-padding-inline: var(--space-2xl);