Le site web bebou.netlib.re - retour accueil
git clone git://bebou.netlib.re/bebou
Log | Files | Refs |
style.css (8336B)
1 /* Global variables. */
2 :root,
3 ::backdrop {
4 /* Set sans-serif & mono fonts */
5 --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
6 "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
7 "Helvetica Neue", sans-serif;
8 --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
9 --standard-border-radius: 5px;
10
11 /* Default (light) theme */
12 --bg: #fff;
13 --accent-bg: #f5f7ff;
14 --text: #212121;
15 --text-light: #585858;
16 --border: #898EA4;
17 --accent: #0d47a1;
18 --accent-hover: #1266e2;
19 --accent-text: var(--bg);
20 --code: #d81b60;
21 --preformatted: #444;
22 --marked: #ffdd33;
23 --disabled: #efefef;
24 }
25
26 /* Dark theme */
27 @media (prefers-color-scheme: dark) {
28 :root,
29 ::backdrop {
30 color-scheme: dark;
31 --bg: #212121;
32 --accent-bg: #2b2b2b;
33 --text: #dcdcdc;
34 --text-light: #ababab;
35 --accent: #ffb300;
36 --accent-hover: #ffe099;
37 --accent-text: var(--bg);
38 --code: #f06292;
39 --preformatted: #ccc;
40 --disabled: #111;
41 }
42 /* Add a bit of transparency so light media isn't so glaring in dark mode */
43 img,
44 video {
45 opacity: 0.8;
46 }
47 }
48
49 /* Reset box-sizing */
50 *, *::before, *::after {
51 box-sizing: border-box;
52 }
53
54 html {
55 /* Set the font globally */
56 font-family: var(--sans-font);
57 scroll-behavior: smooth;
58 }
59
60 /* Make the body a nice central block */
61 body {
62 color: var(--text);
63 background-color: var(--bg);
64 font-size: 1.15rem;
65 line-height: 1.5;
66 display: grid;
67 grid-template-columns: 1fr min(50rem, 90%) 1fr;
68 margin: 0;
69 }
70
71 body > * {
72 grid-column: 2;
73 }
74
75 /* Make the header bg full width, but the content inline with body */
76 body > header {
77 background-color: var(--accent-bg);
78 border-bottom: 1px solid var(--border);
79 text-align: center;
80 /*padding: 0 0.5rem 2rem 0.5rem;*/
81 grid-column: 1 / -1;
82 }
83
84 body > header > *:only-child {
85 /*margin-block-start: 2rem;*/
86 }
87
88 body > header h1 {
89 max-width: 1200px;
90 margin: 1rem auto;
91 }
92
93 body > header p {
94 max-width: 40rem;
95 margin: 1rem auto;
96 }
97
98 /* Add a little padding to ensure spacing is correct between content and header > nav */
99 main {
100 padding-top: 1.5rem;
101 }
102
103 body > footer {
104 margin-top: 4rem;
105 padding: 2rem 1rem 1.5rem 1rem;
106 color: var(--text-light);
107 font-size: 0.9rem;
108 text-align: center;
109 border-top: 1px solid var(--border);
110 }
111
112 /* Format headers */
113 h1 {
114 font-size: 3rem;
115 }
116
117 h2 {
118 font-size: 2.6rem;
119 margin-top: 3rem;
120 }
121
122 h3 {
123 font-size: 2rem;
124 margin-top: 3rem;
125 }
126
127 h4 {
128 font-size: 1.44rem;
129 }
130
131 h5 {
132 font-size: 1.15rem;
133 }
134
135 h6 {
136 font-size: 0.96rem;
137 }
138
139 p {
140 margin: 1.5rem 0;
141 }
142
143 /* Prevent long strings from overflowing container */
144 p, h1, h2, h3, h4, h5, h6 {
145 overflow-wrap: break-word;
146 }
147
148 /* Fix line height when title wraps */
149 h1,
150 h2,
151 h3 {
152 line-height: 1.1;
153 }
154
155 /* Reduce header size on mobile */
156 @media only screen and (max-width: 720px) {
157 h1 {
158 font-size: 2.5rem;
159 }
160
161 h2 {
162 font-size: 2.1rem;
163 }
164
165 h3 {
166 font-size: 1.75rem;
167 }
168
169 h4 {
170 font-size: 1.25rem;
171 }
172 }
173
174 /* Format links & buttons */
175 a,
176 a:visited {
177 color: var(--accent);
178 }
179
180 a:hover {
181 text-decoration: none;
182 }
183
184 /* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */
185 abbr[title] {
186 cursor: help;
187 text-decoration-line: underline;
188 text-decoration-style: dotted;
189 }
190
191 /* Format navigation */
192 header > nav {
193 font-size: 1.2rem;
194 line-height: 2;
195 /*padding: 1rem 0 0 0;*/
196 }
197
198 /* Use flexbox to allow items to wrap, as needed */
199 header > nav ul,
200 header > nav ol {
201 align-content: space-around;
202 align-items: center;
203 display: flex;
204 flex-direction: row;
205 flex-wrap: wrap;
206 justify-content: center;
207 list-style-type: none;
208 margin: 0;
209 padding: 0;
210 }
211
212 /* List items are inline elements, make them behave more like blocks */
213 header > nav ul li,
214 header > nav ol li {
215 display: inline-block;
216 }
217
218 header > nav a,
219 header > nav a:visited {
220 /*margin: 0 0.5rem 1rem 0.5rem;*/
221 /*border-left: 1px solid var(--border);
222 border-right: 1px solid var(--border);*/
223 /*border-radius: var(--standard-border-radius);*/
224 color: var(--text);
225 display: inline-block;
226 padding: 0.7rem 2.5rem;
227 text-decoration: none;
228 }
229
230 header > nav a:hover,
231 header > nav a.current,
232 header > nav a[aria-current="page"] {
233 /*border-color: var(--accent);*/
234 color: var(--accent);
235 cursor: pointer;
236 }
237
238 /* Reduce nav side on mobile */
239 @media only screen and (max-width: 720px) {
240 header > nav a {
241 border: none;
242 padding: 0;
243 text-decoration: underline;
244 line-height: 1;
245 }
246 }
247
248 /* Consolidate box styling */
249 aside, details, pre, progress {
250 background-color: var(--accent-bg);
251 border: 1px solid var(--border);
252 border-radius: var(--standard-border-radius);
253 margin-bottom: 1rem;
254 }
255
256 aside {
257 font-size: 1rem;
258 width: 30%;
259 padding: 0 15px;
260 margin-inline-start: 15px;
261 float: right;
262 }
263 *[dir="rtl"] aside {
264 float: left;
265 }
266
267 /* Make aside full-width on mobile */
268 @media only screen and (max-width: 720px) {
269 aside {
270 width: 100%;
271 float: none;
272 margin-inline-start: 0;
273 }
274 }
275
276 article, fieldset, dialog {
277 border: 1px solid var(--border);
278 padding: 1rem;
279 border-radius: var(--standard-border-radius);
280 margin-bottom: 1rem;
281 }
282
283 article h2:first-child,
284 section h2:first-child {
285 margin-top: 1rem;
286 }
287
288 section {
289 border-top: 1px solid var(--border);
290 border-bottom: 1px solid var(--border);
291 padding: 2rem 1rem;
292 margin: 3rem 0;
293 }
294
295 /* Don't double separators when chaining sections */
296 section + section,
297 sectionmd:first-child {
298 border-top: 0;
299 padding-top: 0;
300 }
301
302 section:last-child {
303 border-bottom: 0;
304 padding-bottom: 0;
305 }
306
307 details {
308 padding: 0.7rem 1rem;
309 }
310
311 summary {
312 cursor: pointer;
313 font-weight: bold;
314 padding: 0.7rem 1rem;
315 margin: -0.7rem -1rem;
316 word-break: break-all;
317 }
318
319 details[open] > summary + * {
320 margin-top: 0;
321 }
322
323 details[open] > summary {
324 margin-bottom: 0.5rem;
325 }
326
327 details[open] > :last-child {
328 margin-bottom: 0;
329 }
330
331 /* Format tables */
332 table {
333 border-collapse: collapse;
334 margin: 1.5rem 0;
335 }
336
337 figure > table {
338 width: max-content;
339 }
340
341 td,
342 th {
343 border: 1px solid var(--border);
344 text-align: start;
345 padding: 0.5rem;
346 }
347
348 th {
349 background-color: var(--accent-bg);
350 font-weight: bold;
351 }
352
353 tr:nth-child(even) {
354 /* Set every other cell slightly darker. Improves readability. */
355 background-color: var(--accent-bg);
356 }
357
358 table caption {
359 font-weight: bold;
360 margin-bottom: 0.5rem;
361 }
362
363 /* Misc body elements */
364 hr {
365 border: none;
366 height: 1px;
367 background: var(--border);
368 margin: 1rem auto;
369 }
370
371 mark {
372 padding: 2px 5px;
373 border-radius: var(--standard-border-radius);
374 background-color: var(--marked);
375 color: black;
376 }
377
378 mark a {
379 color: #0d47a1;
380 }
381
382 img,
383 video {
384 max-width: 100%;
385 height: auto;
386 border-radius: var(--standard-border-radius);
387 }
388
389 figure {
390 margin: 0;
391 display: block;
392 overflow-x: auto;
393 }
394
395 figure > img,
396 figure > picture > img {
397 display: block;
398 margin-inline: auto;
399 }
400
401 figcaption {
402 text-align: center;
403 font-size: 0.9rem;
404 color: var(--text-light);
405 margin-block: 1rem;
406 }
407
408 blockquote {
409 margin-inline-start: 2rem;
410 margin-inline-end: 0;
411 margin-block: 2rem;
412 padding: 0.4rem 0.8rem;
413 border-inline-start: 0.35rem solid var(--accent);
414 color: var(--text-light);
415 font-style: italic;
416 }
417
418 cite {
419 font-size: 0.9rem;
420 color: var(--text-light);
421 font-style: normal;
422 }
423
424 dt {
425 color: var(--text-light);
426 }
427
428 /* Use mono font for code elements */
429 code,
430 pre,
431 pre span,
432 kbd,
433 samp {
434 font-family: var(--mono-font);
435 color: var(--code);
436 }
437
438 kbd {
439 color: var(--preformatted);
440 border: 1px solid var(--preformatted);
441 border-bottom: 3px solid var(--preformatted);
442 border-radius: var(--standard-border-radius);
443 padding: 0.1rem 0.4rem;
444 }
445
446 pre {
447 padding: 1rem 1.4rem;
448 max-width: 100%;
449 overflow: auto;
450 color: var(--preformatted);
451 }
452
453 /* Fix embedded code within pre */
454 pre code {
455 color: var(--preformatted);
456 background: none;
457 margin: 0;
458 padding: 0;
459 }
460
461 dialog {
462 max-width: 40rem;
463 margin: auto;
464 }
465
466 dialog::backdrop {
467 background-color: var(--bg);
468 opacity: 0.8;
469 }
470
471 @media only screen and (max-width: 720px) {
472 dialog {
473 max-width: 100%;
474 margin: auto 1em;
475 }
476 }
477
478 /* Superscript & Subscript */
479 /* Prevent scripts from affecting line-height. */
480 sup, sub {
481 vertical-align: baseline;
482 position: relative;
483 }
484
485 sup {
486 top: -0.4em;
487 }
488
489 sub {
490 top: 0.3em;
491 }
492