git ssb

0+

Grey the earthling / gkn.me.uk



Tree: 9c3c14e63d6a6b81238b18f9ad401b74f6145862

Files: 9c3c14e63d6a6b81238b18f9ad401b74f6145862 / themes / ran / static / style / ran.css

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

Built with git-ssb-web