2022.css (10508B)
1 /* 2 2022.css is based on new.css (see https://newcss.net/) 3 with very small personal adjustements. 4 */ 5 :root { 6 ---font-sans: sans-serif; 7 ---font-mono: monospace; 8 ---tx-1: #000000; 9 ---tx-2: #1A1A1A; 10 ---tx-3: #666666; 11 ---tx-4: #999999; 12 ---bg-1: #FFFFFF; 13 ---bg-2: #F6F8FA; 14 ---bg-3: #E5E7EB; 15 ---lk-1: #0070F3; 16 ---lk-2: #0366D6; 17 ---lk-tx: #FFFFFF; 18 ---ac-1: #79FFE1; 19 ---ac-tx: #0C4047; 20 21 --content-box-padding: 0.5rem; 22 --aside-width: 12.5rem; 23 } 24 25 @media (prefers-color-scheme: dark) { 26 :root { 27 ---tx-1: #ffffff; 28 ---tx-2: #eeeeee; 29 ---tx-3: #cccccc; 30 ---tx-4: #aaaaaa; 31 ---bg-1: #000000; 32 ---bg-2: #111111; 33 ---bg-3: #222222; 34 ---lk-1: #3291FF; 35 ---lk-2: #0070F3; 36 ---lk-tx: #FFFFFF; 37 ---ac-1: #7928CA; 38 ---ac-tx: #FFFFFF; 39 } 40 } 41 42 * { 43 /* Reset margins and padding */ 44 margin: 0; 45 padding: 0; 46 } 47 48 address, 49 area, 50 article, 51 aside, 52 audio, 53 blockquote, 54 datalist, 55 details, 56 dl, 57 fieldset, 58 figure, 59 form, 60 input, 61 iframe, 62 img, 63 meter, 64 nav, 65 ol, 66 optgroup, 67 option, 68 output, 69 p, 70 pre, 71 progress, 72 ruby, 73 section, 74 table, 75 textarea, 76 ul, 77 video { 78 /* Margins for most elements */ 79 margin-bottom: 1rem; 80 } 81 82 html,input,select,button { 83 /* Set body font family and some finicky elements */ 84 font-family: var(---font-sans); 85 } 86 87 body { 88 /* Center body in page */ 89 margin: 0 auto; 90 max-width: 70rem; 91 padding: 2rem; 92 border-radius: 6px; 93 overflow-x: hidden; 94 word-break: break-word; 95 overflow-wrap: break-word; 96 background: var(---bg-1); 97 98 /* Main body text */ 99 color: var(---tx-2); 100 font-size: 1.03rem; 101 line-height: 1.5; 102 } 103 104 ::selection { 105 /* Set background color for selected text */ 106 background: var(---ac-1); 107 color: var(---ac-tx); 108 } 109 110 h1,h2,h3,h4,h5,h6 { 111 line-height: 1; 112 color: var(---tx-1); 113 padding-top: .875rem; 114 } 115 116 h1, 117 h2, 118 h3 { 119 color: var(---tx-1); 120 padding-bottom: 2px; 121 margin-bottom: 8px; 122 border-bottom: 1px solid var(---bg-2); 123 } 124 125 h4, 126 h5, 127 h6 { 128 margin-bottom: .3rem; 129 } 130 131 h1 { 132 font-size: 2.25rem; 133 } 134 135 h2 { 136 font-size: 1.85rem; 137 } 138 139 h3 { 140 font-size: 1.55rem; 141 } 142 143 h4 { 144 font-size: 1.25rem; 145 } 146 147 h5 { 148 font-size: 1rem; 149 } 150 151 h6 { 152 font-size: .875rem; 153 } 154 155 a { 156 color: var(---lk-1); 157 } 158 159 a:hover { 160 color: var(---lk-2); 161 } 162 163 abbr:hover { 164 /* Set the '?' cursor while hovering an abbreviation */ 165 cursor: help; 166 } 167 168 blockquote { 169 padding: 1.5rem; 170 background: var(---bg-2); 171 border-left: 5px solid var(---bg-3); 172 } 173 174 abbr { 175 cursor: help; 176 } 177 178 blockquote *:last-child { 179 padding-bottom: 0; 180 margin-bottom: 0; 181 } 182 183 header { 184 background: var(---bg-2); 185 border-bottom: 1px solid var(---bg-3); 186 padding: 1rem 1.5rem; 187 188 /* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */ 189 190 margin: -2rem calc(0px - (50vw - 50%)) 2rem; 191 192 /* Shorthand for: 193 194 margin-top: -2rem; 195 margin-bottom: 2rem; 196 197 margin-left: calc(0px - (50vw - 50%)); 198 margin-right: calc(0px - (50vw - 50%)); */ 199 200 padding-left: calc(50vw - 50%); 201 padding-right: calc(50vw - 50%); 202 } 203 204 header img#sitelogo { 205 margin-bottom: 0; 206 margin-right: 1em; 207 } 208 209 header h1, 210 header h2, 211 header h3 { 212 padding-bottom: 0; 213 border-bottom: 0; 214 } 215 216 header > *:first-child { 217 margin-top: 0; 218 padding-top: 0; 219 } 220 221 header > *:last-child { 222 margin-bottom: 0; 223 } 224 225 a button, 226 button, 227 input[type="submit"], 228 input[type="reset"], 229 input[type="button"] { 230 font-size: 1rem; 231 display: inline-block; 232 padding: 6px 12px; 233 text-align: center; 234 text-decoration: none; 235 white-space: nowrap; 236 background: var(---lk-1); 237 color: var(---lk-tx); 238 border: 0; 239 border-radius: 4px; 240 box-sizing: border-box; 241 cursor: pointer; 242 color: var(---lk-tx); 243 } 244 245 a button[disabled], 246 button[disabled], 247 input[type="submit"][disabled], 248 input[type="reset"][disabled], 249 input[type="button"][disabled] { 250 cursor: default; 251 opacity: .5; 252 253 /* Set the [X] cursor while hovering a disabled link */ 254 cursor: not-allowed; 255 } 256 257 .button:focus, 258 .button:hover, 259 button:focus, 260 button:hover, 261 input[type="submit"]:focus, 262 input[type="submit"]:hover, 263 input[type="reset"]:focus, 264 input[type="reset"]:hover, 265 input[type="button"]:focus, 266 input[type="button"]:hover { 267 background: var(---lk-2); 268 } 269 270 code, 271 pre, 272 kbd, 273 samp { 274 /* Set the font family for monospaced elements */ 275 font-family: var(---font-mono); 276 } 277 278 code, 279 samp, 280 kbd, 281 pre { 282 /* The main preformatted style. This is changed slightly across different cases. */ 283 background: var(---bg-2); 284 border: 1px solid var(---bg-3); 285 border-radius: 4px; 286 padding: 3px 6px; 287 } 288 289 kbd { 290 /* Makes the kbd element look like a keyboard key */ 291 border-bottom: 3px solid var(---bg-3); 292 } 293 294 pre { 295 padding: 1rem 1.4rem; 296 max-width: 100%; 297 overflow: auto; 298 } 299 300 pre.src { 301 position: relative; 302 } 303 pre.src:before { 304 /*display: none;*/ 305 position: absolute; 306 background-color: var(---bg-3); 307 /*color: #f3f4f4;*/ 308 top: 0; 309 right: 0; 310 padding: 0.2rem 0.5rem; 311 } 312 313 pre code { 314 /* When <code> is in a <pre>, reset it's formatting to blend in */ 315 background: inherit; 316 font-size: inherit; 317 color: inherit; 318 border: 0; 319 padding: 0; 320 margin: 0; 321 } 322 323 code pre { 324 /* When <pre> is in a <code>, reset it's formatting to blend in */ 325 display: inline; 326 background: inherit; 327 font-size: inherit; 328 color: inherit; 329 border: 0; 330 padding: 0; 331 margin: 0; 332 } 333 334 details { 335 /* Make the <details> look more "clickable" */ 336 padding: .6rem 1rem; 337 background: var(---bg-2); 338 border: 1px solid var(---bg-3); 339 border-radius: 4px; 340 } 341 342 summary { 343 /* Makes the <summary> look more like a "clickable" link with the pointer cursor */ 344 cursor: pointer; 345 font-weight: bold; 346 } 347 348 details[open] { 349 /* Adjust the <details> padding while open */ 350 padding-bottom: .75rem; 351 } 352 353 details[open] summary { 354 /* Adjust the <details> padding while open */ 355 margin-bottom: 6px; 356 } 357 358 details[open]>*:last-child { 359 /* Resets the bottom margin of the last element in the <details> while <details> is opened. This prevents double margins/paddings. */ 360 margin-bottom: 0; 361 } 362 363 dt { 364 font-weight: bold; 365 } 366 367 dd::before { 368 /* Add an arrow to data table definitions */ 369 content: '→ '; 370 } 371 372 hr { 373 /* Reset the border of the <hr> separator, then set a better line */ 374 border: 0; 375 border-bottom: 1px solid var(---bg-3); 376 margin: 1rem auto; 377 } 378 379 fieldset { 380 margin-top: 1rem; 381 padding: 2rem; 382 border: 1px solid var(---bg-3); 383 border-radius: 4px; 384 } 385 386 legend { 387 padding: auto .5rem; 388 } 389 390 table { 391 /* border-collapse sets the table's elements to share borders, rather than floating as separate "boxes". */ 392 border-collapse: collapse; 393 width: 100% 394 } 395 396 td, 397 th { 398 border: 1px solid var(---bg-3); 399 text-align: left; 400 padding: .5rem; 401 } 402 403 th { 404 background: var(---bg-2); 405 } 406 407 tr:nth-child(even) { 408 /* Set every other cell slightly darker. Improves readability. */ 409 background: var(---bg-2); 410 } 411 412 table caption { 413 font-weight: bold; 414 margin-bottom: .5rem; 415 } 416 417 textarea { 418 /* Don't let the <textarea> extend off the screen naturally or when dragged by the user */ 419 max-width: 100%; 420 } 421 422 ol, 423 ul { 424 /* Replace the browser default padding */ 425 padding-left: 2rem; 426 } 427 428 li { 429 margin-top: .4rem; 430 } 431 432 ul ul, 433 ol ul, 434 ul ol, 435 ol ol { 436 margin-bottom: 0; 437 } 438 439 mark { 440 padding: 3px 6px; 441 background: var(---ac-1); 442 color: var(---ac-tx); 443 } 444 445 textarea, 446 select, 447 input { 448 padding: 6px 12px; 449 margin-bottom: .5rem; 450 background: var(---bg-2); 451 color: var(---tx-2); 452 border: 1px solid var(---bg-3); 453 border-radius: 4px; 454 box-shadow: none; 455 box-sizing: border-box; 456 } 457 458 img { 459 max-width: 100%; 460 } 461 462 aside { 463 --aside-offset: 1rem; 464 --aside-offset-lineheight: 1.5rem; 465 background-color: var(---bg-2); 466 padding: calc(var(--content-box-padding) * 0.5) calc(var(--content-box-padding) * 2); 467 padding-top: 1em; 468 margin-bottom: 0em; 469 float: right; 470 width: var(--aside-width); 471 font-size: 0.9rem; 472 line-height: 1.25rem; 473 border: 1px solid var(--bg-3); 474 } 475 476 aside code { 477 background: var(---bg-3); 478 border: 1px solid var(---bg-4); 479 } 480 481 figure figcaption { 482 text-align: center; 483 color: var(---tx-2); 484 font-style: italic; 485 margin: 0 2rem; 486 } 487 488 footer { 489 text-align: center; 490 color: var(---tx-4); 491 } 492 493 footer a { 494 color: var(---tx-3); 495 } 496 497 section img { 498 display: block; 499 margin-left: auto; 500 margin-right: auto; 501 } 502 503 section img.shadow { 504 box-shadow: 0 28px 50px rgba(0,0,0,0.16); 505 } 506 507 div.drawer:before { 508 content: ""; 509 position: absolute; 510 top: 0; 511 bottom: 0; 512 left: 4.4rem; 513 width: 1px; 514 background-color: #555; 515 } 516 517 div.drawer { 518 display: flex; 519 padding: 0; 520 margin: 1rem; 521 padding-top: 1rem; 522 position: relative; 523 color: #555; 524 } 525 526 div.drawer h6 { 527 box-sizing: border-box; 528 font-style: italic; 529 flex: 0 0 5rem; 530 margin:0; 531 padding:0; 532 align-self: center; 533 text-align: right; 534 padding-right: 1.2rem; 535 } 536 537 div.drawer.info:before { 538 background-color: #00529B; 539 } 540 div.drawer.info { 541 color: #00529B; 542 } 543 544 div.drawer.note:before { 545 background-color: #9F6000; 546 } 547 div.drawer.note { 548 color: #9F6000; 549 } 550 div.drawer.tip:before { 551 background-color: #4F8A10; 552 } 553 div.drawer.tip { 554 color: #4F8A10; 555 } 556 div.drawer.warning:before { 557 background-color: #D8000C; 558 } 559 div.drawer.warning { 560 color: #D8000C; 561 } 562 div.drawer.results:before { 563 background-color: black; 564 } 565 div.drawer.results { 566 font-family:monospace,monospace; 567 font-family: var(---font-mono); 568 color: black; 569 width: 100% !important; 570 } 571 div.drawer.results p { 572 display: block; 573 unicode-bidi: embed; 574 white-space: pre; 575 margin-top: 0; 576 } 577 div.drawer.results pre { 578 background-color: inherit; 579 border: 0; 580 } 581 div.drawer.results pre.src:before { 582 background-color: #eee; 583 color: #555; 584 } 585 586 .tag { 587 font-family:var(---font-mono); 588 font-size: 1rem; 589 } 590 .tag span { 591 padding:.3em; 592 float:right; 593 margin-right:.5em; 594 border:1px solid #bbb; 595 border-radius:3px; 596 background-clip:padding-box; 597 color:#333; 598 background-color:#eee; 599 line-height:1rem; 600 } 601 602 .todo { 603 font-family: monospace; color: red; 604 } 605 .done { 606 font-family: monospace; color: green; 607 } 608 .priority { font-family: monospace; color: orange; } 609 .timestamp { color: #bebebe; } 610 .timestamp-kwd { color: #5f9ea0; } 611 .underline { text-decoration: underline; }