blob: 2533b70126255968012355536b117a7caf013f44 (
plain) (
blame)
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
.basicgrid {
display: flex;
flex-flow: row wrap;
justify-content: stretch;
align-items: start;
gap: var(--gap);
--col-width: 15ch;
& > * {
flex-grow: 1;
flex-shrink: 1;
flex-basis: var(--col-width);
margin: 0;
min-width: 1px;
}
}
.-evenrows { grid-auto-rows: 1fr }
.colwidth-l { --col-width: 35ch }
.colwidth-m { --col-width: 24ch }
.colwidth-s { --col-width: 15ch }
.col-0 { flex-grow: 0 ; flex-basis: calc(0 * var(--col-width)) }
.col-1 { flex-grow: 1 ; flex-basis: calc(1 * var(--col-width)) }
.col-2 { flex-grow: 2 ; flex-basis: calc(2 * var(--col-width)) }
.col-3 { flex-grow: 3 ; flex-basis: calc(3 * var(--col-width)) }
.col-4 { flex-grow: 4 ; flex-basis: calc(4 * var(--col-width)) }
.col-5 { flex-grow: 5 ; flex-basis: calc(5 * var(--col-width)) }
.col-6 { flex-grow: 6 ; flex-basis: calc(6 * var(--col-width)) }
.col-7 { flex-grow: 7 ; flex-basis: calc(7 * var(--col-width)) }
.col-8 { flex-grow: 8 ; flex-basis: calc(8 * var(--col-width)) }
.col-9 { flex-grow: 9 ; flex-basis: calc(9 * var(--col-width)) }
.col-10 { flex-grow: 10; flex-basis: calc(10 * var(--col-width)) }
.col-11 { flex-grow: 11; flex-basis: calc(11 * var(--col-width)) }
.col-12 { flex-grow: 12; flex-basis: calc(12 * var(--col-width)) }
/**/
.textcolumns {
--col-width: 30ch;
column-width: var(--col-width);
column-gap: var(--gap);
margin-block: var(--gap);
& :first-child { margin-block-start: 0 !important }
}
/**/
.fullbleed {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50vw);
}
/**/
.pad {
padding-inline: var(--gap);
}
/**/
.center {
display: flex;
align-items: center;
justify-content: center;
}
/**/
.fixed { position: fixed }
.sticky { position: sticky }
.top { top: 0 }
.right { right: 0 }
.bottom { bottom: 0 }
.left { left: 0 }
|
