From f238321f4dcfaa95b33e615966a703a0b211c663 Mon Sep 17 00:00:00 2001
From: Ynda Jas <yndajas@gmail.com>
Date: Sat, 2 Dec 2023 04:11:34 +0000
Subject: [PATCH] Update CSS reset

[A newer version][1] has been published since I added this. This
updates a few rules to be more in line with that version. Exceptions
include:
- keeping the previous heading line height and margin styling
- keeping the `prefers-reduced-motion` rule. There shouldn't be any
  animation on the site at present - and perhaps never - but I'm keeping
  this just in case. [A Twitter thread][2] suggests it's still useful,
  just not needed in the reset for Andy/Set Studio because they always
  include it elsewhere

[1]: https://andy-bell.co.uk/a-more-modern-css-reset
[2]: https://x.com/IAmBramSmulders/status/1703813783976657043
---
 assets/styles/reset.css | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/assets/styles/reset.css b/assets/styles/reset.css
index 99d8729..e645125 100644
--- a/assets/styles/reset.css
+++ b/assets/styles/reset.css
@@ -5,7 +5,12 @@
   box-sizing: border-box;
 }
 
-/* Remove default margin */
+/* Prevent font size inflation */
+html {
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
 body,
 h1,
 h2,
@@ -34,11 +39,19 @@ html:focus-within {
 body {
   min-height: 100vh;
   line-height: 1.5;
-  text-rendering: optimizespeed;
+}
+
+/* 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]) {
+  color: currentcolor;
   text-decoration-skip-ink: auto;
 }
 
@@ -57,6 +70,16 @@ select {
   font: 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;
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   html:focus-within {