vowel 0.6.2 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/package.json +1 -1
- package/plugins/markdown/index.js +24 -17
- package/stylesheets/DefaultStyles.css +505 -385
- package/stylesheets/TypographyStyles.css +7 -64
- package/stylesheets/brand-colors.css +119 -0
|
@@ -5,387 +5,400 @@
|
|
|
5
5
|
|
|
6
6
|
@layer reset, typography, default;
|
|
7
7
|
|
|
8
|
+
body {
|
|
9
|
+
border: 4px solid var(--success-13);
|
|
10
|
+
}
|
|
8
11
|
|
|
9
12
|
|
|
10
13
|
@layer default {
|
|
11
14
|
:root {
|
|
12
|
-
|
|
13
|
-
--
|
|
14
|
-
--accent-02: oklch(0.8924089806120152 0.08826670827983002 90.24115342246611);
|
|
15
|
-
--accent-03: oklch(0.844618 0.14828222329121668 90.24115342246611);
|
|
16
|
-
--accent-04: oklch(0.7854571400878614 0.18029922017024758 90.24115342246611);
|
|
17
|
-
--accent-05: oklch(0.7110252520511524 0.16670758498691426 90.24115342246611);
|
|
18
|
-
--accent-06: oklch(0.6307554338482158 0.15012908092125463 90.24115342246611);
|
|
19
|
-
--accent-07: oklch(0.5558748958282139 0.12696710517027307 90.24115342246611);
|
|
20
|
-
--accent-08: oklch(0.4945 0.09203251189041753 90.24115342246611);
|
|
21
|
-
--accent-09: oklch(0.38727951482578865 0.05695363236371703 90.24115342246611);
|
|
22
|
-
--accent-10: oklch(0.24916012628129958 0.03201699687903088 90.24115342246611);
|
|
23
|
-
--accent-11: oklch(0.11046170738630641 0.01528852137867617 90.24115342246611);
|
|
24
|
-
--danger-00: oklch(1 0.037138530373020395 -25.754653176550182);
|
|
25
|
-
--danger-01: oklch(0.9536456092315344 0.037138530373020395 -25.754653176550182);
|
|
26
|
-
--danger-02: oklch(0.8924089806120152 0.0908858065656466 -25.754653176550182);
|
|
27
|
-
--danger-03: oklch(0.844618 0.15656415898125758 -25.754653176550182);
|
|
28
|
-
--danger-04: oklch(0.7854571400878614 0.2115084537674326 -25.754653176550182);
|
|
29
|
-
--danger-05: oklch(0.7110252520511524 0.250891532499265 -25.754653176550182);
|
|
30
|
-
--danger-06: oklch(0.6307554338482158 0.22556107485827934 -25.754653176550182);
|
|
31
|
-
--danger-07: oklch(0.5558748958282139 0.1952478556703251 -25.754653176550182);
|
|
32
|
-
--danger-08: oklch(0.4945 0.15069063355165543 -25.754653176550182);
|
|
33
|
-
--danger-09: oklch(0.38727951482578865 0.1036689817070561 -25.754653176550182);
|
|
34
|
-
--danger-10: oklch(0.24916012628129958 0.058004850702477094 -25.754653176550182);
|
|
35
|
-
--danger-11: oklch(0.11046170738630641 0.02748297973358925 -25.754653176550182);
|
|
36
|
-
--info-00: oklch(1 0.032559707682643824 244.1900622367698);
|
|
37
|
-
--info-01: oklch(0.9536456092315344 0.032559707682643824 244.1900622367698);
|
|
38
|
-
--info-02: oklch(0.8924089806120152 0.07422782322853594 244.1900622367698);
|
|
39
|
-
--info-03: oklch(0.844618 0.12605888808084453 244.1900622367698);
|
|
40
|
-
--info-04: oklch(0.7854571400878614 0.17799411987422387 244.1900622367698);
|
|
41
|
-
--info-05: oklch(0.7110252520511524 0.22040488113200302 244.1900622367698);
|
|
42
|
-
--info-06: oklch(0.6307554338482158 0.25495777982975243 244.1900622367698);
|
|
43
|
-
--info-07: oklch(0.5558748958282139 0.2223980721471087 244.1900622367698);
|
|
44
|
-
--info-08: oklch(0.4945 0.18072995660121655 244.1900622367698);
|
|
45
|
-
--info-09: oklch(0.38727951482578865 0.12889889174890792 244.1900622367698);
|
|
46
|
-
--info-10: oklch(0.24916012628129958 0.0769636599555286 244.1900622367698);
|
|
47
|
-
--info-11: oklch(0.11046170738630641 0.034552898697749426 244.1900622367698);
|
|
48
|
-
--primary-00: oklch(1 0.033943473040194294 -82.72000000000003);
|
|
49
|
-
--primary-01: oklch(0.9536456092315344 0.033943473040194294 -82.72000000000003);
|
|
50
|
-
--primary-02: oklch(0.8924089806120152 0.07208713732898053 -82.72000000000003);
|
|
51
|
-
--primary-03: oklch(0.844618 0.10967407324412015 -82.72000000000003);
|
|
52
|
-
--primary-04: oklch(0.7854571400878614 0.14835354282702512 -82.72000000000003);
|
|
53
|
-
--primary-05: oklch(0.7110252520511524 0.1870407118569507 -82.72000000000003);
|
|
54
|
-
--primary-06: oklch(0.6307554338482158 0.2246513001779757 -82.72000000000003);
|
|
55
|
-
--primary-07: oklch(0.5558748958282139 0.2627985040398166 -82.72000000000003);
|
|
56
|
-
--primary-08: oklch(0.4945 0.297278 -82.72000000000003);
|
|
57
|
-
--primary-09: oklch(0.38727951482578865 0.22519086267101945 -82.72000000000003);
|
|
58
|
-
--primary-10: oklch(0.24916012628129958 0.1489244571729748 -82.72000000000003);
|
|
59
|
-
--primary-11: oklch(0.11046170738630641 0.07262669982202441 -82.72000000000003);
|
|
60
|
-
--secondary-00: oklch(1 0.03523506763462919 174.9674);
|
|
61
|
-
--secondary-01: oklch(0.9536456092315344 0.03523506763462919 174.9674);
|
|
62
|
-
--secondary-02: oklch(0.8924089806120152 0.12226651611616707 174.9674);
|
|
63
|
-
--secondary-03: oklch(0.844618 0.159299 174.9674);
|
|
64
|
-
--secondary-04: oklch(0.7854571400878614 0.14932563102137283 174.9674);
|
|
65
|
-
--secondary-05: oklch(0.7110252520511524 0.13708788342722794 174.9674);
|
|
66
|
-
--secondary-06: oklch(0.6307554338482158 0.12406393236537076 174.9674);
|
|
67
|
-
--secondary-07: oklch(0.5558748958282139 0.09651562296811833 174.9674);
|
|
68
|
-
--secondary-08: oklch(0.4945 0.06639390943163861 174.9674);
|
|
69
|
-
--secondary-09: oklch(0.38727951482578865 0.037032483883832935 174.9674);
|
|
70
|
-
--secondary-10: oklch(0.24916012628129958 0.02375390884349093 174.9674);
|
|
71
|
-
--secondary-11: oklch(0.11046170738630641 0.011400212679566413 174.9674);
|
|
72
|
-
--success-00: oklch(1 0.024257111887574123 148.30000439636984);
|
|
73
|
-
--success-01: oklch(0.9536456092315344 0.024257111887574123 148.30000439636984);
|
|
74
|
-
--success-02: oklch(0.8924089806120152 0.07351482341637697 148.30000439636984);
|
|
75
|
-
--success-03: oklch(0.844618 0.12466168066207778 148.30000439636984);
|
|
76
|
-
--success-04: oklch(0.7854571400878614 0.15042101659568144 148.30000439636984);
|
|
77
|
-
--success-05: oklch(0.7110252520511524 0.13948969668297212 148.30000439636984);
|
|
78
|
-
--success-06: oklch(0.6307554338482158 0.1261639047081073 148.30000439636984);
|
|
79
|
-
--success-07: oklch(0.5558748958282139 0.10791110186311959 148.30000439636984);
|
|
80
|
-
--success-08: oklch(0.4945 0.07690619317930446 148.30000439636984);
|
|
81
|
-
--success-09: oklch(0.38727951482578865 0.0457513376060701 148.30000439636984);
|
|
82
|
-
--success-10: oklch(0.24916012628129958 0.02575933593360364 148.30000439636984);
|
|
83
|
-
--success-11: oklch(0.11046170738630641 0.012313506052849059 148.30000439636984);
|
|
84
|
-
--tertiary-00: oklch(1 0.034046389815560296 2.791302501092794);
|
|
85
|
-
--tertiary-01: oklch(0.9536456092315344 0.034046389815560296 2.791302501092794);
|
|
86
|
-
--tertiary-02: oklch(0.8924089806120152 0.08421751016426371 2.791302501092794);
|
|
87
|
-
--tertiary-03: oklch(0.844618 0.14726059081820986 2.791302501092794);
|
|
88
|
-
--tertiary-04: oklch(0.7854571400878614 0.19873235540856865 2.791302501092794);
|
|
89
|
-
--tertiary-05: oklch(0.7110252520511524 0.23494450943888123 2.791302501092794);
|
|
90
|
-
--tertiary-06: oklch(0.6307554338482158 0.21174506900632417 2.791302501092794);
|
|
91
|
-
--tertiary-07: oklch(0.5558748958282139 0.1839025285604721 2.791302501092794);
|
|
92
|
-
--tertiary-08: oklch(0.4945 0.14178977136603388 2.791302501092794);
|
|
93
|
-
--tertiary-09: oklch(0.38727951482578865 0.09664947566806639 2.791302501092794);
|
|
94
|
-
--tertiary-10: oklch(0.24916012628129958 0.053320044751899345 2.791302501092794);
|
|
95
|
-
--tertiary-11: oklch(0.11046170738630641 0.025277009084351466 2.791302501092794);
|
|
96
|
-
--warning-00: oklch(1 0.033978843637678835 61.19378984733035);
|
|
97
|
-
--warning-01: oklch(0.9536456092315344 0.033978843637678835 61.19378984733035);
|
|
98
|
-
--warning-02: oklch(0.8924089806120152 0.09727044978770355 61.19378984733035);
|
|
99
|
-
--warning-03: oklch(0.844618 0.16243636817381144 61.19378984733035);
|
|
100
|
-
--warning-04: oklch(0.7854571400878614 0.19844507360799077 61.19378984733035);
|
|
101
|
-
--warning-05: oklch(0.7110252520511524 0.18312495283983363 61.19378984733035);
|
|
102
|
-
--warning-06: oklch(0.6307554338482158 0.164466229970312 61.19378984733035);
|
|
103
|
-
--warning-07: oklch(0.5558748958282139 0.1383102018356785 61.19378984733035);
|
|
104
|
-
--warning-08: oklch(0.4945 0.10117462382028729 61.19378984733035);
|
|
105
|
-
--warning-09: oklch(0.38727951482578865 0.06390117110643204 61.19378984733035);
|
|
106
|
-
--warning-10: oklch(0.24916012628129958 0.03600870543417937 61.19378984733035);
|
|
107
|
-
--warning-11: oklch(0.11046170738630641 0.017183679327988338 61.19378984733035);
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
/* main */
|
|
111
|
-
--primary-text-color: light-dark(var(--primary-11), var(--primary-01));
|
|
112
|
-
--primary-heading-color: light-dark(var(--primary-10), var(--primary-02));
|
|
113
|
-
--primary-link-color: light-dark(var(--secondary-07), var(--secondary-03));
|
|
114
|
-
--primary-link-hover-color: light-dark(var(--secondary-06), var(--secondary-04));
|
|
115
|
-
--primary-border-color: light-dark(var(--primary-03), var(--primary-09));
|
|
116
|
-
|
|
117
|
-
/* secondary */
|
|
118
|
-
--secondary-text-color: light-dark(var(--secondary-11), var(--secondary-01));
|
|
119
|
-
--secondary-heading-color: light-dark(var(--secondary-09), var(--secondary-03));
|
|
15
|
+
/* main brand color */
|
|
16
|
+
--primary: oklch(0.5 0.297 -82.720);
|
|
120
17
|
|
|
121
|
-
/*
|
|
122
|
-
--
|
|
123
|
-
--code-background: light-dark(var(--primary-01), var(--primary-10));
|
|
124
|
-
--soft-background: light-dark(var(--primary-01), var(--primary-10));
|
|
18
|
+
/* reinforcing brand color */
|
|
19
|
+
--secondary: oklch(0.5 0.159 174.967);
|
|
125
20
|
|
|
126
|
-
/*
|
|
127
|
-
--
|
|
128
|
-
--warning-text: light-dark(var(--warning-10), var(--warning-01));
|
|
129
|
-
--warning-border: light-dark(var(--warning-02), var(--warning-08));
|
|
130
|
-
--warning-heading: light-dark(var(--warning-08), var(--warning-02));
|
|
131
|
-
|
|
132
|
-
--danger-background: light-dark(var(--danger-01), var(--danger-10));
|
|
133
|
-
--danger-text: light-dark(var(--danger-10), var(--danger-01));
|
|
134
|
-
--danger-border: light-dark(var(--danger-02), var(--danger-08));
|
|
135
|
-
--danger-heading: light-dark(var(--danger-08), var(--danger-02));
|
|
136
|
-
|
|
137
|
-
--success-background: light-dark(var(--success-01), var(--success-10));
|
|
138
|
-
--success-text: light-dark(var(--success-10), var(--success-01));
|
|
139
|
-
--success-border: light-dark(var(--success-02), var(--success-08));
|
|
140
|
-
--success-heading: light-dark(var(--success-08), var(--success-02));
|
|
141
|
-
|
|
142
|
-
--note-background: light-dark(var(--note-01), var(--note-10));
|
|
143
|
-
--note-text: light-dark(var(--note-10), var(--note-01));
|
|
144
|
-
--node-border: light-dark(var(--node-02), var(--node-08));
|
|
145
|
-
--note-heading: light-dark(var(--note-08), var(--note-02));
|
|
146
|
-
}
|
|
21
|
+
/* harmonious complement to brand colors */
|
|
22
|
+
--tertiary: oklch(0.5 0.234 2.791);
|
|
147
23
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
}
|
|
24
|
+
/* contrast to brand colors */
|
|
25
|
+
--accent: oklch(0.5 0.180 90.241);
|
|
151
26
|
|
|
27
|
+
/* green for success */
|
|
28
|
+
--success: oklch(0.5 0.150 148.300);
|
|
152
29
|
|
|
153
|
-
|
|
30
|
+
/* blue for info */
|
|
31
|
+
--info: oklch(0.5 0.254 244.190);
|
|
154
32
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
font-family: var(--font-sans);
|
|
158
|
-
max-width: min(100ch, 100vi - 10vw);
|
|
159
|
-
margin-inline: auto;
|
|
160
|
-
margin-bottom: 5em;
|
|
161
|
-
display: flex;
|
|
162
|
-
flex-direction: column;
|
|
163
|
-
align-items: center;
|
|
164
|
-
gap: 4rem 1rem;
|
|
33
|
+
/* orange for warnings */
|
|
34
|
+
--warning: oklch(0.5 0.198 61.193);
|
|
165
35
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
max-width: 80ch;
|
|
169
|
-
}
|
|
170
|
-
}
|
|
36
|
+
/* red for danger */
|
|
37
|
+
--danger: oklch(0.5 0.250 -25.754);
|
|
171
38
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
margin-bottom: auto;
|
|
175
|
-
padding-bottom: 4rem;
|
|
176
|
-
display: grid;
|
|
177
|
-
gap: 1rem;
|
|
178
|
-
flex-wrap: wrap;
|
|
179
|
-
align-items: baseline;
|
|
180
|
-
column-gap: 0.5rem;
|
|
181
|
-
}
|
|
39
|
+
/* vertical space between main sections */
|
|
40
|
+
--large-gap: 3em;
|
|
182
41
|
|
|
183
|
-
|
|
42
|
+
/* vertical space within content */
|
|
43
|
+
--small-gap: 2em;
|
|
184
44
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
}
|
|
188
|
-
}
|
|
45
|
+
/* horizontal space between items */
|
|
46
|
+
--gutter: 2em;
|
|
189
47
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
}
|
|
48
|
+
/* main body maximum width */
|
|
49
|
+
--width: 100ch;
|
|
193
50
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
51
|
+
/* borders */
|
|
52
|
+
--border-radius-tight: 5px;
|
|
53
|
+
--border-radius-loose: calc(1rem + 5px);
|
|
197
54
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
/* display: inline !important; */
|
|
201
|
-
font-size: 0.9em;
|
|
202
|
-
opacity: 0.8;
|
|
203
|
-
}
|
|
55
|
+
/* strength of colors (between 0 and 1) */
|
|
56
|
+
--saturation: 0.5;
|
|
204
57
|
|
|
205
|
-
|
|
58
|
+
/* difference between dark and light colors (between 0 and 1) */
|
|
59
|
+
--contrast: 0.5;
|
|
206
60
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
background: var(--main-background);
|
|
210
|
-
}
|
|
61
|
+
/* darkness of dark colors (between 0 and 1) */
|
|
62
|
+
--shadows: 0.5;
|
|
211
63
|
|
|
212
|
-
|
|
213
|
-
|
|
64
|
+
/* brightness of light colors (between 0 and 1) */
|
|
65
|
+
--highlights: 0.5;
|
|
214
66
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
}
|
|
218
|
-
}
|
|
67
|
+
/* strength of colorful colors (between 0 and 1) */
|
|
68
|
+
--vibrance: 0.5;
|
|
219
69
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
background: var(--code-background);
|
|
223
|
-
}
|
|
70
|
+
/* difference between colorful colors and muted colors (between 0 and 1) */
|
|
71
|
+
--fade: 0.5;
|
|
224
72
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
73
|
+
/* backgrounds */
|
|
74
|
+
--main-background: light-dark(var(--primary-00), var(--primary-11));
|
|
75
|
+
--soft-background: light-dark(var(--primary-01), var(--primary-10));
|
|
228
76
|
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
77
|
+
/* main colors */
|
|
78
|
+
--primary-text-color: light-dark(var(--primary-10), var(--primary-01));
|
|
79
|
+
--primary-heading-color: light-dark(var(--primary-09), var(--primary-02));
|
|
80
|
+
--primary-link-color: light-dark(var(--secondary-09), var(--secondary-02));
|
|
81
|
+
--primary-link-hover-color: light-dark(var(--secondary-07), var(--secondary-04));
|
|
82
|
+
--primary-border-color: light-dark(var(--primary-02), var(--primary-09));
|
|
83
|
+
|
|
84
|
+
/* secondary colors */
|
|
85
|
+
--secondary-text-color: light-dark(var(--secondary-10), var(--secondary-01));
|
|
86
|
+
--secondary-heading-color: light-dark(var(--secondary-09), var(--secondary-02));
|
|
87
|
+
--secondary-link-color: light-dark(var(--tertiary-09), var(--tertiary-02));
|
|
88
|
+
--secondary-link-hover-color: light-dark(var(--tertiary-07), var(--tertiary-04));
|
|
89
|
+
|
|
90
|
+
/* accent colors */
|
|
91
|
+
--accent-text-color: light-dark(var(--tertiary-07), var(--tertiary-04));
|
|
92
|
+
--accent-link-color: light-dark(var(--primary-06), var(--primary-05));
|
|
93
|
+
--accent-background-color: light-dark(var(--primary-02), var(--primary-09));
|
|
94
|
+
--accent-background: linear-gradient(in oklch to bottom right, light-dark(var(--primary-02), var(--primary-09)),
|
|
95
|
+
light-dark(var(--secondary-03), var(--secondary-08)));
|
|
96
|
+
--accent-border-color: light-dark(var(--primary-03), var(--primary-08));
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
/* calculations - DO NOT EDIT */
|
|
100
|
+
|
|
101
|
+
--contrast-scaled: calc(1 / calc(1 - calc(clamp(0, var(--contrast), 0.999) * 1)));
|
|
102
|
+
--shadows-scaled: calc(7 / calc(2 - calc(clamp(0, var(--shadows), 0.999))));
|
|
103
|
+
--highlights-scaled: calc(1 - calc(calc(calc(clamp(0, var(--highlights), 0.999) * 0.5) + 0.25) * 2));
|
|
104
|
+
--saturation-scaled: calc(calc(1.6 - calc(clamp(0, var(--saturation), 0.999) * 1.6)) * 1.4);
|
|
105
|
+
--saturation-difference: calc(1 - var(--saturation-scaled));
|
|
106
|
+
--contrast-divisor: calc(11 + var(--shadows-scaled));
|
|
107
|
+
|
|
108
|
+
--contrast-01: atan(calc(0 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
|
|
109
|
+
--contrast-02: atan(calc(1 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
|
|
110
|
+
--contrast-03: atan(calc(2 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
|
|
111
|
+
--contrast-04: atan(calc(3 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
|
|
112
|
+
--contrast-05: atan(calc(4 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
|
|
113
|
+
--contrast-06: atan(calc(5 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
|
|
114
|
+
--contrast-07: atan(calc(6 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
|
|
115
|
+
--contrast-08: atan(calc(7 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
|
|
116
|
+
--contrast-09: atan(calc(8 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
|
|
117
|
+
--contrast-10: atan(calc(9 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
|
|
118
|
+
--contrast-11: atan(calc(10 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
|
|
119
|
+
--contrast-12: atan(calc(11 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
|
|
120
|
+
|
|
121
|
+
--shade-01: calc(calc(calc(var(--contrast-01) - 1) / -2) - var(--highlights-scaled));
|
|
122
|
+
--shade-02: calc(calc(calc(var(--contrast-02) - 1) / -2) - var(--highlights-scaled));
|
|
123
|
+
--shade-03: calc(calc(calc(var(--contrast-03) - 1) / -2) - var(--highlights-scaled));
|
|
124
|
+
--shade-04: calc(calc(calc(var(--contrast-04) - 1) / -2) - var(--highlights-scaled));
|
|
125
|
+
--shade-05: calc(calc(calc(var(--contrast-05) - 1) / -2) - var(--highlights-scaled));
|
|
126
|
+
--shade-06: calc(calc(calc(var(--contrast-06) - 1) / -2) - var(--highlights-scaled));
|
|
127
|
+
--shade-07: calc(calc(calc(var(--contrast-07) - 1) / -2) - var(--highlights-scaled));
|
|
128
|
+
--shade-08: calc(calc(calc(var(--contrast-08) - 1) / -2) - var(--highlights-scaled));
|
|
129
|
+
--shade-09: calc(calc(calc(var(--contrast-09) - 1) / -2) - var(--highlights-scaled));
|
|
130
|
+
--shade-10: calc(calc(calc(var(--contrast-10) - 1) / -2) - var(--highlights-scaled));
|
|
131
|
+
--shade-11: calc(calc(calc(var(--contrast-11) - 1) / -2) - var(--highlights-scaled));
|
|
132
|
+
--shade-12: calc(calc(calc(var(--contrast-12) - 1) / -2) - var(--highlights-scaled));
|
|
133
|
+
|
|
134
|
+
--vibrance-difference: calc(1 - clamp(0.001, var(--vibrance), 0.999));
|
|
135
|
+
--fade-scaled: calc(1 / calc(1 - clamp(0.001, var(--fade), 0.999)));
|
|
136
|
+
|
|
137
|
+
--atan-01: calc(1 - abs(calc(atan(calc(0 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
|
|
138
|
+
--atan-02: calc(1 - abs(calc(atan(calc(1 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
|
|
139
|
+
--atan-03: calc(1 - abs(calc(atan(calc(2 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
|
|
140
|
+
--atan-04: calc(1 - abs(calc(atan(calc(3 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
|
|
141
|
+
--atan-05: calc(1 - abs(calc(atan(calc(4 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
|
|
142
|
+
--atan-06: calc(1 - abs(calc(atan(calc(5 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
|
|
143
|
+
--atan-07: calc(1 - abs(calc(atan(calc(6 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
|
|
144
|
+
--atan-08: calc(1 - abs(calc(atan(calc(7 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
|
|
145
|
+
--atan-09: calc(1 - abs(calc(atan(calc(8 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
|
|
146
|
+
--atan-10: calc(1 - abs(calc(atan(calc(9 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
|
|
147
|
+
--atan-11: calc(1 - abs(calc(atan(calc(10 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
|
|
148
|
+
--atan-12: calc(1 - abs(calc(atan(calc(11 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
|
|
149
|
+
|
|
150
|
+
--chroma-01: calc(calc(var(--atan-01) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
|
|
151
|
+
--chroma-02: calc(calc(var(--atan-02) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
|
|
152
|
+
--chroma-03: calc(calc(var(--atan-03) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
|
|
153
|
+
--chroma-04: calc(calc(var(--atan-04) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
|
|
154
|
+
--chroma-05: calc(calc(var(--atan-05) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
|
|
155
|
+
--chroma-06: calc(calc(var(--atan-06) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
|
|
156
|
+
--chroma-07: calc(calc(var(--atan-07) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
|
|
157
|
+
--chroma-08: calc(calc(var(--atan-08) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
|
|
158
|
+
--chroma-09: calc(calc(var(--atan-09) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
|
|
159
|
+
--chroma-10: calc(calc(var(--atan-10) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
|
|
160
|
+
--chroma-11: calc(calc(var(--atan-11) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
|
|
161
|
+
--chroma-12: calc(calc(var(--atan-12) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
|
|
162
|
+
|
|
163
|
+
--primary-00: oklch(from var(--primary) var(--shade-01) calc(c * var(--chroma-01)) h);
|
|
164
|
+
--primary-01: oklch(from var(--primary) var(--shade-02) calc(c * var(--chroma-02)) h);
|
|
165
|
+
--primary-02: oklch(from var(--primary) var(--shade-03) calc(c * var(--chroma-03)) h);
|
|
166
|
+
--primary-03: oklch(from var(--primary) var(--shade-04) calc(c * var(--chroma-04)) h);
|
|
167
|
+
--primary-04: oklch(from var(--primary) var(--shade-05) calc(c * var(--chroma-05)) h);
|
|
168
|
+
--primary-05: oklch(from var(--primary) var(--shade-06) calc(c * var(--chroma-06)) h);
|
|
169
|
+
--primary-06: oklch(from var(--primary) var(--shade-07) calc(c * var(--chroma-07)) h);
|
|
170
|
+
--primary-07: oklch(from var(--primary) var(--shade-08) calc(c * var(--chroma-08)) h);
|
|
171
|
+
--primary-08: oklch(from var(--primary) var(--shade-09) calc(c * var(--chroma-09)) h);
|
|
172
|
+
--primary-09: oklch(from var(--primary) var(--shade-10) calc(c * var(--chroma-10)) h);
|
|
173
|
+
--primary-10: oklch(from var(--primary) var(--shade-11) calc(c * var(--chroma-11)) h);
|
|
174
|
+
--primary-11: oklch(from var(--primary) var(--shade-12) calc(c * var(--chroma-12)) h);
|
|
175
|
+
|
|
176
|
+
--secondary-00: oklch(from var(--secondary) var(--shade-01) calc(c * var(--chroma-01)) h);
|
|
177
|
+
--secondary-01: oklch(from var(--secondary) var(--shade-02) calc(c * var(--chroma-02)) h);
|
|
178
|
+
--secondary-02: oklch(from var(--secondary) var(--shade-03) calc(c * var(--chroma-03)) h);
|
|
179
|
+
--secondary-03: oklch(from var(--secondary) var(--shade-04) calc(c * var(--chroma-04)) h);
|
|
180
|
+
--secondary-04: oklch(from var(--secondary) var(--shade-05) calc(c * var(--chroma-05)) h);
|
|
181
|
+
--secondary-05: oklch(from var(--secondary) var(--shade-06) calc(c * var(--chroma-06)) h);
|
|
182
|
+
--secondary-06: oklch(from var(--secondary) var(--shade-07) calc(c * var(--chroma-07)) h);
|
|
183
|
+
--secondary-07: oklch(from var(--secondary) var(--shade-08) calc(c * var(--chroma-08)) h);
|
|
184
|
+
--secondary-08: oklch(from var(--secondary) var(--shade-09) calc(c * var(--chroma-09)) h);
|
|
185
|
+
--secondary-09: oklch(from var(--secondary) var(--shade-10) calc(c * var(--chroma-10)) h);
|
|
186
|
+
--secondary-10: oklch(from var(--secondary) var(--shade-11) calc(c * var(--chroma-11)) h);
|
|
187
|
+
--secondary-11: oklch(from var(--secondary) var(--shade-12) calc(c * var(--chroma-12)) h);
|
|
188
|
+
|
|
189
|
+
--tertiary-00: oklch(from var(--tertiary) var(--shade-01) calc(c * var(--chroma-01)) h);
|
|
190
|
+
--tertiary-01: oklch(from var(--tertiary) var(--shade-02) calc(c * var(--chroma-02)) h);
|
|
191
|
+
--tertiary-02: oklch(from var(--tertiary) var(--shade-03) calc(c * var(--chroma-03)) h);
|
|
192
|
+
--tertiary-03: oklch(from var(--tertiary) var(--shade-04) calc(c * var(--chroma-04)) h);
|
|
193
|
+
--tertiary-04: oklch(from var(--tertiary) var(--shade-05) calc(c * var(--chroma-05)) h);
|
|
194
|
+
--tertiary-05: oklch(from var(--tertiary) var(--shade-06) calc(c * var(--chroma-06)) h);
|
|
195
|
+
--tertiary-06: oklch(from var(--tertiary) var(--shade-07) calc(c * var(--chroma-07)) h);
|
|
196
|
+
--tertiary-07: oklch(from var(--tertiary) var(--shade-08) calc(c * var(--chroma-08)) h);
|
|
197
|
+
--tertiary-08: oklch(from var(--tertiary) var(--shade-09) calc(c * var(--chroma-09)) h);
|
|
198
|
+
--tertiary-09: oklch(from var(--tertiary) var(--shade-10) calc(c * var(--chroma-10)) h);
|
|
199
|
+
--tertiary-10: oklch(from var(--tertiary) var(--shade-11) calc(c * var(--chroma-11)) h);
|
|
200
|
+
--tertiary-11: oklch(from var(--tertiary) var(--shade-12) calc(c * var(--chroma-12)) h);
|
|
201
|
+
|
|
202
|
+
--accent-00: oklch(from var(--accent) var(--shade-01) calc(c * var(--chroma-01)) h);
|
|
203
|
+
--accent-01: oklch(from var(--accent) var(--shade-02) calc(c * var(--chroma-02)) h);
|
|
204
|
+
--accent-02: oklch(from var(--accent) var(--shade-03) calc(c * var(--chroma-03)) h);
|
|
205
|
+
--accent-03: oklch(from var(--accent) var(--shade-04) calc(c * var(--chroma-04)) h);
|
|
206
|
+
--accent-04: oklch(from var(--accent) var(--shade-05) calc(c * var(--chroma-05)) h);
|
|
207
|
+
--accent-05: oklch(from var(--accent) var(--shade-06) calc(c * var(--chroma-06)) h);
|
|
208
|
+
--accent-06: oklch(from var(--accent) var(--shade-07) calc(c * var(--chroma-07)) h);
|
|
209
|
+
--accent-07: oklch(from var(--accent) var(--shade-08) calc(c * var(--chroma-08)) h);
|
|
210
|
+
--accent-08: oklch(from var(--accent) var(--shade-09) calc(c * var(--chroma-09)) h);
|
|
211
|
+
--accent-09: oklch(from var(--accent) var(--shade-10) calc(c * var(--chroma-10)) h);
|
|
212
|
+
--accent-10: oklch(from var(--accent) var(--shade-11) calc(c * var(--chroma-11)) h);
|
|
213
|
+
--accent-11: oklch(from var(--accent) var(--shade-12) calc(c * var(--chroma-12)) h);
|
|
214
|
+
|
|
215
|
+
/* automatic dark mode */
|
|
216
|
+
color-scheme: light dark;
|
|
235
217
|
}
|
|
236
218
|
|
|
237
|
-
|
|
238
|
-
list-style: none;
|
|
239
|
-
padding: 0;
|
|
219
|
+
/* body */
|
|
240
220
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
221
|
+
html {
|
|
222
|
+
background: var(--main-background);
|
|
223
|
+
color: var(--primary-text-color);
|
|
244
224
|
}
|
|
245
225
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
226
|
+
body {
|
|
227
|
+
align-items: center;
|
|
228
|
+
display: flex;
|
|
229
|
+
flex-direction: column;
|
|
230
|
+
gap: var(--large-gap);
|
|
231
|
+
margin-inline: auto;
|
|
232
|
+
max-width: min(var(--width), 100vi - 10vw);
|
|
233
|
+
overflow-y: scroll;
|
|
234
|
+
padding-block: var(--large-gap);
|
|
249
235
|
}
|
|
250
236
|
|
|
251
|
-
|
|
252
|
-
|
|
237
|
+
a,
|
|
238
|
+
a:visited {
|
|
239
|
+
color: var(--primary-link-color);
|
|
253
240
|
}
|
|
254
241
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
main>img {
|
|
258
|
-
margin-bottom: 2.5rem;
|
|
242
|
+
a:hover {
|
|
243
|
+
color: var(--primary-link-hover-color);
|
|
259
244
|
}
|
|
260
245
|
|
|
246
|
+
/* frontmatter */
|
|
247
|
+
|
|
248
|
+
/* TODO: Only render contents when necessary */
|
|
261
249
|
nav[aria-label=Contents]:has(>ol:empty),
|
|
262
250
|
nav[aria-label=Contents]:has(>ol>li:only-of-type>a) {
|
|
263
251
|
display: none;
|
|
264
252
|
}
|
|
265
253
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
nav[aria-label=Contents] {
|
|
269
|
-
grid-column: 2;
|
|
270
|
-
grid-row-start: 3;
|
|
271
|
-
height: 0px;
|
|
272
|
-
overflow: visible;
|
|
273
|
-
}
|
|
254
|
+
main>:not(section) {
|
|
255
|
+
color: var(--primary-heading-color);
|
|
274
256
|
}
|
|
275
257
|
|
|
258
|
+
time {
|
|
259
|
+
font-weight: 500;
|
|
260
|
+
}
|
|
276
261
|
|
|
262
|
+
/* table of contents */
|
|
277
263
|
|
|
278
264
|
nav[aria-label=Contents] {
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
265
|
+
|
|
266
|
+
/* top-level items */
|
|
267
|
+
&>ol {
|
|
268
|
+
list-style: none;
|
|
269
|
+
padding: 0;
|
|
270
|
+
|
|
271
|
+
&:before {
|
|
272
|
+
content: "Contents";
|
|
273
|
+
color: var(--primary-heading-color);
|
|
274
|
+
font-weight: 500;
|
|
275
|
+
}
|
|
289
276
|
}
|
|
290
277
|
|
|
291
|
-
|
|
278
|
+
/* subitems */
|
|
279
|
+
ol {
|
|
292
280
|
list-style: none;
|
|
293
|
-
width: max-content;
|
|
294
|
-
margin: 0;
|
|
295
281
|
padding: 0;
|
|
296
282
|
|
|
297
|
-
|
|
298
|
-
|
|
283
|
+
ol {
|
|
284
|
+
padding-left: 1em;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
@media (width >=700px) {
|
|
291
|
+
nav[aria-label=Contents] {
|
|
292
|
+
top: var(--large-gap);
|
|
293
|
+
|
|
294
|
+
grid-column: 2;
|
|
295
|
+
grid-row-start: 3;
|
|
296
|
+
height: 0px;
|
|
297
|
+
overflow: visible;
|
|
298
|
+
position: sticky;
|
|
299
|
+
|
|
300
|
+
&>ol {
|
|
301
|
+
height: calc(100vh - var(--large-gap));
|
|
302
|
+
|
|
303
|
+
overflow-y: auto;
|
|
304
|
+
overflow-x: hidden;
|
|
299
305
|
}
|
|
300
306
|
}
|
|
301
307
|
}
|
|
302
308
|
|
|
303
|
-
/*
|
|
309
|
+
/* header */
|
|
304
310
|
|
|
305
311
|
header {
|
|
306
|
-
|
|
312
|
+
color: var(--primary-heading-color);
|
|
313
|
+
|
|
314
|
+
align-items: center;
|
|
307
315
|
display: flex;
|
|
308
316
|
flex-direction: row;
|
|
309
317
|
flex-wrap: wrap;
|
|
310
|
-
|
|
311
|
-
|
|
318
|
+
gap: var(--small-gap) var(--gutter);
|
|
319
|
+
width: 100%;
|
|
312
320
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
margin-bottom: 0.5em;
|
|
317
|
-
font-size: 1.5em;
|
|
321
|
+
a#title,
|
|
322
|
+
a#logo {
|
|
323
|
+
color: inherit;
|
|
318
324
|
}
|
|
319
325
|
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
background: var(--primary-10);
|
|
326
|
+
#tagline {
|
|
327
|
+
display: none;
|
|
328
|
+
}
|
|
324
329
|
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
330
|
+
#logo {
|
|
331
|
+
|
|
332
|
+
/*
|
|
333
|
+
The URL of the SVG is applied as a variable to
|
|
334
|
+
the element in an inline style declaration. This
|
|
335
|
+
makes the SVG available to use as a mask, which
|
|
336
|
+
can allows coloring via background.
|
|
337
|
+
*/
|
|
338
|
+
background: currentColor;
|
|
339
|
+
mask-image: var(--logo-url);
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
#logo img {
|
|
343
|
+
height: 1.3cap;
|
|
344
|
+
width: auto;
|
|
345
|
+
|
|
346
|
+
/*
|
|
347
|
+
If the logo is colored via the background, then
|
|
348
|
+
the image itself should hide.
|
|
349
|
+
*/
|
|
350
|
+
visibility: hidden;
|
|
328
351
|
}
|
|
329
352
|
|
|
330
353
|
nav {
|
|
354
|
+
background: var(--soft-background);
|
|
355
|
+
border-radius: var(--border-radius-tight);
|
|
331
356
|
border: 1px solid var(--primary-border-color);
|
|
332
|
-
padding:
|
|
357
|
+
padding-inline: var(--gutter);
|
|
358
|
+
|
|
359
|
+
display: flex;
|
|
360
|
+
flex-direction: column;
|
|
361
|
+
justify-content: flex-start;
|
|
333
362
|
width: 100%;
|
|
334
363
|
|
|
335
|
-
|
|
336
|
-
|
|
364
|
+
ul {
|
|
365
|
+
list-style: none;
|
|
366
|
+
display: flex;
|
|
367
|
+
padding: 1em 0;
|
|
368
|
+
gap: var(--gutter);
|
|
369
|
+
flex-wrap: wrap;
|
|
337
370
|
}
|
|
338
371
|
|
|
339
|
-
|
|
340
|
-
|
|
372
|
+
ul+ul {
|
|
373
|
+
/*
|
|
374
|
+
TODO: This should be replaced with a gap decoration
|
|
375
|
+
at some point in the near future.
|
|
376
|
+
*/
|
|
377
|
+
border-top: 1px solid var(--primary-border-color);
|
|
341
378
|
}
|
|
342
379
|
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
display: flex;
|
|
346
|
-
column-gap: 2rem;
|
|
347
|
-
flex-wrap: wrap;
|
|
348
|
-
justify-content: flex-start;
|
|
349
|
-
background: var(--soft-background);
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
nav:has(+ nav) {
|
|
353
|
-
border-bottom: none;
|
|
354
|
-
border-bottom-left-radius: 0;
|
|
355
|
-
border-bottom-right-radius: 0;
|
|
356
|
-
|
|
357
|
-
&:after {
|
|
358
|
-
display: block;
|
|
359
|
-
content: '';
|
|
360
|
-
border-bottom: 1px solid var(--primary-border-color);
|
|
361
|
-
flex-basis: 100%;
|
|
362
|
-
margin-block: 0.7rem;
|
|
380
|
+
[aria-current="page"] {
|
|
381
|
+
color: var(--secondary-link-color);
|
|
363
382
|
}
|
|
364
383
|
}
|
|
365
|
-
|
|
366
|
-
nav+nav {
|
|
367
|
-
border-top-left-radius: 0;
|
|
368
|
-
border-top-right-radius: 0;
|
|
369
|
-
border-top: none;
|
|
370
|
-
margin-top: 0;
|
|
371
|
-
}
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
nav[aria-label=Breadcrumbs]>a:only-child {
|
|
375
|
-
display: none;
|
|
376
384
|
}
|
|
377
385
|
|
|
378
386
|
nav[aria-label=Breadcrumbs] {
|
|
379
387
|
text-transform: uppercase;
|
|
380
|
-
color: var(--primary-
|
|
388
|
+
color: var(--primary-link-color);
|
|
381
389
|
|
|
382
|
-
a
|
|
383
|
-
|
|
390
|
+
a,
|
|
391
|
+
a:visited {
|
|
392
|
+
color: inherit;
|
|
384
393
|
}
|
|
385
394
|
}
|
|
386
395
|
|
|
387
396
|
/* Sidebar */
|
|
388
397
|
|
|
398
|
+
body>aside {
|
|
399
|
+
margin-top: auto;
|
|
400
|
+
}
|
|
401
|
+
|
|
389
402
|
aside nav {
|
|
390
403
|
margin-inline: auto;
|
|
391
404
|
|
|
@@ -422,131 +435,238 @@
|
|
|
422
435
|
}
|
|
423
436
|
}
|
|
424
437
|
|
|
425
|
-
/*
|
|
438
|
+
/* main */
|
|
426
439
|
|
|
427
|
-
|
|
428
|
-
|
|
440
|
+
main,
|
|
441
|
+
article {
|
|
442
|
+
display: grid;
|
|
443
|
+
column-gap: 3em;
|
|
444
|
+
row-gap: 1em;
|
|
445
|
+
|
|
446
|
+
&>* {
|
|
447
|
+
min-width: 0;
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
@media (width >=700px) {
|
|
452
|
+
main {
|
|
453
|
+
grid-template-columns: 3fr 1fr;
|
|
454
|
+
}
|
|
429
455
|
}
|
|
430
456
|
|
|
431
|
-
/* Main */
|
|
432
457
|
|
|
433
458
|
p:where([itemprop=description]),
|
|
434
|
-
|
|
459
|
+
#content>p:first-of-type {
|
|
435
460
|
font-size: 1.3em;
|
|
436
461
|
color: var(--secondary-text-color);
|
|
437
462
|
}
|
|
438
463
|
|
|
439
|
-
article a {
|
|
440
|
-
display: flex;
|
|
441
|
-
flex-direction: column;
|
|
442
|
-
row-gap: 1em;
|
|
443
464
|
|
|
444
|
-
|
|
445
|
-
|
|
465
|
+
main {
|
|
466
|
+
width: 95vw;
|
|
467
|
+
max-width: min(80ch, 100%);
|
|
468
|
+
/* margin-bottom: var(--large-gap); */
|
|
469
|
+
|
|
470
|
+
&>*:not(nav[aria-label=Contents]) {
|
|
471
|
+
grid-column: 1;
|
|
446
472
|
}
|
|
447
|
-
}
|
|
448
473
|
|
|
449
|
-
|
|
450
|
-
order: -1;
|
|
451
|
-
}
|
|
474
|
+
/* content */
|
|
452
475
|
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
476
|
+
section#content {
|
|
477
|
+
display: flex;
|
|
478
|
+
flex-direction: column;
|
|
479
|
+
gap: 1em;
|
|
457
480
|
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
font-size: 1.6rem;
|
|
461
|
-
}
|
|
481
|
+
a {
|
|
482
|
+
color: var(--primary-link-color);
|
|
462
483
|
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
484
|
+
&:hover {
|
|
485
|
+
color: var(--primary-link-hover-color);
|
|
486
|
+
}
|
|
487
|
+
}
|
|
466
488
|
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
}
|
|
489
|
+
img {
|
|
490
|
+
border-radius: var(--border-radius-tight);
|
|
491
|
+
}
|
|
471
492
|
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
493
|
+
pre,
|
|
494
|
+
:not(pre)>code {
|
|
495
|
+
background: linear-gradient(in oklch to bottom left,
|
|
496
|
+
light-dark(var(--primary-02), var(--primary-09)),
|
|
497
|
+
light-dark(var(--primary-01), var(--primary-10)));
|
|
498
|
+
border: 1px solid var(--code-border);
|
|
499
|
+
}
|
|
475
500
|
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
501
|
+
blockquote {
|
|
502
|
+
border-left: 5px solid var(--primary-border-color);
|
|
503
|
+
}
|
|
479
504
|
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
505
|
+
th,
|
|
506
|
+
td {
|
|
507
|
+
border-bottom: 1px solid var(--border-color-softer);
|
|
508
|
+
}
|
|
483
509
|
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
510
|
+
hr {
|
|
511
|
+
border-top: 1px solid var(--primary-text-color);
|
|
512
|
+
}
|
|
487
513
|
|
|
488
|
-
|
|
489
|
-
--icon: 'ℹ️';
|
|
490
|
-
background: var(--info-background);
|
|
491
|
-
color: var(--info-text);
|
|
492
|
-
border-left: 3px solid var(--info-border);
|
|
514
|
+
/* page list */
|
|
493
515
|
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
516
|
+
&>ul._ {
|
|
517
|
+
display: flex;
|
|
518
|
+
flex-direction: column;
|
|
519
|
+
gap: 1em;
|
|
520
|
+
list-style: none;
|
|
521
|
+
padding: 0;
|
|
522
|
+
}
|
|
498
523
|
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
524
|
+
article {
|
|
525
|
+
border: 1px solid var(--primary-border-color);
|
|
526
|
+
background: var(--soft-background);
|
|
527
|
+
border-radius: var(--border-radius-loose);
|
|
528
|
+
padding: 2rem;
|
|
529
|
+
display: flex;
|
|
530
|
+
flex-direction: column;
|
|
504
531
|
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
}
|
|
532
|
+
img {
|
|
533
|
+
order: -1;
|
|
534
|
+
}
|
|
509
535
|
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
border-left: 3px solid var(--warning-border);
|
|
536
|
+
a {
|
|
537
|
+
display: flex;
|
|
538
|
+
flex-direction: column;
|
|
539
|
+
row-gap: 1em;
|
|
515
540
|
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
541
|
+
&>* {
|
|
542
|
+
margin: 0;
|
|
543
|
+
}
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
article a,
|
|
547
|
+
article a:hover {
|
|
548
|
+
color: unset;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
h1 {
|
|
552
|
+
grid-area: title;
|
|
553
|
+
font-size: 1.6rem;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
p {
|
|
557
|
+
font-size: 1.6rem;
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
|
|
562
|
+
/* alerts */
|
|
563
|
+
|
|
564
|
+
aside.alert {
|
|
565
|
+
--color-00: oklch(from var(--color) var(--shade-01) calc(c * var(--chroma-01)) h);
|
|
566
|
+
--color-01: oklch(from var(--color) var(--shade-02) calc(c * var(--chroma-02)) h);
|
|
567
|
+
--color-02: oklch(from var(--color) var(--shade-03) calc(c * var(--chroma-03)) h);
|
|
568
|
+
--color-03: oklch(from var(--color) var(--shade-04) calc(c * var(--chroma-04)) h);
|
|
569
|
+
--color-04: oklch(from var(--color) var(--shade-05) calc(c * var(--chroma-05)) h);
|
|
570
|
+
--color-05: oklch(from var(--color) var(--shade-06) calc(c * var(--chroma-06)) h);
|
|
571
|
+
--color-06: oklch(from var(--color) var(--shade-07) calc(c * var(--chroma-07)) h);
|
|
572
|
+
--color-07: oklch(from var(--color) var(--shade-08) calc(c * var(--chroma-08)) h);
|
|
573
|
+
--color-08: oklch(from var(--color) var(--shade-09) calc(c * var(--chroma-09)) h);
|
|
574
|
+
--color-09: oklch(from var(--color) var(--shade-10) calc(c * var(--chroma-10)) h);
|
|
575
|
+
--color-10: oklch(from var(--color) var(--shade-11) calc(c * var(--chroma-11)) h);
|
|
576
|
+
--color-11: oklch(from var(--color) var(--shade-12) calc(c * var(--chroma-12)) h);
|
|
577
|
+
|
|
578
|
+
&.danger {
|
|
579
|
+
--color: var(--danger);
|
|
580
|
+
--icon: '⛔️';
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
&.note {
|
|
584
|
+
--color: var(--info);
|
|
585
|
+
--icon: 'ℹ️';
|
|
586
|
+
}
|
|
520
587
|
|
|
588
|
+
&.success {
|
|
589
|
+
--color: var(--success);
|
|
590
|
+
--icon: '💡';
|
|
591
|
+
}
|
|
521
592
|
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
border-left: 3px solid var(--danger-border);
|
|
593
|
+
&.warning {
|
|
594
|
+
--color: var(--warning);
|
|
595
|
+
--icon: '⚠️';
|
|
596
|
+
}
|
|
527
597
|
|
|
528
|
-
|
|
529
|
-
|
|
598
|
+
--gradient: radial-gradient(at top right in oklch,
|
|
599
|
+
light-dark(var(--color-03), var(--color-08)),
|
|
600
|
+
light-dark(var(--color-02), var(--color-09)));
|
|
601
|
+
--text: light-dark(var(--color-10), var(--color-01));
|
|
602
|
+
--border: light-dark(var(--color-04), var(--color-06));
|
|
603
|
+
--heading: light-dark(var(--color-08), var(--color-02));
|
|
604
|
+
|
|
605
|
+
padding: 1.5rem 2rem;
|
|
606
|
+
background: var(--gradient);
|
|
607
|
+
color: var(--text);
|
|
608
|
+
border-left: 3px solid var(--border);
|
|
609
|
+
|
|
610
|
+
h2 {
|
|
611
|
+
color: var(--heading);
|
|
612
|
+
|
|
613
|
+
&:before {
|
|
614
|
+
font-size: 0.8em;
|
|
615
|
+
margin-right: 0.7rem;
|
|
616
|
+
opacity: 0.9;
|
|
617
|
+
content: var(--icon);
|
|
618
|
+
}
|
|
619
|
+
}
|
|
620
|
+
}
|
|
530
621
|
}
|
|
531
622
|
}
|
|
623
|
+
}
|
|
532
624
|
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
625
|
+
/* footer */
|
|
626
|
+
|
|
627
|
+
footer {
|
|
628
|
+
text-align: center;
|
|
629
|
+
/* margin-top: var(--large-gap); */
|
|
630
|
+
}
|
|
536
631
|
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
632
|
+
/* homepage */
|
|
633
|
+
|
|
634
|
+
body.home {
|
|
635
|
+
|
|
636
|
+
/*
|
|
637
|
+
Single-column layout
|
|
638
|
+
*/
|
|
639
|
+
main {
|
|
640
|
+
grid-template-columns: 1fr;
|
|
541
641
|
}
|
|
542
642
|
|
|
543
|
-
|
|
544
|
-
|
|
643
|
+
/*
|
|
644
|
+
Hero tagline
|
|
645
|
+
*/
|
|
646
|
+
#tagline {
|
|
647
|
+
background-image: var(--accent-background);
|
|
648
|
+
border-radius: var(--border-radius-loose);
|
|
649
|
+
border: 1px solid var(--accent-border-color);
|
|
650
|
+
color: var(--accent-text-color);
|
|
651
|
+
padding-block: var(--large-gap);
|
|
652
|
+
|
|
653
|
+
display: block;
|
|
654
|
+
order: 1;
|
|
655
|
+
text-align: center;
|
|
656
|
+
width: 100%;
|
|
545
657
|
}
|
|
546
|
-
}
|
|
547
658
|
|
|
548
|
-
/*
|
|
659
|
+
/*
|
|
660
|
+
Hide breadcrumbs
|
|
661
|
+
*/
|
|
662
|
+
[aria-label=Breadcrumbs] {
|
|
663
|
+
display: none;
|
|
664
|
+
}
|
|
549
665
|
|
|
550
|
-
|
|
551
|
-
|
|
666
|
+
/*
|
|
667
|
+
Hide h1
|
|
668
|
+
*/
|
|
669
|
+
&>main>h1 {
|
|
670
|
+
display: none;
|
|
671
|
+
}
|
|
552
672
|
}
|