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/variables/spacing.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/variables/spacing.scss')
| -rw-r--r-- | scss/variables/spacing.scss | 47 |
1 files changed, 0 insertions, 47 deletions
diff --git a/scss/variables/spacing.scss b/scss/variables/spacing.scss deleted file mode 100644 index a4d1d91..0000000 --- a/scss/variables/spacing.scss +++ /dev/null @@ -1,47 +0,0 @@ -:root { - --margin-inline-md: calc(2 * var(--relative-eighth-rem)); - --margin-block-lg: calc(16 * var(--relative-eighth-rem)); - --margin-block-md: calc(10 * var(--relative-eighth-rem)); - --margin-block-sm: calc(5 * var(--relative-eighth-rem)); - - --padding-inline-lg: calc(4 * var(--relative-eighth-rem)); - --padding-inline-md: calc(2 * var(--relative-eighth-rem)); - --padding-inline-sm: calc(1 * var(--relative-eighth-rem)); - --padding-block-lg: calc(12 * var(--relative-eighth-rem)); - --padding-block-md: calc(8 * var(--relative-eighth-rem)); - --padding-block-sm: calc(5 * var(--relative-eighth-rem)); - - --grid-padding: calc(var(--grid-padding-relative-eighth-rem) * var(--relative-eighth-rem)); - --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--relative-eighth-rem)); - --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--relative-eighth-rem)); - - --grid-total-relative-eighth-rem-width: calc( - var(--grid-padding-relative-eighth-rem) * 2 + - var(--grid-column-width-relative-eighth-rem) * var(--grid-column-count) + - var(--grid-gutter-width-relative-eighth-rem) * (var(--grid-column-count) - 1) - ); - --relative-eighth-rem: calc( - var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width) - ); - --width-prose: calc( - var(--grid-column-width) * var(--grid-prose-column-count) + - var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) - ); - - --grid-column-width-relative-eighth-rem: 32; - --grid-gutter-width-relative-eighth-rem: 4; - - /*********************************************************** - * Generally, we will use columns to keep things laid out * - * nicely. However, on screens narrower than xs, this gets * - * pretty much impossible. So for those screens, we use a * - * single-column layout taking up 100vw. In effect, this * - * is just default CSS layout plus a wee bit padding. From * - * xs widewards, we use multiple columns on a fixed width. * - ***********************************************************/ - - --grid-total-width: 100vw; - --grid-padding-relative-eighth-rem: 8; - --grid-column-count: 1; - --grid-prose-column-count: 1; -} |