diff options
| author | Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com> | 2024-01-19 07:32:30 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-01-19 07:32:30 +0000 |
| commit | 0b2fbe3f5b9e2fcf0da2b320af504d5cca759045 (patch) | |
| tree | 6616775cbd5090eca7656eefa45dc2767a602d2f /scss/base/typography.scss | |
| parent | da96287803ea26f4cc35173f9f34b71a1d6adfa5 (diff) | |
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
Diffstat (limited to 'scss/base/typography.scss')
| -rw-r--r-- | scss/base/typography.scss | 13 |
1 files changed, 7 insertions, 6 deletions
diff --git a/scss/base/typography.scss b/scss/base/typography.scss index 9f40bcc..4dd0afb 100644 --- a/scss/base/typography.scss +++ b/scss/base/typography.scss @@ -5,6 +5,7 @@ body { letter-spacing: 0.03rem; line-height: 1.5; word-wrap: break-word; + hyphens: auto; } h1 { @@ -12,7 +13,7 @@ h1 { } h1:not(:first-child) { - margin-block-start: var(--margin-block-lg); + margin-block-start: var(--spacing-block-lg); } h2 { @@ -20,7 +21,7 @@ h2 { } h2:not(:first-child) { - margin-block-start: var(--margin-block-lg); + margin-block-start: var(--spacing-block-lg); } h3 { @@ -28,7 +29,7 @@ h3 { } h3:not(:first-child) { - margin-block-start: var(--margin-block-md); + margin-block-start: var(--spacing-block-md); } h4 { @@ -36,7 +37,7 @@ h4 { } h4:not(:first-child) { - margin-block-start: var(--margin-block-sm); + margin-block-start: var(--spacing-block-sm); } h1, @@ -53,7 +54,7 @@ h4 { font-family: var(--font-serif); font-size: var(--font-size-6); font-weight: 700; - margin-block-start: var(--margin-block-sm); + margin-block-start: var(--spacing-block-sm); text-wrap: balance; } @@ -63,7 +64,7 @@ h4 { } :is(p, ol, ul):not(:first-child) { - margin-block-start: var(--margin-block-sm); + margin-block-start: var(--spacing-block-sm); } :is(p, h1, h2, h3, h4) { |