Commit 037a40e4a5
Unsigned
Layout: unified · split
theme/static/styles.css +158 −52
| @@ -9,8 +9,10 @@ | ||
| 9 | 9 | */ |
| 10 | 10 | |
| 11 | 11 | html { |
| 12 | line-height: 1.15; /* 1 */ | |
| 13 | -webkit-text-size-adjust: 100%; /* 2 */ | |
| 12 | line-height: 1.15; | |
| 13 | /* 1 */ | |
| 14 | -webkit-text-size-adjust: 100%; | |
| 15 | /* 2 */ | |
| 14 | 16 | } |
| 15 | 17 | |
| 16 | 18 | /* Sections |
| @@ -43,9 +45,12 @@ h1 { | ||
| 43 | 45 | */ |
| 44 | 46 | |
| 45 | 47 | hr { |
| 46 | box-sizing: content-box; /* 1 */ | |
| 47 | height: 0; /* 1 */ | |
| 48 | overflow: visible; /* 2 */ | |
| 48 | box-sizing: content-box; | |
| 49 | /* 1 */ | |
| 50 | height: 0; | |
| 51 | /* 1 */ | |
| 52 | overflow: visible; | |
| 53 | /* 2 */ | |
| 49 | 54 | } |
| 50 | 55 | |
| 51 | 56 | /* Text-level semantics |
| @@ -65,9 +70,12 @@ a { | ||
| 65 | 70 | */ |
| 66 | 71 | |
| 67 | 72 | abbr[title] { |
| 68 | border-bottom: none; /* 1 */ | |
| 69 | text-decoration: underline; /* 2 */ | |
| 70 | text-decoration: underline dotted; /* 2 */ | |
| 73 | border-bottom: none; | |
| 74 | /* 1 */ | |
| 75 | text-decoration: underline; | |
| 76 | /* 2 */ | |
| 77 | text-decoration: underline dotted; | |
| 78 | /* 2 */ | |
| 71 | 79 | } |
| 72 | 80 | |
| 73 | 81 | /** |
| @@ -121,10 +129,14 @@ input, | ||
| 121 | 129 | optgroup, |
| 122 | 130 | select, |
| 123 | 131 | textarea { |
| 124 | font-family: inherit; /* 1 */ | |
| 125 | font-size: 100%; /* 1 */ | |
| 126 | line-height: 1.15; /* 1 */ | |
| 127 | margin: 0; /* 2 */ | |
| 132 | font-family: inherit; | |
| 133 | /* 1 */ | |
| 134 | font-size: 100%; | |
| 135 | /* 1 */ | |
| 136 | line-height: 1.15; | |
| 137 | /* 1 */ | |
| 138 | margin: 0; | |
| 139 | /* 2 */ | |
| 128 | 140 | } |
| 129 | 141 | |
| 130 | 142 | /** |
| @@ -199,12 +211,18 @@ fieldset { | ||
| 199 | 211 | */ |
| 200 | 212 | |
| 201 | 213 | legend { |
| 202 | box-sizing: border-box; /* 1 */ | |
| 203 | color: inherit; /* 2 */ | |
| 204 | display: table; /* 1 */ | |
| 205 | max-width: 100%; /* 1 */ | |
| 206 | padding: 0; /* 3 */ | |
| 207 | white-space: normal; /* 1 */ | |
| 214 | box-sizing: border-box; | |
| 215 | /* 1 */ | |
| 216 | color: inherit; | |
| 217 | /* 2 */ | |
| 218 | display: table; | |
| 219 | /* 1 */ | |
| 220 | max-width: 100%; | |
| 221 | /* 1 */ | |
| 222 | padding: 0; | |
| 223 | /* 3 */ | |
| 224 | white-space: normal; | |
| 225 | /* 1 */ | |
| 208 | 226 | } |
| 209 | 227 | |
| 210 | 228 | /** |
| @@ -230,8 +248,10 @@ textarea { | ||
| 230 | 248 | |
| 231 | 249 | [type="checkbox"], |
| 232 | 250 | [type="radio"] { |
| 233 | box-sizing: border-box; /* 1 */ | |
| 234 | padding: 0; /* 2 */ | |
| 251 | box-sizing: border-box; | |
| 252 | /* 1 */ | |
| 253 | padding: 0; | |
| 254 | /* 2 */ | |
| 235 | 255 | } |
| 236 | 256 | |
| 237 | 257 | /** |
| @@ -249,8 +269,10 @@ textarea { | ||
| 249 | 269 | */ |
| 250 | 270 | |
| 251 | 271 | [type="search"] { |
| 252 | -webkit-appearance: textfield; /* 1 */ | |
| 253 | outline-offset: -2px; /* 2 */ | |
| 272 | -webkit-appearance: textfield; | |
| 273 | /* 1 */ | |
| 274 | outline-offset: -2px; | |
| 275 | /* 2 */ | |
| 254 | 276 | } |
| 255 | 277 | |
| 256 | 278 | /** |
| @@ -267,8 +289,10 @@ textarea { | ||
| 267 | 289 | */ |
| 268 | 290 | |
| 269 | 291 | ::-webkit-file-upload-button { |
| 270 | -webkit-appearance: button; /* 1 */ | |
| 271 | font: inherit; /* 2 */ | |
| 292 | -webkit-appearance: button; | |
| 293 | /* 1 */ | |
| 294 | font: inherit; | |
| 295 | /* 2 */ | |
| 272 | 296 | } |
| 273 | 297 | |
| 274 | 298 | /* Misc |
| @@ -316,11 +340,21 @@ body { | ||
| 316 | 340 | Liberation Mono, |
| 317 | 341 | Lucida Console, |
| 318 | 342 | monospace; |
| 319 | font-size: 0.9rem; | |
| 343 | font-size: clamp(0.95rem, 1vw + 0.5rem, 1.1rem); | |
| 320 | 344 | line-height: 1.5; |
| 321 | 345 | max-width: 50em; |
| 322 | 346 | margin: 0 auto; |
| 323 | padding: 0 1rem; | |
| 347 | padding: 0 clamp(1rem, 5vw, 3rem); | |
| 348 | } | |
| 349 | ||
| 350 | @media (min-width: 768px) { | |
| 351 | body { | |
| 352 | padding: 0 2rem; | |
| 353 | } | |
| 354 | } | |
| 355 | ||
| 356 | main>*+* { | |
| 357 | margin-top: 2rem; | |
| 324 | 358 | } |
| 325 | 359 | |
| 326 | 360 | .site-nav, |
| @@ -329,7 +363,7 @@ footer { | ||
| 329 | 363 | } |
| 330 | 364 | |
| 331 | 365 | footer { |
| 332 | border-top: 1px dotted; | |
| 366 | /* border-top: 1px dotted; */ | |
| 333 | 367 | padding-top: 1rem; |
| 334 | 368 | margin: 1rem 0; |
| 335 | 369 | } |
| @@ -342,9 +376,9 @@ ul { | ||
| 342 | 376 | list-style-type: "- "; |
| 343 | 377 | } |
| 344 | 378 | |
| 345 | .site-nav { | |
| 379 | /* .site-nav { | |
| 346 | 380 | border-bottom: 1px dotted; |
| 347 | } | |
| 381 | } */ | |
| 348 | 382 | |
| 349 | 383 | .site-nav ul { |
| 350 | 384 | list-style-type: none; |
| @@ -362,12 +396,43 @@ h2, | ||
| 362 | 396 | h3, |
| 363 | 397 | h4 { |
| 364 | 398 | color: var(--fg); |
| 399 | text-transform: uppercase; | |
| 400 | } | |
| 401 | ||
| 402 | h1 { | |
| 403 | font-size: 2rem; | |
| 404 | font-weight: bold; | |
| 405 | /* border-bottom: 1px solid var(--border); */ | |
| 406 | margin-top: 2rem; | |
| 407 | margin-bottom: 1rem; | |
| 408 | } | |
| 409 | ||
| 410 | h2 { | |
| 411 | font-size: 1.5rem; | |
| 412 | margin-top: 1.5rem; | |
| 413 | margin-bottom: .75rem; | |
| 414 | } | |
| 415 | ||
| 416 | h3 { | |
| 417 | font-size: 1.25rem; | |
| 418 | margin-top: 1.25rem; | |
| 419 | margin-bottom: .5rem; | |
| 420 | } | |
| 421 | ||
| 422 | #text-table-of-contents li { | |
| 423 | text-transform: uppercase; | |
| 365 | 424 | } |
| 366 | 425 | |
| 367 | 426 | a, |
| 368 | 427 | a:visited { |
| 369 | 428 | color: var(--link); |
| 370 | text-decoration: none; | |
| 429 | text-decoration: underline; | |
| 430 | text-decoration-skip-ink: auto; | |
| 431 | } | |
| 432 | ||
| 433 | a:focus-visible { | |
| 434 | outline: 2px solid var(--link); | |
| 435 | outline-offset: 2px; | |
| 371 | 436 | } |
| 372 | 437 | |
| 373 | 438 | a:hover { |
| @@ -393,7 +458,7 @@ table { | ||
| 393 | 458 | Liberation Mono, |
| 394 | 459 | Lucida Console, |
| 395 | 460 | monospace; |
| 396 | font-size: 0.9rem; | |
| 461 | font-size: inherit; | |
| 397 | 462 | width: 100%; |
| 398 | 463 | } |
| 399 | 464 | |
| @@ -406,7 +471,7 @@ td { | ||
| 406 | 471 | } |
| 407 | 472 | |
| 408 | 473 | pre, |
| 409 | pre > code, | |
| 474 | pre>code, | |
| 410 | 475 | time, |
| 411 | 476 | code { |
| 412 | 477 | font-family: |
| @@ -426,7 +491,7 @@ pre { | ||
| 426 | 491 | overflow-x: auto; |
| 427 | 492 | } |
| 428 | 493 | |
| 429 | :not(pre) > code { | |
| 494 | :not(pre)>code { | |
| 430 | 495 | color: var(--code); |
| 431 | 496 | font-family: inherit; |
| 432 | 497 | } |
| @@ -471,8 +536,8 @@ blockquote p { | ||
| 471 | 536 | } |
| 472 | 537 | |
| 473 | 538 | .post-metadata { |
| 474 | border: 1px dotted var(--fg); | |
| 475 | border-top: none; | |
| 539 | border: 1px dotted var(--border); | |
| 540 | /* border-top: none; */ | |
| 476 | 541 | padding: 1rem; |
| 477 | 542 | } |
| 478 | 543 | |
| @@ -526,39 +591,80 @@ span.tag::before { | ||
| 526 | 591 | } |
| 527 | 592 | |
| 528 | 593 | .post { |
| 529 | display: flex; | |
| 530 | flex-direction: row; | |
| 531 | margin-bottom: 1rem; | |
| 594 | display: flex; | |
| 595 | flex-direction: row; | |
| 596 | margin-bottom: 1rem; | |
| 532 | 597 | } |
| 533 | 598 | |
| 534 | 599 | .post-content { |
| 535 | display: flex; | |
| 536 | flex-direction: column; | |
| 600 | display: flex; | |
| 601 | flex-direction: column; | |
| 537 | 602 | } |
| 538 | 603 | |
| 539 | 604 | .post-tags { |
| 540 | font-size: 0.75rem; | |
| 541 | color: #999; | |
| 542 | margin-top: 0.1rem; | |
| 605 | font-size: 0.85rem; | |
| 606 | color: #999; | |
| 607 | margin-top: 0.1rem; | |
| 543 | 608 | } |
| 544 | 609 | |
| 545 | 610 | .tag { |
| 546 | margin-right: 0.3rem; | |
| 547 | font-style: normal; | |
| 548 | opacity: 0.8; | |
| 611 | margin-right: 0.3rem; | |
| 612 | font-style: normal; | |
| 613 | opacity: 0.8; | |
| 549 | 614 | } |
| 550 | 615 | |
| 551 | 616 | .tag::before { |
| 552 | content: "#"; | |
| 617 | content: "#"; | |
| 618 | } | |
| 619 | ||
| 620 | .skip-link { | |
| 621 | position: absolute; | |
| 622 | left: -999px; | |
| 623 | top: auto; | |
| 624 | width: 1px; | |
| 625 | height: 1px; | |
| 626 | overflow: hidden; | |
| 627 | } | |
| 628 | ||
| 629 | .skip-link:focus { | |
| 630 | left: 1rem; | |
| 631 | top: 1rem; | |
| 632 | width: auto; | |
| 633 | height: auto; | |
| 634 | background: var(--bg-bright); | |
| 635 | color: var(--fg); | |
| 636 | padding: .5rem; | |
| 637 | border: 1px solid var(--fg); | |
| 553 | 638 | } |
| 554 | 639 | |
| 555 | 640 | @media (prefers-color-scheme: dark) { |
| 556 | 641 | :root { |
| 557 | --bg: #141617; | |
| 558 | --bg-bright: #191c1d; | |
| 559 | --fg: #b2aea9; | |
| 560 | --link: gold; | |
| 561 | --code: red; | |
| 642 | --bg: #121212; | |
| 643 | --bg-bright: #1e1e1e; | |
| 644 | --fg: #e0e0e0; | |
| 645 | --link: #8ab4f8; | |
| 646 | --code: #f28b82; | |
| 562 | 647 | --border: #333; |
| 563 | 648 | } |
| 564 | 649 | } |
| 650 | ||
| 651 | @media print { | |
| 652 | body { | |
| 653 | background: #fff; | |
| 654 | color: #000; | |
| 655 | font-size: 12pt; | |
| 656 | padding: 0; | |
| 657 | max-width: none; | |
| 658 | } | |
| 659 | ||
| 660 | .site-nav, | |
| 661 | footer, | |
| 662 | aside { | |
| 663 | display: none; | |
| 664 | } | |
| 665 | ||
| 666 | a::after { | |
| 667 | content: " (" attr(href) ")"; | |
| 668 | font-size: 90%; | |
| 669 | } | |
| 670 | } | |
| \ No newline at end of file | ||
theme/templates/base.html +2 −1
| @@ -17,6 +17,7 @@ | ||
| 17 | 17 | {% endblock %} |
| 18 | 18 | </head> |
| 19 | 19 | <body> |
| 20 | <a href="#main" class="skip-link">Skip to content</a> | |
| 20 | 21 | <nav class="site-nav" aria-label="site-nav" role="navigation"> |
| 21 | 22 | <ul> |
| 22 | 23 | <li><a href="/">Home</a></li> |
| @@ -25,7 +26,7 @@ | ||
| 25 | 26 | <li><a href="/wiki/">Wiki</a></li> |
| 26 | 27 | </ul> |
| 27 | 28 | </nav> |
| 28 | <main>{% block main %}{% endblock %}</main> | |
| 29 | <main id="main">{% block main %}{% endblock %}</main> | |
| 29 | 30 | <footer> |
| 30 | 31 | <p>Donate: <a href="monero:82frXv83WVsGbTwuqSyb27cvy67JpD7Ktaij12Avy6ogfZatsgPG67YgsmEmvTFLKd1Rk7MUwx8D31ieGwLdD4wa4KdtxDB">XMR</a> |
| 31 | 32 | | <a href="ethereum:0x11255046Ccd637f1ACc78ae7c8849870f85638B3">ETH</a> |