Start cleaning things up

Author: bash

Diff for: .editorconfig

@@ -4,3 +4,6 @@ indent_style = space
 
 [anchor-link.html]
 insert_final_newline = false
+
+[*.scss]
+trim_trailing_whitespace = true

Diff for: sass/_layout.scss

@@ -0,0 +1,20 @@
+body {
+    display: grid;
+    grid-template-columns: 1fr minmax(0, $content-max-width) 1fr;
+    grid-row-gap: var(--section-gap);
+}
+
+.site-header {
+    border-bottom: 2px solid var(--border-color);
+}
+
+.site-header {
+    grid-column: 1 / 4;
+    display: grid;
+    grid-template-columns: subgrid;
+
+    > .wrapper {
+        grid-column: 2;
+        padding: .5rem var(--content-padding);
+    }
+}

Diff for: sass/_post-content.scss

@@ -1,31 +1,53 @@
 .post-header {
     margin-bottom: var(--section-gap);
+
+    h1 {
+        // This should visually match up
+        // with the gap between lines in the heading.
+        margin-bottom: 0.2em;
+    }
 }
 
 .post-content {
+    // Block level elements get some space after
     h1, h2, h3, h4, p, ul, ol, blockquote {
         margin-bottom: var(--block-gap);
     }
-    
+
+    // Headings create a new "section" so we want space between the sections
+    // ... but not between a section and a direct subsection
+    :is(h1, h2, h3, h4):not(:is(h1 + h2, h2 + h3, h3 + h4)) {
+        margin-top: var(--section-gap);
+    }
+
     figure {
         margin-bottom: calc(1.5 * var(--block-gap));
     }
-    
-    blockquote :last-child {
-        margin-bottom: 0;
+
+    hr {
+        margin: var(--section-gap) 0;
     }
-    
+
+    .footnote-definition {
+        margin-top: var(--section-gap);
+        --block-gap: .5rem;
+    }
+
+    .footnote-definition + .footnote-definition {
+        margin-top: 0;
+    }
+
+    blockquote :last-child,
     :is(ol, ul) :is(ol, ul) {
         margin-bottom: 0;
     }
-    
-    // Headings create a new "section" so we want space between the sections
-    // ... but not between a section and a direct subsection
-    :is(h1, h2, h3, h4):not(:is(h1 + h2, h2 + h3, h3 + h4)) {
-        margin-top: var(--section-gap);
+
+    // We only want the anchor hanging off to the left side
+    // if there's enough room available.
+    @media (width > ($content-max-width + 2rem)) {
+        :is(h1, h2, h3, h4) .anchor {
+            position: absolute;
+            transform: translateX(-100%) translateX(-0.5ch);
+        }
     }
-    
-    hr {
-        margin: var(--section-gap) 0;
-    }    
 }

Diff for: sass/_reset.scss

@@ -1,8 +1,49 @@
-*, *::before, *::after {
-    font: inherit;
+// This is partially based on <https://piccalil.li/blog/a-more-modern-css-reset/>.
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+// Prevent font size inflation
+:root {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+}
+
+// More sensible line heights
+:root {
+    line-height: 1.5;
+}
+
+h1, h2, h3, h4 {
+    line-height: 1.3;
+}
+
+// Remove default margin in favour of better control in authored CSS
+body, h1, h2, h3, h4, p,
+figure, blockquote, dl, dd {
+    margin: 0;
+}
+
+// Inherit fonts for inputs and buttons
+input,
+button,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+// Remove border in favour of custom styling
+hr {
     color: inherit;
     border: none;
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+}
+
+// Make images and videos easier to work with
+img, picture, video {
+    max-width: 100%;
 }

Diff for: sass/_typography.scss

@@ -3,6 +3,20 @@
 
 h1, h2, h3, h4 {
     font-weight: bold;
+    text-wrap: balance;
+    text-wrap: pretty; // relatively new, so we have balance as fallback.
+
+    .anchor {
+        margin-right: 0.5ch;
+
+        @media (prefers-contrast: no-preference) and (hover: hover) {
+            transition: opacity 125ms;
+
+            &:not(:focus):not(:hover) {
+                opacity: .1;
+            }
+        }
+    }
 }
 
 h1 {
@@ -17,15 +31,6 @@ h3 {
     font-size: 1.2em;
 }
 
-:is(h1, h2, h3, h4):has(.anchor) {
-    position: relative;
-
-    .anchor {
-        position: absolute;
-        transform: translateX(-100%) translateX(-0.5ch);
-    }
-}
-
 a {
     color: var(--fg-color);
     text-decoration: none;
@@ -40,19 +45,26 @@ pre {
 }
 
 hr {
+    --ferris-height: 1em;
+    --ferris-width: calc(var(--ferris-height) * var(--ferris-aspect-ratio));
+    --line-width: 2em;
+    --line-thickness: 2px;
+    --line-gap: 1em;
+    --line-offset: calc(var(--ferris-width) + var(--line-gap));
+
     background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
-    background-position: calc(50% - 2.5em) 50%, calc(50% + 2.5em) 50%;
-    background-size: 2em 2px, 2em 2px;
+    background-position: calc(50% - var(--line-offset)) 50%, calc(50% + var(--line-offset)) 50%;
+    background-size: var(--line-width) var(--line-thickness), var(--line-width) var(--line-thickness);
     background-repeat: no-repeat;
 
     &::before {
         content: "";
         margin: auto;
         display: block;
-        height: 1em;
-        aspect-ratio: 1.5;
+        height: var(--ferris-height);
+        aspect-ratio: var(--ferris-aspect-ratio);
         background-color: currentColor;
-        mask-image: url(./8bit-ferris.svg);
+        mask-image: var(--ferris-image);
         mask-size: contain;
     }
 }
@@ -63,26 +75,10 @@ time {
 
 code {
     font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-    
-    // We don't want long identifiers such as 'package.metadata.playdate.options' 
-    // introducing a scroll bar on small screens.
-    overflow-wrap: break-word; 
-}
-
-sup {
-    font-variant-position: super;
-}
-
-strong {
-    font-weight: bold;
-}
 
-em {
-    font-style: italic;
-}
-
-img, video {
-    max-width: 100%;
+    // We don't want long identifiers such as 'package.metadata.playdate.options'
+    // introducing a scroll bar on small screens.
+    overflow-wrap: break-word;
 }
 
 ul {
@@ -121,10 +117,6 @@ td, th {
     padding: 6px 12px;
 }
 
-th {
-    font-weight: 700;
-}
-
 tr:nth-child(2n) td {
     background-color: var(--bg-1-color);
 }

Diff for: sass/style.scss

@@ -1,20 +1,21 @@
 @import '_reset.scss';
 @import '_palette.scss';
 
+$content-max-width: 50rem;
+
 :root {
     --block-gap: 1rem;
     --section-gap: 2.4rem;
     --box-rounding: 1rem;
-    --content-padding: 2rem; // This padding has to make room for the anchor links
+    --content-padding: 1rem;
+    --ferris-image: url(./8bit-ferris.svg);
+    --ferris-aspect-ratio: 1.5;
 }
 
 :root {
-    font-size: 1.125em;
-    line-height: 1.5;
     font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
     accent-color: var(--accent-color);
     color-scheme: light dark;
-    -webkit-text-size-adjust: none; // Stop iOS Safari from adjusting the font size in landscape.
     color: var(--text-color);
     background-color: var(--bg-0-color);
 
@@ -35,12 +36,13 @@
 }
 
 @import '_typography.scss';
-@import '_form.scss';
+@import '_layout.scss';
 @import '_post-content.scss';
+@import '_form.scss';
 
 body {
     display: grid;
-    grid-template-columns: 1fr minmax(0, 50em) 1fr;
+    grid-template-columns: 1fr minmax(0, $content-max-width) 1fr;
 }
 
 .skip-link {
@@ -57,19 +59,6 @@ body {
     }
 }
 
-.site-header {
-    display: grid;
-    grid-template-columns: subgrid;
-    grid-column: 1 / 4;
-    border-bottom: 2px solid var(--border-color);
-    margin-bottom: var(--section-gap);
-
-    > .wrapper {
-        grid-column: 2;
-        padding: .5rem var(--content-padding);
-    }
-}
-
 .site-title {
     --fg-color: var(--text-color);
     font-size: 1.2em;
@@ -111,21 +100,20 @@ figure {
 }
 
 footer {
-    margin-top: 4rem;
-    background-color: var(--bg-1-color);
+    // 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: 1.5;
+        aspect-ratio: var(--ferris-aspect-ratio);
         background-color: color-mix(in oklab, var(--accent-color), currentColor 20%);
-        mask-image: url(./8bit-ferris.svg);
+        mask-image: var(--ferris-image);
         mask-size: contain;
     }
 
@@ -144,15 +132,6 @@ footer {
     vertical-align: middle;
 }
 
-.anchor {
-    @media (prefers-contrast: no-preference) and (hover: hover) {
-        transition: opacity 125ms;
-        &:not(:focus):not(:hover) {
-            opacity: .1;
-        }
-    }
-}
-
 .social-links {
     list-style: none;
     padding-inline-start: 0; // TODO: only style lists in content
@@ -166,6 +145,7 @@ footer {
 }
 
 .site-footer {
+    background-color: var(--bg-1-color);
     font-size: .9em;
     --block-gap: .5rem;
 
@@ -179,12 +159,3 @@ footer {
         margin-bottom: var(--block-gap);
     }
 }
-
-.footnote-definition {
-    --block-gap: .5rem;
-    margin-top: var(--section-gap);
-}
-
-.footnote-definition + .footnote-definition {
-    margin-top: 0;
-}