From 5d5e2f8aa5c4030c33bf06f2cb817b9d770cc884 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com>
Date: Thu, 21 Dec 2023 21:21:30 +0000
Subject: 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
---
 scss/modules/btn.scss        |  9 +++++++--
 scss/modules/link.scss       | 33 +++++++++++++++----------------
 scss/modules/nav.scss        | 46 ++++++++++++++++++++++++--------------------
 scss/modules/news-index.scss |  7 ++++++-
 4 files changed, 54 insertions(+), 41 deletions(-)

(limited to 'scss/modules')

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
+}
-- 
cgit v1.2.3