dunkirk.sh
the home site for me: also iteration 3 or 4 of my site
1header {
2 grid-column: 1 / -1;
3 padding: 0.625rem 1rem 0 1rem;
4}
5
6#header-container {
7 display: flex;
8 flex-direction: row;
9 justify-content: space-between;
10 align-items: center;
11}
12
13#now-playing:not(:empty) {
14 font-size: 0.85rem;
15 color: var(--text-light);
16 display: flex;
17 flex-direction: column;
18 gap: 0.15rem;
19 flex: 1;
20 min-width: 0;
21}
22
23#now-playing .now-playing-line {
24 display: flex;
25 align-items: center;
26 gap: 0.25rem;
27 min-width: 0;
28}
29
30#now-playing .track-name {
31 overflow: hidden;
32 text-overflow: ellipsis;
33 white-space: nowrap;
34 min-width: 0;
35}
36
37#now-playing .artist-line {
38 overflow: hidden;
39 text-overflow: ellipsis;
40 white-space: nowrap;
41}
42
43#now-playing a {
44 color: var(--link);
45 text-decoration: none;
46 min-width: 0;
47 overflow: hidden;
48}
49
50#now-playing a:hover {
51 text-decoration: underline;
52}
53
54/* Hide music widget on very small screens */
55@media (max-width: 640px) {
56 #now-playing {
57 display: none !important;
58 }
59}
60
61#nav-bar {
62 display: flex;
63 flex-direction: row;
64 flex-wrap: wrap;
65 align-items: center;
66}
67
68#nav-bar a {
69 text-decoration: none;
70 color: var(--link);
71 padding: 0 0.25rem;
72 border-radius: 0.25rem;
73 transition: all 120ms ease;
74 position: relative;
75 font-weight: 600;
76 font-style: italic;
77}
78
79#nav-bar a:hover {
80 color: var(--accent);
81 background-color: color-mix(in oklab, var(--accent) 15%, transparent);
82}
83
84#nav-bar a.active {
85 color: var(--link-visited);
86 background-color: color-mix(in oklab, var(--accent) 20%, transparent);
87 margin: 0 0.15rem;
88}
89
90#footer-container {
91 display: flex;
92 flex-direction: column;
93 justify-content: center;
94 align-items: center;
95 text-align: center;
96 padding-bottom: 0.5rem;
97}
98
99#footer-container p {
100 margin: 0;
101}
102
103.accent-data {
104 color: var(--accent-dark);
105}
106
107.tags-data {
108 display: flex;
109 flex-direction: row;
110 flex-wrap: wrap;
111 justify-content: flex-end;
112 align-items: flex-start;
113 align-content: flex-end;
114 gap: 0.25rem;
115}
116
117.title-list li {
118 margin-bottom: 0.375rem;
119}
120
121/* icons settings */
122.icons {
123 width: 1.3rem;
124 height: 1.3rem;
125 aspect-ratio: 1 / 1;
126 display: inline-block;
127 vertical-align: middle;
128 color: var(--text);
129 fill: var(--text);
130 background-color: transparent;
131 cursor: pointer;
132}
133
134.icons:hover {
135 background-color: transparent;
136 color: var(--accent);
137}
138
139/* footnotes */
140.footnote-definition {
141 margin: 0 0 0 0.125rem;
142}
143
144.footnote-definition-label {
145 color: var(--accent);
146}
147
148.footnote-definition p {
149 display: inline;
150 margin: 0.625rem 0 0 0.625rem;
151}
152
153/* general classes */
154.no-style {
155 padding: 0;
156 margin: 0;
157 border: none;
158 border-radius: 0;
159}
160
161.no-style:hover {
162 background-color: transparent;
163 color: var(--accent);
164}
165
166.center {
167 text-align: center;
168}
169
170.center .img-container {
171 margin: 1rem auto;
172}
173
174.center figcaption {
175 text-align: center;
176}
177
178.float-right {
179 float: right;
180}
181
182.float-left {
183 float: left;
184}
185
186div>code,
187li code,
188p code {
189 padding: 0.1em 0.3em 0.1em 0.3em;
190 color: var(--text-dark);
191 background-color: var(--bg-light);
192}
193
194pre {
195 border-top-left-radius: 0;
196}
197
198blockquote {
199 padding-top: 0.2rem;
200 padding-bottom: 0.2rem;
201}
202
203blockquote:has(+ pre) {
204 display: inline-block;
205 border: none;
206 font-family: var(--mono-font) !important;
207 font-size: 0.8rem;
208 font-weight: 600;
209 margin: 0;
210 margin-bottom: 0.2rem;
211 margin-block: 0 0;
212 border-top-left-radius: 0.2em;
213 border-top-right-radius: 0.2em;
214 padding-left: 0.75rem;
215 padding-right: 0.75rem;
216 padding-top: 0.25rem;
217 padding-bottom: 0.25rem;
218 position: relative;
219 background-color: var(--accent);
220}
221
222blockquote:has(+ pre) p {
223 margin: 0;
224 color: var(--accent-text);
225}
226
227blockquote:has(+ pre) p::selection {
228 background: var(--pink-puree);
229}
230
231.yt-embed {
232 width: 100%;
233 display: flex;
234 flex-direction: column;
235 justify-content: center;
236 align-content: center;
237 text-align: center;
238}
239
240.yt-embed iframe {
241 width: 100%;
242 aspect-ratio: 16 / 9;
243 align-self: center;
244}
245
246.yt-embed figcaption {
247 margin-top: 1rem;
248 text-align: center;
249}
250
251#elr table {
252 border-style: none;
253}
254
255#elr td {
256 border-style: dashed;
257}
258
259img.avatar {
260 width: 24px;
261 height: 24px;
262 aspect-ratio: 1 / 1;
263 border-radius: 50%;
264 vertical-align: middle;
265 display: inline-block;
266 border: none;
267 padding: 0;
268 margin: 0;
269}
270
271cite {
272 display: inline-flex;
273 align-items: center;
274 vertical-align: middle;
275}
276
277cite a {
278 display: inline-flex;
279 align-items: center;
280}
281
282cite a img.avatar {
283 margin-right: 5px;
284}
285
286.image-gallery {
287 display: flex;
288 flex-direction: column;
289 gap: 0.5rem;
290 padding-top: 0.5rem;
291}
292
293.image-gallery img {
294 max-width: 100%;
295 border-radius: 0.25rem;
296 padding: 0;
297 margin: 0;
298}
299
300.side-by-side {
301 display: flex;
302 flex-direction: row;
303}
304
305.side-by-side img {
306 max-width: calc(50% - 0.25rem);
307}
308
309.gallery-grid {
310 display: grid;
311 grid-template-columns: repeat(2, 1fr);
312 gap: 0.1rem;
313}
314
315.gallery-grid img {
316 width: 100%;
317 height: auto;
318 object-fit: cover;
319}
320
321.inlined-bubbles {
322 width: auto;
323 pointer-events: none;
324 display: block;
325 margin-top: 10px;
326 text-align: center;
327}
328
329.bubble {
330 margin-top: 1rem;
331 padding: 0.7em 1.2em 0.7em 1.2em;
332 background: var(--accent);
333 border-bottom: 5px solid var(--bg-light);
334 border-radius: 7px 7px 10px 10px;
335 font-size: 1rem;
336 font-weight: bold;
337 color: var(--accent-text);
338 display: inline-block;
339 text-align: center;
340 transition:
341 transform 0.3s ease,
342 opacity 0.3s ease;
343}
344
345@keyframes bubbleIn {
346 0% {
347 opacity: 0;
348 transform: translateY(10px) scale(0.95);
349 }
350
351 100% {
352 opacity: 1;
353 transform: translateY(0) scale(1);
354 }
355}
356
357@media (prefers-reduced-motion: no-preference) {
358 .bubble.animate-in {
359 animation: bubbleIn 0.3s ease-out forwards;
360 }
361}
362
363.bubble a {
364 color: var(--accent-text);
365 text-decoration: none;
366}
367
368
369
370.bubble > span {
371 display: flex;
372 flex-wrap: wrap;
373 justify-content: center;
374 gap: 0 0.3em;
375}
376
377#time-ago-wrap {
378 white-space: nowrap;
379}
380
381#time-ago-wrap.wrapped .time-dash {
382 display: none;
383}
384
385#time-ago {
386 font-weight: normal;
387 font-size: 0.8rem;
388}
389
390.badge-row {
391 display: flex;
392 flex-wrap: wrap;
393 justify-content: center;
394 gap: 8px;
395 padding-bottom: 0.5rem;
396}
397
398.badge-row img {
399 display: inline-block;
400 border: none;
401 border-radius: 0;
402 box-shadow: none;
403 max-width: 100%;
404 height: auto;
405 margin: 0;
406 padding: 0;
407}
408
409.badge-row a {
410 display: inline-flex;
411 align-items: center;
412}
413
414.img-group {
415 display: flex;
416 flex-direction: row;
417 gap: 1rem;
418 max-width: 100%;
419 justify-content: center;
420 align-items: flex-start;
421}
422
423.img-group .img-container {
424 background-color: var(--accent);
425 border-bottom: 4px solid var(--bg-light);
426 border-radius: 7px 7px 10px 10px;
427 padding: 0.35rem;
428 margin: 1rem 0;
429 line-height: 0;
430}
431
432.img-group img {
433 max-width: 100%;
434 height: auto;
435 border-radius: 0.35rem;
436}
437
438:root {
439 --nightshade-violet: oklch(0.27 0.0242 287.67);
440 --purple-night: oklch(27.58% 0.0203 289.13);
441 --red-crushed-grape: oklch(0.6829 0.1189 296.74);
442 --dark-crushed-grape: oklch(0.6261 0.1289 284.99);
443 --light-crushed-grape: oklch(0.7727 0.094 296.74);
444 --reseda-green: oklch(62.33% 0.0475 126.94);
445 --earth-yellow: oklch(86.49% 0.018 73.05);
446 --sunset: oklch(0.86 0.0213 73.05);
447 --ultra-violet: oklch(42.21% 0.0676 297.45);
448 --rose-quartz: oklch(65.32% 0.0585 311.96);
449 --pink-puree: oklch(75.65% 0.0555 290.76);
450 --lavendar-breeze: oklch(91.06% 0.0223 290.76);
451 --purple-gray: oklch(25.63% 0.0002 290.76);
452 --alice-blue: oklch(95.38% 0.0118 239.91);
453}