styles: make the layout aware of the header height [beta]

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/layouts/Layout.astro

@@ -153,7 +153,7 @@ const fullTitle = title.includes("|")
     gap: var(--space-2xl);
     padding: var(--page-top-margin) var(--mobile-padding-inline)
       var(--space-2xl);
-    margin: var(--page-top-margin) auto 0;
+    margin: 0 auto;
     width: 100%;
     max-width: var(--content-max-width);
     flex: 1 0 auto;

src/pages/404.astro

@@ -38,7 +38,10 @@ const { t, localizeHref, localizeNumber } = Astro.locals;
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: calc(100svh - (var(--page-top-margin) * 2) - 4.5rem);
+    min-block-size: calc(100vh - var(--header-height) - var(--page-top-margin));
+    min-block-size: calc(
+      100dvh - var(--header-height) - var(--page-top-margin)
+    );
     flex: 1;
   }
 
@@ -82,12 +85,4 @@ const { t, localizeHref, localizeNumber } = Astro.locals;
   .quick-links a {
     font-weight: var(--font-weight-semibold);
   }
-
-  @media (width >= 600px) {
-    .error-container {
-      min-height: calc(
-        100vh - (var(--page-top-margin) * 5)
-      ); /* makes the footer be offscreen */
-    }
-  }
 </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

@@ -126,16 +126,6 @@ const { t, localizeHref } = Astro.locals;
 </Layout>
 
 <style>
-  :root {
-    --hero-min-height: calc(75vh + 3rem);
-  }
-
-  @supports (height: 100dvh) {
-    :root {
-      --hero-min-height: calc(75dvh + 3rem);
-    }
-  }
-
   h2 {
     font-size: var(--font-size-3xl);
     color: var(--heading-color);
@@ -162,29 +152,15 @@ const { t, localizeHref } = Astro.locals;
     mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
   }
 
-  .main-content {
-    position: relative;
-    margin-top: calc(
-      var(--hero-min-height) - var(--page-top-margin)
-    ) !important;
-  }
-
   .index-hero {
-    position: absolute;
-    top: 3rem;
-    inset-inline: 5rem;
-    min-height: var(--hero-min-height);
-  }
-
-  @media (width <= 1200px) {
-    #start-using-monero {
-      scroll-margin-top: 4rem;
-    }
+    margin-block-start: calc(-1 * var(--page-top-margin));
+    min-block-size: calc(100vh - var(--header-height));
+    min-block-size: calc(100dvh - var(--header-height));
   }
 
-  @media (width <= 600px) {
-    .index-hero {
-      inset-inline: 2rem;
-    }
+  #about-monero,
+  #start-using-monero,
+  #get-involved {
+    scroll-margin-block-start: var(--anchor-offset);
   }
 </style>

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);