Improve CSS reset (#51)

* Font size inflation

* Removes main adjustment for IE

* Documents hr corrections

* Documents pre corrections

* Documents abbr[title] corrections

* Documents b, strong corrections

* Squishes pre rule with code,kbd,samp

* Documents sub,sub line-height fix

* Removes IE fix for img borders

* Documents form control resets

* Documents details display:block

* Documents summary correction

* Removes [hidden] fix for IE

* Adds border-box sizing rules

* Refactors links

1 files changed, 76 insertions, 31 deletions

diff --git a/scss/normalize.scss b/scss/normalize.scss
index 9d59ef8..0f7e02f 100644
--- a/scss/normalize.scss
+++ b/scss/normalize.scss
@@ -1,3 +1,9 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 :root,
 html,
 body,
@@ -22,31 +28,48 @@ h4 {
   padding: 0;
 }
 
+/*
+ * Prevent font size inflation
+ * https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
+ */
 html {
-  -webkit-text-size-adjust: 100%;
-}
-
-main {
-  display: block;
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
 }
 
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
 hr {
   box-sizing: content-box;
   height: 0;
   overflow: visible;
 }
 
-pre {
-  font-family: monospace, monospace;
-  font-size: 1em;
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code, kbd, pre, samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
 abbr[title] {
   border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
 }
 
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
 b,
 strong {
   font-weight: bolder;
@@ -56,8 +79,12 @@ small {
   font-size: 80%;
 }
 
-sub,
-sup {
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+@mixin baseline-adjustment {
   font-size: 75%;
   line-height: 0;
   position: relative;
@@ -65,48 +92,66 @@ sup {
 }
 
 sub {
+  @include baseline-adjustment;
   bottom: -0.25em;
 }
 
 sup {
+  @include baseline-adjustment;
   top: -0.5em;
 }
 
-img {
-  border-style: none;
-}
-
-button, [type='button'], [type='reset'], [type='submit'] {
+@mixin form-control-reset {
   font-family: inherit;
   font-size: 100%;
   line-height: 1.15;
-  text-transform: none;
-  overflow: visible;
+  margin: 0;
+  text-transform: none; /* For buttons (Firefox, Edge) and selects (Firefox) */
 }
 
-:is(button, [type='button'], [type='reset'], [type='submit'])::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
+:is(
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit']
+) {
+  @include form-control-reset;
+  text-transform: none;
+
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  &::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  &:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
 }
 
-:is(button, [type='button'], [type='reset'], [type='submit']):-moz-focusring {
-  outline: 1px dotted ButtonText;
+input,
+optgroup,
+select,
+textarea {
+  @include form-control-reset;
 }
 
+/**
+ * Corrects the display in Firefox and Edge.
+ */
 details {
   display: block;
 }
 
+/*
+ * Add the correct display in all browsers.
+ */
 summary {
   display: list-item;
 }
 
-[hidden] {
-  display: none;
-}
-
-a, :link, :visited {
-  background-color: transparent;
-  color: currentColor;
-  text-decoration: none;
-}