the home site for me: also iteration 3 or 4 of my site
chore: format
+471
-471
+4
-6
config.toml
+4
-6
config.toml
···
9
9
feed_filenames = ["rss.xml", "atom.xml"]
10
10
default_language = "en"
11
11
12
-
taxonomies = [
13
-
{name = "tags", feed = true},
14
-
]
12
+
taxonomies = [{ name = "tags", feed = true }]
15
13
16
14
[markdown]
17
15
render_emoji = true
···
41
39
twitter_card = true
42
40
43
41
header_nav = [
44
-
{ url = "/", name = "/root" },
45
-
{ url = "/verify", name = "/verify" },
46
-
{ url = "/blog", name = "/blog" }
42
+
{ url = "/", name = "/root" },
43
+
{ url = "/verify", name = "/verify" },
44
+
{ url = "/blog", name = "/blog" },
47
45
]
+98
-108
sass/css/mods.css
+98
-108
sass/css/mods.css
···
1
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;
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
10
}
11
11
12
12
#footer-container {
13
-
display: flex;
14
-
flex-direction: column;
15
-
justify-content: center;
16
-
align-items: center;
17
-
text-align: center;
18
-
padding-bottom: 0.5rem;
13
+
display: flex;
14
+
flex-direction: column;
15
+
justify-content: center;
16
+
align-items: center;
17
+
text-align: center;
18
+
padding-bottom: 0.5rem;
19
19
}
20
20
21
21
#footer-container p {
22
-
margin: 0;
22
+
margin: 0;
23
23
}
24
24
25
25
.accent-data {
26
-
color: var(--accent-dark);
26
+
color: var(--accent-dark);
27
27
}
28
28
29
29
.tags-data {
30
-
display: flex;
31
-
flex-direction: row;
32
-
flex-wrap: wrap;
33
-
justify-content: flex-end;
34
-
align-items: flex-start;
35
-
align-content: flex-end;
36
-
gap: 0.25rem;
30
+
display: flex;
31
+
flex-direction: row;
32
+
flex-wrap: wrap;
33
+
justify-content: flex-end;
34
+
align-items: flex-start;
35
+
align-content: flex-end;
36
+
gap: 0.25rem;
37
37
}
38
38
39
39
.title-list li {
40
-
margin-bottom: 0.375rem;
40
+
margin-bottom: 0.375rem;
41
41
}
42
42
43
43
/* icons settings */
44
44
.icons {
45
-
width: 1.3rem;
46
-
height: 1.3rem;
47
-
aspect-ratio: 1 / 1;
48
-
display: inline-block;
49
-
vertical-align: middle;
50
-
color: var(--text);
51
-
fill: var(--text);
52
-
background-color: transparent;
53
-
cursor: pointer;
45
+
width: 1.3rem;
46
+
height: 1.3rem;
47
+
aspect-ratio: 1 / 1;
48
+
display: inline-block;
49
+
vertical-align: middle;
50
+
color: var(--text);
51
+
fill: var(--text);
52
+
background-color: transparent;
53
+
cursor: pointer;
54
54
}
55
55
56
56
.icons:hover {
57
-
background-color: transparent;
58
-
color: var(--accent);
57
+
background-color: transparent;
58
+
color: var(--accent);
59
59
}
60
60
61
61
/* footnotes */
62
62
.footnote-definition {
63
-
margin: 0 0 0 0.125rem;
63
+
margin: 0 0 0 0.125rem;
64
64
}
65
65
66
66
.footnote-definition-label {
67
-
color: var(--accent);
67
+
color: var(--accent);
68
68
}
69
69
70
70
.footnote-definition p {
71
-
display: inline;
72
-
margin: 0.625rem 0 0 0.625rem;
71
+
display: inline;
72
+
margin: 0.625rem 0 0 0.625rem;
73
73
}
74
74
75
75
/* general classes */
76
76
.no-style {
77
-
padding: 0;
78
-
margin: 0;
79
-
border: none;
80
-
border-radius: 0;
77
+
padding: 0;
78
+
margin: 0;
79
+
border: none;
80
+
border-radius: 0;
81
81
}
82
82
83
83
.no-style:hover {
84
-
background-color: transparent;
85
-
color: var(--accent);
84
+
background-color: transparent;
85
+
color: var(--accent);
86
86
}
87
87
88
88
.center {
89
-
text-align: center;
89
+
text-align: center;
90
90
}
91
91
92
92
.center img {
93
-
display: block;
94
-
margin: 1rem auto;
93
+
display: block;
94
+
margin: 1rem auto;
95
95
}
96
96
97
97
.center figcaption {
98
-
text-align: center;
98
+
text-align: center;
99
99
}
100
100
101
101
.float-right {
102
-
float: right;
102
+
float: right;
103
103
}
104
104
105
105
.float-left {
106
-
float: left;
106
+
float: left;
107
107
}
108
108
109
109
div > code,
110
110
li code,
111
111
p code {
112
-
padding: 0.1em 0.3em 0.1em 0.3em;
113
-
color: var(--text-dark);
114
-
background-color: var(--bg-light);
112
+
padding: 0.1em 0.3em 0.1em 0.3em;
113
+
color: var(--text-dark);
114
+
background-color: var(--bg-light);
115
115
}
116
116
117
117
pre {
118
-
border-top-left-radius: 0;
118
+
border-top-left-radius: 0;
119
119
}
120
120
121
121
blockquote {
122
-
padding-top: 0.2rem;
123
-
padding-bottom: 0.2rem;
122
+
padding-top: 0.2rem;
123
+
padding-bottom: 0.2rem;
124
124
}
125
125
126
126
blockquote:has(+ pre) {
127
-
display: inline-block;
128
-
border: none;
129
-
font-family: "code", monospace !important;
130
-
font-size: 0.8rem;
131
-
font-weight: 600;
132
-
margin: 0;
133
-
margin-bottom: 0.2rem;
134
-
margin-block: 0 0;
135
-
border-top-left-radius: 0.2em;
136
-
border-top-right-radius: 0.2em;
137
-
padding-left: 0.75rem;
138
-
padding-right: 0.75rem;
139
-
padding-top: 0.25rem;
140
-
padding-bottom: 0.25rem;
141
-
position: relative;
142
-
background-color: var(--accent);
127
+
display: inline-block;
128
+
border: none;
129
+
font-family: "code", monospace !important;
130
+
font-size: 0.8rem;
131
+
font-weight: 600;
132
+
margin: 0;
133
+
margin-bottom: 0.2rem;
134
+
margin-block: 0 0;
135
+
border-top-left-radius: 0.2em;
136
+
border-top-right-radius: 0.2em;
137
+
padding-left: 0.75rem;
138
+
padding-right: 0.75rem;
139
+
padding-top: 0.25rem;
140
+
padding-bottom: 0.25rem;
141
+
position: relative;
142
+
background-color: var(--accent);
143
143
}
144
144
145
145
blockquote:has(+ pre) p {
146
-
margin: 0;
147
-
color: var(--accent-text);
146
+
margin: 0;
147
+
color: var(--accent-text);
148
148
}
149
149
150
150
blockquote:has(+ pre) p::selection {
151
-
background: var(--pink-puree);
151
+
background: var(--pink-puree);
152
152
}
153
153
154
154
.yt-embed {
155
-
width: 100%;
156
-
display: flex;
157
-
flex-direction: column;
158
-
justify-content: center;
159
-
align-content: center;
160
-
text-align: center;
155
+
width: 100%;
156
+
display: flex;
157
+
flex-direction: column;
158
+
justify-content: center;
159
+
align-content: center;
160
+
text-align: center;
161
161
}
162
162
163
163
.yt-embed iframe {
164
-
width: 100%;
165
-
aspect-ratio: 16 / 9;
166
-
align-self: center;
164
+
width: 100%;
165
+
aspect-ratio: 16 / 9;
166
+
align-self: center;
167
167
}
168
168
169
169
.yt-embed figcaption {
···
180
180
}
181
181
182
182
:root {
183
-
--nightshade-violet: oklch(0.27 0.0242 287.67);
184
-
--purple-night: oklch(27.58% 0.0203 289.13);
185
-
--dark-crushed-grape: oklch(74.02% 0.0756 311.96);
186
-
--light-crushed-grape: oklch(73.48% 0.1008 284.99);
187
-
--reseda-green: oklch(62.33% 0.0475 126.94);
188
-
--earth-yellow: oklch(86.49% 0.018 73.05);
189
-
--sunset: oklch(0.86 0.0213 73.05);
190
-
--ultra-violet: oklch(42.21% 0.0676 297.45);
191
-
--rose-quartz: oklch(65.32% 0.0585 311.96);
192
-
--pink-puree: oklch(75.65% 0.0555 290.76);
193
-
--lavendar-breeze: oklch(91.06% 0.0223 290.76);
194
-
--purple-gray: oklch(25.63% 0.0002 290.76);
195
-
--alice-blue: oklch(95.38% 0.0118 239.91);
196
-
}
197
-
198
-
body::after {
199
-
content: "";
200
-
position: absolute;
201
-
top: 0;
202
-
left: 0;
203
-
width: 100%;
204
-
height: 100%;
205
-
pointer-events: none;
183
+
--nightshade-violet: oklch(0.27 0.0242 287.67);
184
+
--purple-night: oklch(27.58% 0.0203 289.13);
185
+
--dark-crushed-grape: oklch(74.02% 0.0756 311.96);
186
+
--light-crushed-grape: oklch(73.48% 0.1008 284.99);
187
+
--reseda-green: oklch(62.33% 0.0475 126.94);
188
+
--earth-yellow: oklch(86.49% 0.018 73.05);
189
+
--sunset: oklch(0.86 0.0213 73.05);
190
+
--ultra-violet: oklch(42.21% 0.0676 297.45);
191
+
--rose-quartz: oklch(65.32% 0.0585 311.96);
192
+
--pink-puree: oklch(75.65% 0.0555 290.76);
193
+
--lavendar-breeze: oklch(91.06% 0.0223 290.76);
194
+
--purple-gray: oklch(25.63% 0.0002 290.76);
195
+
--alice-blue: oklch(95.38% 0.0118 239.91);
206
196
}
+24
-24
sass/css/reset.css
+24
-24
sass/css/reset.css
···
2
2
*,
3
3
*::before,
4
4
*::after {
5
-
box-sizing: border-box;
6
-
-webkit-box-sizing: border-box;
5
+
box-sizing: border-box;
6
+
-webkit-box-sizing: border-box;
7
7
}
8
8
9
9
* {
10
-
margin: 0;
10
+
margin: 0;
11
11
}
12
12
13
13
/* Prevent font size inflation */
14
14
html {
15
-
-moz-text-size-adjust: none;
16
-
-webkit-text-size-adjust: none;
17
-
text-size-adjust: none;
15
+
-moz-text-size-adjust: none;
16
+
-webkit-text-size-adjust: none;
17
+
text-size-adjust: none;
18
18
}
19
19
20
20
/* Remove default margin in favour of better control in authored CSS */
···
28
28
blockquote,
29
29
dl,
30
30
dd {
31
-
margin-block-end: 0;
31
+
margin-block-end: 0;
32
32
}
33
33
34
34
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
···
36
36
ol,
37
37
ul[role="list"],
38
38
ol[role="list"] {
39
-
list-style: none;
39
+
list-style: none;
40
40
}
41
41
42
42
/* Set core body defaults */
43
43
body {
44
-
min-height: 100vh;
45
-
line-height: 1.5;
46
-
-webkit-font-smoothing: antialiased;
44
+
min-height: 100vh;
45
+
line-height: 1.5;
46
+
-webkit-font-smoothing: antialiased;
47
47
}
48
48
49
49
/* Set shorter line heights on headings and interactive elements */
···
54
54
button,
55
55
input,
56
56
label {
57
-
line-height: 1.1;
57
+
line-height: 1.1;
58
58
}
59
59
60
60
/* Balance text wrapping on headings */
···
62
62
h2,
63
63
h3,
64
64
h4 {
65
-
text-wrap: balance;
65
+
text-wrap: balance;
66
66
}
67
67
68
68
p,
···
72
72
h4,
73
73
h5,
74
74
h6 {
75
-
overflow-wrap: break-word;
75
+
overflow-wrap: break-word;
76
76
}
77
77
78
78
/* A elements that don't have a class get default styles */
79
79
a:not([class]) {
80
-
text-decoration-skip-ink: auto;
80
+
text-decoration-skip-ink: auto;
81
81
}
82
82
83
83
/* Make images easier to work with */
···
86
86
video,
87
87
canvas,
88
88
svg {
89
-
max-width: 100%;
90
-
display: block;
89
+
max-width: 100%;
90
+
display: block;
91
91
}
92
92
93
93
/* Inherit fonts for inputs and buttons */
···
96
96
textarea,
97
97
select,
98
98
progress {
99
-
appearance: none;
100
-
-webkit-appearance: none;
101
-
-moz-appearance: none;
102
-
font: inherit;
99
+
appearance: none;
100
+
-webkit-appearance: none;
101
+
-moz-appearance: none;
102
+
font: inherit;
103
103
}
104
104
105
105
/* Make sure textareas without a rows attribute are not tiny */
106
106
textarea:not([rows]) {
107
-
min-height: 10em;
107
+
min-height: 10em;
108
108
}
109
109
110
110
/* Anything that has been anchored to should have extra scroll margin */
111
111
:target {
112
-
scroll-margin-block: 5ex;
112
+
scroll-margin-block: 5ex;
113
113
}
114
114
115
115
#root,
116
116
#__next {
117
-
isolation: isolate;
117
+
isolation: isolate;
118
118
}
+345
-333
sass/css/suCSS.css
+345
-333
sass/css/suCSS.css
···
1
1
:root,
2
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
-
--serif-font: Superclarendon, "Bookman Old Style", "URW Bookman",
8
-
"URW Bookman L", "Georgia Pro", Georgia, serif;
9
-
--mono-font: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
10
-
"DejaVu Sans Mono", monospace;
11
-
--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;
12
15
13
-
/* default colors */
14
-
--bg: var(--earth-yellow);
15
-
--noise-strength: 0.3;
16
-
--bg-light: #cbcdcd;
17
-
--text: #41474e;
18
-
--text-light: #686764;
19
-
--text-dark: #20252b;
20
-
--accent: oklch(35.55% 0.0754 60.09);
21
-
--accent-dark: #56412bc5;
22
-
--accent-text: #dfd1bc;
23
-
--border: #646868;
24
-
--link: var(--accent);
25
-
--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);
16
+
/* default colors */
17
+
--bg: var(--earth-yellow);
18
+
--noise-strength: 0.3;
19
+
--bg-light: #cbcdcd;
20
+
--text: #41474e;
21
+
--text-light: #686764;
22
+
--text-dark: #20252b;
23
+
--accent: oklch(35.55% 0.0754 60.09);
24
+
--accent-dark: #56412bc5;
25
+
--accent-text: #dfd1bc;
26
+
--border: #646868;
27
+
--link: var(--accent);
28
+
--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);
26
29
}
27
30
28
31
/* theme media queries */
29
32
@media (prefers-color-scheme: dark) {
30
-
:root,
31
-
::backdrop {
32
-
color-scheme: dark;
33
-
--bg: var(--purple-night);
34
-
--noise-strength: 0.15;
35
-
--bg-light: var(--ultra-violet);
36
-
--text: var(--lavendar-breeze);
37
-
--text-light: var(--pink-puree);
38
-
--text-dark: oklch(80.28% 0.0111 204.11);
39
-
--accent: var(--rose-quartz);
40
-
--accent-dark: var(--dark-crushed-grape);
41
-
--accent-text: var(--purple-gray);
42
-
--link: var(--light-crushed-grape);
43
-
--border: var(--pink-puree);
44
-
--selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);
45
-
}
33
+
:root,
34
+
::backdrop {
35
+
color-scheme: dark;
36
+
--bg: var(--purple-night);
37
+
--noise-strength: 0.15;
38
+
--bg-light: var(--ultra-violet);
39
+
--text: var(--lavendar-breeze);
40
+
--text-light: var(--pink-puree);
41
+
--text-dark: oklch(80.28% 0.0111 204.11);
42
+
--accent: var(--rose-quartz);
43
+
--accent-dark: var(--dark-crushed-grape);
44
+
--accent-text: var(--purple-gray);
45
+
--link: var(--light-crushed-grape);
46
+
--border: var(--pink-puree);
47
+
--selection: color-mix(
48
+
in oklab,
49
+
var(--accent),
50
+
var(--purple-night) 50%
51
+
);
52
+
}
46
53
}
47
54
48
55
[data-theme="dark"] {
49
-
color-scheme: dark;
50
-
--bg: var(--purple-night);
51
-
--noise-strength: 0.15;
52
-
--bg-light: var(--ultra-violet);
53
-
--text: var(--lavendar-breeze);
54
-
--text-light: var(--pink-puree);
55
-
--text-dark: oklch(80.28% 0.0111 204.11);
56
-
--accent: var(--rose-quartz);
57
-
--accent-dark: var(--dark-crushed-grape);
58
-
--accent-text: var(--purple-gray);
59
-
--link: var(--light-crushed-grape);
60
-
--border: var(--pink-puree);
61
-
--selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);
56
+
color-scheme: dark;
57
+
--bg: var(--purple-night);
58
+
--noise-strength: 0.15;
59
+
--bg-light: var(--ultra-violet);
60
+
--text: var(--lavendar-breeze);
61
+
--text-light: var(--pink-puree);
62
+
--text-dark: oklch(80.28% 0.0111 204.11);
63
+
--accent: var(--rose-quartz);
64
+
--accent-dark: var(--dark-crushed-grape);
65
+
--accent-text: var(--purple-gray);
66
+
--link: var(--light-crushed-grape);
67
+
--border: var(--pink-puree);
68
+
--selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);
62
69
}
63
70
64
71
@media (prefers-color-scheme: light) {
65
-
:root,
66
-
::backdrop {
67
-
color-scheme: light;
68
-
--bg: var(--earth-yellow);
69
-
--noise-strength: 0.15;
70
-
--bg-light: #cbcdcd;
71
-
--text: #41474e;
72
-
--text-light: #686764;
73
-
--accent: #58310ac5;
74
-
--accent-dark: #e08f67;
75
-
--accent-text: #dfd1bc;
76
-
--border: #646868;
77
-
--link: var(--accent);
78
-
--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);
79
-
}
72
+
:root,
73
+
::backdrop {
74
+
color-scheme: light;
75
+
--bg: var(--earth-yellow);
76
+
--noise-strength: 0.15;
77
+
--bg-light: #cbcdcd;
78
+
--text: #41474e;
79
+
--text-light: #686764;
80
+
--accent: #58310ac5;
81
+
--accent-dark: #e08f67;
82
+
--accent-text: #dfd1bc;
83
+
--border: #646868;
84
+
--link: var(--accent);
85
+
--selection: color-mix(
86
+
in oklab,
87
+
var(--accent),
88
+
var(--earth-yellow) 50%
89
+
);
90
+
}
80
91
}
81
92
82
93
[data-theme="light"] {
83
-
/* default (light) theme */
84
-
color-scheme: light;
85
-
--bg: var(--earth-yellow);
86
-
--noise-strength: 0.22;
87
-
--bg-light: var(--reseda-green);
88
-
--text: #41474e;
89
-
--text-light: #686764;
90
-
--text-dark: #20252b;
91
-
--accent: #58310ac5;
92
-
--accent-dark: #56412bc5;
93
-
--accent-text: #dfd1bc;
94
-
--border: #646868;
95
-
--link: var(--accent);
96
-
--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);
94
+
/* default (light) theme */
95
+
color-scheme: light;
96
+
--bg: var(--earth-yellow);
97
+
--noise-strength: 0.22;
98
+
--bg-light: var(--reseda-green);
99
+
--text: #41474e;
100
+
--text-light: #686764;
101
+
--text-dark: #20252b;
102
+
--accent: #58310ac5;
103
+
--accent-dark: #56412bc5;
104
+
--accent-text: #dfd1bc;
105
+
--border: #646868;
106
+
--link: var(--accent);
107
+
--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);
97
108
}
98
109
99
110
::selection,
100
111
::-moz-selection {
101
-
color: var(--bg);
102
-
background: var(--selection);
112
+
color: var(--bg);
113
+
background: var(--selection);
103
114
}
104
115
105
116
/* chromium scrollbars */
106
117
::-webkit-scrollbar {
107
-
width: 8px;
108
-
height: 8px;
109
-
overflow: visible;
118
+
width: 8px;
119
+
height: 8px;
120
+
overflow: visible;
110
121
}
111
122
::-webkit-scrollbar-thumb {
112
-
background: var(--accent);
113
-
width: 12px;
123
+
background: var(--accent);
124
+
width: 12px;
114
125
}
115
126
::-webkit-scrollbar-track {
116
-
background: var(--bg-light);
127
+
background: var(--bg-light);
117
128
}
118
129
119
130
/* firefox scrollbars */
120
131
* {
121
-
scrollbar-color: var(--accent) var(--bg-light);
122
-
scrollbar-width: auto;
132
+
scrollbar-color: var(--accent) var(--bg-light);
133
+
scrollbar-width: auto;
123
134
}
124
135
125
136
html {
126
-
color-scheme: light dark;
127
-
font-family: var(--mono-font);
128
-
scroll-behavior: smooth;
137
+
color-scheme: light dark;
138
+
font-family: var(--mono-font);
139
+
scroll-behavior: smooth;
129
140
}
130
141
131
142
body {
132
-
min-height: 100svh;
133
-
color: var(--text);
134
-
background: var(--bg);
135
-
position: relative;
136
-
font-size: 1rem;
137
-
display: grid;
138
-
grid-template-columns: 1fr min(45rem, 90%) 1fr;
139
-
grid-template-rows: auto 1fr auto;
140
-
grid-row-gap: 0.625rem;
143
+
min-height: 100svh;
144
+
color: var(--text);
145
+
background: var(--bg);
146
+
position: relative;
147
+
font-size: 1rem;
148
+
display: grid;
149
+
grid-template-columns: 1fr min(45rem, 90%) 1fr;
150
+
grid-template-rows: auto 1fr auto;
151
+
grid-row-gap: 0.625rem;
141
152
}
142
153
body > * {
143
-
grid-column: 2;
154
+
grid-column: 2;
144
155
}
145
156
146
157
body > footer {
147
-
color: var(--text-light);
148
-
font-size: 0.875;
158
+
color: var(--text-light);
159
+
font-size: 0.875;
149
160
}
150
161
151
162
/* Format headers */
152
163
h1 {
153
-
font-size: 2rem;
164
+
font-size: 2rem;
154
165
}
155
166
h2 {
156
-
font-size: 1.75rem;
167
+
font-size: 1.75rem;
157
168
}
158
169
h3 {
159
-
font-size: 1.5rem;
170
+
font-size: 1.5rem;
160
171
}
161
172
h4 {
162
-
font-size: 1.25rem;
173
+
font-size: 1.25rem;
163
174
}
164
175
h5 {
165
-
font-size: 1rem;
176
+
font-size: 1rem;
166
177
}
167
178
h6 {
168
-
font-size: 0.75rem;
179
+
font-size: 0.75rem;
169
180
}
170
181
171
182
h1,
···
174
185
h4,
175
186
h5,
176
187
h6 {
177
-
margin: 0.5em 0 0.5em 0;
178
-
padding: 0.22em 0.4em 0.22em 0.4em;
179
-
border-radius: 0.1em;
180
-
background-color: var(--accent);
181
-
color: var(--accent-text);
182
-
width: fit-content;
188
+
margin: 0.5em 0 0.5em 0;
189
+
padding: 0.22em 0.4em 0.22em 0.4em;
190
+
border-radius: 0.1em;
191
+
background-color: var(--accent);
192
+
color: var(--accent-text);
193
+
width: fit-content;
183
194
}
184
195
185
196
/* Fix line height when title wraps */
186
197
h1,
187
198
h2,
188
199
h3 {
189
-
line-height: 1.1;
200
+
line-height: 1.1;
190
201
}
191
202
192
203
@media only screen and (max-width: 720px) {
193
-
h1 {
194
-
font-size: 1.5rem;
195
-
}
196
-
h2 {
197
-
font-size: 1.25rem;
198
-
}
199
-
h3 {
200
-
font-size: 1rem;
201
-
}
202
-
h4 {
203
-
font-size: 0.75rem;
204
-
}
205
-
h5 {
206
-
font-size: 0.5rem;
207
-
}
208
-
h6 {
209
-
font-size: 0.25rem;
210
-
}
204
+
h1 {
205
+
font-size: 1.5rem;
206
+
}
207
+
h2 {
208
+
font-size: 1.25rem;
209
+
}
210
+
h3 {
211
+
font-size: 1rem;
212
+
}
213
+
h4 {
214
+
font-size: 0.75rem;
215
+
}
216
+
h5 {
217
+
font-size: 0.5rem;
218
+
}
219
+
h6 {
220
+
font-size: 0.25rem;
221
+
}
211
222
}
212
223
213
224
p {
214
-
margin: 1rem 0;
225
+
margin: 1rem 0;
215
226
}
216
227
217
228
/* format links */
218
229
a,
219
230
a:visited {
220
-
text-decoration: none;
221
-
font-weight: bold;
222
-
border-radius: 0.125rem;
223
-
color: var(--accent-dark);
231
+
text-decoration: none;
232
+
font-weight: bold;
233
+
border-radius: 0.125rem;
234
+
color: var(--accent-dark);
224
235
}
225
236
226
237
a {
227
-
color: var(--link);
238
+
color: var(--link);
228
239
}
229
240
230
241
a:hover {
231
-
text-decoration: underline wavy;
242
+
text-decoration: underline wavy;
232
243
}
233
244
234
245
/* format lists */
235
246
ul {
236
-
list-style: none;
237
-
margin-top: 0.25rem;
238
-
margin-bottom: 0.25rem;
247
+
list-style: none;
248
+
margin-top: 0.25rem;
249
+
margin-bottom: 0.25rem;
239
250
}
240
251
241
252
ol {
242
-
list-style-type: decimal;
243
-
margin-top: 0.25rem;
244
-
margin-bottom: 0.25rem;
253
+
list-style-type: decimal;
254
+
margin-top: 0.25rem;
255
+
margin-bottom: 0.25rem;
245
256
}
246
257
247
258
li {
248
-
margin-bottom: 0.125rem;
259
+
margin-bottom: 0.125rem;
249
260
}
250
261
251
262
ul li::marker {
252
-
content: "* ";
253
-
color: var(--accent);
254
-
font-size: 1.1rem;
263
+
content: "* ";
264
+
color: var(--accent);
265
+
font-size: 1.1rem;
255
266
}
256
267
257
268
ol li::marker {
258
-
color: var(--accent);
269
+
color: var(--accent);
259
270
}
260
271
261
272
ol li:hover::marker {
262
-
font-weight: 700;
263
-
color: var(--link);
273
+
font-weight: 700;
274
+
color: var(--link);
264
275
}
265
276
266
277
/* Use flexbox to allow items to wrap, as needed */
267
278
header > nav ul,
268
279
header > nav ol {
269
-
display: flex;
270
-
flex-direction: row;
271
-
flex-wrap: wrap;
272
-
align-content: space-around;
273
-
justify-content: right;
274
-
list-style-type: none;
275
-
margin: 0.5rem 0 0 0;
276
-
padding: 0;
277
-
gap: 1rem;
280
+
display: flex;
281
+
flex-direction: row;
282
+
flex-wrap: wrap;
283
+
align-content: space-around;
284
+
justify-content: right;
285
+
list-style-type: none;
286
+
margin: 0.5rem 0 0 0;
287
+
padding: 0;
288
+
gap: 1rem;
278
289
}
279
290
280
291
/* List items are inline elements, make them behave more like blocks */
281
292
header > nav ul li,
282
293
header > nav ol li {
283
-
display: inline-block;
294
+
display: inline-block;
284
295
}
285
296
286
297
/* Consolidate box styling */
287
298
aside,
288
299
details,
289
300
progress {
290
-
background-color: var(--bg-light);
291
-
border-radius: var(--standard-border-radius);
301
+
background-color: var(--bg-light);
302
+
border-radius: var(--standard-border-radius);
292
303
}
293
304
294
305
aside {
295
-
font-size: 1rem;
296
-
width: 35%;
297
-
padding: 0 10px;
298
-
margin-inline-start: 10px;
299
-
float: right;
306
+
font-size: 1rem;
307
+
width: 35%;
308
+
padding: 0 10px;
309
+
margin-inline-start: 10px;
310
+
float: right;
300
311
}
301
312
*[dir="rtl"] aside {
302
-
float: left;
313
+
float: left;
303
314
}
304
315
305
316
/* make aside full-width on mobile */
306
317
@media only screen and (max-width: 720px) {
307
-
aside {
308
-
width: 100%;
309
-
float: none;
310
-
margin-inline-start: 0;
311
-
}
318
+
aside {
319
+
width: 100%;
320
+
float: none;
321
+
margin-inline-start: 0;
322
+
}
312
323
}
313
324
314
325
details {
315
-
padding: 0.5rem;
326
+
padding: 0.5rem;
316
327
}
317
328
318
329
summary {
319
-
cursor: pointer;
320
-
font-weight: bold;
321
-
word-break: break-all;
330
+
cursor: pointer;
331
+
font-weight: bold;
332
+
word-break: break-all;
322
333
}
323
334
324
335
details[open] > summary + * {
325
-
margin-top: 0;
336
+
margin-top: 0;
326
337
}
327
338
328
339
details[open] > summary {
329
-
margin-bottom: 0.5rem;
340
+
margin-bottom: 0.5rem;
330
341
}
331
342
332
343
details[open] > :last-child {
333
-
margin-bottom: 0;
344
+
margin-bottom: 0;
334
345
}
335
346
336
347
/* Format tables */
337
348
table {
338
-
border-collapse: collapse;
339
-
margin: 1.5rem 0;
340
-
display: block;
341
-
overflow-x: auto;
342
-
white-space: nowrap;
349
+
border-collapse: collapse;
350
+
margin: 1.5rem 0;
351
+
display: block;
352
+
overflow-x: auto;
353
+
white-space: nowrap;
343
354
}
344
355
345
356
td,
346
357
th {
347
-
border: 1px solid var(--border);
348
-
text-align: start;
349
-
padding: 0.5rem;
358
+
border: 1px solid var(--border);
359
+
text-align: start;
360
+
padding: 0.5rem;
350
361
}
351
362
352
363
th {
353
-
background-color: var(--bg-light);
354
-
font-weight: bold;
364
+
background-color: var(--bg-light);
365
+
font-weight: bold;
355
366
}
356
367
357
368
tr:nth-child(even) {
358
-
background-color: var(--bg-light);
369
+
background-color: var(--bg-light);
359
370
}
360
371
361
372
table caption {
362
-
text-align: left;
363
-
font-weight: bold;
364
-
margin: 0 0 0.4rem 1rem;
373
+
text-align: left;
374
+
font-weight: bold;
375
+
margin: 0 0 0.4rem 1rem;
365
376
}
366
377
367
378
/* format forms */
368
379
fieldset {
369
-
border: 1px dashed var(--accent);
370
-
border-radius: var(--standard-border-radius);
380
+
border: 1px dashed var(--accent);
381
+
border-radius: var(--standard-border-radius);
371
382
}
372
383
373
384
fieldset > legend {
374
-
color: var(--accent);
385
+
color: var(--accent);
375
386
}
376
387
377
388
textarea,
···
379
390
input,
380
391
button,
381
392
.button {
382
-
font-size: inherit;
383
-
font-family: inherit;
384
-
padding: 0.25rem;
385
-
border-radius: var(--standard-border-radius);
386
-
box-shadow: none;
387
-
max-width: 100%;
388
-
display: inline-block;
393
+
font-size: inherit;
394
+
font-family: inherit;
395
+
padding: 0.25rem;
396
+
border-radius: var(--standard-border-radius);
397
+
box-shadow: none;
398
+
max-width: 100%;
399
+
display: inline-block;
389
400
}
390
401
391
402
textarea,
392
403
select,
393
404
input {
394
-
color: var(--text);
395
-
background-color: var(--bg);
396
-
border: 1px dashed var(--border);
405
+
color: var(--text);
406
+
background-color: var(--bg);
407
+
border: 1px dashed var(--border);
397
408
}
398
409
399
410
label {
400
-
display: block;
411
+
display: block;
401
412
}
402
413
403
414
fieldset label {
404
-
margin: 0 0 0.3rem 0;
415
+
margin: 0 0 0.3rem 0;
405
416
}
406
417
407
418
textarea {
408
-
max-width: 43.5rem;
409
-
resize: both;
419
+
max-width: 43.5rem;
420
+
resize: both;
410
421
}
411
422
412
423
textarea:not([cols]) {
413
-
width: 100%;
424
+
width: 100%;
414
425
}
415
426
416
427
@media only screen and (max-width: 720px) {
417
-
textarea,
418
-
select,
419
-
input {
420
-
width: 100%;
421
-
}
428
+
textarea,
429
+
select,
430
+
input {
431
+
width: 100%;
432
+
}
422
433
}
423
434
424
435
/* format buttons */
···
429
440
input[type="reset"],
430
441
input[type="button"],
431
442
label[type="button"] {
432
-
border: 1px solid var(--accent);
433
-
background-color: var(--accent);
434
-
color: var(--accent-text);
435
-
padding: 0.5rem 0.9rem;
436
-
text-decoration: none;
437
-
line-height: normal;
443
+
border: 1px solid var(--accent);
444
+
background-color: var(--accent);
445
+
color: var(--accent-text);
446
+
padding: 0.5rem 0.9rem;
447
+
text-decoration: none;
448
+
line-height: normal;
438
449
}
439
450
440
451
.button[aria-disabled="true"],
···
442
453
textarea:disabled,
443
454
select:disabled,
444
455
button[disabled] {
445
-
cursor: not-allowed;
446
-
background-color: var(--bg-light);
447
-
border-color: var(--bg-light);
448
-
color: var(--text-light);
456
+
cursor: not-allowed;
457
+
background-color: var(--bg-light);
458
+
border-color: var(--bg-light);
459
+
color: var(--text-light);
449
460
}
450
461
451
462
input[type="range"] {
452
-
padding: 0;
453
-
color: var(--accent);
463
+
padding: 0;
464
+
color: var(--accent);
454
465
}
455
466
456
467
abbr[title] {
457
-
cursor: help;
458
-
text-decoration-line: underline;
459
-
text-decoration-style: dotted;
468
+
cursor: help;
469
+
text-decoration-line: underline;
470
+
text-decoration-style: dotted;
460
471
}
461
472
462
473
button:enabled:hover,
···
465
476
input[type="reset"]:enabled:hover,
466
477
input[type="button"]:enabled:hover,
467
478
label[type="button"]:hover {
468
-
background-color: var(--accent-dark);
469
-
border-color: var(--accent-dark);
470
-
cursor: pointer;
479
+
background-color: var(--accent-dark);
480
+
border-color: var(--accent-dark);
481
+
cursor: pointer;
471
482
}
472
483
473
484
.button:focus-visible,
474
485
button:focus-visible:where(:enabled),
475
486
input:enabled:focus-visible:where(
476
-
[type="submit"],
477
-
[type="reset"],
478
-
[type="button"]
479
-
) {
480
-
outline: 2px solid var(--accent);
481
-
outline-offset: 1px;
487
+
[type="submit"],
488
+
[type="reset"],
489
+
[type="button"]
490
+
) {
491
+
outline: 2px solid var(--accent);
492
+
outline-offset: 1px;
482
493
}
483
494
484
495
/* checkbox and radio button style */
485
496
input[type="checkbox"],
486
497
input[type="radio"] {
487
-
vertical-align: middle;
488
-
position: relative;
489
-
width: min-content;
490
-
width: 14px;
491
-
height: 14px;
498
+
vertical-align: middle;
499
+
position: relative;
500
+
width: min-content;
501
+
width: 14px;
502
+
height: 14px;
492
503
}
493
504
494
505
input[type="checkbox"] + label,
495
506
input[type="radio"] + label {
496
-
display: inline-block;
507
+
display: inline-block;
497
508
}
498
509
499
510
input[type="radio"] {
500
-
border-radius: 100%;
511
+
border-radius: 100%;
501
512
}
502
513
503
514
input[type="checkbox"]:checked,
504
515
input[type="radio"]:checked {
505
-
background-color: var(--accent);
516
+
background-color: var(--accent);
506
517
}
507
518
508
519
@media only screen and (max-width: 720px) {
509
-
textarea,
510
-
select,
511
-
input {
512
-
width: 100%;
513
-
}
520
+
textarea,
521
+
select,
522
+
input {
523
+
width: 100%;
524
+
}
514
525
}
515
526
516
527
input[type="color"] {
517
-
height: 2.5rem;
518
-
padding: 0.2rem;
528
+
height: 2.5rem;
529
+
padding: 0.2rem;
519
530
}
520
531
521
532
input[type="file"] {
522
-
border: 0;
533
+
border: 0;
523
534
}
524
535
525
536
/* misc body elements */
526
537
hr {
527
-
border: 1px dashed var(--accent);
528
-
margin: 0.5rem 0 0.5rem 0;
538
+
border: 1px dashed var(--accent);
539
+
margin: 0.5rem 0 0.5rem 0;
529
540
}
530
541
531
542
mark {
532
-
padding: 0 0.25em 0 0.25em;
533
-
border-radius: var(--standard-border-radius);
534
-
background-color: var(--accent);
535
-
color: var(--bg);
543
+
padding: 0 0.25em 0 0.25em;
544
+
border-radius: var(--standard-border-radius);
545
+
background-color: var(--accent);
546
+
color: var(--bg);
536
547
}
537
548
538
549
mark a {
539
-
color: var(--link);
550
+
color: var(--link);
540
551
}
541
552
542
553
img,
543
554
video,
544
555
iframe[src^="https://www.youtube-nocookie.com"],
545
-
iframe[src^="https://www.youtube.com"] {
546
-
max-width: 90%;
547
-
margin: 1rem;
548
-
height: auto;
549
-
border: dashed 2px var(--accent);
550
-
border-radius: 15px;
551
-
opacity: 0.95;
556
+
iframe[src^="https://www.youtube.com"]
557
+
{
558
+
max-width: 90%;
559
+
margin: 1rem;
560
+
height: auto;
561
+
border: dashed 2px var(--accent);
562
+
border-radius: 15px;
563
+
opacity: 0.95;
552
564
}
553
565
554
566
figure {
555
-
margin: 0;
556
-
display: block;
557
-
overflow-x: auto;
567
+
margin: 0;
568
+
display: block;
569
+
overflow-x: auto;
558
570
}
559
571
560
572
figcaption {
561
-
text-align: left;
562
-
font-size: 0.875rem;
563
-
color: var(--text-light);
564
-
margin: 0 0 1rem 1rem;
573
+
text-align: left;
574
+
font-size: 0.875rem;
575
+
color: var(--text-light);
576
+
margin: 0 0 1rem 1rem;
565
577
}
566
578
567
579
blockquote {
568
-
margin: 0 0 0 1.25rem;
569
-
padding: 0.5rem 0 0 0.5rem;
570
-
border-inline-start: 0.375rem solid var(--accent);
571
-
color: var(--text-light);
572
-
font-style: italic;
580
+
margin: 0 0 0 1.25rem;
581
+
padding: 0.5rem 0 0 0.5rem;
582
+
border-inline-start: 0.375rem solid var(--accent);
583
+
color: var(--text-light);
584
+
font-style: italic;
573
585
}
574
586
575
587
p:has(cite) {
576
-
text-align: right;
577
-
font-size: 0.875rem;
578
-
color: var(--text-light);
579
-
font-weight: 600;
588
+
text-align: right;
589
+
font-size: 0.875rem;
590
+
color: var(--text-light);
591
+
font-weight: 600;
580
592
}
581
593
582
594
cite::before {
583
-
content: "— ";
595
+
content: "— ";
584
596
}
585
597
586
598
dt {
587
-
color: var(--text-light);
599
+
color: var(--text-light);
588
600
}
589
601
590
602
code,
···
592
604
pre span,
593
605
kbd,
594
606
samp {
595
-
font-family: var(--mono-font);
607
+
font-family: var(--mono-font);
596
608
}
597
609
598
610
pre {
599
-
border: 1px solid var(--accent);
600
-
max-height: 30rem;
601
-
padding: 0.625rem;
602
-
overflow-x: auto;
603
-
font-style: monospace;
611
+
border: 1px solid var(--accent);
612
+
max-height: 30rem;
613
+
padding: 0.625rem;
614
+
overflow-x: auto;
615
+
font-style: monospace;
604
616
}
605
617
606
618
p code,
607
619
li code,
608
620
div code {
609
-
padding: 0 0.125rem 0 0.125rem;
610
-
border-radius: 3px;
611
-
color: var(--bg);
612
-
background-color: var(--text);
621
+
padding: 0 0.125rem 0 0.125rem;
622
+
border-radius: 3px;
623
+
color: var(--bg);
624
+
background-color: var(--text);
613
625
}
614
626
615
627
pre code {
616
-
padding: 0;
617
-
border-radius: 0;
618
-
color: inherit;
619
-
background-color: inherit;
628
+
padding: 0;
629
+
border-radius: 0;
630
+
color: inherit;
631
+
background-color: inherit;
620
632
}
621
633
622
634
iframe {
623
-
max-width: 90%;
635
+
max-width: 90%;
624
636
}
625
637
626
638
/* progress bars */
627
639
progress {
628
-
width: 100%;
640
+
width: 100%;
629
641
}
630
642
631
643
progress:indeterminate {
632
-
background-color: var(--bg-light);
644
+
background-color: var(--bg-light);
633
645
}
634
646
635
647
progress::-webkit-progress-bar {
636
-
border-radius: var(--standard-border-radius);
637
-
background-color: var(--bg-light);
648
+
border-radius: var(--standard-border-radius);
649
+
background-color: var(--bg-light);
638
650
}
639
651
640
652
progress::-webkit-progress-value {
641
-
border-radius: var(--standard-border-radius);
642
-
background-color: var(--accent);
653
+
border-radius: var(--standard-border-radius);
654
+
background-color: var(--accent);
643
655
}
644
656
645
657
progress::-moz-progress-bar {
646
-
border-radius: var(--standard-border-radius);
647
-
background-color: var(--accent);
648
-
transition-property: width;
649
-
transition-duration: 0.3s;
658
+
border-radius: var(--standard-border-radius);
659
+
background-color: var(--accent);
660
+
transition-property: width;
661
+
transition-duration: 0.3s;
650
662
}
651
663
652
664
progress:indeterminate::-moz-progress-bar {
653
-
background-color: var(--bg-light);
665
+
background-color: var(--bg-light);
654
666
}
655
667
656
668
dialog {
657
-
max-width: 40rem;
658
-
margin: auto;
669
+
max-width: 40rem;
670
+
margin: auto;
659
671
}
660
672
661
673
dialog::backdrop {
662
-
background-color: var(--bg);
663
-
opacity: 0.8;
674
+
background-color: var(--bg);
675
+
opacity: 0.8;
664
676
}
665
677
666
678
@media only screen and (max-width: 720px) {
667
-
dialog {
668
-
max-width: 100%;
669
-
margin: auto 1em;
670
-
}
679
+
dialog {
680
+
max-width: 100%;
681
+
margin: auto 1em;
682
+
}
671
683
}
672
684
673
685
/* superscript & subscript */
674
686
/* prevent scripts from affecting line-height. */
675
687
sup,
676
688
sub {
677
-
vertical-align: baseline;
678
-
position: relative;
689
+
vertical-align: baseline;
690
+
position: relative;
679
691
}
680
692
681
693
sup {
682
-
top: -0.4em;
694
+
top: -0.4em;
683
695
}
684
696
685
697
sub {
686
-
top: 0.3em;
698
+
top: 0.3em;
687
699
}