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/values/typography | |
| 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/values/typography')
| -rw-r--r-- | scss/values/typography/_constants.scss | 20 | ||||
| -rw-r--r-- | scss/values/typography/_index.scss | 18 |
2 files changed, 38 insertions, 0 deletions
diff --git a/scss/values/typography/_constants.scss b/scss/values/typography/_constants.scss new file mode 100644 index 0000000..4ea0117 --- /dev/null +++ b/scss/values/typography/_constants.scss @@ -0,0 +1,20 @@ +$base-font-size: ( + 'xxl': 1.5rem, + 'xl': 1.2rem, + 'lg': 1.1rem, + 'md': 1rem, + 'sm': 0.9rem, + 'xs': 0.8rem, + 'initial': 0.7rem, +); + +$font-size-factor: ( + '0': 1, + '1': 1.25, + '2': 1.5, + '3': 2, + '4': 2.5, + '5': 3, + '6': 3.5 +); + diff --git a/scss/values/typography/_index.scss b/scss/values/typography/_index.scss new file mode 100644 index 0000000..3aa4384 --- /dev/null +++ b/scss/values/typography/_index.scss @@ -0,0 +1,18 @@ +@use 'sass:map'; + +@use 'constants'; + +@function font-size($font-size-grade, $breakpoint: initial) { + @return calc( + map.get(constants.$base-font-size, $breakpoint) + * map.get(constants.$font-size-factor, $font-size-grade) + ); +} + +@function border-width($breakpoint: initial) { + @return calc( + map.get(constants.$base-font-size, $breakpoint) + / 8 + ); +} + |