git ssb

0+

Grey the earthling / gkn.me.uk



Tree: 866ffbf29c58620de2fd70b9166f593286d248b6

Files: 866ffbf29c58620de2fd70b9166f593286d248b6 / themes / ran / static / style / ran.css

7805 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, 100%, 95%);
11 --foreground-color: hsl(100, 10%, 10%);
12 --foreground-dim-color: hsla(100, 10%, 10%, 70%);
13 --link-color: hsl(100, 100%, 20%);
14 --link-dim-color: hsla(100, 100%, 20%, 50%);
15 --separator-color: hsla(100, 10%, 20%, 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: 1.5rem;
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 line-height: 2rem;
393}
394 article > main h1,
395 article > main h2,
396 article > main h3,
397 article > main h4,
398 article > main h5,
399 article > main h6 {
400 margin-top: 2rem;
401 margin-bottom: 1rem;
402 }
403
404 article > main section h1,
405 article > main h4 {
406 font-size: 1.7rem;
407 }
408
409 article > main section section h1,
410 article > main h5 {
411 font-size: 1.4rem;
412 }
413
414 article > main section section section h1,
415 article > main h6 {
416 font-size: 1.1rem;
417 }
418
419
420/* Common structures */
421
422a {
423 text-decoration: none;
424}
425 :link, :visited {
426 color: var(--link-color);
427 font-weight: 400;
428 opacity: 0.8;
429 box-shadow: var(--box-shadow-style) transparent;
430 }
431
432 :link:focus,
433 :link:hover,
434 :visited:focus,
435 :visited:hover {
436 opacity: 1;
437 filter: none;
438 box-shadow: var(--box-shadow-style) currentColor;
439 outline: 0;
440 }
441 address :link,
442 address :visited,
443 p :link,
444 p :visited {
445 box-shadow: var(--box-shadow-style) var(--link-dim-color);
446 }
447
448address {
449 font-style: inherit;
450}
451
452aside {
453 font-style: italic;
454}
455
456blockquote {
457 margin-left: 2rem;
458 margin-right: 2rem;
459}
460
461figure {
462 margin-left: 0rem;
463 margin-right: 0rem;
464}
465
466 figure + figure {
467 border-top: 1px solid var(--separator-color);
468 margin-top: -1px;
469 }
470
471 figcaption {
472 margin-left: 2rem;
473 margin-right: 2rem;
474 }
475
476 figcaption > * {
477 display: inline-block;
478 margin-right: 1rem;
479 }
480
481hr {
482 height: 0;
483 border: 0;
484 border-top: 1px solid var(--separator-color);
485 margin-top: calc(1rem - 1px);
486 margin-bottom: 1rem;
487 padding: 0;
488}
489
490img, object {
491 display: inline-block;
492 margin-left: auto;
493 margin-right: auto;
494 text-align: center;
495}
496
497.inset {
498 max-width: 50%;
499 float: right;
500 margin-left: 1rem;
501}
502
503ol, ul {
504 margin-left: 0;
505 padding-left: 1rem;
506}
507
508p {
509 margin-top: 1rem;
510 margin-bottom: 1rem;
511}
512
513pre {
514 line-height: 1rem;
515}
516
517small {
518 font-size: 1rem;
519}
520
521strong {
522 /* Without this, the weight increases from 300 to 400,
523 which isn't distinct enough. */
524 font-weight: 600;
525}
526
527
528

Built with git-ssb-web