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: 0.75rem;
174
  margin-right: 0.75rem;
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
a {
190
  text-decoration: none;
191
  color: var(--primary-color);
192
}
193
194
a,
195
nav a strong {
196
  text-decoration: underline;
197
  text-decoration-thickness: max(1px, 0.0625rem);
198
}
199
200
a:hover,
201
nav a:hover strong {
202
  text-decoration-thickness: max(2px, 0.125rem);
203
}
204
205
a:focus {
206
  outline: max(2px, 0.125rem) solid;
207
}
208
209
a:active {
210
  color: var(--foreground-color);
211
}
212
213
address {
214
  font-style: normal;
215
}
216
217
aside {
218
  max-width: min(40rem, 90vw);
219
  margin-left: auto;
220
  margin-right: auto;
221
  padding-left: min(10rem, 22.5vw);
222
}
223
224
blockquote {
225
  margin-top: 1.5rem;
226
  margin-bottom: 1.5rem;
227
  max-width: min(30rem, 67.5vw);
228
  margin-left: auto;
229
  margin-right: auto;
230
  border-left: max(2px, 0.125rem) solid var(--foreground-color);
231
  padding-left: calc(1rem - max(2px, 0.125rem));
232
}
233
234
figure {
235
  margin-top: 1.5rem;
236
  margin-bottom: 1.5rem;
237
  margin-left: auto;
238
  margin-right: auto;
239
}
240
figcaption {
241
  width: max-content;
242
  max-width: min(40rem, 90vw);
243
  margin-left: auto;
244
  margin-right: auto;
245
}
246
247
h1 {
248
  padding: 0;
249
  margin-top: 3rem;
250
  margin-bottom: 1.5rem;
251
  font-size: 2.5rem;
252
  line-height: 3rem;
253
  max-width: min(40rem, 90vw);
254
  margin-left: auto;
255
  margin-right: auto;
256
}
257
h2 {
258
  padding: 0;
259
  margin-top: 1.5rem;
260
  margin-bottom: 1.5rem;
261
  font-size: 2rem;
262
  line-height: 3rem;
263
}
264
h3,
265
h4,
266
h5,
267
h6 {
268
  padding: 0;
269
  margin-top: 1.5rem;
270
  margin-bottom: 1.5rem;
271
  font-size: 1.25rem;
272
  line-height: 1.5rem;
273
}
274
main h2,
275
main h3,
276
main h4,
277
main h5,
278
main h6 {
279
  margin-top: 3rem;
280
  max-width: min(40rem, 90vw);
281
  margin-left: auto;
282
  margin-right: auto;
283
}
284
285
hr {
286
  margin: 0;
287
  border: 0;
288
  padding: 0;
289
  height: 1.5rem;
290
  padding-top: 0.6875rem;
291
  padding-bottom: 0.6875rem;
292
  background-clip: content-box;
293
  background-color: var(--primary-color);
294
  margin-left: auto;
295
  margin-right: auto;
296
}
297
main hr {
298
  max-width: min(40rem, 90vw);
299
}
300
main section hr {
301
  max-width: min(20rem, 45vw);
302
  background-color: var(--foreground-color);
303
}
304
305
img,
306
object {
307
  display: block;
308
  max-height: 100vh;
309
  margin-left: auto;
310
  margin-right: auto;
311
}
312
a img,
313
a object {
314
  outline: max(1px, 0.0625rem) solid;
315
  outline-offset: max(2px, 0.125rem);
316
}
317
a:hover img,
318
a:hover object {
319
  outline: max(2px, 0.125rem) solid;
320
}
321
322
nav {
323
  margin-top: 1.5rem;
324
  margin-bottom: 1.5rem;
325
  max-width: min(40rem, 90vw);
326
  margin-left: auto;
327
  margin-right: auto;
328
}
329
nav h2 {
330
  font-size: 1rem;
331
  line-height: 1.5rem;
332
  margin-top: 3rem;
333
  margin-bottom: 1.5rem;
334
}
335
nav h2:first-child {
336
  margin-top: 1.5rem;
337
}
338
nav li {
339
  margin-left: 0;
340
  list-style-type: none;
341
}
342
nav b {
343
  font-weight: normal;
344
}
345
nav.menu h2 {
346
  margin-top: 1.5rem;
347
  margin-bottom: 0;
348
}
349
nav.menu ol,
350
nav.menu ul {
351
  margin-top: 0;
352
}
353
nav.menu li {
354
  display: inline-block;
355
  margin: 0;
356
  margin-right: 1.5rem;
357
}
358
nav a,
359
nav a > *,
360
nav a > * > * {
361
  display: block;
362
  outline-offset: max(2px, 0.125rem);
363
}
364
nav a * {
365
  width: max-content;
366
}
367
nav.menu li a {
368
  display: inline;
369
  outline-offset: 0;
370
}
371
nav > a,
372
nav > a:hover,
373
nav:not(.menu) a,
374
nav:not(.menu) a:hover {
375
  text-decoration: none;
376
}
377
378
ol,
379
ul {
380
  margin-top: 1.5rem;
381
  margin-bottom: 1.5rem;
382
  padding-left: 0;
383
}
384
main ol,
385
main ul {
386
  max-width: min(40rem, 90vw);
387
  margin-left: auto;
388
  margin-right: auto;
389
}
390
li {
391
  margin-top: 1.5rem;
392
  margin-bottom: 1.5rem;
393
  margin-left: 1.5rem;
394
}
395
main > section ul li {
396
  list-style-type: disc;
397
}
398
399
p {
400
  margin-top: 1.5rem;
401
  margin-bottom: 1.5rem;
402
  max-width: min(40rem, 90vw);
403
  margin-left: auto;
404
  margin-right: auto;
405
}
406
407
pre {
408
  margin-top: 1.5rem;
409
  margin-bottom: 1.5rem;
410
  width: min-content;
411
  margin-left: auto;
412
  margin-right: auto;
413
}
414
415
small {
416
  font-size: 1rem;
417
  line-height: 1.5rem;
418
  width: max-content;
419
  margin-left: auto;
420
  margin-right: auto;
421
}
422