the home site for me: also iteration 3 or 4 of my site
feat: add 88x31 buttons
+242
-221
.DS_Store
.DS_Store
This is a binary file and will not be displayed.
+190
-167
sass/css/mods.css
+190
-167
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 {
170
-
margin-top: 1rem;
171
-
text-align: center;
170
+
margin-top: 1rem;
171
+
text-align: center;
172
172
}
173
173
174
174
#elr table {
175
-
border-style: none;
175
+
border-style: none;
176
176
}
177
177
178
178
#elr td {
179
-
border-style: dashed;
179
+
border-style: dashed;
180
180
}
181
181
182
182
img.avatar {
183
-
width: 24px;
184
-
height: 24px;
185
-
aspect-ratio: 1 / 1;
186
-
border-radius: 50%;
187
-
vertical-align: middle;
188
-
display: inline-block;
189
-
border: none;
190
-
padding: 0;
191
-
margin: 0;
183
+
width: 24px;
184
+
height: 24px;
185
+
aspect-ratio: 1 / 1;
186
+
border-radius: 50%;
187
+
vertical-align: middle;
188
+
display: inline-block;
189
+
border: none;
190
+
padding: 0;
191
+
margin: 0;
192
192
}
193
193
194
194
cite {
195
-
display: inline-flex;
196
-
align-items: center;
197
-
vertical-align: middle;
195
+
display: inline-flex;
196
+
align-items: center;
197
+
vertical-align: middle;
198
198
}
199
199
200
200
cite a {
201
-
display: inline-flex;
202
-
align-items: center;
201
+
display: inline-flex;
202
+
align-items: center;
203
203
}
204
204
205
205
cite a img.avatar {
206
-
margin-right: 5px;
206
+
margin-right: 5px;
207
207
}
208
208
209
209
.image-gallery {
210
-
display: flex;
211
-
flex-direction: column;
212
-
gap: 0.5rem;
213
-
padding-top: 0.5rem;
210
+
display: flex;
211
+
flex-direction: column;
212
+
gap: 0.5rem;
213
+
padding-top: 0.5rem;
214
214
}
215
215
216
216
.image-gallery img {
217
-
max-width: 100%;
218
-
border-radius: 0.25rem;
219
-
padding: 0;
220
-
margin: 0;
217
+
max-width: 100%;
218
+
border-radius: 0.25rem;
219
+
padding: 0;
220
+
margin: 0;
221
221
}
222
222
223
223
.side-by-side {
224
-
display: flex;
225
-
flex-direction: row;
224
+
display: flex;
225
+
flex-direction: row;
226
226
}
227
227
228
228
.side-by-side img {
229
-
max-width: calc(50% - 0.25rem);
229
+
max-width: calc(50% - 0.25rem);
230
230
}
231
231
232
232
.gallery-grid {
233
-
display: grid;
234
-
grid-template-columns: repeat(2, 1fr);
235
-
gap: 0.1rem;
233
+
display: grid;
234
+
grid-template-columns: repeat(2, 1fr);
235
+
gap: 0.1rem;
236
236
}
237
237
238
238
.gallery-grid img {
239
-
width: 100%;
240
-
height: auto;
241
-
object-fit: cover;
239
+
width: 100%;
240
+
height: auto;
241
+
object-fit: cover;
242
242
}
243
243
244
244
.inlined-bubbles {
245
-
width: auto;
246
-
pointer-events: none;
247
-
display: block;
248
-
margin-top: 10px;
249
-
text-align: center;
245
+
width: auto;
246
+
pointer-events: none;
247
+
display: block;
248
+
margin-top: 10px;
249
+
text-align: center;
250
250
}
251
251
252
252
.bubble {
253
-
padding: 0.7em 1.2em 0.7em 1.2em;
254
-
background: var(--accent);
255
-
border-bottom: 5px solid var(--bg-light);
256
-
border-radius: 7px 7px 10px 10px;
257
-
font-size: 1rem;
258
-
font-weight: bold;
259
-
color: var(--accent-text);
260
-
display: inline-block;
261
-
text-align: center;
262
-
transition:
263
-
transform 0.3s ease,
264
-
opacity 0.3s ease;
253
+
padding: 0.7em 1.2em 0.7em 1.2em;
254
+
background: var(--accent);
255
+
border-bottom: 5px solid var(--bg-light);
256
+
border-radius: 7px 7px 10px 10px;
257
+
font-size: 1rem;
258
+
font-weight: bold;
259
+
color: var(--accent-text);
260
+
display: inline-block;
261
+
text-align: center;
262
+
transition:
263
+
transform 0.3s ease,
264
+
opacity 0.3s ease;
265
265
}
266
266
267
267
@keyframes bubbleIn {
268
-
0% {
269
-
opacity: 0;
270
-
transform: translateY(10px) scale(0.95);
271
-
}
272
-
100% {
273
-
opacity: 1;
274
-
transform: translateY(0) scale(1);
275
-
}
268
+
0% {
269
+
opacity: 0;
270
+
transform: translateY(10px) scale(0.95);
271
+
}
272
+
100% {
273
+
opacity: 1;
274
+
transform: translateY(0) scale(1);
275
+
}
276
276
}
277
277
278
278
@media (prefers-reduced-motion: no-preference) {
279
-
.bubble.animate-in {
280
-
animation: bubbleIn 0.3s ease-out forwards;
281
-
}
279
+
.bubble.animate-in {
280
+
animation: bubbleIn 0.3s ease-out forwards;
281
+
}
282
282
}
283
283
284
284
.bubble a {
285
-
color: var(--accent-text);
286
-
text-decoration: none;
285
+
color: var(--accent-text);
286
+
text-decoration: none;
287
287
}
288
288
289
289
#time-ago {
290
-
font-weight: normal;
291
-
font-size: 0.8rem;
290
+
font-weight: normal;
291
+
font-size: 0.8rem;
292
+
}
293
+
294
+
.badge-row {
295
+
display: flex;
296
+
flex-wrap: wrap;
297
+
justify-content: center;
298
+
gap: 8px;
299
+
padding-bottom: 0.5rem;
300
+
}
301
+
302
+
.badge-row img {
303
+
display: inline-block;
304
+
border: none;
305
+
border-radius: 0;
306
+
box-shadow: none;
307
+
max-width: 100%;
308
+
height: auto;
309
+
margin: 0;
310
+
}
311
+
312
+
.badge-row a {
313
+
display: inline-flex;
314
+
align-items: center;
292
315
}
293
316
294
317
:root {
295
-
--nightshade-violet: oklch(0.27 0.0242 287.67);
296
-
--purple-night: oklch(27.58% 0.0203 289.13);
297
-
--red-crushed-grape: oklch(0.656 0.1189 296.74);
298
-
--dark-crushed-grape: oklch(0.6261 0.1289 284.99);
299
-
--light-crushed-grape: oklch(73.48% 0.1008 284.99);
300
-
--reseda-green: oklch(62.33% 0.0475 126.94);
301
-
--earth-yellow: oklch(86.49% 0.018 73.05);
302
-
--sunset: oklch(0.86 0.0213 73.05);
303
-
--ultra-violet: oklch(42.21% 0.0676 297.45);
304
-
--rose-quartz: oklch(65.32% 0.0585 311.96);
305
-
--pink-puree: oklch(75.65% 0.0555 290.76);
306
-
--lavendar-breeze: oklch(91.06% 0.0223 290.76);
307
-
--purple-gray: oklch(25.63% 0.0002 290.76);
308
-
--alice-blue: oklch(95.38% 0.0118 239.91);
318
+
--nightshade-violet: oklch(0.27 0.0242 287.67);
319
+
--purple-night: oklch(27.58% 0.0203 289.13);
320
+
--red-crushed-grape: oklch(0.656 0.1189 296.74);
321
+
--dark-crushed-grape: oklch(0.6261 0.1289 284.99);
322
+
--light-crushed-grape: oklch(73.48% 0.1008 284.99);
323
+
--reseda-green: oklch(62.33% 0.0475 126.94);
324
+
--earth-yellow: oklch(86.49% 0.018 73.05);
325
+
--sunset: oklch(0.86 0.0213 73.05);
326
+
--ultra-violet: oklch(42.21% 0.0676 297.45);
327
+
--rose-quartz: oklch(65.32% 0.0585 311.96);
328
+
--pink-puree: oklch(75.65% 0.0555 290.76);
329
+
--lavendar-breeze: oklch(91.06% 0.0223 290.76);
330
+
--purple-gray: oklch(25.63% 0.0002 290.76);
331
+
--alice-blue: oklch(95.38% 0.0118 239.91);
309
332
}
static/badges/get-netscape.gif
static/badges/get-netscape.gif
This is a binary file and will not be displayed.
static/badges/green-team.gif
static/badges/green-team.gif
This is a binary file and will not be displayed.
static/badges/hackclub.png
static/badges/hackclub.png
This is a binary file and will not be displayed.
static/badges/made-with-neovim.png
static/badges/made-with-neovim.png
This is a binary file and will not be displayed.
static/badges/no-web3.gif
static/badges/no-web3.gif
This is a binary file and will not be displayed.
static/badges/powered-by-nix.gif
static/badges/powered-by-nix.gif
This is a binary file and will not be displayed.
static/badges/tangled.png
static/badges/tangled.png
This is a binary file and will not be displayed.