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 a {
163
		display: block;
164
		margin-top: 1rem;
165
		margin-right: 1rem;
166
	}
167
		
168
	nav.nearby a span {
169
		display: inline-block;
170
		width: 1rem;
171
		margin-right: 1rem;
172
	}
173
	
174
	nav.nearby a[rel="up"] span {
175
		content: "↑ ";
176
	}
177
	
178
	nav.nearby a[rel="next"] span {
179
		content: "→ ";
180
	}
181
	
182
	nav.nearby a[rel="prev"] span {
183
		content: "← ";
184
	}
185
	
186
	@media (min-width: 42rem) {
187
		nav.nearby {
188
			display: grid;
189
			grid-template-columns: 1fr 1fr 1fr;
190
			margin-right:0;
191
		}
192
	
193
		nav.nearby a {
194
			grid-row: 1/2;
195
			margin-top: 0;
196
			margin-right: 0;
197
			text-align: center;
198
		}
199
		
200
		nav.nearby a span {
201
			width: 100%;
202
		}
203
		
204
		nav.nearby a[rel="up"] {
205
			grid-column: 2/3;
206
			text-align: center;
207
		}
208
		
209
		nav.nearby a[rel="next"] {
210
			grid-column: 3/4;
211
			text-align: right;
212
		}
213
		
214
		nav.nearby a[rel="prev"] {
215
			grid-column: 1/2;
216
			text-align: left;
217
		}
218
	}
219
220
221
/* Page heading */
222
223
header {
224
	margin-bottom: 1rem;
225
}
226
	
227
	.pagetitle {
228
		margin-top: 0;
229
		margin-bottom: 0;
230
		padding-top: 1rem;
231
		padding-bottom: 1rem;
232
		font-size: 2rem;
233
		line-height: 2rem;
234
		text-align: center;
235
	}
236
237
summary {
238
	display: block;
239
	box-shadow: var(--box-shadow-style) transparent;
240
	cursor: pointer;
241
}
242
	
243
	summary:focus,
244
	summary:hover {
245
		outline: 0;
246
		box-shadow: var(--box-shadow-style) currentColor;
247
	}
248
	
249
	summary::before {
250
		content: "⋮";
251
		line-height: 2rem;
252
		width: 1rem;
253
		padding-top: 1rem;
254
		padding-left: 1rem;
255
		float: right;
256
		text-align: center;
257
	}
258
	
259
	details[open] summary::before {
260
		content: "×";
261
	}
262
	
263
	summary::-webkit-details-marker {
264
		display: none;
265
	}
266
	
267
	summary h1::before {
268
		/* Keep the summary centred. */
269
		content: " ";
270
		height: 2rem;
271
		width: 1rem;
272
		padding-right: 1rem;
273
		float: left;
274
	}
275
276
details > section {
277
	border-bottom: 1px solid var(--separator-color);
278
	margin-top: 1rem;
279
	padding-bottom: calc(1rem - 1px);
280
}
281
	
282
	details > section > * {
283
		display: inline-block;
284
		margin-top: 0;
285
		margin-bottom: 0;
286
		margin-right: 1rem;
287
		opacity: 0;
288
		transition: opacity var(--slow);
289
	}
290
	
291
	details[open] > section > * {
292
		opacity: 1;
293
	}
294
	
295
header .image {
296
	/* The height is overridden by inline styles for some articles. */
297
	height: 4rem;
298
	background-position: center;
299
	background-size: cover;
300
	opacity: 0.5;
301
}
302
303
304
/* Lists of links */
305
306
footer .smalllinks {
307
	margin-top: 1rem;
308
	margin-bottom: 1rem;
309
}
310
	
311
	.smalllinks ul {
312
		display: inline;
313
		padding-left: 0;
314
	}
315
	
316
	.smalllinks li {
317
		display: inline;
318
	}
319
	
320
	.smalllinks h2,
321
	.smalllinks a {
322
		display: inline-block;
323
		margin-top: 0;
324
		margin-bottom: 0;
325
		margin-right: 1rem;
326
	}
327
328
.biglinks {
329
	margin-top: 1rem;
330
	margin-bottom: 1rem;
331
	padding-left: 0;
332
	list-style-type: none;
333
}
334
	
335
	.biglinks li {
336
		margin-top: 1rem;
337
		color: var(--foreground-dim-color);
338
	}
339
	
340
	.biglinks li a {
341
		display: block;
342
	}
343
	
344
	.biglinks li a > * {
345
		display: inline-block;
346
		margin-right: 1rem;
347
	}
348
	
349
	.biglinks li strong {
350
		display: inline-block;
351
		margin-top: 0;
352
		margin-bottom: 0;
353
		font-weight: 700;
354
	}
355
356
.biglinks li a strong ~ * {
357
	color: var(--foreground-dim-color);
358
}
359
	
360
	.biglinks li a:focus strong ~ *,
361
	.biglinks li a:hover strong ~ * {
362
		color: var(--link-color);
363
	}
364
365
366
/* Headings */
367
368
h1, h2, h3, h4, h5, h6 {
369
	margin-top: 0;
370
	margin-bottom: 0;
371
	font-size: 1rem;
372
	font-weight: 300;
373
}
374
	article > main h1,
375
	article > main h2,
376
	article > main h3,
377
	article > main h4,
378
	article > main h5,
379
	article > main h6 {
380
		margin-top: 2rem;
381
		margin-bottom: 1rem;
382
	}
383
	
384
	article > main section h1,
385
	article > main h4 {
386
		font-size: 1.7rem;
387
	}
388
	
389
	article > main section section h1,
390
	article > main h5 {
391
		font-size: 1.4rem;
392
	}
393
	
394
	article > main section section section h1,
395
	article > main h6 {
396
		font-size: 1.1rem;
397
	}
398
399
400
/* Common structures */
401
402
a {
403
	text-decoration: none;
404
}
405
	:link, :visited {
406
		color: var(--link-color);
407
		font-weight: 400;
408
		opacity: 0.8;
409
		box-shadow: var(--box-shadow-style) transparent;
410
	}
411
	
412
	:link:focus,
413
	:link:hover,
414
	:visited:focus,
415
	:visited:hover {
416
		opacity: 1;
417
		filter: none;
418
		box-shadow: var(--box-shadow-style) currentColor;
419
		outline: 0;
420
	}
421
	address :link,
422
	address :visited,
423
	p :link,
424
	p :visited {
425
		box-shadow: var(--box-shadow-style) var(--link-dim-color);
426
	}
427
428
address {
429
	font-style: inherit;
430
}
431
432
aside, .inset {
433
	max-width: 50%;
434
	float: right;
435
	margin-left: 1rem;
436
}
437
438
blockquote {
439
	margin-left: 2rem;
440
	margin-right: 2rem;
441
}
442
443
figure {
444
	margin-left: 0rem;
445
	margin-right: 0rem;
446
}
447
	
448
	figure + figure {
449
		border-top: 1px solid var(--separator-color);
450
		margin-top: -1px;
451
	}
452
	
453
	figcaption {
454
		margin-left: 2rem;
455
		margin-right: 2rem;
456
	}
457
	
458
	figcaption > * {
459
		display: inline-block;
460
		margin-right: 1rem;
461
	}
462
463
hr {
464
	height: 0;
465
	border: 0;
466
	border-top: 1px solid var(--separator-color);
467
	margin-top: calc(1rem - 1px);
468
	margin-bottom: 1rem;
469
	padding: 0;
470
}
471
472
img, object {
473
	display: inline-block;
474
	margin-left: auto;
475
	margin-right: auto;
476
	text-align: center;
477
}
478
479
ol, ul {
480
	margin-left: 0;
481
	padding-left: 1rem;
482
}
483
484
p {
485
	margin-top: 1rem;
486
	margin-bottom: 1rem;
487
}
488
489
pre {
490
	line-height: 1rem;
491
}
492
493
small {
494
	font-size: 1rem;
495
}
496
497
strong {
498
	/* Without this, the weight increases from 300 to 400,
499
	   which isn't distinct enough. */
500
	font-weight: 700;
501
}
502
503
504