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