the home site for me: also iteration 3 or 4 of my site
feat: consolidate all css into a single imported sass file
+1501
-19
+1
-3
config.toml
+1
-3
config.toml
···
3
3
4
4
title = "Zera"
5
5
description = "The home site of Kieran Klukas"
6
-
compile_sass = false
6
+
compile_sass = true
7
7
minify_html = true
8
8
generate_feeds = true
9
9
default_language = "en"
···
19
19
20
20
highlight_code = true
21
21
highlight_theme = "css"
22
-
23
-
extra_syntaxes_and_themes = ["highlighting", "highlighting/catppuccin"]
24
22
25
23
[slugify]
26
24
paths = "on"
+4
sass/css/main.sass
+4
sass/css/main.sass
+140
sass/css/mods.css
+140
sass/css/mods.css
···
1
+
#nav-bar {
2
+
padding: 0.625rem 0 0 0;
3
+
display: flex;
4
+
flex-direction: row;
5
+
gap: 0.25rem;
6
+
flex-wrap: wrap;
7
+
justify-content: flex-end;
8
+
align-items: center;
9
+
align-content: flex-end;
10
+
}
11
+
12
+
#footer-container {
13
+
display: flex;
14
+
flex-wrap: wrap;
15
+
justify-content: space-between;
16
+
align-items: center;
17
+
}
18
+
19
+
.accent-data {
20
+
color: var(--accent);
21
+
}
22
+
23
+
.theme-transition {
24
+
transition: color 0.3s ease, background-color 0.3s ease;
25
+
}
26
+
27
+
.tags-data {
28
+
display: flex;
29
+
flex-direction: column;
30
+
flex-wrap: wrap;
31
+
justify-content: flex-end;
32
+
align-items: flex-start;
33
+
align-content: flex-end;
34
+
}
35
+
36
+
.title-list li {
37
+
margin-bottom: 0.375rem;
38
+
}
39
+
40
+
/* icons settings */
41
+
.icons {
42
+
width: 1.3rem;
43
+
height: 1.3rem;
44
+
aspect-ratio: 1/1;
45
+
display: inline-block;
46
+
vertical-align: middle;
47
+
color: var(--text);
48
+
fill: var(--text);
49
+
background-color: transparent;
50
+
cursor: pointer;
51
+
}
52
+
53
+
.icons:hover {
54
+
background-color: transparent;
55
+
color: var(--accent);
56
+
}
57
+
58
+
/* footnotes */
59
+
.footnote-definition {
60
+
margin: 0 0 0 0.125rem;
61
+
}
62
+
63
+
.footnote-definition-label {
64
+
color: var(--accent);
65
+
}
66
+
67
+
.footnote-definition p {
68
+
display: inline;
69
+
margin: 0.625rem 0 0 0.625rem;
70
+
}
71
+
72
+
/* general classes */
73
+
.no-style {
74
+
padding: 0;
75
+
margin: 0;
76
+
border: none;
77
+
border-radius: 0;
78
+
}
79
+
80
+
.no-style:hover {
81
+
background-color: transparent;
82
+
color: var(--accent);
83
+
}
84
+
85
+
.center {
86
+
text-align: center;
87
+
}
88
+
89
+
.center img {
90
+
display: block;
91
+
margin: 1rem auto;
92
+
}
93
+
94
+
.float-right {
95
+
float: right;
96
+
}
97
+
98
+
.float-left {
99
+
float: left;
100
+
}
101
+
102
+
div code,
103
+
li code,
104
+
p code {
105
+
color: var(--text);
106
+
background-color: var(--bg-light);
107
+
}
108
+
109
+
pre {
110
+
border-top-left-radius: 0;
111
+
}
112
+
113
+
blockquote {
114
+
padding-top: 0.2rem;
115
+
padding-bottom: 0.2rem;
116
+
}
117
+
118
+
blockquote:has(+ pre) {
119
+
display: inline-block;
120
+
border: none;
121
+
font-family: "code" !important;
122
+
font-size: 0.8rem;
123
+
font-weight: 600;
124
+
margin: 0;
125
+
margin-bottom: 0.2rem;
126
+
margin-block: 0 0;
127
+
border-top-left-radius: 5px;
128
+
border-top-right-radius: 5px;
129
+
padding-left: 0.75rem;
130
+
padding-right: 0.75rem;
131
+
padding-top: 0.25rem;
132
+
padding-bottom: 0.25rem;
133
+
position: relative;
134
+
background-color: var(--accent);
135
+
}
136
+
137
+
blockquote:has(+ pre) p {
138
+
margin: 0;
139
+
color: var(--accent-text);
140
+
}
+118
sass/css/reset.css
+118
sass/css/reset.css
···
1
+
/* Box sizing rules */
2
+
*,
3
+
*::before,
4
+
*::after {
5
+
box-sizing: border-box;
6
+
-webkit-box-sizing: border-box;
7
+
}
8
+
9
+
* {
10
+
margin: 0;
11
+
}
12
+
13
+
/* Prevent font size inflation */
14
+
html {
15
+
-moz-text-size-adjust: none;
16
+
-webkit-text-size-adjust: none;
17
+
text-size-adjust: none;
18
+
}
19
+
20
+
/* Remove default margin in favour of better control in authored CSS */
21
+
body,
22
+
h1,
23
+
h2,
24
+
h3,
25
+
h4,
26
+
p,
27
+
figure,
28
+
blockquote,
29
+
dl,
30
+
dd {
31
+
margin-block-end: 0;
32
+
}
33
+
34
+
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
35
+
ul,
36
+
ol,
37
+
ul[role="list"],
38
+
ol[role="list"] {
39
+
list-style: none;
40
+
}
41
+
42
+
/* Set core body defaults */
43
+
body {
44
+
min-height: 100vh;
45
+
line-height: 1.5;
46
+
-webkit-font-smoothing: antialiased;
47
+
}
48
+
49
+
/* Set shorter line heights on headings and interactive elements */
50
+
h1,
51
+
h2,
52
+
h3,
53
+
h4,
54
+
button,
55
+
input,
56
+
label {
57
+
line-height: 1.1;
58
+
}
59
+
60
+
/* Balance text wrapping on headings */
61
+
h1,
62
+
h2,
63
+
h3,
64
+
h4 {
65
+
text-wrap: balance;
66
+
}
67
+
68
+
p,
69
+
h1,
70
+
h2,
71
+
h3,
72
+
h4,
73
+
h5,
74
+
h6 {
75
+
overflow-wrap: break-word;
76
+
}
77
+
78
+
/* A elements that don't have a class get default styles */
79
+
a:not([class]) {
80
+
text-decoration-skip-ink: auto;
81
+
}
82
+
83
+
/* Make images easier to work with */
84
+
img,
85
+
picture,
86
+
video,
87
+
canvas,
88
+
svg {
89
+
max-width: 100%;
90
+
display: block;
91
+
}
92
+
93
+
/* Inherit fonts for inputs and buttons */
94
+
input,
95
+
button,
96
+
textarea,
97
+
select,
98
+
progress {
99
+
appearance: none;
100
+
-webkit-appearance: none;
101
+
-moz-appearance: none;
102
+
font: inherit;
103
+
}
104
+
105
+
/* Make sure textareas without a rows attribute are not tiny */
106
+
textarea:not([rows]) {
107
+
min-height: 10em;
108
+
}
109
+
110
+
/* Anything that has been anchored to should have extra scroll margin */
111
+
:target {
112
+
scroll-margin-block: 5ex;
113
+
}
114
+
115
+
#root,
116
+
#__next {
117
+
isolation: isolate;
118
+
}
+674
sass/css/suCSS.css
+674
sass/css/suCSS.css
···
1
+
:root,
2
+
::backdrop {
3
+
/* set sans-serif & mono fonts */
4
+
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
5
+
"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
6
+
"Helvetica Neue", sans-serif;
7
+
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
8
+
--standard-border-radius: 5px;
9
+
10
+
/* default colors */
11
+
--bg: #eeeeee;
12
+
--bg-light: #cbcdcd;
13
+
--text: #41474e;
14
+
--text-light: #646868;
15
+
--accent: #d26878;
16
+
--accent-light: #e08f67;
17
+
--accent-text: var(--bg);
18
+
--border: #646868;
19
+
--link: #5690af;
20
+
}
21
+
22
+
/* theme media queries */
23
+
@media (prefers-color-scheme: dark) {
24
+
:root,
25
+
::backdrop {
26
+
color-scheme: dark;
27
+
--bg: #222529;
28
+
--bg-light: #464949;
29
+
--text: #d6d6d6;
30
+
--text-light: #dbd5bc;
31
+
--accent: #78b6ad;
32
+
--accent-light: #87c9e5;
33
+
--accent-text: var(--bg);
34
+
--border: #dbd5bc;
35
+
--link: #e2aea2;
36
+
}
37
+
img,
38
+
video {
39
+
opacity: 0.8;
40
+
}
41
+
}
42
+
43
+
@media (prefers-color-scheme: light) {
44
+
:root,
45
+
::backdrop {
46
+
color-scheme: light;
47
+
--bg: #eeeeee;
48
+
--bg-light: #cbcdcd;
49
+
--text: #41474e;
50
+
--text-light: #646868;
51
+
--accent: #d26878;
52
+
--accent-light: #e08f67;
53
+
--accent-text: var(--bg);
54
+
--border: #646868;
55
+
--link: #5690af;
56
+
}
57
+
}
58
+
59
+
[data-theme="light"] {
60
+
/* default (light) theme */
61
+
color-scheme: light;
62
+
--bg: #eeeeee;
63
+
--bg-light: #cbcdcd;
64
+
--text: #41474e;
65
+
--text-light: #646868;
66
+
--accent: #d26878;
67
+
--accent-light: #e08f67;
68
+
--accent-text: var(--bg);
69
+
--border: #646868;
70
+
--link: #5690af;
71
+
}
72
+
73
+
[data-theme="dark"] {
74
+
color-scheme: dark;
75
+
--bg: #222529;
76
+
--bg-light: #464949;
77
+
--text: #d6d6d6;
78
+
--text-light: #dbd5bc;
79
+
--accent: #78b6ad;
80
+
--accent-light: #87c9e5;
81
+
--accent-text: var(--bg);
82
+
--border: #dbd5bc;
83
+
--link: #e2aea2;
84
+
}
85
+
86
+
::selection,
87
+
::-moz-selection {
88
+
color: var(--bg);
89
+
background: var(--accent);
90
+
}
91
+
92
+
/* chromium scrollbars */
93
+
::-webkit-scrollbar {
94
+
width: 8px;
95
+
height: 8px;
96
+
overflow: visible;
97
+
}
98
+
::-webkit-scrollbar-thumb {
99
+
background: var(--accent);
100
+
width: 12px;
101
+
}
102
+
::-webkit-scrollbar-track {
103
+
background: var(--bg-light);
104
+
}
105
+
106
+
/* firefox scrollbars */
107
+
* {
108
+
scrollbar-color: var(--accent) var(--bg-light);
109
+
scrollbar-width: thin;
110
+
scrollbar-height: thin;
111
+
}
112
+
113
+
html {
114
+
color-scheme: light dark;
115
+
font-family: var(--mono-font);
116
+
scroll-behavior: smooth;
117
+
}
118
+
119
+
body {
120
+
min-height: 100svh;
121
+
color: var(--text);
122
+
background-color: var(--bg);
123
+
font-size: 1rem;
124
+
display: grid;
125
+
grid-template-columns: 1fr min(45rem, 90%) 1fr;
126
+
grid-template-rows: auto 1fr auto;
127
+
grid-row-gap: 0.625rem;
128
+
}
129
+
body > * {
130
+
grid-column: 2;
131
+
}
132
+
133
+
body > footer {
134
+
color: var(--text-light);
135
+
font-size: 0.875;
136
+
}
137
+
138
+
/* Format headers */
139
+
h1 {
140
+
font-size: 2rem;
141
+
}
142
+
h2 {
143
+
font-size: 1.75rem;
144
+
}
145
+
h3 {
146
+
font-size: 1.5rem;
147
+
}
148
+
h4 {
149
+
font-size: 1.25rem;
150
+
}
151
+
h5 {
152
+
font-size: 1rem;
153
+
}
154
+
h6 {
155
+
font-size: 0.75rem;
156
+
}
157
+
158
+
h1,
159
+
h2,
160
+
h3,
161
+
h4,
162
+
h5,
163
+
h6 {
164
+
margin: 0.5em 0 0.5em 0;
165
+
}
166
+
167
+
/* Fix line height when title wraps */
168
+
h1,
169
+
h2,
170
+
h3 {
171
+
line-height: 1.1;
172
+
}
173
+
174
+
h1::before,
175
+
h2::before,
176
+
h3::before,
177
+
h4::before,
178
+
h5::before,
179
+
h6::before {
180
+
color: var(--accent);
181
+
content: "# ";
182
+
}
183
+
184
+
@media only screen and (max-width: 720px) {
185
+
h1 {
186
+
font-size: 1.5rem;
187
+
}
188
+
h2 {
189
+
font-size: 1.25rem;
190
+
}
191
+
h3 {
192
+
font-size: 1rem;
193
+
}
194
+
h4 {
195
+
font-size: 0.75rem;
196
+
}
197
+
h5 {
198
+
font-size: 0.5rem;
199
+
}
200
+
h6 {
201
+
font-size: 0.25rem;
202
+
}
203
+
}
204
+
205
+
p {
206
+
margin: 1rem 0;
207
+
}
208
+
209
+
/* format links */
210
+
a,
211
+
a:visited {
212
+
text-decoration: none;
213
+
border-radius: 0.125rem;
214
+
color: var(--link);
215
+
}
216
+
217
+
a:hover {
218
+
background-color: var(--link);
219
+
color: var(--bg);
220
+
}
221
+
222
+
/* format lists */
223
+
ul {
224
+
list-style: none;
225
+
margin-top: 0.25rem;
226
+
margin-bottom: 0.25rem;
227
+
}
228
+
229
+
ol {
230
+
list-style-type: decimal;
231
+
margin-top: 0.25rem;
232
+
margin-bottom: 0.25rem;
233
+
}
234
+
235
+
li {
236
+
margin-bottom: 0.125rem;
237
+
}
238
+
239
+
ul li::marker {
240
+
content: "» ";
241
+
color: var(--accent);
242
+
}
243
+
244
+
ul li:hover::marker {
245
+
content: "# ";
246
+
font-weight: 700;
247
+
color: var(--link);
248
+
}
249
+
250
+
ol li::marker {
251
+
color: var(--accent);
252
+
}
253
+
254
+
ol li:hover::marker {
255
+
font-weight: 700;
256
+
color: var(--link);
257
+
}
258
+
259
+
/* Use flexbox to allow items to wrap, as needed */
260
+
header > nav ul,
261
+
header > nav ol {
262
+
display: flex;
263
+
flex-direction: row;
264
+
flex-wrap: wrap;
265
+
align-content: space-around;
266
+
justify-content: right;
267
+
list-style-type: none;
268
+
margin: 0.5rem 0 0 0;
269
+
padding: 0;
270
+
gap: 1rem;
271
+
}
272
+
273
+
/* List items are inline elements, make them behave more like blocks */
274
+
header > nav ul li,
275
+
header > nav ol li {
276
+
display: inline-block;
277
+
}
278
+
279
+
/* Consolidate box styling */
280
+
aside,
281
+
details,
282
+
pre,
283
+
progress {
284
+
background-color: var(--bg-light);
285
+
border-radius: var(--standard-border-radius);
286
+
}
287
+
288
+
aside {
289
+
font-size: 1rem;
290
+
width: 35%;
291
+
padding: 0 10px;
292
+
margin-inline-start: 10px;
293
+
float: right;
294
+
}
295
+
*[dir="rtl"] aside {
296
+
float: left;
297
+
}
298
+
299
+
/* make aside full-width on mobile */
300
+
@media only screen and (max-width: 720px) {
301
+
aside {
302
+
width: 100%;
303
+
float: none;
304
+
margin-inline-start: 0;
305
+
}
306
+
}
307
+
308
+
details {
309
+
padding: 0.5rem;
310
+
}
311
+
312
+
summary {
313
+
cursor: pointer;
314
+
font-weight: bold;
315
+
word-break: break-all;
316
+
}
317
+
318
+
details[open] > summary + * {
319
+
margin-top: 0;
320
+
}
321
+
322
+
details[open] > summary {
323
+
margin-bottom: 0.5rem;
324
+
}
325
+
326
+
details[open] > :last-child {
327
+
margin-bottom: 0;
328
+
}
329
+
330
+
/* Format tables */
331
+
table {
332
+
border-collapse: collapse;
333
+
margin: 1.5rem 0;
334
+
display: block;
335
+
overflow-x: auto;
336
+
white-space: nowrap;
337
+
}
338
+
339
+
td,
340
+
th {
341
+
border: 1px solid var(--border);
342
+
text-align: start;
343
+
padding: 0.5rem;
344
+
}
345
+
346
+
th {
347
+
background-color: var(--bg-light);
348
+
font-weight: bold;
349
+
}
350
+
351
+
tr:nth-child(even) {
352
+
background-color: var(--bg-light);
353
+
}
354
+
355
+
table caption {
356
+
text-align: left;
357
+
font-weight: bold;
358
+
margin: 0 0 0.4rem 1rem;
359
+
}
360
+
361
+
/* format forms */
362
+
fieldset {
363
+
border: 1px dashed var(--accent);
364
+
border-radius: var(--standard-border-radius);
365
+
}
366
+
367
+
fieldset > legend {
368
+
color: var(--accent);
369
+
}
370
+
371
+
textarea,
372
+
select,
373
+
input,
374
+
button,
375
+
.button {
376
+
font-size: inherit;
377
+
font-family: inherit;
378
+
padding: 0.25rem;
379
+
border-radius: var(--standard-border-radius);
380
+
box-shadow: none;
381
+
max-width: 100%;
382
+
display: inline-block;
383
+
}
384
+
385
+
textarea,
386
+
select,
387
+
input {
388
+
color: var(--text);
389
+
background-color: var(--bg);
390
+
border: 1px dashed var(--border);
391
+
}
392
+
393
+
label {
394
+
display: block;
395
+
}
396
+
397
+
fieldset label {
398
+
margin: 0 0 0.3rem 0;
399
+
}
400
+
401
+
textarea {
402
+
max-width: 43.5rem;
403
+
resize: both;
404
+
}
405
+
406
+
textarea:not([cols]) {
407
+
width: 100%;
408
+
}
409
+
410
+
@media only screen and (max-width: 720px) {
411
+
textarea,
412
+
select,
413
+
input {
414
+
width: 100%;
415
+
}
416
+
}
417
+
418
+
/* format buttons */
419
+
button,
420
+
.button,
421
+
a.button,
422
+
input[type="submit"],
423
+
input[type="reset"],
424
+
input[type="button"],
425
+
label[type="button"] {
426
+
border: 1px solid var(--accent);
427
+
background-color: var(--accent);
428
+
color: var(--accent-text);
429
+
padding: 0.5rem 0.9rem;
430
+
text-decoration: none;
431
+
line-height: normal;
432
+
}
433
+
434
+
.button[aria-disabled="true"],
435
+
input:disabled,
436
+
textarea:disabled,
437
+
select:disabled,
438
+
button[disabled] {
439
+
cursor: not-allowed;
440
+
background-color: var(--bg-light);
441
+
border-color: var(--bg-light);
442
+
color: var(--text-light);
443
+
}
444
+
445
+
input[type="range"] {
446
+
padding: 0;
447
+
color: var(--accent);
448
+
}
449
+
450
+
abbr[title] {
451
+
cursor: help;
452
+
text-decoration-line: underline;
453
+
text-decoration-style: dotted;
454
+
}
455
+
456
+
button:enabled:hover,
457
+
.button:not([aria-disabled="true"]):hover,
458
+
input[type="submit"]:enabled:hover,
459
+
input[type="reset"]:enabled:hover,
460
+
input[type="button"]:enabled:hover,
461
+
label[type="button"]:hover {
462
+
background-color: var(--accent-light);
463
+
border-color: var(--accent-light);
464
+
cursor: pointer;
465
+
}
466
+
467
+
.button:focus-visible,
468
+
button:focus-visible:where(:enabled),
469
+
input:enabled:focus-visible:where(
470
+
[type="submit"],
471
+
[type="reset"],
472
+
[type="button"]
473
+
) {
474
+
outline: 2px solid var(--accent);
475
+
outline-offset: 1px;
476
+
}
477
+
478
+
/* checkbox and radio button style */
479
+
input[type="checkbox"],
480
+
input[type="radio"] {
481
+
vertical-align: middle;
482
+
position: relative;
483
+
width: min-content;
484
+
width: 14px;
485
+
height: 14px;
486
+
}
487
+
488
+
input[type="checkbox"] + label,
489
+
input[type="radio"] + label {
490
+
display: inline-block;
491
+
}
492
+
493
+
input[type="radio"] {
494
+
border-radius: 100%;
495
+
}
496
+
497
+
input[type="checkbox"]:checked,
498
+
input[type="radio"]:checked {
499
+
background-color: var(--accent);
500
+
}
501
+
502
+
@media only screen and (max-width: 720px) {
503
+
textarea,
504
+
select,
505
+
input {
506
+
width: 100%;
507
+
}
508
+
}
509
+
510
+
input[type="color"] {
511
+
height: 2.5rem;
512
+
padding: 0.2rem;
513
+
}
514
+
515
+
input[type="file"] {
516
+
border: 0;
517
+
}
518
+
519
+
/* misc body elements */
520
+
hr {
521
+
border: 1px dashed var(--accent);
522
+
margin: 0.5rem 0 0.5rem 0;
523
+
}
524
+
525
+
mark {
526
+
padding: 0 0.25em 0 0.25em;
527
+
border-radius: var(--standard-border-radius);
528
+
background-color: var(--accent);
529
+
color: var(--bg);
530
+
}
531
+
532
+
mark a {
533
+
color: var(--link);
534
+
}
535
+
536
+
img,
537
+
video {
538
+
max-width: 90%;
539
+
height: auto;
540
+
padding: 0.125rem;
541
+
border: dashed 2px var(--accent);
542
+
border-radius: 15px;
543
+
}
544
+
545
+
figure {
546
+
margin: 0;
547
+
display: block;
548
+
overflow-x: auto;
549
+
}
550
+
551
+
figcaption {
552
+
text-align: left;
553
+
font-size: 0.875rem;
554
+
color: var(--text-light);
555
+
margin: 0 0 1rem 1rem;
556
+
}
557
+
558
+
blockquote {
559
+
margin: 0 0 0 1.25rem;
560
+
padding: 0.5rem 0 0 0.5rem;
561
+
border-inline-start: 0.375rem solid var(--accent);
562
+
color: var(--text-light);
563
+
font-style: italic;
564
+
}
565
+
566
+
cite {
567
+
font-size: 0.875rem;
568
+
color: var(--text-light);
569
+
font-style: normal;
570
+
}
571
+
572
+
dt {
573
+
color: var(--text-light);
574
+
}
575
+
576
+
code,
577
+
pre,
578
+
pre span,
579
+
kbd,
580
+
samp {
581
+
font-family: var(--mono-font);
582
+
}
583
+
584
+
pre {
585
+
border: 1px solid var(--accent);
586
+
max-height: 30rem;
587
+
padding: 0.625rem;
588
+
overflow: auto;
589
+
font-style: monospace;
590
+
white-space: pre-wrap;
591
+
}
592
+
593
+
p code,
594
+
li code,
595
+
div code {
596
+
padding: 0 0.125rem 0 0.125rem;
597
+
border-radius: 3px;
598
+
color: var(--bg);
599
+
background-color: var(--text);
600
+
}
601
+
602
+
pre code {
603
+
padding: 0;
604
+
border-radius: 0;
605
+
color: inherit;
606
+
background-color: inherit;
607
+
}
608
+
609
+
iframe {
610
+
max-width: 90%;
611
+
}
612
+
613
+
/* progress bars */
614
+
progress {
615
+
width: 100%;
616
+
}
617
+
618
+
progress:indeterminate {
619
+
background-color: var(--bg-light);
620
+
}
621
+
622
+
progress::-webkit-progress-bar {
623
+
border-radius: var(--standard-border-radius);
624
+
background-color: var(--bg-light);
625
+
}
626
+
627
+
progress::-webkit-progress-value {
628
+
border-radius: var(--standard-border-radius);
629
+
background-color: var(--accent);
630
+
}
631
+
632
+
progress::-moz-progress-bar {
633
+
border-radius: var(--standard-border-radius);
634
+
background-color: var(--accent);
635
+
transition-property: width;
636
+
transition-duration: 0.3s;
637
+
}
638
+
639
+
progress:indeterminate::-moz-progress-bar {
640
+
background-color: var(--bg-light);
641
+
}
642
+
643
+
dialog {
644
+
max-width: 40rem;
645
+
margin: auto;
646
+
}
647
+
648
+
dialog::backdrop {
649
+
background-color: var(--bg);
650
+
opacity: 0.8;
651
+
}
652
+
653
+
@media only screen and (max-width: 720px) {
654
+
dialog {
655
+
max-width: 100%;
656
+
margin: auto 1em;
657
+
}
658
+
}
659
+
660
+
/* superscript & subscript */
661
+
/* prevent scripts from affecting line-height. */
662
+
sup,
663
+
sub {
664
+
vertical-align: baseline;
665
+
position: relative;
666
+
}
667
+
668
+
sup {
669
+
top: -0.4em;
670
+
}
671
+
672
+
sub {
673
+
top: 0.3em;
674
+
}
+563
sass/css/syntax-theme.css
+563
sass/css/syntax-theme.css
···
1
+
/*
2
+
* theme "Catppuccin" generated by syntect
3
+
*/
4
+
5
+
html[data-theme="light"] .z-code {
6
+
color: #4c4f69;
7
+
background-color: #f3f2f2;
8
+
}
9
+
10
+
html[data-theme="light"] .z-comment {
11
+
color: #9ca0b0;
12
+
font-style: italic;
13
+
}
14
+
html[data-theme="light"] .z-string {
15
+
color: #40a02b;
16
+
}
17
+
html[data-theme="light"] .z-string.z-regexp {
18
+
color: #fe640b;
19
+
}
20
+
html[data-theme="light"] .z-constant.z-numeric {
21
+
color: #fe640b;
22
+
}
23
+
html[data-theme="light"] .z-constant.z-language.z-boolean {
24
+
color: #fe640b;
25
+
font-weight: bold;
26
+
font-style: italic;
27
+
}
28
+
html[data-theme="light"] .z-constant.z-language {
29
+
color: #7287fd;
30
+
font-style: italic;
31
+
}
32
+
html[data-theme="light"] .z-support.z-function.z-builtin {
33
+
color: #fe640b;
34
+
font-style: italic;
35
+
}
36
+
html[data-theme="light"] .z-variable.z-other.z-constant {
37
+
color: #fe640b;
38
+
}
39
+
html[data-theme="light"] .z-keyword {
40
+
color: #d20f39;
41
+
font-style: italic;
42
+
}
43
+
html[data-theme="light"] .z-keyword.z-control.z-loop,
44
+
.z-keyword.z-control.z-conditional,
45
+
.z-keyword.z-control.z-c\+\+ {
46
+
color: #8839ef;
47
+
font-weight: bold;
48
+
}
49
+
html[data-theme="light"] .z-keyword.z-control.z-return,
50
+
.z-keyword.z-control.z-flow.z-return {
51
+
color: #ea76cb;
52
+
font-weight: bold;
53
+
}
54
+
html[data-theme="light"] .z-support.z-type.z-exception {
55
+
color: #fe640b;
56
+
font-style: italic;
57
+
}
58
+
html[data-theme="light"] .z-keyword.z-operator,
59
+
.z-punctuation.z-accessor {
60
+
color: #04a5e5;
61
+
font-weight: bold;
62
+
}
63
+
html[data-theme="light"] .z-punctuation.z-separator {
64
+
color: #179299;
65
+
}
66
+
html[data-theme="light"] .z-punctuation.z-terminator {
67
+
color: #179299;
68
+
}
69
+
html[data-theme="light"] .z-punctuation.z-section {
70
+
color: #7c7f93;
71
+
}
72
+
html[data-theme="light"] .z-keyword.z-control.z-import.z-include {
73
+
color: #179299;
74
+
font-style: italic;
75
+
}
76
+
html[data-theme="light"] .z-storage {
77
+
color: #d20f39;
78
+
}
79
+
html[data-theme="light"] .z-storage.z-type {
80
+
color: #df8e1d;
81
+
font-style: italic;
82
+
}
83
+
html[data-theme="light"] .z-storage.z-modifier {
84
+
color: #d20f39;
85
+
}
86
+
html[data-theme="light"] .z-entity.z-name.z-namespace,
87
+
.z-meta.z-path {
88
+
color: #dc8a78;
89
+
font-style: italic;
90
+
}
91
+
html[data-theme="light"] .z-storage.z-type.z-class {
92
+
color: #dc8a78;
93
+
font-style: italic;
94
+
}
95
+
html[data-theme="light"] .z-entity.z-name.z-label {
96
+
color: #1e66f5;
97
+
}
98
+
html[data-theme="light"] .z-keyword.z-declaration.z-class {
99
+
color: #d20f39;
100
+
font-style: italic;
101
+
}
102
+
html[data-theme="light"] .z-entity.z-name.z-class,
103
+
.z-meta.z-toc-list.z-full-identifier {
104
+
color: #04a5e5;
105
+
}
106
+
html[data-theme="light"] .z-entity.z-other.z-inherited-class {
107
+
color: #04a5e5;
108
+
font-style: italic;
109
+
}
110
+
html[data-theme="light"] .z-entity.z-name.z-function,
111
+
.z-variable.z-function {
112
+
color: #1e66f5;
113
+
font-style: italic;
114
+
}
115
+
html[data-theme="light"] .z-entity.z-name.z-function.z-preprocessor {
116
+
color: #d20f39;
117
+
}
118
+
html[data-theme="light"] .z-keyword.z-control.z-import {
119
+
color: #d20f39;
120
+
}
121
+
html[data-theme="light"] .z-entity.z-name.z-function.z-constructor,
122
+
.z-entity.z-name.z-function.z-destructor {
123
+
color: #7287fd;
124
+
}
125
+
html[data-theme="light"] .z-variable.z-parameter.z-function {
126
+
color: #dc8a78;
127
+
font-style: italic;
128
+
}
129
+
html[data-theme="light"] .z-keyword.z-declaration.z-function {
130
+
color: #e64553;
131
+
font-style: italic;
132
+
}
133
+
html[data-theme="light"] .z-support.z-function {
134
+
color: #04a5e5;
135
+
}
136
+
html[data-theme="light"] .z-support.z-constant {
137
+
color: #1e66f5;
138
+
}
139
+
html[data-theme="light"] .z-support.z-type,
140
+
.z-support.z-class {
141
+
color: #1e66f5;
142
+
font-style: italic;
143
+
}
144
+
html[data-theme="light"] .z-variable.z-function {
145
+
color: #1e66f5;
146
+
font-style: italic;
147
+
}
148
+
html[data-theme="light"] .z-variable.z-parameter {
149
+
color: #dc8a78;
150
+
font-style: italic;
151
+
}
152
+
html[data-theme="light"] .z-variable.z-other {
153
+
color: #4c4f69;
154
+
font-style: italic;
155
+
}
156
+
html[data-theme="light"] .z-variable.z-other.z-member {
157
+
color: #dc8a78;
158
+
}
159
+
html[data-theme="light"] .z-variable.z-language {
160
+
color: #179299;
161
+
}
162
+
html[data-theme="light"] .z-entity.z-name.z-tag {
163
+
color: #fe640b;
164
+
}
165
+
html[data-theme="light"] .z-entity.z-other.z-attribute-name {
166
+
color: #8839ef;
167
+
font-style: italic;
168
+
}
169
+
html[data-theme="light"] .z-punctuation.z-definition.z-tag {
170
+
color: #e64553;
171
+
}
172
+
html[data-theme="light"] .z-markup.z-underline.z-link.z-markdown {
173
+
color: #dc8a78;
174
+
text-decoration: underline;
175
+
font-style: italic;
176
+
}
177
+
html[data-theme="light"] .z-meta.z-link.z-inline.z-description {
178
+
color: #7287fd;
179
+
font-weight: bold;
180
+
}
181
+
html[data-theme="light"] .z-comment.z-block.z-markdown,
182
+
.z-meta.z-code-fence,
183
+
.z-markup.z-raw.z-code-fence,
184
+
.z-markup.z-raw.z-inline {
185
+
color: #179299;
186
+
font-style: italic;
187
+
}
188
+
html[data-theme="light"] .z-punctuation.z-definition.z-heading,
189
+
.z-entity.z-name.z-section {
190
+
color: #1e66f5;
191
+
font-weight: bold;
192
+
}
193
+
html[data-theme="light"] .z-markup.z-italic {
194
+
color: #e64553;
195
+
font-style: italic;
196
+
}
197
+
html[data-theme="light"] .z-markup.z-bold {
198
+
color: #e64553;
199
+
font-weight: bold;
200
+
}
201
+
html[data-theme="light"] .z-constant.z-character.z-escape {
202
+
color: #ea76cb;
203
+
}
204
+
html[data-theme="light"]
205
+
.z-source.z-shell.z-bash
206
+
.z-meta.z-function.z-shell
207
+
.z-meta.z-compound.z-shell
208
+
.z-meta.z-function-call.z-identifier.z-shell {
209
+
color: #ea76cb;
210
+
}
211
+
html[data-theme="light"] .z-variable.z-language.z-shell {
212
+
color: #d20f39;
213
+
font-style: italic;
214
+
}
215
+
html[data-theme="light"]
216
+
.z-source.z-lua
217
+
.z-meta.z-function.z-lua
218
+
.z-meta.z-block.z-lua
219
+
.z-meta.z-mapping.z-value.z-lua
220
+
.z-meta.z-mapping.z-key.z-lua
221
+
.z-string.z-unquoted.z-key.z-lua {
222
+
color: #7287fd;
223
+
font-style: italic;
224
+
}
225
+
html[data-theme="light"]
226
+
.z-source.z-lua
227
+
.z-meta.z-function.z-lua
228
+
.z-meta.z-block.z-lua
229
+
.z-meta.z-mapping.z-key.z-lua
230
+
.z-string.z-unquoted.z-key.z-lua {
231
+
color: #dd7878;
232
+
}
233
+
html[data-theme="light"] .z-entity.z-name.z-constant.z-java {
234
+
color: #179299;
235
+
}
236
+
html[data-theme="light"] .z-support.z-type.z-property-name.z-css {
237
+
color: #dd7878;
238
+
font-style: italic;
239
+
}
240
+
html[data-theme="light"] .z-support.z-constant.z-property-value.z-css {
241
+
color: #4c4f69;
242
+
}
243
+
html[data-theme="light"] .z-constant.z-numeric.z-suffix.z-css,
244
+
.z-keyword.z-other.z-unit.z-css {
245
+
color: #179299;
246
+
font-style: italic;
247
+
}
248
+
html[data-theme="light"] .z-variable.z-other.z-custom-property.z-name.z-css,
249
+
.z-support.z-type.z-custom-property.z-name.z-css,
250
+
.z-punctuation.z-definition.z-custom-property.z-css {
251
+
color: #179299;
252
+
}
253
+
html[data-theme="light"] .z-entity.z-name.z-tag.z-css {
254
+
color: #7287fd;
255
+
}
256
+
html[data-theme="light"] .z-variable.z-other.z-sass {
257
+
color: #179299;
258
+
}
259
+
html[data-theme="light"] .z-invalid {
260
+
color: #4c4f69;
261
+
background-color: #d20f39;
262
+
}
263
+
html[data-theme="light"] .z-invalid.z-deprecated {
264
+
color: #4c4f69;
265
+
background-color: #8839ef;
266
+
}
267
+
html[data-theme="light"] .z-meta.z-diff,
268
+
.z-meta.z-diff.z-header {
269
+
color: #9ca0b0;
270
+
}
271
+
html[data-theme="light"] .z-markup.z-deleted {
272
+
color: #d20f39;
273
+
}
274
+
html[data-theme="light"] .z-markup.z-inserted {
275
+
color: #40a02b;
276
+
}
277
+
html[data-theme="light"] .z-markup.z-changed {
278
+
color: #df8e1d;
279
+
}
280
+
html[data-theme="light"] .z-message.z-error {
281
+
color: #d20f39;
282
+
}
283
+
284
+
/* dark */
285
+
286
+
html[data-theme="dark"] .z-code {
287
+
color: #cad3f5;
288
+
background-color: #2a2e35;
289
+
}
290
+
291
+
html[data-theme="dark"] .z-comment {
292
+
color: #6e738d;
293
+
font-style: italic;
294
+
}
295
+
html[data-theme="dark"] .z-string {
296
+
color: #a6da95;
297
+
}
298
+
html[data-theme="dark"] .z-string.z-regexp {
299
+
color: #f5a97f;
300
+
}
301
+
html[data-theme="dark"] .z-constant.z-numeric {
302
+
color: #f5a97f;
303
+
}
304
+
html[data-theme="dark"] .z-constant.z-language.z-boolean {
305
+
color: #f5a97f;
306
+
font-weight: bold;
307
+
font-style: italic;
308
+
}
309
+
html[data-theme="dark"] .z-constant.z-language {
310
+
color: #b7bdf8;
311
+
font-style: italic;
312
+
}
313
+
html[data-theme="dark"] .z-support.z-function.z-builtin {
314
+
color: #f5a97f;
315
+
font-style: italic;
316
+
}
317
+
html[data-theme="dark"] .z-variable.z-other.z-constant {
318
+
color: #f5a97f;
319
+
}
320
+
html[data-theme="dark"] .z-keyword {
321
+
color: #ed8796;
322
+
font-style: italic;
323
+
}
324
+
html[data-theme="dark"] .z-keyword.z-control.z-loop,
325
+
.z-keyword.z-control.z-conditional,
326
+
.z-keyword.z-control.z-c\+\+ {
327
+
color: #c6a0f6;
328
+
font-weight: bold;
329
+
}
330
+
html[data-theme="dark"] .z-keyword.z-control.z-return,
331
+
.z-keyword.z-control.z-flow.z-return {
332
+
color: #f5bde6;
333
+
font-weight: bold;
334
+
}
335
+
html[data-theme="dark"] .z-support.z-type.z-exception {
336
+
color: #f5a97f;
337
+
font-style: italic;
338
+
}
339
+
html[data-theme="dark"] .z-keyword.z-operator,
340
+
.z-punctuation.z-accessor {
341
+
color: #91d7e3;
342
+
font-weight: bold;
343
+
}
344
+
html[data-theme="dark"] .z-punctuation.z-separator {
345
+
color: #8bd5ca;
346
+
}
347
+
html[data-theme="dark"] .z-punctuation.z-terminator {
348
+
color: #8bd5ca;
349
+
}
350
+
html[data-theme="dark"] .z-punctuation.z-section {
351
+
color: #939ab7;
352
+
}
353
+
html[data-theme="dark"] .z-keyword.z-control.z-import.z-include {
354
+
color: #8bd5ca;
355
+
font-style: italic;
356
+
}
357
+
html[data-theme="dark"] .z-storage {
358
+
color: #ed8796;
359
+
}
360
+
html[data-theme="dark"] .z-storage.z-type {
361
+
color: #eed49f;
362
+
font-style: italic;
363
+
}
364
+
html[data-theme="dark"] .z-storage.z-modifier {
365
+
color: #ed8796;
366
+
}
367
+
html[data-theme="dark"] .z-entity.z-name.z-namespace,
368
+
.z-meta.z-path {
369
+
color: #f4dbd6;
370
+
font-style: italic;
371
+
}
372
+
html[data-theme="dark"] .z-storage.z-type.z-class {
373
+
color: #f4dbd6;
374
+
font-style: italic;
375
+
}
376
+
html[data-theme="dark"] .z-entity.z-name.z-label {
377
+
color: #8aadf4;
378
+
}
379
+
html[data-theme="dark"] .z-keyword.z-declaration.z-class {
380
+
color: #ed8796;
381
+
font-style: italic;
382
+
}
383
+
html[data-theme="dark"] .z-entity.z-name.z-class,
384
+
.z-meta.z-toc-list.z-full-identifier {
385
+
color: #91d7e3;
386
+
}
387
+
html[data-theme="dark"] .z-entity.z-other.z-inherited-class {
388
+
color: #91d7e3;
389
+
font-style: italic;
390
+
}
391
+
html[data-theme="dark"] .z-entity.z-name.z-function,
392
+
.z-variable.z-function {
393
+
color: #8aadf4;
394
+
font-style: italic;
395
+
}
396
+
html[data-theme="dark"] .z-entity.z-name.z-function.z-preprocessor {
397
+
color: #ed8796;
398
+
}
399
+
html[data-theme="dark"] .z-keyword.z-control.z-import {
400
+
color: #ed8796;
401
+
}
402
+
html[data-theme="dark"] .z-entity.z-name.z-function.z-constructor,
403
+
.z-entity.z-name.z-function.z-destructor {
404
+
color: #b7bdf8;
405
+
}
406
+
html[data-theme="dark"] .z-variable.z-parameter.z-function {
407
+
color: #f4dbd6;
408
+
font-style: italic;
409
+
}
410
+
html[data-theme="dark"] .z-keyword.z-declaration.z-function {
411
+
color: #ee99a0;
412
+
font-style: italic;
413
+
}
414
+
html[data-theme="dark"] .z-support.z-function {
415
+
color: #91d7e3;
416
+
}
417
+
html[data-theme="dark"] .z-support.z-constant {
418
+
color: #8aadf4;
419
+
}
420
+
html[data-theme="dark"] .z-support.z-type,
421
+
.z-support.z-class {
422
+
color: #8aadf4;
423
+
font-style: italic;
424
+
}
425
+
html[data-theme="dark"] .z-variable.z-function {
426
+
color: #8aadf4;
427
+
font-style: italic;
428
+
}
429
+
html[data-theme="dark"] .z-variable.z-parameter {
430
+
color: #f4dbd6;
431
+
font-style: italic;
432
+
}
433
+
html[data-theme="dark"] .z-variable.z-other {
434
+
color: #cad3f5;
435
+
font-style: italic;
436
+
}
437
+
html[data-theme="dark"] .z-variable.z-other.z-member {
438
+
color: #f4dbd6;
439
+
}
440
+
html[data-theme="dark"] .z-variable.z-language {
441
+
color: #8bd5ca;
442
+
}
443
+
html[data-theme="dark"] .z-entity.z-name.z-tag {
444
+
color: #f5a97f;
445
+
}
446
+
html[data-theme="dark"] .z-entity.z-other.z-attribute-name {
447
+
color: #c6a0f6;
448
+
font-style: italic;
449
+
}
450
+
html[data-theme="dark"] .z-punctuation.z-definition.z-tag {
451
+
color: #ee99a0;
452
+
}
453
+
html[data-theme="dark"] .z-markup.z-underline.z-link.z-markdown {
454
+
color: #f4dbd6;
455
+
text-decoration: underline;
456
+
font-style: italic;
457
+
}
458
+
html[data-theme="dark"] .z-meta.z-link.z-inline.z-description {
459
+
color: #b7bdf8;
460
+
font-weight: bold;
461
+
}
462
+
html[data-theme="dark"] .z-comment.z-block.z-markdown,
463
+
.z-meta.z-code-fence,
464
+
.z-markup.z-raw.z-code-fence,
465
+
.z-markup.z-raw.z-inline {
466
+
color: #8bd5ca;
467
+
font-style: italic;
468
+
}
469
+
html[data-theme="dark"] .z-punctuation.z-definition.z-heading,
470
+
.z-entity.z-name.z-section {
471
+
color: #8aadf4;
472
+
font-weight: bold;
473
+
}
474
+
html[data-theme="dark"] .z-markup.z-italic {
475
+
color: #ee99a0;
476
+
font-style: italic;
477
+
}
478
+
html[data-theme="dark"] .z-markup.z-bold {
479
+
color: #ee99a0;
480
+
font-weight: bold;
481
+
}
482
+
html[data-theme="dark"] .z-constant.z-character.z-escape {
483
+
color: #f5bde6;
484
+
}
485
+
html[data-theme="dark"]
486
+
.z-source.z-shell.z-bash
487
+
.z-meta.z-function.z-shell
488
+
.z-meta.z-compound.z-shell
489
+
.z-meta.z-function-call.z-identifier.z-shell {
490
+
color: #f5bde6;
491
+
}
492
+
html[data-theme="dark"] .z-variable.z-language.z-shell {
493
+
color: #ed8796;
494
+
font-style: italic;
495
+
}
496
+
html[data-theme="dark"]
497
+
.z-source.z-lua
498
+
.z-meta.z-function.z-lua
499
+
.z-meta.z-block.z-lua
500
+
.z-meta.z-mapping.z-value.z-lua
501
+
.z-meta.z-mapping.z-key.z-lua
502
+
.z-string.z-unquoted.z-key.z-lua {
503
+
color: #b7bdf8;
504
+
font-style: italic;
505
+
}
506
+
html[data-theme="dark"]
507
+
.z-source.z-lua
508
+
.z-meta.z-function.z-lua
509
+
.z-meta.z-block.z-lua
510
+
.z-meta.z-mapping.z-key.z-lua
511
+
.z-string.z-unquoted.z-key.z-lua {
512
+
color: #f0c6c6;
513
+
}
514
+
html[data-theme="dark"] .z-entity.z-name.z-constant.z-java {
515
+
color: #8bd5ca;
516
+
}
517
+
html[data-theme="dark"] .z-support.z-type.z-property-name.z-css {
518
+
color: #f0c6c6;
519
+
font-style: italic;
520
+
}
521
+
html[data-theme="dark"] .z-support.z-constant.z-property-value.z-css {
522
+
color: #cad3f5;
523
+
}
524
+
html[data-theme="dark"] .z-constant.z-numeric.z-suffix.z-css,
525
+
.z-keyword.z-other.z-unit.z-css {
526
+
color: #8bd5ca;
527
+
font-style: italic;
528
+
}
529
+
html[data-theme="dark"] .z-variable.z-other.z-custom-property.z-name.z-css,
530
+
.z-support.z-type.z-custom-property.z-name.z-css,
531
+
.z-punctuation.z-definition.z-custom-property.z-css {
532
+
color: #8bd5ca;
533
+
}
534
+
html[data-theme="dark"] .z-entity.z-name.z-tag.z-css {
535
+
color: #b7bdf8;
536
+
}
537
+
html[data-theme="dark"] .z-variable.z-other.z-sass {
538
+
color: #8bd5ca;
539
+
}
540
+
html[data-theme="dark"] .z-invalid {
541
+
color: #cad3f5;
542
+
background-color: #ed8796;
543
+
}
544
+
html[data-theme="dark"] .z-invalid.z-deprecated {
545
+
color: #cad3f5;
546
+
background-color: #c6a0f6;
547
+
}
548
+
html[data-theme="dark"] .z-meta.z-diff,
549
+
.z-meta.z-diff.z-header {
550
+
color: #6e738d;
551
+
}
552
+
html[data-theme="dark"] .z-markup.z-deleted {
553
+
color: #ed8796;
554
+
}
555
+
html[data-theme="dark"] .z-markup.z-inserted {
556
+
color: #a6da95;
557
+
}
558
+
html[data-theme="dark"] .z-markup.z-changed {
559
+
color: #eed49f;
560
+
}
561
+
html[data-theme="dark"] .z-message.z-error {
562
+
color: #ed8796;
563
+
}
+1
-16
templates/head.html
+1
-16
templates/head.html
···
65
65
<link
66
66
rel="stylesheet"
67
67
type="text/css"
68
-
href="https://speyll.github.io/suCSS/reset-min.css"
69
-
/>
70
-
<link
71
-
rel="stylesheet"
72
-
type="text/css"
73
-
href="https://speyll.github.io/suCSS/suCSS-min.css"
74
-
/>
75
-
<link
76
-
rel="stylesheet"
77
-
type="text/css"
78
-
href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"
79
-
/>
80
-
<link
81
-
rel="stylesheet"
82
-
type="text/css"
83
-
href="{{ get_url(path='css/syntax-theme.css', trailing_slash=false) | safe }}"
68
+
href="{{ get_url(path='css/main.css', trailing_slash=false) | safe }}"
84
69
/>
85
70
{% endblock css %}
86
71
<script