From 17bd5c22baab3941e28b5ea0721215b353481f30 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 16 Oct 2024 08:41:36 +0200
Subject: [PATCH] Improvment to reset plus spelling fix.

---
 assets/sass/_reset.scss                  | 32 +++++++++++++++---------
 assets/sass/base/document/_document.scss |  4 +--
 assets/sass/base/forms/_forms.scss       |  6 +++++
 assets/sass/base/grouping/_grouping.scss |  6 ++---
 assets/sass/base/images/_images.scss     |  2 +-
 5 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/assets/sass/_reset.scss b/assets/sass/_reset.scss
index 0c5b592..15dbd2b 100644
--- a/assets/sass/_reset.scss
+++ b/assets/sass/_reset.scss
@@ -3,25 +3,22 @@
 
 // Document
 
+// Use the saner border-box model for all elements.
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 html {
   // Prevent adjustments of font size.
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
-  // On short pages, we want any background gradients to fill the entire height
-  // of the browser.
-  min-height: 100%;
-  // Use the saner border-box model.
-  box-sizing: border-box;
   // Improve text rendering.
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
-
-// Use the saner border-box model for all elements.
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
+  // Activate transition to intrinsic sizes like auto and fit-content.
+  interpolate-size: allow-keywords;
 }
 
 // Sections
@@ -30,6 +27,9 @@ body {
   // Remove the margin in all browsers.
   margin: 0;
   padding: 0;
+  // On short pages, we want the body to fill the entire height
+  // of the browser.
+  min-height: 100vh;
 }
 
 // Embedded content
@@ -82,3 +82,11 @@ kbd,
 samp {
   font-family: var(--ff-monospace);
 }
+
+// Numbers
+
+td,
+math,
+time[datetime*=":"] {
+  font-variant-numeric: tabular-nums lining-nums;
+}
diff --git a/assets/sass/base/document/_document.scss b/assets/sass/base/document/_document.scss
index 5a25cc5..0e3f96f 100644
--- a/assets/sass/base/document/_document.scss
+++ b/assets/sass/base/document/_document.scss
@@ -5,13 +5,13 @@ html {
   font-family: var(--ff-body);
   // Set base font size in percent.
   font-size: calc(#{$base-font-size} / 16 * 100%);
-  // Correct the line height in all browsers.
-  line-height: $base-line-height;
   // Set text colour.
   color: var(--color-text);
 }
 
 body {
+  // Correct the line height in all browsers.
+  line-height: $base-line-height;
   // Output a horizontal grid to help with debugging typography. The
   // $debug variable will toggle its output.
   @include debug-grid();
diff --git a/assets/sass/base/forms/_forms.scss b/assets/sass/base/forms/_forms.scss
index 0fa61b8..d0d89f0 100644
--- a/assets/sass/base/forms/_forms.scss
+++ b/assets/sass/base/forms/_forms.scss
@@ -51,6 +51,12 @@ textarea {
   width: Min(30em, 100%);
 }
 
+
+// Make sure textareas without a rows attribute are not tiny.
+textarea:not([rows]) {
+  min-height: 10em
+}
+
 // For forms with multibple fields show submit button below the form.
 input:not(:only-of-type),
 textarea {
diff --git a/assets/sass/base/grouping/_grouping.scss b/assets/sass/base/grouping/_grouping.scss
index eb03840..bcd895b 100644
--- a/assets/sass/base/grouping/_grouping.scss
+++ b/assets/sass/base/grouping/_grouping.scss
@@ -13,7 +13,7 @@
 blockquote {
   // Add vertical rhythm margins.
   @include margin-block(0 1);
-  // Nicer text wrap, e.g. no lone work on last line.
+  // Nicer text wrap, e.g. no lone word on last line.
   text-wrap: pretty;
   // Also indent the quote on both sides.
   margin-inline: var(--indent-amount);
@@ -51,7 +51,7 @@ menu {
 }
 
 li {
-  // Nicer text wrap, e.g. no lone work on last line.
+  // Nicer text wrap, e.g. no lone word on last line.
   text-wrap: pretty;
   // Set max text line width in main for readability.
   .main & {
@@ -78,7 +78,7 @@ hr {
 p {
   // Add vertical rhythm margins.
   @include margin-block(0 1);
-  // Nicer text wrap, e.g. no lone work on last line.
+  // Nicer text wrap, e.g. no lone word on last line.
   text-wrap: pretty;
 
   // Set max text line width in main for readability.
diff --git a/assets/sass/base/images/_images.scss b/assets/sass/base/images/_images.scss
index 1094877..246522c 100644
--- a/assets/sass/base/images/_images.scss
+++ b/assets/sass/base/images/_images.scss
@@ -38,7 +38,7 @@ figure {
       padding-block-start: var(--image-padding);
       // Set max text line width in main for readability.
       max-width: var(--max-line-width);
-      // Nicer text wrap, e.g. no lone work on last line.
+      // Nicer text wrap, e.g. no lone word on last line.
       text-wrap: pretty;
 
       @include respond-to(s) {