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