Cleanup II

Author: bash

sass/_layout.scss

@@ -1,20 +1,64 @@
 body {
     display: grid;
+    min-height: 100vh;
     grid-template-columns: 1fr minmax(0, $content-max-width) 1fr;
+    grid-template-rows: auto 1fr auto;
     grid-row-gap: var(--section-gap);
 }
 
 .site-header {
+    grid-column: 1 / 4;
+    display: grid;
+    grid-template-columns: subgrid;
     border-bottom: 2px solid var(--border-color);
+
+    > .wrapper {
+        grid-column: 2;
+        padding: .5rem var(--content-padding);
+    }
 }
 
-.site-header {
+.page-content {
+    grid-column: 2;
+}
+
+.site-footer {
     grid-column: 1 / 4;
     display: grid;
     grid-template-columns: subgrid;
+    justify-items: center;
+    background-color: var(--bg-1-color);
+    font-size: .9em;
+    --block-gap: .5rem;
+    --ferris-height: 1.5rem;
+    padding-top: var(--ferris-height);
 
-    > .wrapper {
+    &:before {
+        content: "";
+        transform: translateY(calc(-50% - var(--ferris-height)));
+        position: absolute;
+        height: var(--ferris-height);
+        aspect-ratio: var(--ferris-aspect-ratio);
+        background-color: var(--fg-color);
+        mask-image: var(--ferris-image);
+        mask-size: contain;
+    }
+
+    @media (prefers-contrast: no-preference) and (hover: hover) {
+        transition: opacity 125ms;
+
+        &:not(:focus-within):not(:hover) {
+            opacity: .4;
+        }
+    }
+
+    .wrapper {
         grid-column: 2;
-        padding: .5rem var(--content-padding);
+        padding: var(--content-padding);
+        max-width: 35rem;
+    }
+
+    p {
+        margin-bottom: var(--block-gap);
     }
 }

sass/style.scss

@@ -65,20 +65,13 @@ body {
     display: flex;
     align-items: center;
     gap: .5em;
-}
-
-.page-content {
-    grid-column: 2;
+    max-width: max-content;
 }
 
 main {
     padding: 0 var(--content-padding);
 }
 
-footer {
-    grid-column: 1 / 4;
-}
-
 pre, img, video {
     border-radius: var(--box-rounding);
 }
@@ -99,33 +92,6 @@ figure {
     }
 }
 
-footer {
-    // margin-top: 4rem;
-    position: relative;
-    padding-top: 1.5em; // TODO: variable / share with ferris icon
-
-    &:before {
-        position: absolute;
-        top: -0.8em;
-        left: calc(50% - 1.125em);
-        content: "";
-        display: inline-block;
-        height: 1.5em;
-        aspect-ratio: var(--ferris-aspect-ratio);
-        background-color: color-mix(in oklab, var(--accent-color), currentColor 20%);
-        mask-image: var(--ferris-image);
-        mask-size: contain;
-    }
-
-    @media (prefers-contrast: no-preference) and (hover: hover) {
-        transition: opacity 125ms;
-
-        &:not(:focus-within):not(:hover) {
-            opacity: .4;
-        }
-    }
-}
-
 .svg-icon {
     width: 1em;
     height: 1em;
@@ -144,18 +110,3 @@ footer {
     }
 }
 
-.site-footer {
-    background-color: var(--bg-1-color);
-    font-size: .9em;
-    --block-gap: .5rem;
-
-    .wrapper {
-        padding: 1rem 2rem; // TODO: put in a variable
-        max-width: 35rem; // TODO: variable
-        margin: auto;
-    }
-
-    p {
-        margin-bottom: var(--block-gap);
-    }
-}