the home site for me: also iteration 3 or 4 of my site
feat: add better link styling and fix header links
+355
-334
+26
-5
sass/css/mods.css
+26
-5
sass/css/mods.css
···
2
2
padding: 0.625rem 0 0 0;
3
3
display: flex;
4
4
flex-direction: row;
5
-
gap: 0.25rem;
6
5
flex-wrap: wrap;
7
6
justify-content: flex-end;
8
7
align-items: center;
9
8
align-content: flex-end;
10
9
}
11
10
11
+
#nav-bar a {
12
+
text-decoration: none;
13
+
color: var(--link);
14
+
padding: 0 0.25rem;
15
+
border-radius: 0.25rem;
16
+
transition: all 120ms ease;
17
+
position: relative;
18
+
font-weight: 600;
19
+
}
20
+
21
+
#nav-bar a:hover {
22
+
color: var(--accent);
23
+
background-color: color-mix(in oklab, var(--accent) 15%, transparent);
24
+
}
25
+
26
+
#nav-bar a.active {
27
+
color: var(--link-visited);
28
+
background-color: color-mix(in oklab, var(--accent) 20%, transparent);
29
+
margin: 0 0.15rem;
30
+
}
31
+
12
32
#footer-container {
13
33
display: flex;
14
34
flex-direction: column;
···
106
126
float: left;
107
127
}
108
128
109
-
div > code,
129
+
div>code,
110
130
li code,
111
131
p code {
112
132
padding: 0.1em 0.3em 0.1em 0.3em;
···
269
289
opacity: 0;
270
290
transform: translateY(10px) scale(0.95);
271
291
}
292
+
272
293
100% {
273
294
opacity: 1;
274
295
transform: translateY(0) scale(1);
···
317
338
:root {
318
339
--nightshade-violet: oklch(0.27 0.0242 287.67);
319
340
--purple-night: oklch(27.58% 0.0203 289.13);
320
-
--red-crushed-grape: oklch(0.656 0.1189 296.74);
341
+
--red-crushed-grape: oklch(0.6829 0.1189 296.74);
321
342
--dark-crushed-grape: oklch(0.6261 0.1289 284.99);
322
-
--light-crushed-grape: oklch(73.48% 0.1008 284.99);
343
+
--light-crushed-grape: oklch(0.7727 0.094 296.74);
323
344
--reseda-green: oklch(62.33% 0.0475 126.94);
324
345
--earth-yellow: oklch(86.49% 0.018 73.05);
325
346
--sunset: oklch(0.86 0.0213 73.05);
···
329
350
--lavendar-breeze: oklch(91.06% 0.0223 290.76);
330
351
--purple-gray: oklch(25.63% 0.0002 290.76);
331
352
--alice-blue: oklch(95.38% 0.0118 239.91);
332
-
}
353
+
}
+310
-316
sass/css/suCSS.css
+310
-316
sass/css/suCSS.css
···
1
1
:root,
2
2
::backdrop {
3
-
/* set sans-serif & mono fonts */
4
-
--sans-font:
5
-
-apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
6
-
"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
7
-
"Helvetica Neue", sans-serif;
8
-
--serif-font:
9
-
Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L",
10
-
"Georgia Pro", Georgia, serif;
11
-
--mono-font:
12
-
ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
13
-
"DejaVu Sans Mono", monospace;
14
-
--standard-border-radius: 5px;
3
+
/* set sans-serif & mono fonts */
4
+
--sans-font:
5
+
-apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
6
+
"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
7
+
"Helvetica Neue", sans-serif;
8
+
--serif-font:
9
+
Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L",
10
+
"Georgia Pro", Georgia, serif;
11
+
--mono-font:
12
+
ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
13
+
"DejaVu Sans Mono", monospace;
14
+
--standard-border-radius: 5px;
15
15
16
-
/* default colors */
17
-
color-scheme: dark;
18
-
--bg: var(--purple-night);
19
-
--noise-strength: 0.15;
20
-
--bg-light: var(--ultra-violet);
21
-
--text: var(--lavendar-breeze);
22
-
--text-light: var(--pink-puree);
23
-
--text-dark: oklch(80.28% 0.0111 204.11);
24
-
--accent: var(--rose-quartz);
25
-
--accent-dark: var(--dark-crushed-grape);
26
-
--accent-text: var(--purple-gray);
27
-
--link: var(--light-crushed-grape);
28
-
--link-visited: var(--red-crushed-grape);
29
-
--border: var(--pink-puree);
30
-
--selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);
16
+
/* default colors */
17
+
color-scheme: dark;
18
+
--bg: var(--purple-night);
19
+
--noise-strength: 0.15;
20
+
--bg-light: var(--ultra-violet);
21
+
--text: var(--lavendar-breeze);
22
+
--text-light: var(--pink-puree);
23
+
--text-dark: oklch(80.28% 0.0111 204.11);
24
+
--accent: var(--rose-quartz);
25
+
--accent-dark: var(--dark-crushed-grape);
26
+
--accent-text: var(--purple-gray);
27
+
--link: var(--light-crushed-grape);
28
+
--link-visited: var(--red-crushed-grape);
29
+
--border: var(--pink-puree);
30
+
--selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);
31
31
}
32
32
33
33
::selection,
34
34
::-moz-selection {
35
-
color: var(--bg);
36
-
background: var(--selection);
35
+
color: var(--bg);
36
+
background: var(--selection);
37
37
}
38
38
39
39
/* chromium scrollbars */
40
40
::-webkit-scrollbar {
41
-
width: 8px;
42
-
height: 8px;
43
-
overflow: visible;
41
+
width: 8px;
42
+
height: 8px;
43
+
overflow: visible;
44
44
}
45
+
45
46
::-webkit-scrollbar-thumb {
46
-
background: var(--accent);
47
-
width: 12px;
47
+
background: var(--accent);
48
+
width: 12px;
48
49
}
50
+
49
51
::-webkit-scrollbar-track {
50
-
background: var(--bg-light);
52
+
background: var(--bg-light);
51
53
}
52
54
53
55
/* firefox scrollbars */
54
56
* {
55
-
scrollbar-color: var(--accent) var(--bg-light);
56
-
scrollbar-width: auto;
57
+
scrollbar-color: var(--accent) var(--bg-light);
58
+
scrollbar-width: auto;
57
59
}
58
60
59
61
html {
60
-
color-scheme: light dark;
61
-
font-family: var(--mono-font);
62
-
scroll-behavior: smooth;
62
+
color-scheme: light dark;
63
+
font-family: var(--mono-font);
64
+
scroll-behavior: smooth;
63
65
}
64
66
65
67
body {
66
-
min-height: 100svh;
67
-
color: var(--text);
68
-
background: var(--bg);
69
-
position: relative;
70
-
font-size: 1rem;
71
-
display: grid;
72
-
grid-template-columns: 1fr min(45rem, 90%) 1fr;
73
-
grid-template-rows: auto 1fr auto;
74
-
grid-row-gap: 0.625rem;
68
+
min-height: 100svh;
69
+
color: var(--text);
70
+
background: var(--bg);
71
+
position: relative;
72
+
font-size: 1rem;
73
+
display: grid;
74
+
grid-template-columns: 1fr min(45rem, 90%) 1fr;
75
+
grid-template-rows: auto 1fr auto;
76
+
grid-row-gap: 0.625rem;
75
77
}
76
-
body > * {
77
-
grid-column: 2;
78
+
79
+
body>* {
80
+
grid-column: 2;
78
81
}
79
82
80
-
body > footer {
81
-
color: var(--text-light);
82
-
font-size: 0.875;
83
+
body>footer {
84
+
color: var(--text-light);
85
+
font-size: 0.875;
83
86
}
84
87
85
88
/* Format headers */
86
89
h1 {
87
-
font-size: 2rem;
90
+
font-size: 2rem;
88
91
}
92
+
89
93
h2 {
90
-
font-size: 1.75rem;
94
+
font-size: 1.75rem;
91
95
}
96
+
92
97
h3 {
93
-
font-size: 1.5rem;
98
+
font-size: 1.5rem;
94
99
}
100
+
95
101
h4 {
96
-
font-size: 1.25rem;
102
+
font-size: 1.25rem;
97
103
}
104
+
98
105
h5 {
99
-
font-size: 1rem;
106
+
font-size: 1rem;
100
107
}
108
+
101
109
h6 {
102
-
font-size: 0.75rem;
110
+
font-size: 0.75rem;
103
111
}
104
112
105
113
h1,
···
108
116
h4,
109
117
h5,
110
118
h6 {
111
-
margin: 0.5em 0 0.5em 0;
112
-
padding: 0.22em 0.4em 0.22em 0.4em;
113
-
background-color: var(--accent);
114
-
border-bottom: 5px solid var(--bg-light);
115
-
border-radius: 0.2em 0.2em 0.27em 0.27em;
116
-
color: var(--accent-text);
117
-
width: fit-content;
119
+
margin: 0.5em 0 0.5em 0;
120
+
padding: 0.22em 0.4em 0.22em 0.4em;
121
+
background-color: var(--accent);
122
+
border-bottom: 5px solid var(--bg-light);
123
+
border-radius: 0.2em 0.2em 0.27em 0.27em;
124
+
color: var(--accent-text);
125
+
width: fit-content;
118
126
}
119
127
120
128
/* Fix line height when title wraps */
121
129
h1,
122
130
h2,
123
131
h3 {
124
-
line-height: 1.1;
132
+
line-height: 1.1;
125
133
}
126
134
127
135
@media only screen and (max-width: 720px) {
128
-
h1 {
129
-
font-size: 1.5rem;
130
-
}
131
-
h2 {
132
-
font-size: 1.25rem;
133
-
}
134
-
h3 {
135
-
font-size: 1rem;
136
-
}
137
-
h4 {
138
-
font-size: 0.75rem;
139
-
}
140
-
h5 {
141
-
font-size: 0.5rem;
142
-
}
143
-
h6 {
144
-
font-size: 0.25rem;
145
-
}
136
+
h1 {
137
+
font-size: 1.5rem;
138
+
}
139
+
140
+
h2 {
141
+
font-size: 1.25rem;
142
+
}
143
+
144
+
h3 {
145
+
font-size: 1rem;
146
+
}
147
+
148
+
h4 {
149
+
font-size: 0.75rem;
150
+
}
151
+
152
+
h5 {
153
+
font-size: 0.5rem;
154
+
}
155
+
156
+
h6 {
157
+
font-size: 0.25rem;
158
+
}
146
159
}
147
160
148
161
p {
149
-
margin: 1rem 0;
162
+
margin: 1rem 0;
150
163
}
151
164
152
165
/* format links */
153
166
a {
154
-
color: var(--link);
155
-
text-decoration: underline;
156
-
text-decoration-color: color-mix(
157
-
in oklab,
158
-
var(--link) 100%,
159
-
transparent 65%
160
-
);
161
-
text-decoration-thickness: 0.06em;
162
-
text-underline-offset: 0.14em;
163
-
transition:
164
-
color 120ms ease,
165
-
text-decoration-color 120ms ease,
166
-
text-underline-offset 120ms ease,
167
-
text-decoration-thickness 120ms ease;
167
+
color: var(--link);
168
+
text-decoration: none;
169
+
font-weight: 600;
170
+
transition: color 120ms ease;
168
171
}
169
172
170
173
a:visited {
171
-
color: var(--link-visited); /* deeper purple */
172
-
text-decoration-color: color-mix(
173
-
in oklab,
174
-
var(--link-visited) 100%,
175
-
transparent 55%
176
-
);
174
+
color: var(--link-visited);
177
175
}
178
176
179
177
a:hover,
180
178
a:focus-visible {
181
-
color: var(--accent-dark); /* bright purple */
182
-
text-decoration-thickness: 0.1em;
183
-
text-underline-offset: 0.18em;
184
-
text-decoration-color: var(--accent-dark);
185
-
outline: none;
179
+
color: var(--accent);
180
+
outline: none;
186
181
}
187
182
188
183
a:visited:hover,
189
184
a:visited:focus-visible {
190
-
color: var(--accent-dark);
191
-
text-decoration-color: var(--accent-dark);
185
+
color: var(--accent);
192
186
}
193
187
194
188
/* format lists */
195
189
ul {
196
-
list-style: none;
197
-
margin-top: 0.25rem;
198
-
margin-bottom: 0.25rem;
190
+
list-style: none;
191
+
margin-top: 0.25rem;
192
+
margin-bottom: 0.25rem;
199
193
}
200
194
201
195
ol {
202
-
list-style-type: decimal;
203
-
margin-top: 0.25rem;
204
-
margin-bottom: 0.25rem;
196
+
list-style-type: decimal;
197
+
margin-top: 0.25rem;
198
+
margin-bottom: 0.25rem;
205
199
}
206
200
207
201
li {
208
-
margin-bottom: 0.125rem;
202
+
margin-bottom: 0.125rem;
209
203
}
210
204
211
205
ul li::marker {
212
-
content: "* ";
213
-
color: var(--accent);
214
-
font-size: 1.1rem;
206
+
content: "* ";
207
+
color: var(--accent);
208
+
font-size: 1.1rem;
215
209
}
216
210
217
211
ol li::marker {
218
-
color: var(--accent);
212
+
color: var(--accent);
219
213
}
220
214
221
215
ol li:hover::marker {
222
-
font-weight: 700;
223
-
color: var(--link);
216
+
font-weight: 700;
217
+
color: var(--link);
224
218
}
225
219
226
220
/* Use flexbox to allow items to wrap, as needed */
227
-
header > nav ul,
228
-
header > nav ol {
229
-
display: flex;
230
-
flex-direction: row;
231
-
flex-wrap: wrap;
232
-
align-content: space-around;
233
-
justify-content: right;
234
-
list-style-type: none;
235
-
margin: 0.5rem 0 0 0;
236
-
padding: 0;
237
-
gap: 1rem;
221
+
header>nav ul,
222
+
header>nav ol {
223
+
display: flex;
224
+
flex-direction: row;
225
+
flex-wrap: wrap;
226
+
align-content: space-around;
227
+
justify-content: right;
228
+
list-style-type: none;
229
+
margin: 0.5rem 0 0 0;
230
+
padding: 0;
231
+
gap: 1rem;
238
232
}
239
233
240
234
/* List items are inline elements, make them behave more like blocks */
241
-
header > nav ul li,
242
-
header > nav ol li {
243
-
display: inline-block;
235
+
header>nav ul li,
236
+
header>nav ol li {
237
+
display: inline-block;
244
238
}
245
239
246
240
/* Consolidate box styling */
247
241
aside,
248
242
details,
249
243
progress {
250
-
background-color: var(--bg-light);
251
-
border-radius: var(--standard-border-radius);
244
+
background-color: var(--bg-light);
245
+
border-radius: var(--standard-border-radius);
252
246
}
253
247
254
248
aside {
255
-
font-size: 1rem;
256
-
width: 35%;
257
-
padding: 0 10px;
258
-
margin-inline-start: 10px;
259
-
float: right;
249
+
font-size: 1rem;
250
+
width: 35%;
251
+
padding: 0 10px;
252
+
margin-inline-start: 10px;
253
+
float: right;
260
254
}
255
+
261
256
*[dir="rtl"] aside {
262
-
float: left;
257
+
float: left;
263
258
}
264
259
265
260
/* make aside full-width on mobile */
266
261
@media only screen and (max-width: 720px) {
267
-
aside {
268
-
width: 100%;
269
-
float: none;
270
-
margin-inline-start: 0;
271
-
}
262
+
aside {
263
+
width: 100%;
264
+
float: none;
265
+
margin-inline-start: 0;
266
+
}
272
267
}
273
268
274
269
details {
275
-
padding: 0.5rem;
270
+
padding: 0.5rem;
276
271
}
277
272
278
273
summary {
279
-
cursor: pointer;
280
-
font-weight: bold;
281
-
word-break: break-all;
274
+
cursor: pointer;
275
+
font-weight: bold;
276
+
word-break: break-all;
282
277
}
283
278
284
-
details[open] > summary + * {
285
-
margin-top: 0;
279
+
details[open]>summary+* {
280
+
margin-top: 0;
286
281
}
287
282
288
-
details[open] > summary {
289
-
margin-bottom: 0.5rem;
283
+
details[open]>summary {
284
+
margin-bottom: 0.5rem;
290
285
}
291
286
292
-
details[open] > :last-child {
293
-
margin-bottom: 0;
287
+
details[open]> :last-child {
288
+
margin-bottom: 0;
294
289
}
295
290
296
291
/* Format tables */
297
292
table {
298
-
border-collapse: collapse;
299
-
margin: 1.5rem 0;
300
-
display: block;
301
-
overflow-x: auto;
302
-
white-space: nowrap;
293
+
border-collapse: collapse;
294
+
margin: 1.5rem 0;
295
+
display: block;
296
+
overflow-x: auto;
297
+
white-space: nowrap;
303
298
}
304
299
305
300
td,
306
301
th {
307
-
border: 1px solid var(--border);
308
-
text-align: start;
309
-
padding: 0.5rem;
302
+
border: 1px solid var(--border);
303
+
text-align: start;
304
+
padding: 0.5rem;
310
305
}
311
306
312
307
th {
313
-
background-color: var(--bg-light);
314
-
font-weight: bold;
308
+
background-color: var(--bg-light);
309
+
font-weight: bold;
315
310
}
316
311
317
312
tr:nth-child(even) {
318
-
background-color: var(--bg-light);
313
+
background-color: var(--bg-light);
319
314
}
320
315
321
316
table caption {
322
-
text-align: left;
323
-
font-weight: bold;
324
-
margin: 0 0 0.4rem 1rem;
317
+
text-align: left;
318
+
font-weight: bold;
319
+
margin: 0 0 0.4rem 1rem;
325
320
}
326
321
327
322
/* format forms */
328
323
fieldset {
329
-
border: 1px dashed var(--accent);
330
-
border-radius: var(--standard-border-radius);
324
+
border: 1px dashed var(--accent);
325
+
border-radius: var(--standard-border-radius);
331
326
}
332
327
333
-
fieldset > legend {
334
-
color: var(--accent);
328
+
fieldset>legend {
329
+
color: var(--accent);
335
330
}
336
331
337
332
textarea,
···
339
334
input,
340
335
button,
341
336
.button {
342
-
font-size: inherit;
343
-
font-family: inherit;
344
-
padding: 0.25rem;
345
-
border-radius: var(--standard-border-radius);
346
-
box-shadow: none;
347
-
max-width: 100%;
348
-
display: inline-block;
337
+
font-size: inherit;
338
+
font-family: inherit;
339
+
padding: 0.25rem;
340
+
border-radius: var(--standard-border-radius);
341
+
box-shadow: none;
342
+
max-width: 100%;
343
+
display: inline-block;
349
344
}
350
345
351
346
textarea,
352
347
select,
353
348
input {
354
-
color: var(--text);
355
-
background-color: var(--bg);
356
-
border: 1px dashed var(--border);
349
+
color: var(--text);
350
+
background-color: var(--bg);
351
+
border: 1px dashed var(--border);
357
352
}
358
353
359
354
label {
360
-
display: block;
355
+
display: block;
361
356
}
362
357
363
358
fieldset label {
364
-
margin: 0 0 0.3rem 0;
359
+
margin: 0 0 0.3rem 0;
365
360
}
366
361
367
362
textarea {
368
-
max-width: 43.5rem;
369
-
resize: both;
363
+
max-width: 43.5rem;
364
+
resize: both;
370
365
}
371
366
372
367
textarea:not([cols]) {
373
-
width: 100%;
368
+
width: 100%;
374
369
}
375
370
376
371
@media only screen and (max-width: 720px) {
377
-
textarea,
378
-
select,
379
-
input {
380
-
width: 100%;
381
-
}
372
+
373
+
textarea,
374
+
select,
375
+
input {
376
+
width: 100%;
377
+
}
382
378
}
383
379
384
380
/* format buttons */
···
389
385
input[type="reset"],
390
386
input[type="button"],
391
387
label[type="button"] {
392
-
border: 1px solid var(--accent);
393
-
background-color: var(--accent);
394
-
color: var(--accent-text);
395
-
padding: 0.5rem 0.9rem;
396
-
text-decoration: none;
397
-
line-height: normal;
388
+
border: 1px solid var(--accent);
389
+
background-color: var(--accent);
390
+
color: var(--accent-text);
391
+
padding: 0.5rem 0.9rem;
392
+
text-decoration: none;
393
+
line-height: normal;
398
394
}
399
395
400
396
.button[aria-disabled="true"],
···
402
398
textarea:disabled,
403
399
select:disabled,
404
400
button[disabled] {
405
-
cursor: not-allowed;
406
-
background-color: var(--bg-light);
407
-
border-color: var(--bg-light);
408
-
color: var(--text-light);
401
+
cursor: not-allowed;
402
+
background-color: var(--bg-light);
403
+
border-color: var(--bg-light);
404
+
color: var(--text-light);
409
405
}
410
406
411
407
input[type="range"] {
412
-
padding: 0;
413
-
color: var(--accent);
408
+
padding: 0;
409
+
color: var(--accent);
414
410
}
415
411
416
412
abbr[title] {
417
-
cursor: help;
418
-
text-decoration-line: underline;
419
-
text-decoration-style: dotted;
413
+
cursor: help;
414
+
text-decoration-line: underline;
415
+
text-decoration-style: dotted;
420
416
}
421
417
422
418
button:enabled:hover,
···
425
421
input[type="reset"]:enabled:hover,
426
422
input[type="button"]:enabled:hover,
427
423
label[type="button"]:hover {
428
-
background-color: var(--accent-dark);
429
-
border-color: var(--accent-dark);
430
-
cursor: pointer;
424
+
background-color: var(--accent-dark);
425
+
border-color: var(--accent-dark);
426
+
cursor: pointer;
431
427
}
432
428
433
429
.button:focus-visible,
434
430
button:focus-visible:where(:enabled),
435
-
input:enabled:focus-visible:where(
436
-
[type="submit"],
437
-
[type="reset"],
438
-
[type="button"]
439
-
) {
440
-
outline: 2px solid var(--accent);
441
-
outline-offset: 1px;
431
+
input:enabled:focus-visible:where([type="submit"],
432
+
[type="reset"],
433
+
[type="button"]) {
434
+
outline: 2px solid var(--accent);
435
+
outline-offset: 1px;
442
436
}
443
437
444
438
/* checkbox and radio button style */
445
439
input[type="checkbox"],
446
440
input[type="radio"] {
447
-
vertical-align: middle;
448
-
position: relative;
449
-
width: 14px;
450
-
height: 14px;
441
+
vertical-align: middle;
442
+
position: relative;
443
+
width: 14px;
444
+
height: 14px;
451
445
}
452
446
453
-
input[type="checkbox"] + label,
454
-
input[type="radio"] + label {
455
-
display: inline-block;
447
+
input[type="checkbox"]+label,
448
+
input[type="radio"]+label {
449
+
display: inline-block;
456
450
}
457
451
458
452
input[type="radio"] {
459
-
border-radius: 100%;
453
+
border-radius: 100%;
460
454
}
461
455
462
456
input[type="checkbox"]:checked,
463
457
input[type="radio"]:checked {
464
-
background-color: var(--accent);
458
+
background-color: var(--accent);
465
459
}
466
460
467
461
@media only screen and (max-width: 720px) {
468
-
textarea,
469
-
select,
470
-
input {
471
-
width: 100%;
472
-
}
462
+
463
+
textarea,
464
+
select,
465
+
input {
466
+
width: 100%;
467
+
}
473
468
}
474
469
475
470
input[type="color"] {
476
-
height: 2.5rem;
477
-
padding: 0.2rem;
471
+
height: 2.5rem;
472
+
padding: 0.2rem;
478
473
}
479
474
480
475
input[type="file"] {
481
-
border: 0;
476
+
border: 0;
482
477
}
483
478
484
479
/* misc body elements */
485
480
hr {
486
-
border: 1px dashed var(--accent);
487
-
margin: 0.5rem 0 0.5rem 0;
481
+
border: 1px dashed var(--accent);
482
+
margin: 0.5rem 0 0.5rem 0;
488
483
}
489
484
490
485
mark {
491
-
padding: 0 0.25em 0 0.25em;
492
-
border-radius: var(--standard-border-radius);
493
-
background-color: var(--accent);
494
-
color: var(--bg);
486
+
padding: 0 0.25em 0 0.25em;
487
+
border-radius: var(--standard-border-radius);
488
+
background-color: var(--accent);
489
+
color: var(--bg);
495
490
}
496
491
497
492
mark a {
498
-
color: var(--link);
493
+
color: var(--link);
499
494
}
500
495
501
496
img,
502
497
video,
503
498
iframe[src^="https://www.youtube-nocookie.com"],
504
-
iframe[src^="https://www.youtube.com"]
505
-
{
506
-
max-width: 90%;
507
-
margin: 1rem;
508
-
height: auto;
509
-
border: dashed 2px var(--accent);
510
-
border-radius: 15px;
511
-
opacity: 0.95;
499
+
iframe[src^="https://www.youtube.com"] {
500
+
max-width: 90%;
501
+
margin: 1rem;
502
+
height: auto;
503
+
border: dashed 2px var(--accent);
504
+
border-radius: 15px;
505
+
opacity: 0.95;
512
506
}
513
507
514
508
figure {
515
-
margin: 0;
516
-
display: block;
517
-
overflow-x: auto;
509
+
margin: 0;
510
+
display: block;
511
+
overflow-x: auto;
518
512
}
519
513
520
514
figcaption {
521
-
text-align: left;
522
-
font-size: 0.875rem;
523
-
color: var(--text-light);
524
-
margin: 0 0 1rem 1rem;
515
+
text-align: left;
516
+
font-size: 0.875rem;
517
+
color: var(--text-light);
518
+
margin: 0 0 1rem 1rem;
525
519
}
526
520
527
521
blockquote {
528
-
margin: 0 0 0 1.25rem;
529
-
padding: 0.5rem 0 0 0.5rem;
530
-
border-inline-start: 0.375rem solid var(--accent);
531
-
color: var(--text-light);
532
-
font-style: italic;
522
+
margin: 0 0 0 1.25rem;
523
+
padding: 0.5rem 0 0 0.5rem;
524
+
border-inline-start: 0.375rem solid var(--accent);
525
+
color: var(--text-light);
526
+
font-style: italic;
533
527
}
534
528
535
529
p:has(cite) {
536
-
text-align: right;
537
-
font-size: 0.875rem;
538
-
color: var(--text-light);
539
-
font-weight: 600;
530
+
text-align: right;
531
+
font-size: 0.875rem;
532
+
color: var(--text-light);
533
+
font-weight: 600;
540
534
}
541
535
542
536
cite::before {
543
-
content: "— ";
537
+
content: "— ";
544
538
}
545
539
546
540
dt {
547
-
color: var(--text-light);
541
+
color: var(--text-light);
548
542
}
549
543
550
544
code,
···
552
546
pre span,
553
547
kbd,
554
548
samp {
555
-
font-family: var(--mono-font);
549
+
font-family: var(--mono-font);
556
550
}
557
551
558
552
pre {
559
-
border: 1px solid var(--accent);
560
-
max-height: 30rem;
561
-
padding: 0.625rem;
562
-
overflow-x: auto;
563
-
font-style: monospace;
553
+
border: 1px solid var(--accent);
554
+
max-height: 30rem;
555
+
padding: 0.625rem;
556
+
overflow-x: auto;
557
+
font-style: monospace;
564
558
}
565
559
566
560
p code,
567
561
li code,
568
562
div code {
569
-
padding: 0 0.125rem 0 0.125rem;
570
-
border-radius: 3px;
571
-
color: var(--bg);
572
-
background-color: var(--text);
563
+
padding: 0 0.125rem 0 0.125rem;
564
+
border-radius: 3px;
565
+
color: var(--bg);
566
+
background-color: var(--text);
573
567
}
574
568
575
569
pre code {
576
-
padding: 0;
577
-
border-radius: 0;
578
-
color: inherit;
579
-
background-color: inherit;
570
+
padding: 0;
571
+
border-radius: 0;
572
+
color: inherit;
573
+
background-color: inherit;
580
574
}
581
575
582
576
iframe {
583
-
max-width: 90%;
577
+
max-width: 90%;
584
578
}
585
579
586
580
/* progress bars */
587
581
progress {
588
-
width: 100%;
582
+
width: 100%;
589
583
}
590
584
591
585
progress:indeterminate {
592
-
background-color: var(--bg-light);
586
+
background-color: var(--bg-light);
593
587
}
594
588
595
589
progress::-webkit-progress-bar {
596
-
border-radius: var(--standard-border-radius);
597
-
background-color: var(--bg-light);
590
+
border-radius: var(--standard-border-radius);
591
+
background-color: var(--bg-light);
598
592
}
599
593
600
594
progress::-webkit-progress-value {
601
-
border-radius: var(--standard-border-radius);
602
-
background-color: var(--accent);
595
+
border-radius: var(--standard-border-radius);
596
+
background-color: var(--accent);
603
597
}
604
598
605
599
progress::-moz-progress-bar {
606
-
border-radius: var(--standard-border-radius);
607
-
background-color: var(--accent);
608
-
transition-property: width;
609
-
transition-duration: 0.3s;
600
+
border-radius: var(--standard-border-radius);
601
+
background-color: var(--accent);
602
+
transition-property: width;
603
+
transition-duration: 0.3s;
610
604
}
611
605
612
606
progress:indeterminate::-moz-progress-bar {
613
-
background-color: var(--bg-light);
607
+
background-color: var(--bg-light);
614
608
}
615
609
616
610
dialog {
617
-
max-width: 40rem;
618
-
margin: auto;
611
+
max-width: 40rem;
612
+
margin: auto;
619
613
}
620
614
621
615
dialog::backdrop {
622
-
background-color: var(--bg);
623
-
opacity: 0.8;
616
+
background-color: var(--bg);
617
+
opacity: 0.8;
624
618
}
625
619
626
620
@media only screen and (max-width: 720px) {
627
-
dialog {
628
-
max-width: 100%;
629
-
margin: auto 1em;
630
-
}
621
+
dialog {
622
+
max-width: 100%;
623
+
margin: auto 1em;
624
+
}
631
625
}
632
626
633
627
/* superscript & subscript */
634
628
/* prevent scripts from affecting line-height. */
635
629
sup,
636
630
sub {
637
-
vertical-align: baseline;
638
-
position: relative;
631
+
vertical-align: baseline;
632
+
position: relative;
639
633
}
640
634
641
635
sup {
642
-
top: -0.4em;
636
+
top: -0.4em;
643
637
}
644
638
645
639
sub {
646
-
top: 0.3em;
647
-
}
640
+
top: 0.3em;
641
+
}
+1
static/badges/MadeByAHuman_04.svg
+1
static/badges/MadeByAHuman_04.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="88" height="31" viewBox="0 0 88 31"><g id="Background"><rect width="88" height="31" fill="#b39ddb"/></g><g id="_3D"><polygon points="88 0 88 31 0 31 2 29 86 29 86 2 88 0" fill="#263238" opacity=".5"/><polygon points="88 0 86 2 2 2 2 29 0 31 0 0 88 0" fill="#fff" opacity=".5"/></g><g id="Text"><path d="m40.86,9.65c0-1.08-.59-1.64-1.48-1.64s-1.49.56-1.49,1.64v3.31h-1.21v-3.31c0-1.08-.59-1.64-1.48-1.64s-1.49.56-1.49,1.64v3.31h-1.22v-5.92h1.22v.68c.4-.48,1.04-.77,1.75-.77.93,0,1.72.4,2.13,1.17.37-.72,1.2-1.17,2.06-1.17,1.39,0,2.44.87,2.44,2.52v3.49h-1.21v-3.31Z" fill="#263238"/><path d="m46.01,6.94c1,0,1.69.47,2.05.96v-.86h1.24v5.92h-1.24v-.88c-.38.5-1.08.98-2.07.98-1.54,0-2.77-1.26-2.77-3.08s1.24-3.03,2.79-3.03Zm.26,1.06c-.91,0-1.79.69-1.79,1.97s.88,2.02,1.79,2.02,1.79-.72,1.79-2-.87-1.99-1.79-1.99Z" fill="#263238"/><path d="m53.31,6.94c.77,0,1.59.37,2.04.92v-2.86h1.24v7.95h-1.24v-.89c-.38.54-1.08.99-2.05.99-1.56,0-2.79-1.26-2.79-3.08s1.24-3.03,2.8-3.03Zm.25,1.06c-.91,0-1.79.69-1.79,1.97s.88,2.02,1.79,2.02,1.79-.72,1.79-2-.87-1.99-1.79-1.99Z" fill="#263238"/><path d="m60.73,13.05c-1.7,0-2.95-1.2-2.95-3.06s1.2-3.05,2.95-3.05,2.88,1.17,2.88,2.91c0,.2-.01.4-.04.6h-4.52c.09.98.78,1.57,1.69,1.57.75,0,1.17-.37,1.4-.83h1.32c-.33,1.03-1.27,1.86-2.72,1.86Zm-1.68-3.59h3.28c-.02-.91-.74-1.49-1.65-1.49-.83,0-1.49.56-1.62,1.49Z" fill="#263238"/><path d="m70.89,6.94c1.57,0,2.78,1.2,2.78,3.03s-1.22,3.08-2.78,3.08c-.98,0-1.68-.44-2.06-.96v.86h-1.22v-7.95h1.22v2.91c.39-.54,1.13-.98,2.06-.98Zm-.27,1.06c-.91,0-1.79.72-1.79,1.99s.88,2,1.79,2,1.8-.74,1.8-2.02-.88-1.97-1.8-1.97Z" fill="#263238"/><path d="m78.95,7.04h1.27l-3.63,8.7h-1.27l1.2-2.88-2.33-5.82h1.36l1.67,4.51,1.73-4.51Z" fill="#263238"/><path d="m34.48,17.94c1,0,1.69.47,2.05.96v-.86h1.24v5.92h-1.24v-.88c-.38.5-1.08.98-2.07.98-1.54,0-2.77-1.26-2.77-3.08s1.24-3.03,2.79-3.03Zm.26,1.06c-.91,0-1.79.69-1.79,1.97s.88,2.02,1.79,2.02,1.79-.72,1.79-2-.87-1.99-1.79-1.99Z" fill="#263238"/><path d="m42.17,16.01h1.22v2.72c.41-.49,1.07-.78,1.84-.78,1.32,0,2.35.87,2.35,2.52v3.49h-1.21v-3.31c0-1.08-.59-1.64-1.48-1.64s-1.49.56-1.49,1.64v3.31h-1.22v-7.95Z" fill="#263238"/><path d="m54.5,23.96h-1.22v-.71c-.39.5-1.05.79-1.75.79-1.39,0-2.44-.87-2.44-2.52v-3.48h1.21v3.3c0,1.08.59,1.64,1.48,1.64s1.49-.56,1.49-1.64v-3.3h1.22v5.92Z" fill="#263238"/><path d="m64.5,20.65c0-1.08-.59-1.64-1.48-1.64s-1.49.56-1.49,1.64v3.31h-1.21v-3.31c0-1.08-.59-1.64-1.48-1.64s-1.49.56-1.49,1.64v3.31h-1.22v-5.92h1.22v.68c.4-.48,1.04-.77,1.75-.77.93,0,1.72.4,2.13,1.17.37-.72,1.2-1.17,2.06-1.17,1.39,0,2.44.87,2.44,2.52v3.49h-1.21v-3.31Z" fill="#263238"/><path d="m69.65,17.94c1,0,1.69.47,2.05.96v-.86h1.24v5.92h-1.24v-.88c-.38.5-1.08.98-2.07.98-1.54,0-2.77-1.26-2.77-3.08s1.24-3.03,2.79-3.03Zm.26,1.06c-.91,0-1.79.69-1.79,1.97s.88,2.02,1.79,2.02,1.79-.72,1.79-2-.87-1.99-1.79-1.99Z" fill="#263238"/><path d="m78.74,20.65c0-1.08-.59-1.64-1.48-1.64s-1.49.56-1.49,1.64v3.31h-1.22v-5.92h1.22v.68c.4-.48,1.05-.77,1.76-.77,1.39,0,2.43.87,2.43,2.52v3.49h-1.21v-3.31Z" fill="#263238"/></g><g id="Image"><circle cx="15.37" cy="15.5" r="10.3" fill="#ffcc80" stroke="#263238" stroke-miterlimit="10" stroke-width="1.5"/><rect x="7.55" y="13.8" width="2.54" height="3.4" rx="1.27" ry="1.27" fill="#263238"/><rect x="20.65" y="13.8" width="2.54" height="3.4" rx="1.27" ry="1.27" fill="#263238"/><path d="m18.44,15.5c0,1.7-1.37,3.07-3.07,3.07s-3.07-1.37-3.07-3.07" fill="none" stroke="#263238" stroke-miterlimit="10" stroke-width="1.5"/></g></svg>
+17
-11
templates/header.html
+17
-11
templates/header.html
···
1
-
{% if config.extra.header_nav %} {% if not current_url %} {% set current_url =
2
-
"" %} {% endif %}
1
+
{% if config.extra.header_nav %}
2
+
{% if page %}
3
+
{% set active_path = page.path | trim_end_matches(pat="/") %}
4
+
{% elif section %}
5
+
{% set active_path = section.path | trim_end_matches(pat="/") %}
6
+
{% elif current_path %}
7
+
{% set active_path = current_path | trim_end_matches(pat="/") %}
8
+
{% else %}
9
+
{% set active_path = "" %}
10
+
{% endif %}
3
11
<nav id="nav-bar">
4
-
{% for nav_item in config.extra.header_nav %}
5
-
<a
6
-
href="{{ nav_item.url }}"
7
-
class="{% if nav_item.url == current_url %}active{% endif %} text-glow"
8
-
>
9
-
{{ nav_item.name }}
10
-
</a>
11
-
{% endfor %}
12
+
{% for nav_item in config.extra.header_nav %}
13
+
<a href="{{ nav_item.url }}"
14
+
class="{% if nav_item.url == active_path or (nav_item.url == '/' and active_path == '') %}active{% endif %}">
15
+
{{ nav_item.name }}
16
+
</a>
17
+
{% endfor %}
12
18
</nav>
13
-
{% endif %}
19
+
{% endif %}