git ssb

1
@import "fonts/iosevka-grey/iosevka-grey.css";
2
@import "fonts/iosevka-grey-mono/iosevka-grey-mono.css";
3
@import "fonts/smol-emoji/smol-emoji.css";
4
5
/* Colours */
6
7
.month-01 {
8
  --hue: 15;
9
}
10
.month-02 {
11
  --hue: 30;
12
}
13
.month-03 {
14
  --hue: 52;
15
}
16
.month-04 {
17
  --hue: 82;
18
}
19
.month-05 {
20
  --hue: 149;
21
}
22
.month-06 {
23
  --hue: 187;
24
}
25
.month-07 {
26
  --hue: 210;
27
}
28
.month-08 {
29
  --hue: 246;
30
}
31
.month-09 {
32
  --hue: 269;
33
}
34
.month-10 {
35
  --hue: 291;
36
}
37
.month-11 {
38
  --hue: 321;
39
}
40
.month-12 {
41
  --hue: 352;
42
}
43
.thefridayfetchit {
44
  --hue: 113;
45
  --saturation: 48%;
46
}
47
.walkingdataloss {
48
  --hue: 214;
49
  --saturation: 17%;
50
}
51
52
body {
53
  --saturation: 60%;
54
  background-color: var(--background-color);
55
  color: var(--foreground-color);
56
  --background-color: hsl(var(--hue), 5%, 98%);
57
  --foreground-color: hsl(var(--hue), 5%, 10%);
58
  --primary-color: hsl(var(--hue), var(--saturation), 30%);
59
  --primary-color-dark: hsl(var(--hue), var(--saturation), 30%);
60
}
61
62
@media (prefers-color-scheme: dark) {
63
  body {
64
    --background-color: hsl(var(--hue), 5%, 10%);
65
    --foreground-color: hsl(var(--hue), 5%, 98%);
66
    --primary-color: hsl(var(--hue), var(--saturation), 70%);
67
  }
68
}
69
70
/* Typography */
71
72
html {
73
  font-size: max(8px, min(1em, 5vmin));
74
}
75
76
body {
77
  font-family: "Iosevka Grey Web", "Iosevka Aile", "Smol Emoji", ui-sans-serif,
78
    system-ui, sans-serif;
79
  font-size: 1rem;
80
  line-height: 1.5rem;
81
}
82
83
code,
84
kbd,
85
pre,
86
samp {
87
  font-family: "Iosevka Grey Mono Web", "Iosevka Extended", "Iosevka",
88
    "Smol Emoji", ui-monospace, monospace;
89
}
90
91
/* Layout */
92
93
*,
94
*::before,
95
*::after {
96
  box-sizing: border-box;
97
  max-width: 100%;
98
}
99
100
html,
101
body {
102
  margin: 0;
103
  padding: 0;
104
}
105
body {
106
  margin-bottom: 3rem;
107
}
108
109
.decoration {
110
  height: 12rem; /* For some entries, the height is overridden by inline styles. */
111
  background-color: var(--primary-color-dark);
112
  background-position: center;
113
  background-repeat: no-repeat;
114
  background-size: auto;
115
}
116
.thefridayfetchit .decoration {
117
  height: 18rem;
118
  background-image: url("/thefridayfetchit/decoration.png");
119
}
120
.walkingdataloss .decoration {
121
  height: 6rem;
122
  background-image: url("/walkingdataloss/decoration.png");
123
  background-position: top;
124
  background-repeat: repeat-x;
125
}
126
127
.entry h1 {
128
  max-width: min(60rem, 95vw);
129
  margin-left: auto;
130
  margin-right: auto;
131
  text-align: center;
132
}
133
134
.entry main footer section {
135
  max-width: min(40rem, 90vw);
136
  margin-left: auto;
137
  margin-right: auto;
138
  margin-top: 1.5rem;
139
  margin-bottom: 1.5rem;
140
}
141
142
.entry main footer section .series,
143
.entry main footer section .byline {
144
  text-align: center;
145
}
146
147
.entry main footer section .datestamp {
148
  width: max-content;
149
  margin-left: auto;
150
  margin-right: auto;
151
  text-align: right;
152
}
153
154
.entry main footer section .description {
155
  text-align: center;
156
  font-style: italic;
157
}
158
159
.entry main footer section .tags {
160
  margin-top: 1.5rem;
161
  margin-bottom: 1.5rem;
162
  text-align: center;
163
}
164
.entry main footer section .tags ul {
165
  display: inline;
166
}
167
.entry main footer section .tags li {
168
  display: inline-block;
169
  margin: 0;
170
  margin-left: calc(12rem / 16);
171
  margin-right: calc(12rem / 16);
172
}
173
174
/* Elements */
175
176
.hidden {
177
  display: none !important;
178
}
179
180
.inset {
181
  float: right;
182
  max-width: 49%;
183
  margin-left: 2%;
184
}
185
186
:link,
187
:visited {
188
  text-decoration: none;
189
  color: var(--primary-color);
190
}
191
192
:link,
193
:visited,
194
nav a:link strong,
195
nav a:visited strong {
196
  text-decoration: underline;
197
  text-decoration-thickness: max(1px, calc(1rem / 16));
198
  text-underline-offset: calc(4rem / 16);
199
}
200
201
:link:focus,
202
:link:hover,
203
:visited:focus,
204
:visited:hover,
205
nav a:link:focus strong,
206
nav a:link:hover strong,
207
nav a:visited:focus strong,
208
nav a:visited:hover strong {
209
  text-decoration-thickness: max(2px, calc(2rem / 16));
210
  outline: 0;
211
}
212
213
:link:active,
214
:visited:active {
215
  color: var(--foreground-color);
216
}
217
218
nav a,
219
nav a > *,
220
nav a > * > * {
221
  display: block;
222
}
223
nav a * {
224
  width: max-content;
225
}
226
nav > a:link,
227
nav > a:link:focus,
228
nav > a:link:hover,
229
nav > a:visited,
230
nav > a:visited:focus,
231
nav > a:visited:hover,
232
nav:not(.menu) a:link,
233
nav:not(.menu) a:link:focus,
234
nav:not(.menu) a:link:hover,
235
nav:not(.menu) a:visited,
236
nav:not(.menu) a:visited:focus,
237
nav:not(.menu) a:visited:hover {
238
  text-decoration: none;
239
}
240
241
address {
242
  font-style: normal;
243
}
244
245
aside {
246
  max-width: min(40rem, 90vw);
247
  margin-left: auto;
248
  margin-right: auto;
249
  padding-left: min(10rem, 22.5vw);
250
}
251
252
blockquote {
253
  margin-top: 1.5rem;
254
  margin-bottom: 1.5rem;
255
  max-width: min(30rem, 67.5vw);
256
  margin-left: auto;
257
  margin-right: auto;
258
  border-left: max(2px, calc(2rem / 16)) solid var(--foreground-color);
259
  padding-left: calc(1rem - max(2px, calc(2rem / 16)));
260
}
261
262
figure {
263
  margin-top: 1.5rem;
264
  margin-bottom: 1.5rem;
265
  margin-left: auto;
266
  margin-right: auto;
267
}
268
figcaption {
269
  width: max-content;
270
  max-width: min(40rem, 90vw);
271
  margin-left: auto;
272
  margin-right: auto;
273
}
274
275
h1 {
276
  padding: 0;
277
  margin-top: 3rem;
278
  margin-bottom: 1.5rem;
279
  font-size: 2.5rem;
280
  line-height: 3rem;
281
  max-width: min(40rem, 90vw);
282
  margin-left: auto;
283
  margin-right: auto;
284
}
285
h2 {
286
  padding: 0;
287
  margin-top: 1.5rem;
288
  margin-bottom: 1.5rem;
289
  font-size: 2rem;
290
  line-height: 3rem;
291
}
292
h3,
293
h4,
294
h5,
295
h6 {
296
  padding: 0;
297
  margin-top: 1.5rem;
298
  margin-bottom: 1.5rem;
299
  font-size: 1.25rem;
300
  line-height: 1.5rem;
301
}
302
main h2,
303
main h3,
304
main h4,
305
main h5,
306
main h6 {
307
  margin-top: 3rem;
308
  max-width: min(40rem, 90vw);
309
  margin-left: auto;
310
  margin-right: auto;
311
}
312
313
hr {
314
  margin: 0;
315
  border: 0;
316
  padding: 0;
317
  height: 1.5rem;
318
  padding-top: calc(11rem / 16);
319
  padding-bottom: calc(11rem / 16);
320
  background-clip: content-box;
321
  background-color: var(--primary-color);
322
  margin-left: auto;
323
  margin-right: auto;
324
}
325
main hr {
326
  max-width: min(40rem, 90vw);
327
}
328
main section hr {
329
  max-width: min(20rem, 45vw);
330
  background-color: var(--foreground-color);
331
}
332
333
img,
334
object {
335
  display: block;
336
  max-height: 100vh;
337
  margin-left: auto;
338
  margin-right: auto;
339
}
340
a img,
341
a object {
342
  padding: calc(0.25rem - max(1px, calc(1rem / 16)));
343
  border: max(1px, calc(1rem / 16)) solid;
344
}
345
a img:focus,
346
a img:hover,
347
a object:focus,
348
a object:hover {
349
  padding: calc(0.25rem - max(2px, calc(2rem / 16)));
350
  border: max(2px, calc(2rem / 16)) solid;
351
}
352
353
nav {
354
  margin-top: 1.5rem;
355
  margin-bottom: 1.5rem;
356
  max-width: min(40rem, 90vw);
357
  margin-left: auto;
358
  margin-right: auto;
359
}
360
nav h2 {
361
  font-size: 1rem;
362
  line-height: 1.5rem;
363
  margin-top: 3rem;
364
  margin-bottom: 1.5rem;
365
}
366
nav h2:first-child {
367
  margin-top: 1.5rem;
368
}
369
nav li {
370
  margin-left: 0;
371
  list-style-type: none;
372
}
373
nav b {
374
  font-weight: normal;
375
}
376
nav.menu h2 {
377
  margin-top: 1.5rem;
378
  margin-bottom: 0;
379
}
380
nav.menu ol,
381
nav.menu ul {
382
  margin-top: 0;
383
}
384
nav.menu li {
385
  display: inline-block;
386
  margin: 0;
387
  margin-right: 1.5rem;
388
}
389
nav.menu li a {
390
  display: inline-block;
391
}
392
393
ol,
394
ul {
395
  margin-top: 1.5rem;
396
  margin-bottom: 1.5rem;
397
  padding-left: 0;
398
}
399
main ol,
400
main ul {
401
  max-width: min(40rem, 90vw);
402
  margin-left: auto;
403
  margin-right: auto;
404
}
405
li {
406
  margin-top: 1.5rem;
407
  margin-bottom: 1.5rem;
408
  margin-left: 1.5rem;
409
}
410
main > section ul li {
411
  list-style-type: disc;
412
}
413
414
p {
415
  margin-top: 1.5rem;
416
  margin-bottom: 1.5rem;
417
  max-width: min(40rem, 90vw);
418
  margin-left: auto;
419
  margin-right: auto;
420
}
421
422
pre {
423
  margin-top: 1.5rem;
424
  margin-bottom: 1.5rem;
425
  width: min-content;
426
  margin-left: auto;
427
  margin-right: auto;
428
}
429
430
small {
431
  font-size: 1rem;
432
  line-height: 1.5rem;
433
  width: max-content;
434
  margin-left: auto;
435
  margin-right: auto;
436
}
437