diff options
| author | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-22 09:06:27 +0100 |
|---|---|---|
| committer | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-22 09:06:27 +0100 |
| commit | 20b7851aca47525955f151fb39ab485abe5bb140 (patch) | |
| tree | 3e62e5350e34169e02ec9c5f994b017fcb15082a /public/css/variables/spacing.css | |
| parent | 552bb8d624017a4d810e33280e3ae84ab87eed5c (diff) | |
Relativises stuff to relative rem
Diffstat (limited to 'public/css/variables/spacing.css')
| -rw-r--r-- | public/css/variables/spacing.css | 43 |
1 files changed, 30 insertions, 13 deletions
diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css index f57c86c..c9dc726 100644 --- a/public/css/variables/spacing.css +++ b/public/css/variables/spacing.css @@ -1,18 +1,35 @@ :root { - --margin-inline-md: 1.5rem; - --margin-block-lg: 3rem; - --margin-block-md: 2rem; - --margin-block-sm: 1rem; + --margin-inline-md: calc(8 * var(--spacing-relative-eighth-rem)); + --margin-block-lg: calc(16 * var(--spacing-relative-eighth-rem)); + --margin-block-md: calc(10 * var(--spacing-relative-eighth-rem)); + --margin-block-sm: calc(5 * var(--spacing-relative-eighth-rem)); - --padding-inline-lg: 4.25rem; - --padding-inline-md: 2.25rem; - --padding-inline-sm: 0.5rem; - --padding-block-lg: 2.5rem; - --padding-block-md: 1.5rem; - --padding-block-sm: 0.5rem; + --padding-inline-lg: calc(22 * var(--spacing-relative-eighth-rem)); + --padding-inline-md: calc(12 * var(--spacing-relative-eighth-rem)); + --padding-inline-sm: calc(3 * var(--spacing-relative-eighth-rem)); + --padding-block-lg: calc(12 * var(--spacing-relative-eighth-rem)); + --padding-block-md: calc(8 * var(--spacing-relative-eighth-rem)); + --padding-block-sm: calc(5 * var(--spacing-relative-eighth-rem)); - --grid-padding-start: 2.25rem; - --grid-column-width: 6rem; - --grid-gutter-width: 0.5rem; + --grid-padding-start: calc(var(--grid-padding-start-relative-eighth-rem) * var(--spacing-relative-eighth-rem)); + --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--spacing-relative-eighth-rem)); + --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--spacing-relative-eighth-rem)); + + --grid-total-relative-eighth-rem-width: calc( + var(--grid-padding-start-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) + ); + --spacing-relative-eighth-rem: calc( + var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width) + ); + + --grid-column-width-relative-eighth-rem: 32; + --grid-gutter-width-relative-eighth-rem: 4; + + /* small screens */ + + --grid-total-width: 30rem; + --grid-padding-start-relative-eighth-rem: 12; --grid-column-count: 4; } |