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