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/link.scss | 33 ++++++++++++++++----------------- 1 file changed, 16 insertions(+), 17 deletions(-) (limited to 'scss/modules/link.scss') 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); + } } -- cgit v1.2.3 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 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 From 0cb6960f0c65c0d791ccdee2f5bc2e2b910cfb76 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com> Date: Fri, 19 Jan 2024 09:16:42 +0000 Subject: Uses SCSS partials (#64) --- scss/modules/link.scss | 27 --------------------------- 1 file changed, 27 deletions(-) delete mode 100644 scss/modules/link.scss (limited to 'scss/modules/link.scss') diff --git a/scss/modules/link.scss b/scss/modules/link.scss deleted file mode 100644 index 2f827c4..0000000 --- a/scss/modules/link.scss +++ /dev/null @@ -1,27 +0,0 @@ -a, .link { - color: var(--special-text-color); - text-decoration-line: underline; - text-decoration-color: var(--special-text-color); - border: dotted transparent var(--border-width); - transition: - color 100ms, - text-decoration-color 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-style: wavy; - transition: - color 300ms, - text-decoration-color 300ms, - border-color 300ms; - } - - &:is(:focus, :focus-visible, :focus-within) { - box-shadow: none; - outline: none; - border-color: var(--special-text-color); - } -} - -- cgit v1.2.3