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