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
/* Page header and footer, article footer */
83
84
body > header {
85
	margin-top: 10vh;
86
	margin-bottom: 1rem;
87
}
88
89
article > footer {
90
	border-top: 1px solid;
91
	margin-top: -1px;
92
	margin-bottom: 1rem;
93
}
94
95
body > footer {
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
	body > footer .logo {
125
		margin-top: 2rem;
126
	}
127
	body > footer .logo circle {
128
		fill: var(--background-color);
129
		stroke: var(--dim-color);
130
		stroke-width: 12px;
131
	}
132
	
133
	body > footer .logo path {
134
		fill: var(--dim-color);
135
	}
136
	
137
	body > footer a .logo circle {
138
		stroke: var(--link-color);
139
	}
140
	
141
	body > footer 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
article > header,
232
body > main > header {
233
	margin-bottom: 1rem;
234
}
235
	
236
	.pagetitle {
237
		margin-top: 0;
238
		margin-bottom: 0;
239
		padding-top: 1rem;
240
		padding-bottom: 1rem;
241
		font-size: 2rem;
242
		line-height: 2rem;
243
		text-align: center;
244
	}
245
246
summary {
247
	display: block;
248
	box-shadow: var(--box-shadow-style) transparent;
249
	cursor: pointer;
250
}
251
	
252
	summary:focus,
253
	summary:hover {
254
		outline: 0;
255
		box-shadow: var(--box-shadow-style) currentcolor;
256
	}
257
	
258
	summary::before {
259
		content: "⋮";
260
		line-height: 2rem;
261
		width: 1rem;
262
		padding-top: 1rem;
263
		padding-left: 1rem;
264
		float: right;
265
		text-align: center;
266
	}
267
	
268
	details[open] summary::before {
269
		content: "×";
270
	}
271
	
272
	summary::-webkit-details-marker {
273
		display: none;
274
	}
275
	
276
	summary h1::before {
277
		/* Keep the summary centred. */
278
		content: " ";
279
		height: 2rem;
280
		width: 1rem;
281
		padding-top: 1rem;
282
		padding-right: 1rem;
283
		float: left;
284
	}
285
286
details > section {
287
	border-bottom: 1px solid;
288
	margin-top: 1rem;
289
	padding-bottom: calc(1rem - 1px);
290
}
291
	
292
	details > section > * {
293
		display: inline-block;
294
		margin-right: 1rem;
295
		opacity: 0;
296
		transition: opacity var(--slow);
297
	}
298
	
299
	details[open] > section > * {
300
		opacity: 1;
301
	}
302
	
303
article > header .image {
304
	/* The height is overridden by inline styles for some articles. */
305
	height: 4rem;
306
	background-position: center;
307
	background-size: cover;
308
	opacity: 0.5;
309
}
310
311
312
/* Lists of links */
313
314
footer .smalllinks {
315
	margin-top: 1rem;
316
	margin-bottom: 1rem;
317
}
318
	
319
	.smalllinks ul {
320
		display: inline;
321
		padding-left: 0;
322
	}
323
	
324
	.smalllinks li {
325
		display: inline;
326
	}
327
	
328
	.smalllinks h1,
329
	.smalllinks a {
330
		display: inline-block;
331
		margin-top: 0;
332
		margin-bottom: 0;
333
		margin-right: 1rem;
334
	}
335
336
.biglinks {
337
	margin-top: 1rem;
338
	margin-bottom: 1rem;
339
	padding-left: 0;
340
	list-style-type: none;
341
}
342
	
343
	.biglinks li {
344
		margin-top: 1rem;
345
		color: var(--dim-color);
346
	}
347
	
348
	.biglinks li a {
349
		display: block;
350
	}
351
	
352
	.biglinks li a > * {
353
		display: inline-block;
354
		margin-right: 1rem;
355
	}
356
	
357
	.biglinks li h1 {
358
		display: inline-block;
359
		margin-top: 0;
360
		margin-bottom: 0;
361
		font-weight: 700;
362
	}
363
364
.biglinks li a h1 ~ * {
365
	color: var(--dim-color);
366
}
367
	
368
	.biglinks li a:focus h1 ~ *,
369
	.biglinks li a:hover h1 ~ * {
370
		color: var(--link-color);
371
	}
372
373
374
/* Headings */
375
376
h1, h2, h3, h4, h5, h6 {
377
	margin-top: 0;
378
	margin-bottom: 0;
379
	font-size: 1rem;
380
	font-weight: 300;
381
}
382
	article > main h1,
383
	article > main h2,
384
	article > main h3,
385
	article > main h4,
386
	article > main h5,
387
	article > main h6 {
388
		margin-top: 2rem;
389
		margin-bottom: 1rem;
390
	}
391
	
392
	article > main section h1,
393
	article > main h4 {
394
		font-size: 1.7rem;
395
	}
396
	
397
	article > main section section h1,
398
	article > main h5 {
399
		font-size: 1.4rem;
400
	}
401
	
402
	article > main section section section h1,
403
	article > main h6 {
404
		font-size: 1.1rem;
405
	}
406
407
408
/* Common structures */
409
410
a {
411
	text-decoration: none;
412
}
413
414
address {
415
	font-style: inherit;
416
}
417
418
aside, .inset {
419
	max-width: 50%;
420
	float: right;
421
	margin-left: 1rem;
422
}
423
424
blockquote {
425
	margin-left: 2rem;
426
	margin-right: 2rem;
427
}
428
429
figure {
430
	margin-left: 0rem;
431
	margin-right: 0rem;
432
}
433
	
434
	figure + figure {
435
		border-top: 1px solid;
436
		margin-top: -1px;
437
	}
438
	
439
	figcaption {
440
		margin-left: 2rem;
441
		margin-right: 2rem;
442
	}
443
	
444
	figcaption > * {
445
		display: inline-block;
446
		margin-right: 1rem;
447
	}
448
449
hr {
450
	height: 0;
451
	border: 0;
452
	border-top: 1px solid;
453
	margin-top: calc(1rem - 1px);
454
	margin-bottom: 1rem;
455
	padding: 0;
456
	color: var(--foreground-color);	
457
}
458
459
img, object {
460
	display: inline-block;
461
	margin-left: auto;
462
	margin-right: auto;
463
	text-align: center;
464
}
465
466
ol, ul {
467
	margin-left: 0;
468
	padding-left: 1rem;
469
}
470
471
p {
472
	margin-top: 1rem;
473
	margin-bottom: 1rem;
474
}
475
476
pre {
477
	line-height: 1rem;
478
}
479
480
strong {
481
	/* Without this, the weight increases from 300 to 400,
482
	   which isn't distinct enough. */
483
	font-weight: 700;
484
}
485
486
487