From 0b2fbe3f5b9e2fcf0da2b320af504d5cca759045 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com>
Date: Fri, 19 Jan 2024 07:32:30 +0000
Subject: Layout and typography improvements (#63)

* Adds soft hyphens to homepage

* auto-hyphenates!

* Tighter line-height in logo

* Fixes spacing and typography below xs breakpoint

* Fixes xs-sm spacing and typography

* Fixes border widths

* Link hover uses wavy underline instead of fat underline

* Fixes committee img layout on <xs

* Nice separators between committee members

* Better styling for committee member heading

* Consistent start-end block padding for sections

* Better breadcrumb styling

* Neatens alignment in footer

* Renames scss/variables -> scss/custom-properties

* Pulls out colours SCSS variables

* Merges margins and padding values

* Moves variables/colours -> values/colours

* Starts migrating spacing values to SCSS

* Pulls out typography logic to SCSS variables/functions

* Removes unneeded --er custom property

* Calculates grid-total-width-absolute in SCSS

* Forwards constants with @forward

* Removes TODOs and unnecessary assignment to --width-prose
---
 scss/modules/link.scss | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

(limited to 'scss/modules/link.scss')

diff --git a/scss/modules/link.scss b/scss/modules/link.scss
index 83206d4..2f827c4 100644
--- a/scss/modules/link.scss
+++ b/scss/modules/link.scss
@@ -2,23 +2,19 @@ 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: dotted transparent var(--border-width);
   transition:
     color 100ms,
     text-decoration-color 100ms,
-    text-decoration-thickness 100ms,
     border-color 100ms;
 
   &: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));
+    text-decoration-style: wavy;
     transition:
       color 300ms,
       text-decoration-color 300ms,
-      text-decoration-thickness 300ms,
       border-color 300ms;
   }
 
-- 
cgit v1.2.3