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 gap: 0.25rem;
6 flex-wrap: wrap;
7 justify-content: flex-end;
8 align-items: center;
9 align-content: flex-end;
10}
11
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;
19}
20
21#footer-container p {
22 margin: 0;
23}
24
25.accent-data {
26 color: var(--accent-dark);
27}
28
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;
37}
38
39.title-list li {
40 margin-bottom: 0.375rem;
41}
42
43/* icons settings */
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;
54}
55
56.icons:hover {
57 background-color: transparent;
58 color: var(--accent);
59}
60
61/* footnotes */
62.footnote-definition {
63 margin: 0 0 0 0.125rem;
64}
65
66.footnote-definition-label {
67 color: var(--accent);
68}
69
70.footnote-definition p {
71 display: inline;
72 margin: 0.625rem 0 0 0.625rem;
73}
74
75/* general classes */
76.no-style {
77 padding: 0;
78 margin: 0;
79 border: none;
80 border-radius: 0;
81}
82
83.no-style:hover {
84 background-color: transparent;
85 color: var(--accent);
86}
87
88.center {
89 text-align: center;
90}
91
92.center img {
93 display: block;
94 margin: 1rem auto;
95}
96
97.center figcaption {
98 text-align: center;
99}
100
101.float-right {
102 float: right;
103}
104
105.float-left {
106 float: left;
107}
108
109div > code,
110li code,
111p code {
112 padding: 0.1em 0.3em 0.1em 0.3em;
113 color: var(--text-dark);
114 background-color: var(--bg-light);
115}
116
117pre {
118 border-top-left-radius: 0;
119}
120
121blockquote {
122 padding-top: 0.2rem;
123 padding-bottom: 0.2rem;
124}
125
126blockquote: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);
143}
144
145blockquote:has(+ pre) p {
146 margin: 0;
147 color: var(--accent-text);
148}
149
150blockquote:has(+ pre) p::selection {
151 background: var(--pink-puree);
152}
153
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;
161}
162
163.yt-embed iframe {
164 width: 100%;
165 aspect-ratio: 16 / 9;
166 align-self: center;
167}
168
169.yt-embed figcaption {
170 margin-top: 1rem;
171 text-align: center;
172}
173
174#elr table {
175 border-style: none;
176}
177
178#elr td {
179 border-style: dashed;
180}
181
182img.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;
192}
193
194cite {
195 display: inline-flex;
196 align-items: center;
197 vertical-align: middle;
198}
199
200cite a {
201 display: inline-flex;
202 align-items: center;
203}
204
205cite a img.avatar {
206 margin-right: 5px;
207}
208
209.image-gallery {
210 display: flex;
211 flex-direction: column;
212 gap: 0.5rem;
213 padding-top: 0.5rem;
214}
215
216.image-gallery img {
217 max-width: 100%;
218 border-radius: 0.25rem;
219 padding: 0;
220 margin: 0;
221}
222
223.side-by-side {
224 display: flex;
225 flex-direction: row;
226}
227
228.side-by-side img {
229 max-width: calc(50% - 0.25rem);
230}
231
232.gallery-grid {
233 display: grid;
234 grid-template-columns: repeat(2, 1fr);
235 gap: 0.1rem;
236}
237
238.gallery-grid img {
239 width: 100%;
240 height: auto;
241 object-fit: cover;
242}
243
244.inlined-bubbles {
245 width: auto;
246 pointer-events: none;
247 display: block;
248 margin-top: 10px;
249 text-align: center;
250}
251
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;
265}
266
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 }
276}
277
278@media (prefers-reduced-motion: no-preference) {
279 .bubble.animate-in {
280 animation: bubbleIn 0.3s ease-out forwards;
281 }
282}
283
284.bubble a {
285 color: var(--accent-text);
286}
287
288#time-ago {
289 font-weight: normal;
290 font-size: 0.8rem;
291}
292
293:root {
294 --nightshade-violet: oklch(0.27 0.0242 287.67);
295 --purple-night: oklch(27.58% 0.0203 289.13);
296 --dark-crushed-grape: oklch(74.02% 0.0756 311.96);
297 --light-crushed-grape: oklch(73.48% 0.1008 284.99);
298 --reseda-green: oklch(62.33% 0.0475 126.94);
299 --earth-yellow: oklch(86.49% 0.018 73.05);
300 --sunset: oklch(0.86 0.0213 73.05);
301 --ultra-violet: oklch(42.21% 0.0676 297.45);
302 --rose-quartz: oklch(65.32% 0.0585 311.96);
303 --pink-puree: oklch(75.65% 0.0555 290.76);
304 --lavendar-breeze: oklch(91.06% 0.0223 290.76);
305 --purple-gray: oklch(25.63% 0.0002 290.76);
306 --alice-blue: oklch(95.38% 0.0118 239.91);
307}