public/css/variables/spacing.css


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

:root {
  --margin-inline-md: calc(8 * 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-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;

  /* small screens */

  --grid-total-width: 30rem;
  --grid-padding-relative-eighth-rem: 12;
  --grid-column-count: 4;
  --grid-prose-column-count: 4;
}