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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
.textcolumns {
--col-width: 30ch;
column-width: var(--col-width);
column-gap: var(--gap);
margin-block: var(--gap);
& :first-child { margin-block-start: 0 !important }
}
.text-align\:center {
text-align: center;
}
.center {
display: grid;
place-items: center;
}
/**/
.container {
max-inline-size: var(--eff-line-length);
margin-inline: auto;
}
.fullbleed {
position: relative;
max-width: none;
width: var(--full-width);
left: 50%;
transform: translateX(calc(-.5 * var(--full-width)));
border-radius: 0;
border-inline: none;
}
.fullscreen {
height: 100vh;
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50vw);
border-radius: 0;
border-inline: none;
}
.width\:100\% { width:100%; max-width: 100% }
.height\:100\% { height:100%; max-height: 100% }
/**/
/* margin-trim had better be implemented soon */
:is(
body,
.box,
[role=menu],
.sidebar-layout > header,
[role=tabpanel],
figure,
details,
dialog,
aside,
fieldset,
dd,
td,
th
) {
&>:first-child:first-child:first-child:first-child,
&>:first-child>:first-child:first-child:first-child,
&>:first-child>:first-child>:first-child:first-child,
&>:first-child>:first-child>:first-child>:first-child { margin-block-start: 0; }
&>:last-child:last-child:last-child:last-child,
&>:last-child>:last-child:last-child:last-child,
&>:last-child>:last-child>:last-child:last-child,
&>:last-child>:last-child>:last-child>:last-child { margin-block-end: 0; }
}
/**/
.padding { padding: var(--gap) }
.padding-block { padding-block: var(--gap) }
.padding-block-start { padding-block-start: var(--gap) }
.padding-block-end { padding-block-end: var(--gap) }
.padding-inline { padding-inline: var(--gap) }
.padding-inline-start { padding-inline-start: var(--gap) }
.padding-inline-end { padding-inline-end: var(--gap) }
.margin { margin: var(--gap) }
.margin-block { margin-block: var(--gap) }
.margin-block-start { margin-block-start: var(--gap) }
.margin-block-end { margin-block-end: var(--gap) }
.margin-inline { margin-inline: var(--gap) }
.margin-inline-start { margin-inline-start: var(--gap) }
.margin-inline-end { margin-inline-end: var(--gap) }
.flow-gap {
& > :not(:last-child) {
margin-bottom: var(--gap);
}
}
/**/
.inline { display: inline }
.block { display: block }
.contents { display: contents }
.table {
display: table;
width: 100%;
margin: 0;
}
.row, .rows > * {
display: table-row;
&:not(:last-child):not([specificity-hack]) > * {
margin-bottom: var(--gap);
}
& > *:not([specificity-hack]) {
display: table-cell;
vertical-align: top;
}
& > * + *:not([specificity-hack]) {
margin-inline-start: var(--gap);
display: inline-block;
}
}
/**/
.big {
font-size: 1.4em;
line-height: calc(1.5 * var(--rhythm));
}
/**/
.nested-list ul, .nested-list ol {
margin-block: 0;
}
/**/
.fixed { position: fixed }
.sticky { position: sticky }
.top { top: 0 }
.right { right: 0 }
.bottom { bottom: 0 }
.left { left: 0 }
.float\:left { float: left }
.float\:right { float: right }
.overflow\:auto { overflow: auto }
.overflow\:scroll { overflow: scroll }
|
