diff options
| author | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-26 08:24:35 +0100 |
|---|---|---|
| committer | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-26 08:24:35 +0100 |
| commit | 0128568e2221f1d0d5df9fe3a1ab6e5911c0655a (patch) | |
| tree | 17141b6a9910a8edea9bd02d293414f79dc0c9f0 /public/css/variables/spacing.css | |
| parent | 4e4486f60ea2a09a91a875f20f276ad2693ddfaf (diff) | |
Adds xs breakpoint
Diffstat (limited to 'public/css/variables/spacing.css')
| -rw-r--r-- | public/css/variables/spacing.css | 23 |
1 files changed, 15 insertions, 8 deletions
diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css index c384783..a4d1d91 100644 --- a/public/css/variables/spacing.css +++ b/public/css/variables/spacing.css @@ -1,12 +1,12 @@ :root { - --margin-inline-md: calc(8 * var(--relative-eighth-rem)); + --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(22 * var(--relative-eighth-rem)); - --padding-inline-md: calc(12 * var(--relative-eighth-rem)); - --padding-inline-sm: calc(3 * 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)); @@ -31,10 +31,17 @@ --grid-column-width-relative-eighth-rem: 32; --grid-gutter-width-relative-eighth-rem: 4; - /* small screens */ + /*********************************************************** + * 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: 15rem; + --grid-total-width: 100vw; --grid-padding-relative-eighth-rem: 8; - --grid-column-count: 4; - --grid-prose-column-count: 4; + --grid-column-count: 1; + --grid-prose-column-count: 1; } |