dunkirk.sh
the home site for me: also iteration 3 or 4 of my site
feat: add biome and format
+31
biome.json
+31
biome.json
···
1
+
{
2
+
"$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
3
+
"vcs": {
4
+
"enabled": false,
5
+
"clientKind": "git",
6
+
"useIgnoreFile": false
7
+
},
8
+
"files": {
9
+
"ignoreUnknown": false,
10
+
"ignore": []
11
+
},
12
+
"formatter": {
13
+
"formatWithErrors": true,
14
+
"enabled": true,
15
+
"indentStyle": "tab"
16
+
},
17
+
"organizeImports": {
18
+
"enabled": true
19
+
},
20
+
"linter": {
21
+
"enabled": true,
22
+
"rules": {
23
+
"recommended": true
24
+
}
25
+
},
26
+
"javascript": {
27
+
"formatter": {
28
+
"quoteStyle": "double"
29
+
}
30
+
}
31
+
}
+79
-79
sass/css/mods.css
+79
-79
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-wrap: wrap;
15
-
justify-content: center;
16
-
align-items: center;
17
-
text-align: center;
18
-
padding-bottom: 0.5rem;
13
+
display: flex;
14
+
flex-wrap: wrap;
15
+
justify-content: center;
16
+
align-items: center;
17
+
text-align: center;
18
+
padding-bottom: 0.5rem;
19
19
}
20
20
21
21
.accent-data {
22
-
color: var(--accent-light);
22
+
color: var(--accent-light);
23
23
}
24
24
25
25
.theme-transition {
26
-
transition: background-color 0.3s ease;
26
+
transition: background-color 0.3s ease;
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
-
color: var(--text);
113
-
background-color: var(--bg-light);
112
+
color: var(--text);
113
+
background-color: var(--bg-light);
114
114
}
115
115
116
116
pre {
117
-
border-top-left-radius: 0;
117
+
border-top-left-radius: 0;
118
118
}
119
119
120
120
blockquote {
121
-
padding-top: 0.2rem;
122
-
padding-bottom: 0.2rem;
121
+
padding-top: 0.2rem;
122
+
padding-bottom: 0.2rem;
123
123
}
124
124
125
125
blockquote:has(+ pre) {
126
-
display: inline-block;
127
-
border: none;
128
-
font-family: "code" !important;
129
-
font-size: 0.8rem;
130
-
font-weight: 600;
131
-
margin: 0;
132
-
margin-bottom: 0.2rem;
133
-
margin-block: 0 0;
134
-
border-top-left-radius: 5px;
135
-
border-top-right-radius: 5px;
136
-
padding-left: 0.75rem;
137
-
padding-right: 0.75rem;
138
-
padding-top: 0.25rem;
139
-
padding-bottom: 0.25rem;
140
-
position: relative;
141
-
background-color: var(--accent);
126
+
display: inline-block;
127
+
border: none;
128
+
font-family: "code" !important;
129
+
font-size: 0.8rem;
130
+
font-weight: 600;
131
+
margin: 0;
132
+
margin-bottom: 0.2rem;
133
+
margin-block: 0 0;
134
+
border-top-left-radius: 5px;
135
+
border-top-right-radius: 5px;
136
+
padding-left: 0.75rem;
137
+
padding-right: 0.75rem;
138
+
padding-top: 0.25rem;
139
+
padding-bottom: 0.25rem;
140
+
position: relative;
141
+
background-color: var(--accent);
142
142
}
143
143
144
144
blockquote:has(+ pre) p {
145
-
margin: 0;
146
-
color: var(--accent-text);
145
+
margin: 0;
146
+
color: var(--accent-text);
147
147
}
148
148
149
149
.yt-embed {
150
-
width: 100%;
151
-
display: flex;
152
-
justify-content: center;
150
+
width: 100%;
151
+
display: flex;
152
+
justify-content: center;
153
153
}
154
154
155
155
.yt-embed iframe {
156
-
width: 100%;
157
-
aspect-ratio: 16 / 9;
156
+
width: 100%;
157
+
aspect-ratio: 16 / 9;
158
158
}
+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
}
+320
-321
sass/css/suCSS.css
+320
-321
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
-
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
8
-
--standard-border-radius: 5px;
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
9
10
-
/* default colors */
11
-
--bg: #eeeeee;
12
-
--bg-light: #cbcdcd;
13
-
--text: #41474e;
14
-
--text-light: #686764;
15
-
--accent: #58310ac5;
16
-
--accent-light: #e08f67;
17
-
--accent-text: var(--bg);
18
-
--border: #646868;
19
-
--link: #573819c5;
10
+
/* default colors */
11
+
--bg: #eeeeee;
12
+
--bg-light: #cbcdcd;
13
+
--text: #41474e;
14
+
--text-light: #686764;
15
+
--accent: #58310ac5;
16
+
--accent-light: #e08f67;
17
+
--accent-text: var(--bg);
18
+
--border: #646868;
19
+
--link: #573819c5;
20
20
}
21
21
22
22
/* theme media queries */
23
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: #c5c0b7;
31
-
--accent: #78b6ad;
32
-
--accent-light: #87c9e5;
33
-
--accent-text: var(--bg);
34
-
--border: #dbd5bc;
35
-
--link: #e2c8a2;
36
-
}
37
-
img,
38
-
video {
39
-
opacity: 0.8;
40
-
}
24
+
:root,
25
+
::backdrop {
26
+
color-scheme: dark;
27
+
--bg: #222529;
28
+
--bg-light: #464949;
29
+
--text: #d6d6d6;
30
+
--text-light: #c5c0b7;
31
+
--accent: #78b6ad;
32
+
--accent-light: #87c9e5;
33
+
--accent-text: var(--bg);
34
+
--border: #dbd5bc;
35
+
--link: #e2c8a2;
36
+
}
37
+
img,
38
+
video {
39
+
opacity: 0.8;
40
+
}
41
41
}
42
42
43
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: #686764;
51
-
--accent: #58310ac5;
52
-
--accent-light: #e08f67;
53
-
--accent-text: var(--bg);
54
-
--border: #646868;
55
-
--link: #573819c5;
56
-
}
44
+
:root,
45
+
::backdrop {
46
+
color-scheme: light;
47
+
--bg: #eeeeee;
48
+
--bg-light: #cbcdcd;
49
+
--text: #41474e;
50
+
--text-light: #686764;
51
+
--accent: #58310ac5;
52
+
--accent-light: #e08f67;
53
+
--accent-text: var(--bg);
54
+
--border: #646868;
55
+
--link: #573819c5;
56
+
}
57
57
}
58
58
59
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: #686764;
66
-
--accent: #58310ac5;
67
-
--accent-light: #56412bc5;
68
-
--accent-text: var(--bg);
69
-
--border: #646868;
70
-
--link: #573819c5;
60
+
/* default (light) theme */
61
+
color-scheme: light;
62
+
--bg: #eeeeee;
63
+
--bg-light: #cbcdcd;
64
+
--text: #41474e;
65
+
--text-light: #686764;
66
+
--accent: #58310ac5;
67
+
--accent-light: #56412bc5;
68
+
--accent-text: var(--bg);
69
+
--border: #646868;
70
+
--link: #573819c5;
71
71
}
72
72
73
73
[data-theme="dark"] {
74
-
color-scheme: dark;
75
-
--bg: #222529;
76
-
--bg-light: #464949;
77
-
--text: #d6d6d6;
78
-
--text-light: #c5c0b7;
79
-
--accent: #78b4b6e3;
80
-
--accent-light: #c5edefe6;
81
-
--accent-text: var(--bg);
82
-
--border: #dbd5bc;
83
-
--link: #e2c8a2;
74
+
color-scheme: dark;
75
+
--bg: #222529;
76
+
--bg-light: #464949;
77
+
--text: #d6d6d6;
78
+
--text-light: #c5c0b7;
79
+
--accent: #78b4b6e3;
80
+
--accent-light: #c5edefe6;
81
+
--accent-text: var(--bg);
82
+
--border: #dbd5bc;
83
+
--link: #e2c8a2;
84
84
}
85
85
86
86
::selection,
87
87
::-moz-selection {
88
-
color: var(--bg);
89
-
background: var(--accent);
88
+
color: var(--bg);
89
+
background: var(--accent);
90
90
}
91
91
92
92
/* chromium scrollbars */
93
93
::-webkit-scrollbar {
94
-
width: 8px;
95
-
height: 8px;
96
-
overflow: visible;
94
+
width: 8px;
95
+
height: 8px;
96
+
overflow: visible;
97
97
}
98
98
::-webkit-scrollbar-thumb {
99
-
background: var(--accent);
100
-
width: 12px;
99
+
background: var(--accent);
100
+
width: 12px;
101
101
}
102
102
::-webkit-scrollbar-track {
103
-
background: var(--bg-light);
103
+
background: var(--bg-light);
104
104
}
105
105
106
106
/* firefox scrollbars */
107
107
* {
108
-
scrollbar-color: var(--accent) var(--bg-light);
109
-
scrollbar-width: thin;
110
-
scrollbar-height: thin;
108
+
scrollbar-color: var(--accent) var(--bg-light);
109
+
scrollbar-width: thin;
110
+
scrollbar-height: thin;
111
111
}
112
112
113
113
html {
114
-
color-scheme: light dark;
115
-
font-family: var(--mono-font);
116
-
scroll-behavior: smooth;
114
+
color-scheme: light dark;
115
+
font-family: var(--mono-font);
116
+
scroll-behavior: smooth;
117
117
}
118
118
119
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;
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
128
}
129
129
body > * {
130
-
grid-column: 2;
130
+
grid-column: 2;
131
131
}
132
132
133
133
body > footer {
134
-
color: var(--text-light);
135
-
font-size: 0.875;
134
+
color: var(--text-light);
135
+
font-size: 0.875;
136
136
}
137
137
138
138
/* Format headers */
139
139
h1 {
140
-
font-size: 2rem;
140
+
font-size: 2rem;
141
141
}
142
142
h2 {
143
-
font-size: 1.75rem;
143
+
font-size: 1.75rem;
144
144
}
145
145
h3 {
146
-
font-size: 1.5rem;
146
+
font-size: 1.5rem;
147
147
}
148
148
h4 {
149
-
font-size: 1.25rem;
149
+
font-size: 1.25rem;
150
150
}
151
151
h5 {
152
-
font-size: 1rem;
152
+
font-size: 1rem;
153
153
}
154
154
h6 {
155
-
font-size: 0.75rem;
155
+
font-size: 0.75rem;
156
156
}
157
157
158
158
h1,
···
161
161
h4,
162
162
h5,
163
163
h6 {
164
-
margin: 0.5em 0 0.5em 0;
164
+
margin: 0.5em 0 0.5em 0;
165
165
}
166
166
167
167
/* Fix line height when title wraps */
168
168
h1,
169
169
h2,
170
170
h3 {
171
-
line-height: 1.1;
171
+
line-height: 1.1;
172
172
}
173
173
174
174
h1::before,
···
177
177
h4::before,
178
178
h5::before,
179
179
h6::before {
180
-
color: var(--accent);
181
-
content: "# ";
180
+
color: var(--accent);
181
+
content: "# ";
182
182
}
183
183
184
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
-
}
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
203
}
204
204
205
205
p {
206
-
margin: 1rem 0;
206
+
margin: 1rem 0;
207
207
}
208
208
209
209
/* format links */
210
210
a,
211
211
a:visited {
212
-
text-decoration: none;
213
-
font-weight: bold;
214
-
font-style: italic;
215
-
border-radius: 0.125rem;
216
-
color: var(--link);
212
+
text-decoration: none;
213
+
font-weight: bold;
214
+
font-style: italic;
215
+
border-radius: 0.125rem;
216
+
color: var(--link);
217
217
}
218
218
219
219
a:hover {
220
-
background-color: var(--link);
221
-
color: var(--bg);
220
+
background-color: var(--link);
221
+
color: var(--bg);
222
222
}
223
223
224
224
/* format lists */
225
225
ul {
226
-
list-style: none;
227
-
margin-top: 0.25rem;
228
-
margin-bottom: 0.25rem;
226
+
list-style: none;
227
+
margin-top: 0.25rem;
228
+
margin-bottom: 0.25rem;
229
229
}
230
230
231
231
ol {
232
-
list-style-type: decimal;
233
-
margin-top: 0.25rem;
234
-
margin-bottom: 0.25rem;
232
+
list-style-type: decimal;
233
+
margin-top: 0.25rem;
234
+
margin-bottom: 0.25rem;
235
235
}
236
236
237
237
li {
238
-
margin-bottom: 0.125rem;
238
+
margin-bottom: 0.125rem;
239
239
}
240
240
241
241
ul li::marker {
242
-
content: "» ";
243
-
color: var(--accent);
242
+
content: "» ";
243
+
color: var(--accent);
244
244
}
245
245
246
246
ul li:hover::marker {
247
-
content: "# ";
248
-
font-weight: 700;
249
-
color: var(--link);
247
+
content: "# ";
248
+
font-weight: 700;
249
+
color: var(--link);
250
250
}
251
251
252
252
ol li::marker {
253
-
color: var(--accent);
253
+
color: var(--accent);
254
254
}
255
255
256
256
ol li:hover::marker {
257
-
font-weight: 700;
258
-
color: var(--link);
257
+
font-weight: 700;
258
+
color: var(--link);
259
259
}
260
260
261
261
/* Use flexbox to allow items to wrap, as needed */
262
262
header > nav ul,
263
263
header > nav ol {
264
-
display: flex;
265
-
flex-direction: row;
266
-
flex-wrap: wrap;
267
-
align-content: space-around;
268
-
justify-content: right;
269
-
list-style-type: none;
270
-
margin: 0.5rem 0 0 0;
271
-
padding: 0;
272
-
gap: 1rem;
264
+
display: flex;
265
+
flex-direction: row;
266
+
flex-wrap: wrap;
267
+
align-content: space-around;
268
+
justify-content: right;
269
+
list-style-type: none;
270
+
margin: 0.5rem 0 0 0;
271
+
padding: 0;
272
+
gap: 1rem;
273
273
}
274
274
275
275
/* List items are inline elements, make them behave more like blocks */
276
276
header > nav ul li,
277
277
header > nav ol li {
278
-
display: inline-block;
278
+
display: inline-block;
279
279
}
280
280
281
281
/* Consolidate box styling */
282
282
aside,
283
283
details,
284
284
progress {
285
-
background-color: var(--bg-light);
286
-
border-radius: var(--standard-border-radius);
285
+
background-color: var(--bg-light);
286
+
border-radius: var(--standard-border-radius);
287
287
}
288
288
289
289
aside {
290
-
font-size: 1rem;
291
-
width: 35%;
292
-
padding: 0 10px;
293
-
margin-inline-start: 10px;
294
-
float: right;
290
+
font-size: 1rem;
291
+
width: 35%;
292
+
padding: 0 10px;
293
+
margin-inline-start: 10px;
294
+
float: right;
295
295
}
296
296
*[dir="rtl"] aside {
297
-
float: left;
297
+
float: left;
298
298
}
299
299
300
300
/* make aside full-width on mobile */
301
301
@media only screen and (max-width: 720px) {
302
-
aside {
303
-
width: 100%;
304
-
float: none;
305
-
margin-inline-start: 0;
306
-
}
302
+
aside {
303
+
width: 100%;
304
+
float: none;
305
+
margin-inline-start: 0;
306
+
}
307
307
}
308
308
309
309
details {
310
-
padding: 0.5rem;
310
+
padding: 0.5rem;
311
311
}
312
312
313
313
summary {
314
-
cursor: pointer;
315
-
font-weight: bold;
316
-
word-break: break-all;
314
+
cursor: pointer;
315
+
font-weight: bold;
316
+
word-break: break-all;
317
317
}
318
318
319
319
details[open] > summary + * {
320
-
margin-top: 0;
320
+
margin-top: 0;
321
321
}
322
322
323
323
details[open] > summary {
324
-
margin-bottom: 0.5rem;
324
+
margin-bottom: 0.5rem;
325
325
}
326
326
327
327
details[open] > :last-child {
328
-
margin-bottom: 0;
328
+
margin-bottom: 0;
329
329
}
330
330
331
331
/* Format tables */
332
332
table {
333
-
border-collapse: collapse;
334
-
margin: 1.5rem 0;
335
-
display: block;
336
-
overflow-x: auto;
337
-
white-space: nowrap;
333
+
border-collapse: collapse;
334
+
margin: 1.5rem 0;
335
+
display: block;
336
+
overflow-x: auto;
337
+
white-space: nowrap;
338
338
}
339
339
340
340
td,
341
341
th {
342
-
border: 1px solid var(--border);
343
-
text-align: start;
344
-
padding: 0.5rem;
342
+
border: 1px solid var(--border);
343
+
text-align: start;
344
+
padding: 0.5rem;
345
345
}
346
346
347
347
th {
348
-
background-color: var(--bg-light);
349
-
font-weight: bold;
348
+
background-color: var(--bg-light);
349
+
font-weight: bold;
350
350
}
351
351
352
352
tr:nth-child(even) {
353
-
background-color: var(--bg-light);
353
+
background-color: var(--bg-light);
354
354
}
355
355
356
356
table caption {
357
-
text-align: left;
358
-
font-weight: bold;
359
-
margin: 0 0 0.4rem 1rem;
357
+
text-align: left;
358
+
font-weight: bold;
359
+
margin: 0 0 0.4rem 1rem;
360
360
}
361
361
362
362
/* format forms */
363
363
fieldset {
364
-
border: 1px dashed var(--accent);
365
-
border-radius: var(--standard-border-radius);
364
+
border: 1px dashed var(--accent);
365
+
border-radius: var(--standard-border-radius);
366
366
}
367
367
368
368
fieldset > legend {
369
-
color: var(--accent);
369
+
color: var(--accent);
370
370
}
371
371
372
372
textarea,
···
374
374
input,
375
375
button,
376
376
.button {
377
-
font-size: inherit;
378
-
font-family: inherit;
379
-
padding: 0.25rem;
380
-
border-radius: var(--standard-border-radius);
381
-
box-shadow: none;
382
-
max-width: 100%;
383
-
display: inline-block;
377
+
font-size: inherit;
378
+
font-family: inherit;
379
+
padding: 0.25rem;
380
+
border-radius: var(--standard-border-radius);
381
+
box-shadow: none;
382
+
max-width: 100%;
383
+
display: inline-block;
384
384
}
385
385
386
386
textarea,
387
387
select,
388
388
input {
389
-
color: var(--text);
390
-
background-color: var(--bg);
391
-
border: 1px dashed var(--border);
389
+
color: var(--text);
390
+
background-color: var(--bg);
391
+
border: 1px dashed var(--border);
392
392
}
393
393
394
394
label {
395
-
display: block;
395
+
display: block;
396
396
}
397
397
398
398
fieldset label {
399
-
margin: 0 0 0.3rem 0;
399
+
margin: 0 0 0.3rem 0;
400
400
}
401
401
402
402
textarea {
403
-
max-width: 43.5rem;
404
-
resize: both;
403
+
max-width: 43.5rem;
404
+
resize: both;
405
405
}
406
406
407
407
textarea:not([cols]) {
408
-
width: 100%;
408
+
width: 100%;
409
409
}
410
410
411
411
@media only screen and (max-width: 720px) {
412
-
textarea,
413
-
select,
414
-
input {
415
-
width: 100%;
416
-
}
412
+
textarea,
413
+
select,
414
+
input {
415
+
width: 100%;
416
+
}
417
417
}
418
418
419
419
/* format buttons */
···
424
424
input[type="reset"],
425
425
input[type="button"],
426
426
label[type="button"] {
427
-
border: 1px solid var(--accent);
428
-
background-color: var(--accent);
429
-
color: var(--accent-text);
430
-
padding: 0.5rem 0.9rem;
431
-
text-decoration: none;
432
-
line-height: normal;
427
+
border: 1px solid var(--accent);
428
+
background-color: var(--accent);
429
+
color: var(--accent-text);
430
+
padding: 0.5rem 0.9rem;
431
+
text-decoration: none;
432
+
line-height: normal;
433
433
}
434
434
435
435
.button[aria-disabled="true"],
···
437
437
textarea:disabled,
438
438
select:disabled,
439
439
button[disabled] {
440
-
cursor: not-allowed;
441
-
background-color: var(--bg-light);
442
-
border-color: var(--bg-light);
443
-
color: var(--text-light);
440
+
cursor: not-allowed;
441
+
background-color: var(--bg-light);
442
+
border-color: var(--bg-light);
443
+
color: var(--text-light);
444
444
}
445
445
446
446
input[type="range"] {
447
-
padding: 0;
448
-
color: var(--accent);
447
+
padding: 0;
448
+
color: var(--accent);
449
449
}
450
450
451
451
abbr[title] {
452
-
cursor: help;
453
-
text-decoration-line: underline;
454
-
text-decoration-style: dotted;
452
+
cursor: help;
453
+
text-decoration-line: underline;
454
+
text-decoration-style: dotted;
455
455
}
456
456
457
457
button:enabled:hover,
···
460
460
input[type="reset"]:enabled:hover,
461
461
input[type="button"]:enabled:hover,
462
462
label[type="button"]:hover {
463
-
background-color: var(--accent-light);
464
-
border-color: var(--accent-light);
465
-
cursor: pointer;
463
+
background-color: var(--accent-light);
464
+
border-color: var(--accent-light);
465
+
cursor: pointer;
466
466
}
467
467
468
468
.button:focus-visible,
469
469
button:focus-visible:where(:enabled),
470
470
input:enabled:focus-visible:where(
471
-
[type="submit"],
472
-
[type="reset"],
473
-
[type="button"]
474
-
) {
475
-
outline: 2px solid var(--accent);
476
-
outline-offset: 1px;
471
+
[type="submit"],
472
+
[type="reset"],
473
+
[type="button"]
474
+
) {
475
+
outline: 2px solid var(--accent);
476
+
outline-offset: 1px;
477
477
}
478
478
479
479
/* checkbox and radio button style */
480
480
input[type="checkbox"],
481
481
input[type="radio"] {
482
-
vertical-align: middle;
483
-
position: relative;
484
-
width: min-content;
485
-
width: 14px;
486
-
height: 14px;
482
+
vertical-align: middle;
483
+
position: relative;
484
+
width: min-content;
485
+
width: 14px;
486
+
height: 14px;
487
487
}
488
488
489
489
input[type="checkbox"] + label,
490
490
input[type="radio"] + label {
491
-
display: inline-block;
491
+
display: inline-block;
492
492
}
493
493
494
494
input[type="radio"] {
495
-
border-radius: 100%;
495
+
border-radius: 100%;
496
496
}
497
497
498
498
input[type="checkbox"]:checked,
499
499
input[type="radio"]:checked {
500
-
background-color: var(--accent);
500
+
background-color: var(--accent);
501
501
}
502
502
503
503
@media only screen and (max-width: 720px) {
504
-
textarea,
505
-
select,
506
-
input {
507
-
width: 100%;
508
-
}
504
+
textarea,
505
+
select,
506
+
input {
507
+
width: 100%;
508
+
}
509
509
}
510
510
511
511
input[type="color"] {
512
-
height: 2.5rem;
513
-
padding: 0.2rem;
512
+
height: 2.5rem;
513
+
padding: 0.2rem;
514
514
}
515
515
516
516
input[type="file"] {
517
-
border: 0;
517
+
border: 0;
518
518
}
519
519
520
520
/* misc body elements */
521
521
hr {
522
-
border: 1px dashed var(--accent);
523
-
margin: 0.5rem 0 0.5rem 0;
522
+
border: 1px dashed var(--accent);
523
+
margin: 0.5rem 0 0.5rem 0;
524
524
}
525
525
526
526
mark {
527
-
padding: 0 0.25em 0 0.25em;
528
-
border-radius: var(--standard-border-radius);
529
-
background-color: var(--accent);
530
-
color: var(--bg);
527
+
padding: 0 0.25em 0 0.25em;
528
+
border-radius: var(--standard-border-radius);
529
+
background-color: var(--accent);
530
+
color: var(--bg);
531
531
}
532
532
533
533
mark a {
534
-
color: var(--link);
534
+
color: var(--link);
535
535
}
536
536
537
537
img,
538
538
video,
539
539
iframe[src^="https://www.youtube-nocookie.com"],
540
-
iframe[src^="https://www.youtube.com"]
541
-
{
542
-
max-width: 90%;
543
-
height: auto;
544
-
padding: 0.125rem;
545
-
border: dashed 2px var(--accent);
546
-
border-radius: 15px;
540
+
iframe[src^="https://www.youtube.com"] {
541
+
max-width: 90%;
542
+
height: auto;
543
+
padding: 0.125rem;
544
+
border: dashed 2px var(--accent);
545
+
border-radius: 15px;
547
546
}
548
547
549
548
figure {
550
-
margin: 0;
551
-
display: block;
552
-
overflow-x: auto;
549
+
margin: 0;
550
+
display: block;
551
+
overflow-x: auto;
553
552
}
554
553
555
554
figcaption {
556
-
text-align: left;
557
-
font-size: 0.875rem;
558
-
color: var(--text-light);
559
-
margin: 0 0 1rem 1rem;
555
+
text-align: left;
556
+
font-size: 0.875rem;
557
+
color: var(--text-light);
558
+
margin: 0 0 1rem 1rem;
560
559
}
561
560
562
561
blockquote {
563
-
margin: 0 0 0 1.25rem;
564
-
padding: 0.5rem 0 0 0.5rem;
565
-
border-inline-start: 0.375rem solid var(--accent);
566
-
color: var(--text-light);
567
-
font-style: italic;
562
+
margin: 0 0 0 1.25rem;
563
+
padding: 0.5rem 0 0 0.5rem;
564
+
border-inline-start: 0.375rem solid var(--accent);
565
+
color: var(--text-light);
566
+
font-style: italic;
568
567
}
569
568
570
569
p:has(cite) {
571
-
text-align: right;
572
-
font-size: 0.875rem;
573
-
color: var(--text-light);
574
-
font-weight: 600;
570
+
text-align: right;
571
+
font-size: 0.875rem;
572
+
color: var(--text-light);
573
+
font-weight: 600;
575
574
}
576
575
577
576
cite::before {
578
-
content: "— ";
577
+
content: "— ";
579
578
}
580
579
581
580
dt {
582
-
color: var(--text-light);
581
+
color: var(--text-light);
583
582
}
584
583
585
584
code,
···
587
586
pre span,
588
587
kbd,
589
588
samp {
590
-
font-family: var(--mono-font);
589
+
font-family: var(--mono-font);
591
590
}
592
591
593
592
pre {
594
-
border: 1px solid var(--accent);
595
-
max-height: 30rem;
596
-
padding: 0.625rem;
597
-
overflow-x: auto;
598
-
font-style: monospace;
593
+
border: 1px solid var(--accent);
594
+
max-height: 30rem;
595
+
padding: 0.625rem;
596
+
overflow-x: auto;
597
+
font-style: monospace;
599
598
}
600
599
601
600
p code,
602
601
li code,
603
602
div code {
604
-
padding: 0 0.125rem 0 0.125rem;
605
-
border-radius: 3px;
606
-
color: var(--bg);
607
-
background-color: var(--text);
608
-
transition: background-color 0.3s ease;
603
+
padding: 0 0.125rem 0 0.125rem;
604
+
border-radius: 3px;
605
+
color: var(--bg);
606
+
background-color: var(--text);
607
+
transition: background-color 0.3s ease;
609
608
}
610
609
611
610
pre code {
612
-
padding: 0;
613
-
border-radius: 0;
614
-
color: inherit;
615
-
background-color: inherit;
611
+
padding: 0;
612
+
border-radius: 0;
613
+
color: inherit;
614
+
background-color: inherit;
616
615
}
617
616
618
617
iframe {
619
-
max-width: 90%;
618
+
max-width: 90%;
620
619
}
621
620
622
621
/* progress bars */
623
622
progress {
624
-
width: 100%;
623
+
width: 100%;
625
624
}
626
625
627
626
progress:indeterminate {
628
-
background-color: var(--bg-light);
627
+
background-color: var(--bg-light);
629
628
}
630
629
631
630
progress::-webkit-progress-bar {
632
-
border-radius: var(--standard-border-radius);
633
-
background-color: var(--bg-light);
631
+
border-radius: var(--standard-border-radius);
632
+
background-color: var(--bg-light);
634
633
}
635
634
636
635
progress::-webkit-progress-value {
637
-
border-radius: var(--standard-border-radius);
638
-
background-color: var(--accent);
636
+
border-radius: var(--standard-border-radius);
637
+
background-color: var(--accent);
639
638
}
640
639
641
640
progress::-moz-progress-bar {
642
-
border-radius: var(--standard-border-radius);
643
-
background-color: var(--accent);
644
-
transition-property: width;
645
-
transition-duration: 0.3s;
641
+
border-radius: var(--standard-border-radius);
642
+
background-color: var(--accent);
643
+
transition-property: width;
644
+
transition-duration: 0.3s;
646
645
}
647
646
648
647
progress:indeterminate::-moz-progress-bar {
649
-
background-color: var(--bg-light);
648
+
background-color: var(--bg-light);
650
649
}
651
650
652
651
dialog {
653
-
max-width: 40rem;
654
-
margin: auto;
652
+
max-width: 40rem;
653
+
margin: auto;
655
654
}
656
655
657
656
dialog::backdrop {
658
-
background-color: var(--bg);
659
-
opacity: 0.8;
657
+
background-color: var(--bg);
658
+
opacity: 0.8;
660
659
}
661
660
662
661
@media only screen and (max-width: 720px) {
663
-
dialog {
664
-
max-width: 100%;
665
-
margin: auto 1em;
666
-
}
662
+
dialog {
663
+
max-width: 100%;
664
+
margin: auto 1em;
665
+
}
667
666
}
668
667
669
668
/* superscript & subscript */
670
669
/* prevent scripts from affecting line-height. */
671
670
sup,
672
671
sub {
673
-
vertical-align: baseline;
674
-
position: relative;
672
+
vertical-align: baseline;
673
+
position: relative;
675
674
}
676
675
677
676
sup {
678
-
top: -0.4em;
677
+
top: -0.4em;
679
678
}
680
679
681
680
sub {
682
-
top: 0.3em;
681
+
top: 0.3em;
683
682
}
+247
-247
sass/css/syntax-theme.css
+247
-247
sass/css/syntax-theme.css
···
3
3
*/
4
4
5
5
@supports not (-moz-appearance: none) {
6
-
.z-code {
7
-
transition: background-color 0.3s ease;
8
-
}
6
+
.z-code {
7
+
transition: background-color 0.3s ease;
8
+
}
9
9
}
10
10
11
11
html[data-theme="light"] .z-code {
12
-
color: #4c4f69;
13
-
background-color: #f2efea;
12
+
color: #4c4f69;
13
+
background-color: #f2efea;
14
14
}
15
15
16
16
html[data-theme="light"] .z-comment {
17
-
color: #9ca0b0;
18
-
font-style: italic;
17
+
color: #9ca0b0;
18
+
font-style: italic;
19
19
}
20
20
html[data-theme="light"] .z-string {
21
-
color: #40a02b;
21
+
color: #40a02b;
22
22
}
23
23
html[data-theme="light"] .z-string.z-regexp {
24
-
color: #fe640b;
24
+
color: #fe640b;
25
25
}
26
26
html[data-theme="light"] .z-constant.z-numeric {
27
-
color: #fe640b;
27
+
color: #fe640b;
28
28
}
29
29
html[data-theme="light"] .z-constant.z-language.z-boolean {
30
-
color: #fe640b;
31
-
font-weight: bold;
32
-
font-style: italic;
30
+
color: #fe640b;
31
+
font-weight: bold;
32
+
font-style: italic;
33
33
}
34
34
html[data-theme="light"] .z-constant.z-language {
35
-
color: #7287fd;
36
-
font-style: italic;
35
+
color: #7287fd;
36
+
font-style: italic;
37
37
}
38
38
html[data-theme="light"] .z-support.z-function.z-builtin {
39
-
color: #fe640b;
40
-
font-style: italic;
39
+
color: #fe640b;
40
+
font-style: italic;
41
41
}
42
42
html[data-theme="light"] .z-variable.z-other.z-constant {
43
-
color: #fe640b;
43
+
color: #fe640b;
44
44
}
45
45
html[data-theme="light"] .z-keyword {
46
-
color: #d20f39;
47
-
font-style: italic;
46
+
color: #d20f39;
47
+
font-style: italic;
48
48
}
49
49
html[data-theme="light"] .z-keyword.z-control.z-loop,
50
50
html[data-theme="light"] .z-keyword.z-control.z-conditional,
51
51
html[data-theme="light"] .z-keyword.z-control.z-c\+\+ {
52
-
color: #8839ef;
53
-
font-weight: bold;
52
+
color: #8839ef;
53
+
font-weight: bold;
54
54
}
55
55
html[data-theme="light"] .z-keyword.z-control.z-return,
56
56
html[data-theme="light"] .z-keyword.z-control.z-flow.z-return {
57
-
color: #ea76cb;
58
-
font-weight: bold;
57
+
color: #ea76cb;
58
+
font-weight: bold;
59
59
}
60
60
html[data-theme="light"] .z-support.z-type.z-exception {
61
-
color: #fe640b;
62
-
font-style: italic;
61
+
color: #fe640b;
62
+
font-style: italic;
63
63
}
64
64
html[data-theme="light"] .z-keyword.z-operator,
65
65
html[data-theme="light"] .z-punctuation.z-accessor {
66
-
color: #04a5e5;
67
-
font-weight: bold;
66
+
color: #04a5e5;
67
+
font-weight: bold;
68
68
}
69
69
html[data-theme="light"] .z-punctuation.z-separator {
70
-
color: #179299;
70
+
color: #179299;
71
71
}
72
72
html[data-theme="light"] .z-punctuation.z-terminator {
73
-
color: #179299;
73
+
color: #179299;
74
74
}
75
75
html[data-theme="light"] .z-punctuation.z-section {
76
-
color: #7c7f93;
76
+
color: #7c7f93;
77
77
}
78
78
html[data-theme="light"] .z-keyword.z-control.z-import.z-include {
79
-
color: #179299;
80
-
font-style: italic;
79
+
color: #179299;
80
+
font-style: italic;
81
81
}
82
82
html[data-theme="light"] .z-storage {
83
-
color: #d20f39;
83
+
color: #d20f39;
84
84
}
85
85
html[data-theme="light"] .z-storage.z-type {
86
-
color: #df8e1d;
87
-
font-style: italic;
86
+
color: #df8e1d;
87
+
font-style: italic;
88
88
}
89
89
html[data-theme="light"] .z-storage.z-modifier {
90
-
color: #d20f39;
90
+
color: #d20f39;
91
91
}
92
92
html[data-theme="light"] .z-entity.z-name.z-namespace,
93
93
html[data-theme="light"] .z-meta.z-path {
94
-
color: #dc8a78;
95
-
font-style: italic;
94
+
color: #dc8a78;
95
+
font-style: italic;
96
96
}
97
97
html[data-theme="light"] .z-storage.z-type.z-class {
98
-
color: #dc8a78;
99
-
font-style: italic;
98
+
color: #dc8a78;
99
+
font-style: italic;
100
100
}
101
101
html[data-theme="light"] .z-entity.z-name.z-label {
102
-
color: #1e66f5;
102
+
color: #1e66f5;
103
103
}
104
104
html[data-theme="light"] .z-keyword.z-declaration.z-class {
105
-
color: #d20f39;
106
-
font-style: italic;
105
+
color: #d20f39;
106
+
font-style: italic;
107
107
}
108
108
html[data-theme="light"] .z-entity.z-name.z-class,
109
109
html[data-theme="light"] .z-meta.z-toc-list.z-full-identifier {
110
-
color: #04a5e5;
110
+
color: #04a5e5;
111
111
}
112
112
html[data-theme="light"] .z-entity.z-other.z-inherited-class {
113
-
color: #04a5e5;
114
-
font-style: italic;
113
+
color: #04a5e5;
114
+
font-style: italic;
115
115
}
116
116
html[data-theme="light"] .z-entity.z-name.z-function,
117
117
html[data-theme="light"] .z-variable.z-function {
118
-
color: #1e66f5;
119
-
font-style: italic;
118
+
color: #1e66f5;
119
+
font-style: italic;
120
120
}
121
121
html[data-theme="light"] .z-entity.z-name.z-function.z-preprocessor {
122
-
color: #d20f39;
122
+
color: #d20f39;
123
123
}
124
124
html[data-theme="light"] .z-keyword.z-control.z-import {
125
-
color: #d20f39;
125
+
color: #d20f39;
126
126
}
127
127
html[data-theme="light"] .z-entity.z-name.z-function.z-constructor,
128
128
html[data-theme="light"] .z-entity.z-name.z-function.z-destructor {
129
-
color: #7287fd;
129
+
color: #7287fd;
130
130
}
131
131
html[data-theme="light"] .z-variable.z-parameter.z-function {
132
-
color: #dc8a78;
133
-
font-style: italic;
132
+
color: #dc8a78;
133
+
font-style: italic;
134
134
}
135
135
html[data-theme="light"] .z-keyword.z-declaration.z-function {
136
-
color: #e64553;
137
-
font-style: italic;
136
+
color: #e64553;
137
+
font-style: italic;
138
138
}
139
139
html[data-theme="light"] .z-support.z-function {
140
-
color: #04a5e5;
140
+
color: #04a5e5;
141
141
}
142
142
html[data-theme="light"] .z-support.z-constant {
143
-
color: #1e66f5;
143
+
color: #1e66f5;
144
144
}
145
145
html[data-theme="light"] .z-support.z-type,
146
146
html[data-theme="light"] .z-support.z-class {
147
-
color: #1e66f5;
148
-
font-style: italic;
147
+
color: #1e66f5;
148
+
font-style: italic;
149
149
}
150
150
html[data-theme="light"] .z-variable.z-function {
151
-
color: #1e66f5;
152
-
font-style: italic;
151
+
color: #1e66f5;
152
+
font-style: italic;
153
153
}
154
154
html[data-theme="light"] .z-variable.z-parameter {
155
-
color: #dc8a78;
156
-
font-style: italic;
155
+
color: #dc8a78;
156
+
font-style: italic;
157
157
}
158
158
html[data-theme="light"] .z-variable.z-other {
159
-
color: #4c4f69;
160
-
font-style: italic;
159
+
color: #4c4f69;
160
+
font-style: italic;
161
161
}
162
162
html[data-theme="light"] .z-variable.z-other.z-member {
163
-
color: #dc8a78;
163
+
color: #dc8a78;
164
164
}
165
165
html[data-theme="light"] .z-variable.z-language {
166
-
color: #179299;
166
+
color: #179299;
167
167
}
168
168
html[data-theme="light"] .z-entity.z-name.z-tag {
169
-
color: #fe640b;
169
+
color: #fe640b;
170
170
}
171
171
html[data-theme="light"] .z-entity.z-other.z-attribute-name {
172
-
color: #8839ef;
173
-
font-style: italic;
172
+
color: #8839ef;
173
+
font-style: italic;
174
174
}
175
175
html[data-theme="light"] .z-punctuation.z-definition.z-tag {
176
-
color: #e64553;
176
+
color: #e64553;
177
177
}
178
178
html[data-theme="light"] .z-markup.z-underline.z-link.z-markdown {
179
-
color: #dc8a78;
180
-
text-decoration: underline;
181
-
font-style: italic;
179
+
color: #dc8a78;
180
+
text-decoration: underline;
181
+
font-style: italic;
182
182
}
183
183
html[data-theme="light"] .z-meta.z-link.z-inline.z-description {
184
-
color: #7287fd;
185
-
font-weight: bold;
184
+
color: #7287fd;
185
+
font-weight: bold;
186
186
}
187
187
html[data-theme="light"] .z-comment.z-block.z-markdown,
188
188
html[data-theme="light"] .z-meta.z-code-fence,
189
189
html[data-theme="light"] .z-markup.z-raw.z-code-fence,
190
190
html[data-theme="light"] .z-markup.z-raw.z-inline {
191
-
color: #179299;
192
-
font-style: italic;
191
+
color: #179299;
192
+
font-style: italic;
193
193
}
194
194
html[data-theme="light"] .z-punctuation.z-definition.z-heading,
195
195
html[data-theme="light"] .z-entity.z-name.z-section {
196
-
color: #1e66f5;
197
-
font-weight: bold;
196
+
color: #1e66f5;
197
+
font-weight: bold;
198
198
}
199
199
html[data-theme="light"] .z-markup.z-italic {
200
-
color: #e64553;
201
-
font-style: italic;
200
+
color: #e64553;
201
+
font-style: italic;
202
202
}
203
203
html[data-theme="light"] .z-markup.z-bold {
204
-
color: #e64553;
205
-
font-weight: bold;
204
+
color: #e64553;
205
+
font-weight: bold;
206
206
}
207
207
html[data-theme="light"] .z-constant.z-character.z-escape {
208
-
color: #ea76cb;
208
+
color: #ea76cb;
209
209
}
210
210
html[data-theme="light"]
211
-
.z-source.z-shell.z-bash
212
-
.z-meta.z-function.z-shell
213
-
.z-meta.z-compound.z-shell
214
-
.z-meta.z-function-call.z-identifier.z-shell {
215
-
color: #ea76cb;
211
+
.z-source.z-shell.z-bash
212
+
.z-meta.z-function.z-shell
213
+
.z-meta.z-compound.z-shell
214
+
.z-meta.z-function-call.z-identifier.z-shell {
215
+
color: #ea76cb;
216
216
}
217
217
html[data-theme="light"] .z-variable.z-language.z-shell {
218
-
color: #d20f39;
219
-
font-style: italic;
218
+
color: #d20f39;
219
+
font-style: italic;
220
220
}
221
221
html[data-theme="light"]
222
-
.z-source.z-lua
223
-
.z-meta.z-function.z-lua
224
-
.z-meta.z-block.z-lua
225
-
.z-meta.z-mapping.z-value.z-lua
226
-
.z-meta.z-mapping.z-key.z-lua
227
-
.z-string.z-unquoted.z-key.z-lua {
228
-
color: #7287fd;
229
-
font-style: italic;
222
+
.z-source.z-lua
223
+
.z-meta.z-function.z-lua
224
+
.z-meta.z-block.z-lua
225
+
.z-meta.z-mapping.z-value.z-lua
226
+
.z-meta.z-mapping.z-key.z-lua
227
+
.z-string.z-unquoted.z-key.z-lua {
228
+
color: #7287fd;
229
+
font-style: italic;
230
230
}
231
231
html[data-theme="light"]
232
-
.z-source.z-lua
233
-
.z-meta.z-function.z-lua
234
-
.z-meta.z-block.z-lua
235
-
.z-meta.z-mapping.z-key.z-lua
236
-
.z-string.z-unquoted.z-key.z-lua {
237
-
color: #dd7878;
232
+
.z-source.z-lua
233
+
.z-meta.z-function.z-lua
234
+
.z-meta.z-block.z-lua
235
+
.z-meta.z-mapping.z-key.z-lua
236
+
.z-string.z-unquoted.z-key.z-lua {
237
+
color: #dd7878;
238
238
}
239
239
html[data-theme="light"] .z-entity.z-name.z-constant.z-java {
240
-
color: #179299;
240
+
color: #179299;
241
241
}
242
242
html[data-theme="light"] .z-support.z-type.z-property-name.z-css {
243
-
color: #dd7878;
244
-
font-style: italic;
243
+
color: #dd7878;
244
+
font-style: italic;
245
245
}
246
246
html[data-theme="light"] .z-support.z-constant.z-property-value.z-css {
247
-
color: #4c4f69;
247
+
color: #4c4f69;
248
248
}
249
249
html[data-theme="light"] .z-constant.z-numeric.z-suffix.z-css,
250
250
html[data-theme="light"] .z-keyword.z-other.z-unit.z-css {
251
-
color: #179299;
252
-
font-style: italic;
251
+
color: #179299;
252
+
font-style: italic;
253
253
}
254
254
html[data-theme="light"] .z-variable.z-other.z-custom-property.z-name.z-css,
255
255
html[data-theme="light"] .z-support.z-type.z-custom-property.z-name.z-css,
256
256
html[data-theme="light"] .z-punctuation.z-definition.z-custom-property.z-css {
257
-
color: #179299;
257
+
color: #179299;
258
258
}
259
259
html[data-theme="light"] .z-entity.z-name.z-tag.z-css {
260
-
color: #7287fd;
260
+
color: #7287fd;
261
261
}
262
262
html[data-theme="light"] .z-variable.z-other.z-sass {
263
-
color: #179299;
263
+
color: #179299;
264
264
}
265
265
html[data-theme="light"] .z-invalid {
266
-
color: #4c4f69;
267
-
background-color: #d20f39;
266
+
color: #4c4f69;
267
+
background-color: #d20f39;
268
268
}
269
269
html[data-theme="light"] .z-invalid.z-deprecated {
270
-
color: #4c4f69;
271
-
background-color: #8839ef;
270
+
color: #4c4f69;
271
+
background-color: #8839ef;
272
272
}
273
273
html[data-theme="light"] .z-meta.z-diff,
274
274
html[data-theme="light"] .z-meta.z-diff.z-header {
275
-
color: #9ca0b0;
275
+
color: #9ca0b0;
276
276
}
277
277
html[data-theme="light"] .z-markup.z-deleted {
278
-
color: #d20f39;
278
+
color: #d20f39;
279
279
}
280
280
html[data-theme="light"] .z-markup.z-inserted {
281
-
color: #40a02b;
281
+
color: #40a02b;
282
282
}
283
283
html[data-theme="light"] .z-markup.z-changed {
284
-
color: #df8e1d;
284
+
color: #df8e1d;
285
285
}
286
286
html[data-theme="light"] .z-message.z-error {
287
-
color: #d20f39;
287
+
color: #d20f39;
288
288
}
289
289
290
290
/* dark */
291
291
292
292
html[data-theme="dark"] .z-code {
293
-
color: #cad3f5;
294
-
background-color: #2a2e35;
293
+
color: #cad3f5;
294
+
background-color: #2a2e35;
295
295
}
296
296
297
297
html[data-theme="dark"] .z-comment {
298
-
color: #6e738d;
299
-
font-style: italic;
298
+
color: #6e738d;
299
+
font-style: italic;
300
300
}
301
301
html[data-theme="dark"] .z-string {
302
-
color: #a6da95;
302
+
color: #a6da95;
303
303
}
304
304
html[data-theme="dark"] .z-string.z-regexp {
305
-
color: #f5a97f;
305
+
color: #f5a97f;
306
306
}
307
307
html[data-theme="dark"] .z-constant.z-numeric {
308
-
color: #f5a97f;
308
+
color: #f5a97f;
309
309
}
310
310
html[data-theme="dark"] .z-constant.z-language.z-boolean {
311
-
color: #f5a97f;
312
-
font-weight: bold;
313
-
font-style: italic;
311
+
color: #f5a97f;
312
+
font-weight: bold;
313
+
font-style: italic;
314
314
}
315
315
html[data-theme="dark"] .z-constant.z-language {
316
-
color: #b7bdf8;
317
-
font-style: italic;
316
+
color: #b7bdf8;
317
+
font-style: italic;
318
318
}
319
319
html[data-theme="dark"] .z-support.z-function.z-builtin {
320
-
color: #f5a97f;
321
-
font-style: italic;
320
+
color: #f5a97f;
321
+
font-style: italic;
322
322
}
323
323
html[data-theme="dark"] .z-variable.z-other.z-constant {
324
-
color: #f5a97f;
324
+
color: #f5a97f;
325
325
}
326
326
html[data-theme="dark"] .z-keyword {
327
-
color: #ed8796;
328
-
font-style: italic;
327
+
color: #ed8796;
328
+
font-style: italic;
329
329
}
330
330
html[data-theme="dark"] .z-keyword.z-control.z-loop,
331
331
html[data-theme="dark"] .z-keyword.z-control.z-conditional,
332
332
html[data-theme="dark"] .z-keyword.z-control.z-c\+\+ {
333
-
color: #c6a0f6;
334
-
font-weight: bold;
333
+
color: #c6a0f6;
334
+
font-weight: bold;
335
335
}
336
336
html[data-theme="dark"] .z-keyword.z-control.z-return,
337
337
html[data-theme="dark"] .z-keyword.z-control.z-flow.z-return {
338
-
color: #f5bde6;
339
-
font-weight: bold;
338
+
color: #f5bde6;
339
+
font-weight: bold;
340
340
}
341
341
html[data-theme="dark"] .z-support.z-type.z-exception {
342
-
color: #f5a97f;
343
-
font-style: italic;
342
+
color: #f5a97f;
343
+
font-style: italic;
344
344
}
345
345
html[data-theme="dark"] .z-keyword.z-operator,
346
346
html[data-theme="dark"] .z-punctuation.z-accessor {
347
-
color: #91d7e3;
348
-
font-weight: bold;
347
+
color: #91d7e3;
348
+
font-weight: bold;
349
349
}
350
350
html[data-theme="dark"] .z-punctuation.z-separator {
351
-
color: #8bd5ca;
351
+
color: #8bd5ca;
352
352
}
353
353
html[data-theme="dark"] .z-punctuation.z-terminator {
354
-
color: #8bd5ca;
354
+
color: #8bd5ca;
355
355
}
356
356
html[data-theme="dark"] .z-punctuation.z-section {
357
-
color: #939ab7;
357
+
color: #939ab7;
358
358
}
359
359
html[data-theme="dark"] .z-keyword.z-control.z-import.z-include {
360
-
color: #8bd5ca;
361
-
font-style: italic;
360
+
color: #8bd5ca;
361
+
font-style: italic;
362
362
}
363
363
html[data-theme="dark"] .z-storage {
364
-
color: #ed8796;
364
+
color: #ed8796;
365
365
}
366
366
html[data-theme="dark"] .z-storage.z-type {
367
-
color: #eed49f;
368
-
font-style: italic;
367
+
color: #eed49f;
368
+
font-style: italic;
369
369
}
370
370
html[data-theme="dark"] .z-storage.z-modifier {
371
-
color: #ed8796;
371
+
color: #ed8796;
372
372
}
373
373
html[data-theme="dark"] .z-entity.z-name.z-namespace,
374
374
html[data-theme="dark"] .z-meta.z-path {
375
-
color: #f4dbd6;
376
-
font-style: italic;
375
+
color: #f4dbd6;
376
+
font-style: italic;
377
377
}
378
378
html[data-theme="dark"] .z-storage.z-type.z-class {
379
-
color: #f4dbd6;
380
-
font-style: italic;
379
+
color: #f4dbd6;
380
+
font-style: italic;
381
381
}
382
382
html[data-theme="dark"] .z-entity.z-name.z-label {
383
-
color: #8aadf4;
383
+
color: #8aadf4;
384
384
}
385
385
html[data-theme="dark"] .z-keyword.z-declaration.z-class {
386
-
color: #ed8796;
387
-
font-style: italic;
386
+
color: #ed8796;
387
+
font-style: italic;
388
388
}
389
389
html[data-theme="dark"] .z-entity.z-name.z-class,
390
390
html[data-theme="dark"] .z-meta.z-toc-list.z-full-identifier {
391
-
color: #91d7e3;
391
+
color: #91d7e3;
392
392
}
393
393
html[data-theme="dark"] .z-entity.z-other.z-inherited-class {
394
-
color: #91d7e3;
395
-
font-style: italic;
394
+
color: #91d7e3;
395
+
font-style: italic;
396
396
}
397
397
html[data-theme="dark"] .z-entity.z-name.z-function,
398
398
html[data-theme="dark"] .z-variable.z-function {
399
-
color: #8aadf4;
400
-
font-style: italic;
399
+
color: #8aadf4;
400
+
font-style: italic;
401
401
}
402
402
html[data-theme="dark"] .z-entity.z-name.z-function.z-preprocessor {
403
-
color: #ed8796;
403
+
color: #ed8796;
404
404
}
405
405
html[data-theme="dark"] .z-keyword.z-control.z-import {
406
-
color: #ed8796;
406
+
color: #ed8796;
407
407
}
408
408
html[data-theme="dark"] .z-entity.z-name.z-function.z-constructor,
409
409
html[data-theme="dark"] .z-entity.z-name.z-function.z-destructor {
410
-
color: #b7bdf8;
410
+
color: #b7bdf8;
411
411
}
412
412
html[data-theme="dark"] .z-variable.z-parameter.z-function {
413
-
color: #f4dbd6;
414
-
font-style: italic;
413
+
color: #f4dbd6;
414
+
font-style: italic;
415
415
}
416
416
html[data-theme="dark"] .z-keyword.z-declaration.z-function {
417
-
color: #ee99a0;
418
-
font-style: italic;
417
+
color: #ee99a0;
418
+
font-style: italic;
419
419
}
420
420
html[data-theme="dark"] .z-support.z-function {
421
-
color: #91d7e3;
421
+
color: #91d7e3;
422
422
}
423
423
html[data-theme="dark"] .z-support.z-constant {
424
-
color: #8aadf4;
424
+
color: #8aadf4;
425
425
}
426
426
html[data-theme="dark"] .z-support.z-type,
427
427
html[data-theme="dark"] .z-support.z-class {
428
-
color: #8aadf4;
429
-
font-style: italic;
428
+
color: #8aadf4;
429
+
font-style: italic;
430
430
}
431
431
html[data-theme="dark"] .z-variable.z-function {
432
-
color: #8aadf4;
433
-
font-style: italic;
432
+
color: #8aadf4;
433
+
font-style: italic;
434
434
}
435
435
html[data-theme="dark"] .z-variable.z-parameter {
436
-
color: #f4dbd6;
437
-
font-style: italic;
436
+
color: #f4dbd6;
437
+
font-style: italic;
438
438
}
439
439
html[data-theme="dark"] .z-variable.z-other {
440
-
color: #cad3f5;
441
-
font-style: italic;
440
+
color: #cad3f5;
441
+
font-style: italic;
442
442
}
443
443
html[data-theme="dark"] .z-variable.z-other.z-member {
444
-
color: #f4dbd6;
444
+
color: #f4dbd6;
445
445
}
446
446
html[data-theme="dark"] .z-variable.z-language {
447
-
color: #8bd5ca;
447
+
color: #8bd5ca;
448
448
}
449
449
html[data-theme="dark"] .z-entity.z-name.z-tag {
450
-
color: #f5a97f;
450
+
color: #f5a97f;
451
451
}
452
452
html[data-theme="dark"] .z-entity.z-other.z-attribute-name {
453
-
color: #c6a0f6;
454
-
font-style: italic;
453
+
color: #c6a0f6;
454
+
font-style: italic;
455
455
}
456
456
html[data-theme="dark"] .z-punctuation.z-definition.z-tag {
457
-
color: #ee99a0;
457
+
color: #ee99a0;
458
458
}
459
459
html[data-theme="dark"] .z-markup.z-underline.z-link.z-markdown {
460
-
color: #f4dbd6;
461
-
text-decoration: underline;
462
-
font-style: italic;
460
+
color: #f4dbd6;
461
+
text-decoration: underline;
462
+
font-style: italic;
463
463
}
464
464
html[data-theme="dark"] .z-meta.z-link.z-inline.z-description {
465
-
color: #b7bdf8;
466
-
font-weight: bold;
465
+
color: #b7bdf8;
466
+
font-weight: bold;
467
467
}
468
468
html[data-theme="dark"] .z-comment.z-block.z-markdown,
469
469
html[data-theme="dark"] .z-meta.z-code-fence,
470
470
html[data-theme="dark"] .z-markup.z-raw.z-code-fence,
471
471
html[data-theme="dark"] .z-markup.z-raw.z-inline {
472
-
color: #8bd5ca;
473
-
font-style: italic;
472
+
color: #8bd5ca;
473
+
font-style: italic;
474
474
}
475
475
html[data-theme="dark"] .z-punctuation.z-definition.z-heading,
476
476
html[data-theme="dark"] .z-entity.z-name.z-section {
477
-
color: #8aadf4;
478
-
font-weight: bold;
477
+
color: #8aadf4;
478
+
font-weight: bold;
479
479
}
480
480
html[data-theme="dark"] .z-markup.z-italic {
481
-
color: #ee99a0;
482
-
font-style: italic;
481
+
color: #ee99a0;
482
+
font-style: italic;
483
483
}
484
484
html[data-theme="dark"] .z-markup.z-bold {
485
-
color: #ee99a0;
486
-
font-weight: bold;
485
+
color: #ee99a0;
486
+
font-weight: bold;
487
487
}
488
488
html[data-theme="dark"] .z-constant.z-character.z-escape {
489
-
color: #f5bde6;
489
+
color: #f5bde6;
490
490
}
491
491
html[data-theme="dark"]
492
-
.z-source.z-shell.z-bash
493
-
.z-meta.z-function.z-shell
494
-
.z-meta.z-compound.z-shell
495
-
.z-meta.z-function-call.z-identifier.z-shell {
496
-
color: #f5bde6;
492
+
.z-source.z-shell.z-bash
493
+
.z-meta.z-function.z-shell
494
+
.z-meta.z-compound.z-shell
495
+
.z-meta.z-function-call.z-identifier.z-shell {
496
+
color: #f5bde6;
497
497
}
498
498
html[data-theme="dark"] .z-variable.z-language.z-shell {
499
-
color: #ed8796;
500
-
font-style: italic;
499
+
color: #ed8796;
500
+
font-style: italic;
501
501
}
502
502
html[data-theme="dark"]
503
-
.z-source.z-lua
504
-
.z-meta.z-function.z-lua
505
-
.z-meta.z-block.z-lua
506
-
.z-meta.z-mapping.z-value.z-lua
507
-
.z-meta.z-mapping.z-key.z-lua
508
-
.z-string.z-unquoted.z-key.z-lua {
509
-
color: #b7bdf8;
510
-
font-style: italic;
503
+
.z-source.z-lua
504
+
.z-meta.z-function.z-lua
505
+
.z-meta.z-block.z-lua
506
+
.z-meta.z-mapping.z-value.z-lua
507
+
.z-meta.z-mapping.z-key.z-lua
508
+
.z-string.z-unquoted.z-key.z-lua {
509
+
color: #b7bdf8;
510
+
font-style: italic;
511
511
}
512
512
html[data-theme="dark"]
513
-
.z-source.z-lua
514
-
.z-meta.z-function.z-lua
515
-
.z-meta.z-block.z-lua
516
-
.z-meta.z-mapping.z-key.z-lua
517
-
.z-string.z-unquoted.z-key.z-lua {
518
-
color: #f0c6c6;
513
+
.z-source.z-lua
514
+
.z-meta.z-function.z-lua
515
+
.z-meta.z-block.z-lua
516
+
.z-meta.z-mapping.z-key.z-lua
517
+
.z-string.z-unquoted.z-key.z-lua {
518
+
color: #f0c6c6;
519
519
}
520
520
html[data-theme="dark"] .z-entity.z-name.z-constant.z-java {
521
-
color: #8bd5ca;
521
+
color: #8bd5ca;
522
522
}
523
523
html[data-theme="dark"] .z-support.z-type.z-property-name.z-css {
524
-
color: #f0c6c6;
525
-
font-style: italic;
524
+
color: #f0c6c6;
525
+
font-style: italic;
526
526
}
527
527
html[data-theme="dark"] .z-support.z-constant.z-property-value.z-css {
528
-
color: #cad3f5;
528
+
color: #cad3f5;
529
529
}
530
530
html[data-theme="dark"] .z-constant.z-numeric.z-suffix.z-css,
531
531
html[data-theme="dark"] .z-keyword.z-other.z-unit.z-css {
532
-
color: #8bd5ca;
533
-
font-style: italic;
532
+
color: #8bd5ca;
533
+
font-style: italic;
534
534
}
535
535
html[data-theme="dark"] .z-variable.z-other.z-custom-property.z-name.z-css,
536
536
html[data-theme="dark"] .z-support.z-type.z-custom-property.z-name.z-css,
537
537
html[data-theme="dark"] .z-punctuation.z-definition.z-custom-property.z-css {
538
-
color: #8bd5ca;
538
+
color: #8bd5ca;
539
539
}
540
540
html[data-theme="dark"] .z-entity.z-name.z-tag.z-css {
541
-
color: #b7bdf8;
541
+
color: #b7bdf8;
542
542
}
543
543
html[data-theme="dark"] .z-variable.z-other.z-sass {
544
-
color: #8bd5ca;
544
+
color: #8bd5ca;
545
545
}
546
546
html[data-theme="dark"] .z-invalid {
547
-
color: #cad3f5;
548
-
background-color: #ed8796;
547
+
color: #cad3f5;
548
+
background-color: #ed8796;
549
549
}
550
550
html[data-theme="dark"] .z-invalid.z-deprecated {
551
-
color: #cad3f5;
552
-
background-color: #c6a0f6;
551
+
color: #cad3f5;
552
+
background-color: #c6a0f6;
553
553
}
554
554
html[data-theme="dark"] .z-meta.z-diff,
555
555
html[data-theme="dark"] .z-meta.z-diff.z-header {
556
-
color: #6e738d;
556
+
color: #6e738d;
557
557
}
558
558
html[data-theme="dark"] .z-markup.z-deleted {
559
-
color: #ed8796;
559
+
color: #ed8796;
560
560
}
561
561
html[data-theme="dark"] .z-markup.z-inserted {
562
-
color: #a6da95;
562
+
color: #a6da95;
563
563
}
564
564
html[data-theme="dark"] .z-markup.z-changed {
565
-
color: #eed49f;
565
+
color: #eed49f;
566
566
}
567
567
html[data-theme="dark"] .z-message.z-error {
568
-
color: #ed8796;
568
+
color: #ed8796;
569
569
}
+30
-25
static/js/script.js
+30
-25
static/js/script.js
···
1
-
const toggleButton = document.getElementById('theme-toggle');
2
-
const themeIcon = document.getElementById('theme-icon');
3
-
const themeSound = document.getElementById('theme-sound');
1
+
const toggleButton = document.getElementById("theme-toggle");
2
+
const themeIcon = document.getElementById("theme-icon");
3
+
const themeSound = document.getElementById("theme-sound");
4
4
5
5
// Function to update the theme icon based on the current theme
6
6
const updateThemeIcon = (isDarkMode) => {
7
-
const themeMode = isDarkMode ? 'darkMode' : 'lightMode';
8
-
const iconPath = themeIcon.querySelector('use').getAttribute('href').replace(/#.*$/, `#${themeMode}`);
9
-
themeIcon.querySelector('use').setAttribute('href', iconPath);
7
+
const themeMode = isDarkMode ? "darkMode" : "lightMode";
8
+
const iconPath = themeIcon
9
+
.querySelector("use")
10
+
.getAttribute("href")
11
+
.replace(/#.*$/, `#${themeMode}`);
12
+
themeIcon.querySelector("use").setAttribute("href", iconPath);
10
13
};
11
14
12
15
// Function to update the theme based on the current mode
13
16
const updateTheme = (isDarkMode) => {
14
-
const theme = isDarkMode ? 'dark' : 'light';
15
-
document.documentElement.setAttribute('data-theme', theme);
16
-
updateThemeIcon(isDarkMode);
17
+
const theme = isDarkMode ? "dark" : "light";
18
+
document.documentElement.setAttribute("data-theme", theme);
19
+
updateThemeIcon(isDarkMode);
17
20
};
18
21
19
22
// Function to toggle the theme
20
23
const toggleTheme = () => {
21
-
const isDarkMode = toggleButton.checked;
22
-
updateTheme(isDarkMode);
23
-
themeSound.play();
24
-
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
24
+
const isDarkMode = toggleButton.checked;
25
+
updateTheme(isDarkMode);
26
+
themeSound.play();
27
+
localStorage.setItem("theme", isDarkMode ? "dark" : "light");
25
28
26
-
// Add transition class to body for smooth transition
27
-
document.body.classList.add('theme-transition');
28
-
setTimeout(() => {
29
-
document.body.classList.remove('theme-transition');
30
-
}, 300);
29
+
// Add transition class to body for smooth transition
30
+
document.body.classList.add("theme-transition");
31
+
setTimeout(() => {
32
+
document.body.classList.remove("theme-transition");
33
+
}, 300);
31
34
};
32
35
33
36
// Event listener for theme toggle
34
-
toggleButton.addEventListener('change', toggleTheme);
37
+
toggleButton.addEventListener("change", toggleTheme);
35
38
36
39
// Function to initialize the theme based on the stored preference
37
40
const initializeTheme = () => {
38
-
const storedTheme = localStorage.getItem('theme');
39
-
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
40
-
const isDarkMode = storedTheme === 'dark' || (!storedTheme && prefersDark);
41
-
toggleButton.checked = isDarkMode;
42
-
updateTheme(isDarkMode);
41
+
const storedTheme = localStorage.getItem("theme");
42
+
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
43
+
const isDarkMode = storedTheme === "dark" || (!storedTheme && prefersDark);
44
+
toggleButton.checked = isDarkMode;
45
+
updateTheme(isDarkMode);
43
46
};
44
47
45
48
// Initialize the theme
46
49
initializeTheme();
47
50
48
51
// Listen for changes in system preference
49
-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', initializeTheme);
52
+
window
53
+
.matchMedia("(prefers-color-scheme: dark)")
54
+
.addEventListener("change", initializeTheme);
+19
-1
static/site.webmanifest
+19
-1
static/site.webmanifest
···
1
-
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
1
+
{
2
+
"name": "",
3
+
"short_name": "",
4
+
"icons": [
5
+
{
6
+
"src": "/android-chrome-192x192.png",
7
+
"sizes": "192x192",
8
+
"type": "image/png"
9
+
},
10
+
{
11
+
"src": "/android-chrome-512x512.png",
12
+
"sizes": "512x512",
13
+
"type": "image/png"
14
+
}
15
+
],
16
+
"theme_color": "#ffffff",
17
+
"background_color": "#ffffff",
18
+
"display": "standalone"
19
+
}
+13
-13
tools/package.json
+13
-13
tools/package.json
···
1
1
{
2
-
"name": "zera",
3
-
"module": "index.ts",
4
-
"type": "module",
5
-
"scripts": {
6
-
"gen": "bun run tools/genOG.ts"
7
-
},
8
-
"devDependencies": {
9
-
"@types/bun": "latest",
10
-
"puppeteer": "^23.6.0"
11
-
},
12
-
"peerDependencies": {
13
-
"typescript": "^5.0.0"
14
-
}
2
+
"name": "zera",
3
+
"module": "index.ts",
4
+
"type": "module",
5
+
"scripts": {
6
+
"gen": "bun run tools/genOG.ts"
7
+
},
8
+
"devDependencies": {
9
+
"@types/bun": "latest",
10
+
"puppeteer": "^23.6.0"
11
+
},
12
+
"peerDependencies": {
13
+
"typescript": "^5.0.0"
14
+
}
15
15
}
+22
-22
tsconfig.json
+22
-22
tsconfig.json
···
1
1
{
2
-
"compilerOptions": {
3
-
// Enable latest features
4
-
"lib": ["ESNext", "DOM"],
5
-
"target": "ESNext",
6
-
"module": "ESNext",
7
-
"moduleDetection": "force",
8
-
"jsx": "react-jsx",
9
-
"allowJs": true,
2
+
"compilerOptions": {
3
+
// Enable latest features
4
+
"lib": ["ESNext", "DOM"],
5
+
"target": "ESNext",
6
+
"module": "ESNext",
7
+
"moduleDetection": "force",
8
+
"jsx": "react-jsx",
9
+
"allowJs": true,
10
10
11
-
// Bundler mode
12
-
"moduleResolution": "bundler",
13
-
"allowImportingTsExtensions": true,
14
-
"verbatimModuleSyntax": true,
15
-
"noEmit": true,
11
+
// Bundler mode
12
+
"moduleResolution": "bundler",
13
+
"allowImportingTsExtensions": true,
14
+
"verbatimModuleSyntax": true,
15
+
"noEmit": true,
16
16
17
-
// Best practices
18
-
"strict": true,
19
-
"skipLibCheck": true,
20
-
"noFallthroughCasesInSwitch": true,
17
+
// Best practices
18
+
"strict": true,
19
+
"skipLibCheck": true,
20
+
"noFallthroughCasesInSwitch": true,
21
21
22
-
// Some stricter flags (disabled by default)
23
-
"noUnusedLocals": false,
24
-
"noUnusedParameters": false,
25
-
"noPropertyAccessFromIndexSignature": false
26
-
}
22
+
// Some stricter flags (disabled by default)
23
+
"noUnusedLocals": false,
24
+
"noUnusedParameters": false,
25
+
"noPropertyAccessFromIndexSignature": false
26
+
}
27
27
}