layouts: apply the page top margin once

It was set as both a margin and a padding, so every page carried double.
The 404 height calc had been tuned around the doubled value, so it is
rewritten off the header height and the real spacing.

Author: thomasbuilds

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>