Sticky footer: flex-column layout so short pages don't leave a blank band

Replace main's min-height:60vh + footer's 96px top margin (which floated
the footer in whitespace on short/filtered pages) with a flex-column body
and a growing main, so the footer sits at the viewport bottom when content
is short and flows naturally when it's long.

Author: RhysSullivan

src/layouts/Base.astro

@@ -61,6 +61,8 @@ const canonical = path ? new URL(path, Astro.site).href : undefined;
         font: 400 15px/1.55 var(--font-sans);
         -webkit-font-smoothing: antialiased;
         min-height: 100vh;
+        display: flex;
+        flex-direction: column;
       }
       a { color: inherit; }
       ::selection { background: #dbeafe; }
@@ -108,9 +110,9 @@ const canonical = path ? new URL(path, Astro.site).href : undefined;
         padding-left: 8px; border-left: 1px solid var(--gray-200);
       }
 
-      main { min-height: 60vh; }
+      main { flex: 1 0 auto; padding-bottom: 72px; }
 
-      footer.site { border-top: 1px solid var(--gray-100); margin-top: 96px; position: relative; z-index: 1; background: var(--white); }
+      footer.site { border-top: 1px solid var(--gray-100); position: relative; z-index: 1; background: var(--white); }
       footer.site .container {
         height: 56px; display: flex; align-items: center; gap: 24px;
         font-family: var(--font-mono); font-size: 12px; color: var(--gray-400);