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
}
115
.thefridayfetchit .decoration {
116
  height: 18rem;
117
  background-image: url("/thefridayfetchit/decoration.png");
118
}
119
.walkingdataloss .decoration {
120
  height: 9rem;
121
  background-image: url("/walkingdataloss/decoration.png");
122
  background-repeat: repeat-x;
123
  background-size: contain;
124
}
125
126
header .description {
127
  font-style: italic;
128
}
129
130
.entry h1 {
131
  max-width: min(60rem, 95vw);
132
  margin-left: auto;
133
  margin-right: auto;
134
  text-align: center;
135
}
136
137
.entry main footer section {
138
  max-width: min(40rem, 90vw);
139
  margin-left: auto;
140
  margin-right: auto;
141
  margin-top: 1.5rem;
142
  margin-bottom: 1.5rem;
143
}
144
145
.entry main footer section .series,
146
.entry main footer section .byline {
147
  text-align: center;
148
}
149
150
.entry main footer section .datestamp {
151
  width: max-content;
152
  margin-left: auto;
153
  margin-right: auto;
154
  text-align: right;
155
}
156
157
.entry main footer section .description {
158
  text-align: center;
159
  font-style: italic;
160
}
161
162
.entry main footer section .tags {
163
  margin-top: 1.5rem;
164
  margin-bottom: 1.5rem;
165
  text-align: center;
166
}
167
.entry main footer section .tags ul {
168
  display: inline;
169
}
170
.entry main footer section .tags li {
171
  display: inline-block;
172
  margin: 0;
173
  margin-left: calc(12rem / 16);
174
  margin-right: calc(12rem / 16);
175
}
176
177
/* Elements */
178
179
.hidden {
180
  display: none !important;
181
}
182
183
.inset {
184
  float: right;
185
  max-width: 49%;
186
  margin-left: 2%;
187
}
188
189
:link,
190
:visited {
191
  text-decoration: none;
192
  color: var(--primary-color);
193
}
194
195
:link,
196
:visited,
197
nav :link strong,
198
nav :visited strong {
199
  text-decoration: underline;
200
  text-decoration-thickness: max(1px, calc(1rem / 16));
201
}
202
203
:link:hover,
204
:visited:hover,
205
nav :link:hover strong,
206
nav :visited:hover strong {
207
  text-decoration-thickness: max(2px, calc(2rem / 16));
208
}
209
210
:link:focus,
211
:visited:focus {
212
  outline: max(2px, calc(2rem / 16)) solid;
213
}
214
215
:link:active,
216
:visited:active {
217
  color: var(--foreground-color);
218
}
219
220
address {
221
  font-style: normal;
222
}
223
224
aside {
225
  max-width: min(40rem, 90vw);
226
  margin-left: auto;
227
  margin-right: auto;
228
  padding-left: min(10rem, 22.5vw);
229
}
230
231
blockquote {
232
  margin-top: 1.5rem;
233
  margin-bottom: 1.5rem;
234
  max-width: min(30rem, 67.5vw);
235
  margin-left: auto;
236
  margin-right: auto;
237
  border-left: max(2px, calc(2rem / 16)) solid var(--foreground-color);
238
  padding-left: calc(1rem - max(2px, calc(2rem / 16)));
239
}
240
241
figure {
242
  margin-top: 1.5rem;
243
  margin-bottom: 1.5rem;
244
  margin-left: auto;
245
  margin-right: auto;
246
}
247
figcaption {
248
  width: max-content;
249
  max-width: min(40rem, 90vw);
250
  margin-left: auto;
251
  margin-right: auto;
252
}
253
254
h1 {
255
  padding: 0;
256
  margin-top: 3rem;
257
  margin-bottom: 1.5rem;
258
  font-size: 2.5rem;
259
  line-height: 3rem;
260
  max-width: min(40rem, 90vw);
261
  margin-left: auto;
262
  margin-right: auto;
263
}
264
h2 {
265
  padding: 0;
266
  margin-top: 1.5rem;
267
  margin-bottom: 1.5rem;
268
  font-size: 2rem;
269
  line-height: 3rem;
270
}
271
h3,
272
h4,
273
h5,
274
h6 {
275
  padding: 0;
276
  margin-top: 1.5rem;
277
  margin-bottom: 1.5rem;
278
  font-size: 1.25rem;
279
  line-height: 1.5rem;
280
}
281
main h2,
282
main h3,
283
main h4,
284
main h5,
285
main h6 {
286
  margin-top: 3rem;
287
  max-width: min(40rem, 90vw);
288
  margin-left: auto;
289
  margin-right: auto;
290
}
291
292
hr {
293
  margin: 0;
294
  border: 0;
295
  padding: 0;
296
  height: 1.5rem;
297
  padding-top: calc(11rem / 16);
298
  padding-bottom: calc(11rem / 16);
299
  background-clip: content-box;
300
  background-color: var(--primary-color);
301
  margin-left: auto;
302
  margin-right: auto;
303
}
304
main hr {
305
  max-width: min(40rem, 90vw);
306
}
307
main section hr {
308
  max-width: min(20rem, 45vw);
309
  background-color: var(--foreground-color);
310
}
311
312
img,
313
object {
314
  display: block;
315
  max-height: 100vh;
316
  margin-left: auto;
317
  margin-right: auto;
318
}
319
a img,
320
a object {
321
  outline: max(1px, calc(1rem / 16)) solid;
322
  outline-offset: max(2px, calc(2rem / 16));
323
}
324
a img:hover,
325
a object:hover {
326
  outline: max(2px, calc(2rem / 16)) solid;
327
}
328
329
nav {
330
  margin-top: 1.5rem;
331
  margin-bottom: 1.5rem;
332
  max-width: min(40rem, 90vw);
333
  margin-left: auto;
334
  margin-right: auto;
335
}
336
nav h2 {
337
  font-size: 1rem;
338
  line-height: 1.5rem;
339
  margin-top: 3rem;
340
  margin-bottom: 1.5rem;
341
}
342
nav h2:first-child {
343
  margin-top: 1.5rem;
344
}
345
nav li {
346
  margin-left: 0;
347
  list-style-type: none;
348
}
349
nav b {
350
  font-weight: normal;
351
}
352
nav.menu h2 {
353
  margin-top: 1.5rem;
354
  margin-bottom: 0;
355
}
356
nav.menu ol,
357
nav.menu ul {
358
  margin-top: 0;
359
}
360
nav.menu li {
361
  display: inline-block;
362
  margin: 0;
363
  margin-right: 1.5rem;
364
}
365
nav a,
366
nav a > *,
367
nav a > * > * {
368
  display: block;
369
  outline-offset: max(2px, calc(2rem / 16));
370
}
371
nav a * {
372
  width: max-content;
373
}
374
nav.menu li a {
375
  display: inline;
376
  outline-offset: 0;
377
}
378
nav > :link,
379
nav > :link:hover,
380
nav > :visited,
381
nav > :visited:hover,
382
nav:not(.menu) :link,
383
nav:not(.menu) :link:hover,
384
nav:not(.menu) :visited,
385
nav:not(.menu) :visited:hover {
386
  text-decoration: none;
387
}
388
389
ol,
390
ul {
391
  margin-top: 1.5rem;
392
  margin-bottom: 1.5rem;
393
  padding-left: 0;
394
}
395
main ol,
396
main ul {
397
  max-width: min(40rem, 90vw);
398
  margin-left: auto;
399
  margin-right: auto;
400
}
401
li {
402
  margin-top: 1.5rem;
403
  margin-bottom: 1.5rem;
404
  margin-left: 1.5rem;
405
}
406
main > section ul li {
407
  list-style-type: disc;
408
}
409
410
p {
411
  margin-top: 1.5rem;
412
  margin-bottom: 1.5rem;
413
  max-width: min(40rem, 90vw);
414
  margin-left: auto;
415
  margin-right: auto;
416
}
417
418
pre {
419
  margin-top: 1.5rem;
420
  margin-bottom: 1.5rem;
421
  width: min-content;
422
  margin-left: auto;
423
  margin-right: auto;
424
}
425
426
small {
427
  font-size: 1rem;
428
  line-height: 1.5rem;
429
  width: max-content;
430
  margin-left: auto;
431
  margin-right: auto;
432
}
433