blob: a4d1d9152c683e298d39e5739e5cd1d6266a0c11 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
: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;
}
|
