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