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
  text-align: center;
144
}
145
146
.entry main footer section .datestamp {
147
  width: max-content;
148
  margin-left: auto;
149
  margin-right: auto;
150
}
151
.entry main footer section .datestamp div {
152
  width: max-content;
153
  margin-left: auto;
154
}
155
.entry main footer section .datestamp time {
156
  display: inline-block;
157
}
158
159
.entry main footer section .description {
160
  text-align: center;
161
  font-style: italic;
162
}
163
164
.entry main footer section .tags {
165
  margin-top: 1.5rem;
166
  margin-bottom: 1.5rem;
167
  text-align: center;
168
}
169
.entry main footer section .tags ul {
170
  display: inline;
171
}
172
.entry main footer section .tags li {
173
  display: inline-block;
174
  margin: 0;
175
  margin-left: 0.75rem;
176
  margin-right: 0.75rem;
177
}
178
179
/* Elements */
180
181
.hidden {
182
  display: none !important;
183
}
184
185
.inset {
186
  float: right;
187
  max-width: 49%;
188
  margin-left: 2%;
189
}
190
191
a {
192
  text-decoration: none;
193
  color: var(--primary-color);
194
  outline-offset: 0.0625rem;
195
}
196
197
a,
198
nav a strong {
199
  text-decoration: underline;
200
  text-decoration-thickness: 0.0625rem;
201
  text-underline-offset: 0.125rem;
202
}
203
204
a:hover,
205
nav a:hover strong {
206
  text-decoration-thickness: 0.125rem;
207
}
208
209
a:focus {
210
  outline: 0.125rem solid;
211
}
212
213
a:active {
214
  color: var(--foreground-color);
215
}
216
217
address {
218
  font-style: normal;
219
}
220
221
aside {
222
  max-width: min(40rem, 90vw);
223
  margin-left: auto;
224
  margin-right: auto;
225
  padding-left: min(10rem, 22.5vw);
226
}
227
228
blockquote {
229
  margin-top: 1.5rem;
230
  margin-bottom: 1.5rem;
231
  max-width: min(30rem, 67.5vw);
232
  margin-left: auto;
233
  margin-right: auto;
234
  border-left: 0.125rem solid var(--foreground-color);
235
  padding-left: 0.875rem;
236
}
237
238
figure {
239
  margin-top: 1.5rem;
240
  margin-bottom: 1.5rem;
241
  margin-left: auto;
242
  margin-right: auto;
243
}
244
figcaption {
245
  width: max-content;
246
  max-width: min(40rem, 90vw);
247
  margin-left: auto;
248
  margin-right: auto;
249
}
250
251
h1 {
252
  padding: 0;
253
  margin-top: 3rem;
254
  margin-bottom: 1.5rem;
255
  font-size: 2.5rem;
256
  line-height: 3rem;
257
  max-width: min(40rem, 90vw);
258
  margin-left: auto;
259
  margin-right: auto;
260
}
261
h2 {
262
  padding: 0;
263
  margin-top: 1.5rem;
264
  margin-bottom: 1.5rem;
265
  font-size: 2rem;
266
  line-height: 3rem;
267
}
268
h3,
269
h4,
270
h5,
271
h6 {
272
  padding: 0;
273
  margin-top: 1.5rem;
274
  margin-bottom: 1.5rem;
275
  font-size: 1.25rem;
276
  line-height: 1.5rem;
277
}
278
main h2,
279
main h3,
280
main h4,
281
main h5,
282
main h6 {
283
  margin-top: 3rem;
284
  max-width: min(40rem, 90vw);
285
  margin-left: auto;
286
  margin-right: auto;
287
}
288
289
hr {
290
  margin: 0;
291
  border: 0;
292
  padding: 0;
293
  height: 1.5rem;
294
  padding-top: 0.6875rem;
295
  padding-bottom: 0.6875rem;
296
  background-clip: content-box;
297
  background-color: var(--primary-color);
298
  margin-left: auto;
299
  margin-right: auto;
300
}
301
main hr {
302
  max-width: min(40rem, 90vw);
303
}
304
main section hr {
305
  max-width: min(20rem, 45vw);
306
  background-color: var(--foreground-color);
307
}
308
309
img,
310
object {
311
  display: block;
312
  max-height: 100vh;
313
  margin-left: auto;
314
  margin-right: auto;
315
}
316
a img,
317
a object {
318
  outline: 0.0625rem solid;
319
  outline-offset: 0.125rem;
320
}
321
a:hover img,
322
a:hover object {
323
  outline-width: 0.125rem;
324
}
325
p a strong {
326
  display: block;
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
}
370
nav a * {
371
  width: max-content;
372
}
373
nav.menu li a {
374
  display: inline;
375
}
376
nav > a,
377
nav > a:hover,
378
nav:not(.menu) a,
379
nav:not(.menu) a:hover {
380
  text-decoration: none;
381
}
382
383
ol,
384
ul {
385
  margin-top: 1.5rem;
386
  margin-bottom: 1.5rem;
387
  padding-left: 0;
388
}
389
main ol,
390
main ul {
391
  max-width: min(40rem, 90vw);
392
  margin-left: auto;
393
  margin-right: auto;
394
}
395
li {
396
  margin-top: 1.5rem;
397
  margin-bottom: 1.5rem;
398
  margin-left: 1.5rem;
399
}
400
main > section ul li::marker {
401
  content: "• ";
402
}
403
404
p {
405
  margin-top: 1.5rem;
406
  margin-bottom: 1.5rem;
407
  max-width: min(40rem, 90vw);
408
  margin-left: auto;
409
  margin-right: auto;
410
}
411
412
pre {
413
  margin-top: 1.5rem;
414
  margin-bottom: 1.5rem;
415
  width: min-content;
416
  margin-left: auto;
417
  margin-right: auto;
418
}
419
420
small {
421
  font-size: 1rem;
422
  line-height: 1.5rem;
423
  width: max-content;
424
  margin-left: auto;
425
  margin-right: auto;
426
}
427