t0.lv
1:root {
2 --cyan: #509c93;
3 --light: #fff9eb;
4 --light-gray: #fceccc;
5 --medium-gray: #e6dcd1;
6 --mediumer-gray: #d8cbbe;
7 --gray: #776e63;
8 --dark: #4a443d;
9 --darker: #2a261f;
10 --bg: oklch(0.968 0.007 247.896);
11 --fg: oklch(0.21 0.034 264.665);
12 --selection: oklch(85.2% 0.199 91.936 / 30%);
13
14 --font-content: -apple-system, BlinkMacSystemFont, "Inter", "Roboto",
15 "Segoe UI", sans-serif;
16}
17
18@media (prefers-color-scheme: dark) {
19 :root {
20 --cyan: #509c93;
21 --light: #2a261f;
22 --light-gray: #4a443d;
23 --medium-gray: #6b635a;
24 --gray: #d3cec1;
25 --fg: #fff6e3;
26 --dark: #e6dcd1;
27 --darker: #fff9eb;
28 --bg: #100f0f;
29 --selection: rgba(80, 156, 147, 0.2);
30 }
31
32 html {
33 background: var(--bg);
34 color: var(--fg);
35 }
36
37 main a {
38 color: var(--gray);
39 border-bottom: 1.5px solid var(--medium-gray);
40 }
41
42 hr {
43 background: var(--light);
44 }
45
46 blockquote p {
47 border-left: 1.5px solid var(--gray);
48 }
49
50}
51
52html {
53 background: var(--bg);
54 color: var(--fg);
55 -webkit-text-size-adjust: none;
56}
57
58::selection {
59 background: var(--selection);
60 color: var(--darker);
61}
62
63del {
64 text-decoration: line-through !important;
65}
66
67* {
68 box-sizing: border-box;
69 padding: 0;
70 margin: 0;
71}
72
73main,
74footer {
75 font-family: var(--font-content);
76 font-size: 1.05rem;
77 padding: 0;
78 line-height: 160%;
79 font-weight: 400;
80}
81
82main article,
83table {
84 min-width: 0;
85}
86
87h2,
88h3 {
89 font-weight: 400 !important;
90}
91
92strong {
93 font-weight: 500;
94}
95
96main h1 {
97 font-size: calc(1.35em + 0.35vw);
98 padding: 30px 0 30px 0;
99 font-weight: 500;
100 line-height: 1.2;
101}
102
103main h2 {
104 color: var(--dark);
105 font-size: calc(1.20em + 0.25vw);
106}
107
108main h2,
109h3 {
110 margin: 40px 0 20px 0;
111}
112
113.logo {
114 svg {
115 max-height: 2.5rem;
116 max-width: 2.5rem;
117 transform: translateY(-10%);
118 fill: var(--fg);
119
120 }
121
122 flex-grow: 1;
123 margin-right: 1rem;
124 text-decoration: none;
125 border-bottom: unset;
126 background: unset !important;
127}
128
129.footimgs a {
130 all: unset !important;
131}
132
133.footimgs img {
134 max-height: 2.5rem;
135 max-width: 2.5rem;
136 display: inline-block;
137 vertical-align: middle;
138 image-orientation: from-image;
139 padding: 0 0 5px 5px;
140 cursor: pointer;
141}
142
143a {
144 margin: 0;
145 padding: 0;
146 box-sizing: border-box;
147 text-decoration: none;
148 word-wrap: break-word;
149}
150
151main a {
152 color: var(--darker);
153 border-bottom: 1.5px solid var(--medium-gray);
154}
155
156a:hover {
157 border-bottom: 1.5px solid var(--gray);
158}
159
160body {
161 max-width: 655px;
162 padding: 2rem 1rem 20rem;
163 margin: 1rem auto;
164}
165
166main article img {
167 max-width: 100%;
168 width: 100%;
169 display: block;
170 margin: 10px auto 4px auto;
171 border-radius: 6px;
172}
173
174main ul,
175main ol {
176 margin: 10px 30px 10px 30px;
177}
178
179.row {
180 display: flex;
181 flex-wrap: wrap;
182 align-items: center;
183 padding: 1rem 0.5rem 0.5rem 1rem;
184
185 img {
186 object-fit: cover;
187 };
188}
189
190.image-grid {
191 column-count: 2;
192}
193
194.image-grid img {
195 all: unset;
196 object-fit: cover;
197 position: relative;
198 width: 100%;
199 margin-bottom: 12px;
200}
201
202.image-grid a {
203 border-bottom: unset;
204}
205
206.subtitle {
207 padding: 2px 0 20px 0;
208 margin-top: 3px !important;
209 margin-bottom: 5px;
210 color: var(--gray);
211 line-height: 1.5;
212}
213
214.title {
215 padding: 30px 0 10px 0;
216}
217
218.muted {
219 color: var(--gray);
220}
221.muted a {
222 color: var(--cyan);
223 border-bottom: 1.5px solid var(--cyan);
224}
225
226article p {
227 padding: 7px 0 7px 0;
228}
229
230article a {
231 color: var(--dark);
232}
233
234.tagline {
235 padding: 50px 0 20px 0;
236}
237
238.book-posts {
239 padding-top: 2rem;
240 a {
241 text-decoration: none;
242 }
243 ul {
244 list-style-type: none;
245 padding: 0;
246 margin: 0;
247 }
248 ul > li {
249 display: flex;
250 align-items: baseline;
251 }
252 li > .post {
253 flex-grow: 1;
254 }
255
256 .author {
257 flex-shrink: 1;
258 white-space: nowrap;
259 vertical-align: baseline;
260 color: var(--gray);
261 }
262
263 .status {
264 flex-shrink: 1;
265 white-space: nowrap;
266 vertical-align: baseline;
267 }
268}
269
270.posts {
271 padding-top: 2rem;
272 h2 {
273 margin: 0rem 0 2rem 0;
274 }
275
276 ul {
277 list-style-type: none;
278 padding: 0;
279 margin: 0;
280 }
281 ul > li {
282 display: flex;
283 align-items: baseline;
284 }
285 li > .post {
286 flex-grow: 1;
287 }
288
289 li > .index-date {
290 flex-shrink: 1;
291 white-space: nowrap;
292 vertical-align: baseline;
293 color: var(--gray);
294 text-transform: lowercase;
295 padding-left: 0.8rem;
296 float: right;
297 }
298}
299
300pre {
301 overflow-x: auto;
302 overflow-y: hidden;
303 padding: 10px;
304 min-width: 0;
305 background-color: var(--light) !important;
306 margin-bottom: 10px;
307}
308
309code {
310 font-size: 0.9rem;
311 background-color: var(--light);
312}
313
314.post-date {
315 padding-top: 20px;
316 color: var(--gray);
317 text-transform: lowercase;
318}
319
320.header {
321 padding-bottom: 20px;
322}
323
324table {
325 table-layout: fixed;
326 width: 100%;
327}
328
329table a {
330 text-decoration: none;
331}
332
333hr {
334 max-width: 100%;
335 border: 0;
336 height: 1px;
337 margin: 1.5rem 0;
338 background: var(--light-gray);
339}
340
341footer {
342 padding-top: 30px;
343}
344
345blockquote {
346 margin: 7px 0 7px 0;
347}
348
349blockquote p {
350 font-style: italic;
351 color: var(--darker);
352 padding-left: 20px;
353 border-left: 1.5px solid var(--medium-gray);
354}
355
356li::marker {
357 color: var(--mediumer-gray);
358}
359
360nav {
361 display: flex;
362 align-items: center;
363}
364
365nav ul {
366 flex-shrink: 1;
367 padding: 0;
368 margin: 0;
369 list-style: none;
370 padding-bottom: 20px;
371}
372
373nav ul li {
374 padding-right: 10px;
375 display: inline-block;
376}
377
378ol {
379 counter-reset: counter;
380}
381ol li {
382 counter-increment: counter;
383}
384
385ol li:not(.footnotes)::marker {
386 color: var(--gray);
387}
388
389.footnotes > ol li {
390 display: flex;
391 align-items: center;
392 gap: 0.8rem;
393}
394
395.footnotes > ol li::before {
396 content: counter(counter);
397 border-radius: 50%;
398 text-align: center;
399 line-height: 160%;
400 color: var(--light);
401 background: var(--cyan);
402 width: 18px;
403 height: 18px;
404 font-size: 11px;
405 display: inline-block;
406 flex-shrink: 0;
407}
408
409.footnote-ref a {
410 text-decoration: none;
411 color: var(--light);
412 border-radius: 50%;
413 text-align: center;
414 line-height: 0.8rem;
415 background: var(--cyan);
416 width: 0.8rem;
417 height: 0.8rem;
418 font-size: 0.6rem;
419 display: inline-block;
420 border-bottom: unset;
421}
422
423.footnotes > ol li p {
424 margin: 0;
425 line-height: 160%;
426}
427
428.footnote-return {
429 border-bottom: unset;
430 color: var(--cyan);
431 margin-left: auto;
432}
433
434.footnote-return:hover {
435 border-bottom: unset;
436 color: var(--cyan);
437 margin-left: auto;
438}
439
440.footnotes ol li:not(:last-child) {
441 padding-bottom: 2rem;
442}
443
444.draft {
445 color: red;
446 font-size: 1rem;
447}
448
449@media (max-width: 400px) {
450 .image-grid {
451 column-count: 1;
452 }
453
454 body {
455 padding: 2rem 1rem 10rem;
456 }
457
458
459 table,
460 thead,
461 tbody,
462 th,
463 td,
464 tr {
465 display: block;
466 }
467 td {
468 padding: 0;
469 text-align: left;
470 }
471 tr {
472 padding: 10px 0 10px 0;
473 }
474}