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