474 lines
7.3 kB
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
52
html {
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
63
del {
64
text-decoration: line-through !important;
65
}
66
67
* {
68
box-sizing: border-box;
69
padding: 0;
70
margin: 0;
71
}
72
73
main,
74
footer {
75
font-family: var(--font-content);
76
font-size: 1.05rem;
77
padding: 0;
78
line-height: 160%;
79
font-weight: 400;
80
}
81
82
main article,
83
table {
84
min-width: 0;
85
}
86
87
h2,
88
h3 {
89
font-weight: 400 !important;
90
}
91
92
strong {
93
font-weight: 500;
94
}
95
96
main 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
103
main h2 {
104
color: var(--dark);
105
font-size: calc(1.20em + 0.25vw);
106
}
107
108
main h2,
109
h3 {
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
143
a {
144
margin: 0;
145
padding: 0;
146
box-sizing: border-box;
147
text-decoration: none;
148
word-wrap: break-word;
149
}
150
151
main a {
152
color: var(--darker);
153
border-bottom: 1.5px solid var(--medium-gray);
154
}
155
156
a:hover {
157
border-bottom: 1.5px solid var(--gray);
158
}
159
160
body {
161
max-width: 655px;
162
padding: 2rem 1rem 20rem;
163
margin: 1rem auto;
164
}
165
166
main article img {
167
max-width: 100%;
168
width: 100%;
169
display: block;
170
margin: 10px auto 4px auto;
171
border-radius: 6px;
172
}
173
174
main ul,
175
main 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
226
article p {
227
padding: 7px 0 7px 0;
228
}
229
230
article 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
300
pre {
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
309
code {
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
324
table {
325
table-layout: fixed;
326
width: 100%;
327
}
328
329
table a {
330
text-decoration: none;
331
}
332
333
hr {
334
max-width: 100%;
335
border: 0;
336
height: 1px;
337
margin: 1.5rem 0;
338
background: var(--light-gray);
339
}
340
341
footer {
342
padding-top: 30px;
343
}
344
345
blockquote {
346
margin: 7px 0 7px 0;
347
}
348
349
blockquote p {
350
font-style: italic;
351
color: var(--darker);
352
padding-left: 20px;
353
border-left: 1.5px solid var(--medium-gray);
354
}
355
356
li::marker {
357
color: var(--mediumer-gray);
358
}
359
360
nav {
361
display: flex;
362
align-items: center;
363
}
364
365
nav ul {
366
flex-shrink: 1;
367
padding: 0;
368
margin: 0;
369
list-style: none;
370
padding-bottom: 20px;
371
}
372
373
nav ul li {
374
padding-right: 10px;
375
display: inline-block;
376
}
377
378
ol {
379
counter-reset: counter;
380
}
381
ol li {
382
counter-increment: counter;
383
}
384
385
ol 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
}
475