git ssb

0+

Grey the earthling / gkn.me.uk



Tree: f6e504fb1fce5c2dfaf6b16c14691ca236d1e526

Files: f6e504fb1fce5c2dfaf6b16c14691ca236d1e526 / themes / ran / static / style / ran.css

7017 bytesRaw
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
27html {
28 /* 1rem works out at 20px. */
29 font-size: 1.25em;
30}
31
32body {
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
41code, 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
67html, body {
68 margin: 0;
69 padding: 0;
70}
71
72body {
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
89footer {
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
165nav.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
231header {
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
245summary {
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-top: 1rem;
281 padding-right: 1rem;
282 float: left;
283 }
284
285details > section {
286 border-bottom: 1px solid;
287 margin-top: 1rem;
288 padding-bottom: calc(1rem - 1px);
289}
290
291 details > section > * {
292 display: inline-block;
293 margin-right: 1rem;
294 opacity: 0;
295 transition: opacity var(--slow);
296 }
297
298 details[open] > section > * {
299 opacity: 1;
300 }
301
302header .image {
303 /* The height is overridden by inline styles for some articles. */
304 height: 4rem;
305 background-position: center;
306 background-size: cover;
307 opacity: 0.5;
308}
309
310
311/* Lists of links */
312
313footer .smalllinks {
314 margin-top: 1rem;
315 margin-bottom: 1rem;
316}
317
318 .smalllinks ul {
319 display: inline;
320 padding-left: 0;
321 }
322
323 .smalllinks li {
324 display: inline;
325 }
326
327 .smalllinks h2,
328 .smalllinks a {
329 display: inline-block;
330 margin-top: 0;
331 margin-bottom: 0;
332 margin-right: 1rem;
333 }
334
335.biglinks {
336 margin-top: 1rem;
337 margin-bottom: 1rem;
338 padding-left: 0;
339 list-style-type: none;
340}
341
342 .biglinks li {
343 margin-top: 1rem;
344 color: var(--dim-color);
345 }
346
347 .biglinks li a {
348 display: block;
349 }
350
351 .biglinks li a > * {
352 display: inline-block;
353 margin-right: 1rem;
354 }
355
356 .biglinks li strong {
357 display: inline-block;
358 margin-top: 0;
359 margin-bottom: 0;
360 font-weight: 700;
361 }
362
363.biglinks li a strong ~ * {
364 color: var(--dim-color);
365}
366
367 .biglinks li a:focus strong ~ *,
368 .biglinks li a:hover strong ~ * {
369 color: var(--link-color);
370 }
371
372
373/* Headings */
374
375h1, h2, h3, h4, h5, h6 {
376 margin-top: 0;
377 margin-bottom: 0;
378 font-size: 1rem;
379 font-weight: 300;
380}
381 article > main h1,
382 article > main h2,
383 article > main h3,
384 article > main h4,
385 article > main h5,
386 article > main h6 {
387 margin-top: 2rem;
388 margin-bottom: 1rem;
389 }
390
391 article > main section h1,
392 article > main h4 {
393 font-size: 1.7rem;
394 }
395
396 article > main section section h1,
397 article > main h5 {
398 font-size: 1.4rem;
399 }
400
401 article > main section section section h1,
402 article > main h6 {
403 font-size: 1.1rem;
404 }
405
406
407/* Common structures */
408
409a {
410 text-decoration: none;
411}
412
413address {
414 font-style: inherit;
415}
416
417aside, .inset {
418 max-width: 50%;
419 float: right;
420 margin-left: 1rem;
421}
422
423blockquote {
424 margin-left: 2rem;
425 margin-right: 2rem;
426}
427
428figure {
429 margin-left: 0rem;
430 margin-right: 0rem;
431}
432
433 figure + figure {
434 border-top: 1px solid;
435 margin-top: -1px;
436 }
437
438 figcaption {
439 margin-left: 2rem;
440 margin-right: 2rem;
441 }
442
443 figcaption > * {
444 display: inline-block;
445 margin-right: 1rem;
446 }
447
448hr {
449 height: 0;
450 border: 0;
451 border-top: 1px solid;
452 margin-top: calc(1rem - 1px);
453 margin-bottom: 1rem;
454 padding: 0;
455 color: var(--foreground-color);
456}
457
458img, object {
459 display: inline-block;
460 margin-left: auto;
461 margin-right: auto;
462 text-align: center;
463}
464
465ol, ul {
466 margin-left: 0;
467 padding-left: 1rem;
468}
469
470p {
471 margin-top: 1rem;
472 margin-bottom: 1rem;
473}
474
475pre {
476 line-height: 1rem;
477}
478
479strong {
480 /* Without this, the weight increases from 300 to 400,
481 which isn't distinct enough. */
482 font-weight: 700;
483}
484
485
486

Built with git-ssb-web