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