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
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);