git ssb

1
@import url("fonts/fonts.css");
2
/* See fonts/LICENSE.md */
3
4
5
/* Base */
6
7
:root {
8
	--primary-color: #60c030;
9
	--secondary-color: #ffffff;
10
	--background-color: #111;
11
	--foreground-color: #ccc;
12
	--foreground-dim-color: #888;
13
	--link-color: hsl(100, 100%, 70%);
14
	--link-dim-color: hsl(100, 50%, 35%);
15
	--separator-color: #888;
16
	--box-shadow-style: inset 0 -1px 0;
17
	--fast: 0.2s;
18
	--slow: 0.4s;
19
}
20
21
*, *::before, *::after {
22
	max-width: 100%;
23
	transition: all var(--fast);
24
}
25
26
27
/* Typography */
28
29
html {
30
	/* 1rem works out at 20px. */
31
	font-size: 1.25em;
32
}
33
34
body {
35
	background-color: var(--background-color);
36
	color: var(--foreground-color);
37
	font-family: "HK Grotesk", sans-serif;
38
	font-variant-ligatures: no-common-ligatures;
39
	font-weight: 300;
40
	line-height: 2rem;
41
}
42
43
code, kbd, samp {
44
	font-family: "Fira Mono", monospace;
45
	/* Better match surrounding HK Grotesk. */
46
	font-size: 0.9rem;
47
}
48
49
50
/* Layout */
51
52
html, body {
53
	margin: 0;
54
	padding: 0;
55
}
56
57
body {
58
	display: grid;
59
	grid-template-columns: 1rem 1fr minmax(1rem, 40rem) 1fr 1rem;
60
}
61
62
	body > * {
63
		grid-column: 3/4;
64
	}
65
66
.visuallyhidden {
67
	position: absolute !important;
68
	top: -9999em !important;
69
	left: -9999em !important;
70
}
71
72
73
/* Top and bottom navigation, article footer */
74
75
.topnav {
76
	margin-top: 10vh;
77
	margin-bottom: 1rem;
78
}
79
80
footer {
81
	border-top: 1px solid var(--separator-color);
82
	margin-top: -1px;
83
	margin-bottom: 1rem;
84
}
85
86
.bottomnav {
87
	border-top: 1px solid var(--separator-color);
88
	margin-top: -1px;
89
	margin-bottom: 10vh;
90
}
91
92
93
/* Logo */
94
95
.logo {
96
	display: block;
97
	position: relative;
98
	height: 4rem;
99
	width: 4rem;
100
	margin-bottom: -0.5rem;
101
	margin-left: auto;
102
	margin-right: auto;
103
	padding-bottom: 0.5rem;
104
}
105
	
106
	.logo circle {
107
		fill: var(--primary-color);
108
		stroke-width: 0;
109
	}
110
	
111
	.logo path {
112
		fill: var(--secondary-color);
113
	}
114
	
115
	.bottomnav .logo {
116
		margin-top: 2rem;
117
	}
118
	.bottomnav .logo circle {
119
		fill: var(--background-color);
120
		stroke: var(--foreground-dim-color);
121
		stroke-width: 12px;
122
	}
123
	
124
	.bottomnav .logo path {
125
		fill: var(--foreground-dim-color);
126
	}
127
	
128
	.bottomnav a .logo circle {
129
		stroke: var(--link-color);
130
	}
131
	
132
	.bottomnav a .logo path {
133
		fill: var(--link-color);
134
	}
135
136
137
.logo span {
138
	display: block;
139
	position: absolute;
140
	top: 0;
141
	left: 5rem;
142
	line-height: 4rem;
143
	opacity: 0;
144
	transition-property: opacity;
145
}
146
147
	.logo:focus span,
148
	.logo:hover span {
149
		height: auto;
150
		width: auto;
151
		opacity: 1;
152
	}
153
154
155
/* Nearby pages */
156
157
nav.nearby {
158
	display: block;
159
	margin-top: 1rem;
160
}
161
	
162
	nav.nearby li,
163
	nav.nearby ul {
164
		display: inline;
165
		margin: 0;
166
		padding: 0;
167
	}
168
	
169
	nav.nearby a {
170
		display: block;
171
		margin-top: 1rem;
172
		margin-right: 1rem;
173
	}
174
		
175
	nav.nearby a span {
176
		display: inline-block;
177
		width: 1rem;
178
		margin-right: 1rem;
179
	}
180
	
181
	nav.nearby a[rel="up"] span {
182
		content: "↑ ";
183
	}
184
	
185
	nav.nearby a[rel="next"] span {
186
		content: "→ ";
187
	}
188
	
189
	nav.nearby a[rel="prev"] span {
190
		content: "← ";
191
	}
192
	
193
	@media (min-width: 42rem) {
194
		nav.nearby ul {
195
			display: grid;
196
			grid-template-columns: 1fr 1fr 1fr;
197
			margin-right:0;
198
		}
199
	
200
		nav.nearby a {
201
			margin-top: 0;
202
			margin-right: 0;
203
			text-align: center;
204
		}
205
		
206
		nav.nearby a span {
207
			width: 100%;
208
		}
209
		
210
		nav.nearby a[rel="up"] {
211
			text-align: center;
212
		}
213
		
214
		nav.nearby a[rel="next"] {
215
			text-align: right;
216
		}
217
		
218
		nav.nearby a[rel="prev"] {
219
			text-align: left;
220
		}
221
	}
222
223
224
/* Page heading */
225
226
header {
227
	margin-bottom: 1rem;
228
}
229
	
230
	.pagetitle {
231
		margin-top: 0;
232
		margin-bottom: 0;
233
		padding-top: 1rem;
234
		padding-bottom: 1rem;
235
		font-size: 2rem;
236
		line-height: 2rem;
237
		text-align: center;
238
	}
239
240
summary {
241
	display: block;
242
	box-shadow: var(--box-shadow-style) transparent;
243
	cursor: pointer;
244
}
245
	
246
	summary:focus,
247
	summary:hover {
248
		outline: 0;
249
		box-shadow: var(--box-shadow-style) currentColor;
250
	}
251
	
252
	summary::before {
253
		content: "⋮";
254
		line-height: 2rem;
255
		width: 1rem;
256
		padding-top: 1rem;
257
		padding-left: 1rem;
258
		float: right;
259
		text-align: center;
260
	}
261
	
262
	details[open] summary::before {
263
		content: "×";
264
	}
265
	
266
	summary::-webkit-details-marker {
267
		display: none;
268
	}
269
	
270
	summary h1::before {
271
		/* Keep the summary centred. */
272
		content: " ";
273
		height: 2rem;
274
		width: 1rem;
275
		padding-right: 1rem;
276
		float: left;
277
	}
278
279
details > section {
280
	border-bottom: 1px solid var(--separator-color);
281
	margin-top: 1rem;
282
	padding-bottom: calc(1rem - 1px);
283
}
284
	
285
	details > section > * {
286
		display: inline-block;
287
		margin-top: 0;
288
		margin-bottom: 0;
289
		margin-right: 1rem;
290
		opacity: 0;
291
		transition: opacity var(--slow);
292
	}
293
	
294
	details[open] > section > * {
295
		opacity: 1;
296
	}
297
	
298
header .image {
299
	/* The height is overridden by inline styles for some articles. */
300
	height: 4rem;
301
	background-position: center;
302
	background-size: cover;
303
	opacity: 0.5;
304
}
305
306
307
/* Lists of links */
308
309
footer .smalllinks {
310
	margin-top: 1rem;
311
	margin-bottom: 1rem;
312
}
313
	
314
	.smalllinks ul {
315
		display: inline;
316
		padding-left: 0;
317
	}
318
	
319
	.smalllinks li {
320
		display: inline;
321
	}
322
	
323
	.smalllinks h2,
324
	.smalllinks a {
325
		display: inline-block;
326
		margin-top: 0;
327
		margin-bottom: 0;
328
		margin-right: 1rem;
329
	}
330
331
.biglinks {
332
	margin-top: 1rem;
333
	margin-bottom: 1rem;
334
	padding-left: 0;
335
	list-style-type: none;
336
}
337
	
338
	.biglinks li {
339
		margin-top: 1rem;
340
		color: var(--foreground-dim-color);
341
	}
342
	
343
	.biglinks li a {
344
		display: block;
345
	}
346
	
347
	.biglinks li a > * {
348
		display: inline-block;
349
		margin-right: 1rem;
350
	}
351
	
352
	.biglinks li strong {
353
		display: inline-block;
354
		margin-top: 0;
355
		margin-bottom: 0;
356
		font-weight: 700;
357
	}
358
359
.biglinks li a strong ~ * {
360
	color: var(--foreground-dim-color);
361
}
362
	
363
	.biglinks li a:focus strong ~ *,
364
	.biglinks li a:hover strong ~ * {
365
		color: var(--link-color);
366
	}
367
368
369
/* Headings */
370
371
h1, h2, h3, h4, h5, h6 {
372
	margin-top: 0;
373
	margin-bottom: 0;
374
	font-size: 1rem;
375
	font-weight: 300;
376
}
377
	article > main h1,
378
	article > main h2,
379
	article > main h3,
380
	article > main h4,
381
	article > main h5,
382
	article > main h6 {
383
		margin-top: 2rem;
384
		margin-bottom: 1rem;
385
	}
386
	
387
	article > main section h1,
388
	article > main h4 {
389
		font-size: 1.7rem;
390
	}
391
	
392
	article > main section section h1,
393
	article > main h5 {
394
		font-size: 1.4rem;
395
	}
396
	
397
	article > main section section section h1,
398
	article > main h6 {
399
		font-size: 1.1rem;
400
	}
401
402
403
/* Common structures */
404
405
a {
406
	text-decoration: none;
407
}
408
	:link, :visited {
409
		color: var(--link-color);
410
		font-weight: 400;
411
		opacity: 0.8;
412
		box-shadow: var(--box-shadow-style) transparent;
413
	}
414
	
415
	:link:focus,
416
	:link:hover,
417
	:visited:focus,
418
	:visited:hover {
419
		opacity: 1;
420
		filter: none;
421
		box-shadow: var(--box-shadow-style) currentColor;
422
		outline: 0;
423
	}
424
	address :link,
425
	address :visited,
426
	p :link,
427
	p :visited {
428
		box-shadow: var(--box-shadow-style) var(--link-dim-color);
429
	}
430
431
address {
432
	font-style: inherit;
433
}
434
435
aside, .inset {
436
	max-width: 50%;
437
	float: right;
438
	margin-left: 1rem;
439
}
440
441
blockquote {
442
	margin-left: 2rem;
443
	margin-right: 2rem;
444
}
445
446
figure {
447
	margin-left: 0rem;
448
	margin-right: 0rem;
449
}
450
	
451
	figure + figure {
452
		border-top: 1px solid var(--separator-color);
453
		margin-top: -1px;
454
	}
455
	
456
	figcaption {
457
		margin-left: 2rem;
458
		margin-right: 2rem;
459
	}
460
	
461
	figcaption > * {
462
		display: inline-block;
463
		margin-right: 1rem;
464
	}
465
466
hr {
467
	height: 0;
468
	border: 0;
469
	border-top: 1px solid var(--separator-color);
470
	margin-top: calc(1rem - 1px);
471
	margin-bottom: 1rem;
472
	padding: 0;
473
}
474
475
img, object {
476
	display: inline-block;
477
	margin-left: auto;
478
	margin-right: auto;
479
	text-align: center;
480
}
481
482
ol, ul {
483
	margin-left: 0;
484
	padding-left: 1rem;
485
}
486
487
p {
488
	margin-top: 1rem;
489
	margin-bottom: 1rem;
490
}
491
492
pre {
493
	line-height: 1rem;
494
}
495
496
small {
497
	font-size: 1rem;
498
}
499
500
strong {
501
	/* Without this, the weight increases from 300 to 400,
502
	   which isn't distinct enough. */
503
	font-weight: 700;
504
}
505
506
507