Add Andy Bell's modern CSS reset and flow utility
Complements Utopia scales — same co-creator, same philosophy.

Assisted-by: Claude Opus 4.6 via pi
change mynvwvnkywqtrtnktryztswtyxulyysy
commit 239302df47a1cffff5292a4122df1971a36d085b
author Alpha Chen <alpha@kejadlen.dev>
date
parent zyuqnqkt
diff --git a/lib/views/layout.rb b/lib/views/layout.rb
index 417adc9..b11f844 100644
--- a/lib/views/layout.rb
+++ b/lib/views/layout.rb
@@ -25,6 +25,99 @@ module Views
 
     def css
       <<~CSS
+        /* -------------------- */
+        /* A (more) Modern Reset */
+        /* @link https://piccalil.li/blog/a-more-modern-css-reset/ */
+        /* -------------------- */
+
+        /* Box sizing rules */
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        /* Prevent font size inflation */
+        html {
+          -moz-text-size-adjust: none;
+          -webkit-text-size-adjust: none;
+          text-size-adjust: none;
+        }
+
+        /* Remove default margin in favour of better control in authored CSS */
+        body, h1, h2, h3, h4, p,
+        figure, blockquote, dl, dd {
+          margin-block-end: 0;
+        }
+
+        /* Remove list styles on ul, ol elements with a list role,
+           which suggests default styling will be removed */
+        ul[role='list'],
+        ol[role='list'] {
+          list-style: none;
+        }
+
+        /* Set core body defaults */
+        body {
+          min-height: 100vh;
+          line-height: 1.5;
+        }
+
+        /* Set shorter line heights on headings and interactive elements */
+        h1, h2, h3, h4,
+        button, input, label {
+          line-height: 1.1;
+        }
+
+        /* Balance text wrapping on headings */
+        h1, h2,
+        h3, h4 {
+          text-wrap: balance;
+        }
+
+        /* A elements that don't have a class get default styles */
+        a:not([class]) {
+          text-decoration-skip-ink: auto;
+          color: currentColor;
+        }
+
+        /* Make images easier to work with */
+        img,
+        picture {
+          max-width: 100%;
+          display: block;
+        }
+
+        /* Inherit fonts for inputs and buttons */
+        input, button,
+        textarea, select {
+          font-family: inherit;
+          font-size: inherit;
+        }
+
+        /* Make sure textareas without a rows attribute are not tiny */
+        textarea:not([rows]) {
+          min-height: 10em;
+        }
+
+        /* Anything that has been anchored to should have extra scroll margin */
+        :target {
+          scroll-margin-block: 5ex;
+        }
+
+        /* -------------------- */
+        /* Flow utility — vertical rhythm via Utopia space tokens */
+        /* @link https://piccalil.li/blog/my-favourite-3-lines-of-css/ */
+        /* -------------------- */
+
+        .flow > * + * {
+          margin-block-start: var(--flow-space, var(--space-s));
+        }
+
+        /* -------------------- */
+        /* Utopia fluid type scale */
+        /* -------------------- */
+
         /* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
         :root {
           --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);