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

6 files changed, 134 insertions, 72 deletions

diff --git a/scss/modules/btn.scss b/scss/modules/btn.scss
index 1d52b9c..e9db392 100644
--- a/scss/modules/btn.scss
+++ b/scss/modules/btn.scss
@@ -1,7 +1,5 @@
 .btn {
   display: block;
-  box-sizing: border-box;
-  color: var(--text-color);
   border: solid var(--relative-eighth-rem) var(--text-color);
   font-weight: 600;
   text-align: center;
@@ -33,3 +31,10 @@
 .btn:active {
   transform: scale(1.1, 1.1);
 }
+
+/* Override anchor styling. */
+a.btn {
+  color: var(--text-color);
+  text-decoration: none;
+}
+
diff --git a/scss/modules/link.scss b/scss/modules/link.scss
index dfcabcf..83206d4 100644
--- a/scss/modules/link.scss
+++ b/scss/modules/link.scss
@@ -1,32 +1,31 @@
-.link {
+a, .link {
   color: var(--special-text-color);
   text-decoration-line: underline;
   text-decoration-color: var(--special-text-color);
   text-decoration-thickness: var(--relative-eighth-rem);
   text-underline-offset: var(--relative-eighth-rem);
   border: dotted transparent var(--relative-eighth-rem);
-  border-radius: calc(3 * var(--relative-eighth-rem));
   transition:
     color 100ms,
     text-decoration-color 100ms,
     text-decoration-thickness 100ms,
     border-color 100ms;
-}
 
-.link:is(:hover, :focus, :focus-visible, :focus-within),
-.group-hover:is(:hover, :focus, :focus-visible, :focus-within) .link {
-  text-decoration-color: currentColor;
-  text-decoration-thickness: calc(3 * var(--relative-eighth-rem));
-  transition:
-    color 300ms,
-    text-decoration-color 300ms,
-    text-decoration-thickness 300ms,
-    border-color 300ms;
-}
+  &:is(:hover, :focus, :focus-visible, :focus-within),
+  .group-hover:is(:hover, :focus, :focus-visible, :focus-within) & {
+    text-decoration-color: currentColor;
+    text-decoration-thickness: calc(3 * var(--relative-eighth-rem));
+    transition:
+      color 300ms,
+      text-decoration-color 300ms,
+      text-decoration-thickness 300ms,
+      border-color 300ms;
+  }
 
-.link:focus, .link:focus-visible {
-  box-shadow: none;
-  outline: none;
-  border-color: var(--special-text-color);
+  &:is(:focus, :focus-visible, :focus-within) {
+    box-shadow: none;
+    outline: none;
+    border-color: var(--special-text-color);
+  }
 }
 
diff --git a/scss/modules/nav.scss b/scss/modules/nav.scss
index aebcbcf..765c44f 100644
--- a/scss/modules/nav.scss
+++ b/scss/modules/nav.scss
@@ -1,5 +1,11 @@
-.nav > :not(:last-child) {
-  margin-block: 0 var(--margin-block-sm);
+.nav {
+  & > :not(:last-child) {
+    margin-block: 0 var(--margin-block-sm);
+  }
+
+  li {
+    list-style-type: none;
+  }
 }
 
 .nav__bottom-row {
@@ -44,33 +50,31 @@
   );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-}
 
-.nav__logo a {
-  text-decoration: none;
-  border: var(--relative-eighth-rem) dotted transparent;
-  transition: border-color 100ms;
-}
+  a {
+    text-decoration: none;
+    border: var(--relative-eighth-rem) dotted transparent;
+    transition: border-color 100ms;
 
-.nav__logo a:is(:focus, :focus-visible, :focus-within) {
-  box-shadow: none;
-  outline: none;
-  border-color: var(--special-text-color);
-  transition: border-color 300ms;
+    &:is(:focus, :focus-visible, :focus-within) {
+      box-shadow: none;
+      outline: none;
+      border-color: var(--special-text-color);
+      transition: border-color 300ms;
+    }
+  }
 }
 
 .nav__breadcrumbs {
   display: flex;
   flex-wrap: wrap;
-}
-
-.nav__breadcrumbs li {
-  list-style-type: none;
-  min-width: max-content;
-}
 
-.nav__breadcrumbs li::before {
-  content: '/'
+  li {
+    min-width: max-content;
+    &::before {
+      content: '/'
+    }
+  }
 }
 
 .nav__switch-language-link {
diff --git a/scss/modules/news-index.scss b/scss/modules/news-index.scss
index 0050f70..5d9bab2 100644
--- a/scss/modules/news-index.scss
+++ b/scss/modules/news-index.scss
@@ -8,6 +8,11 @@
   width: var(--width-prose);
 }
 
+a.news-index__item {
+  text-decoration: none;
+  color: var(--text-color);
+}
+
 .news-index__item:not(:first-child) {
   border-top-width: 0;
 }
@@ -28,4 +33,4 @@
 .news-index__item:is(:focus, :focus-visible, :focus-within) {
   border-color: var(--special-text-highlight-color);
   border-style: dotted;
-}
\ No newline at end of file
+}
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;
-}
diff --git a/scss/utils.scss b/scss/utils.scss
index a05a216..f8336eb 100644
--- a/scss/utils.scss
+++ b/scss/utils.scss
@@ -5,3 +5,7 @@
 .font-weight-lighter {
   font-weight: lighter;
 }
+
+li.list-style-none, .list-style-none li {
+  list-style-type: none;
+}