new.css (9797B)
1 :root { 2 ---font-sans: sans-serif; 3 ---font-mono: monospace; 4 ---tx-1: #000000; 5 ---tx-2: #1A1A1A; 6 ---tx-3: #666666; 7 ---tx-4: #999999; 8 ---bg-1: #FFFFFF; 9 ---bg-2: #F6F8FA; 10 ---bg-3: #E5E7EB; 11 ---lk-1: #0070F3; 12 ---lk-2: #0366D6; 13 ---lk-tx: #FFFFFF; 14 ---ac-1: #79FFE1; 15 ---ac-tx: #0C4047; 16 17 --content-box-padding: 0.5rem; 18 --aside-width: 12.5rem; 19 } 20 21 @media (prefers-color-scheme: dark) { 22 :root { 23 ---tx-1: #ffffff; 24 ---tx-2: #eeeeee; 25 ---tx-3: #cccccc; 26 ---tx-4: #aaaaaa; 27 ---bg-1: #000000; 28 ---bg-2: #111111; 29 ---bg-3: #222222; 30 ---lk-1: #3291FF; 31 ---lk-2: #0070F3; 32 ---lk-tx: #FFFFFF; 33 ---ac-1: #7928CA; 34 ---ac-tx: #FFFFFF; 35 } 36 } 37 38 * { 39 /* Reset margins and padding */ 40 margin: 0; 41 padding: 0; 42 } 43 44 address, 45 area, 46 article, 47 aside, 48 audio, 49 blockquote, 50 datalist, 51 details, 52 dl, 53 fieldset, 54 figure, 55 form, 56 input, 57 iframe, 58 img, 59 meter, 60 nav, 61 ol, 62 optgroup, 63 option, 64 output, 65 p, 66 pre, 67 progress, 68 ruby, 69 section, 70 table, 71 textarea, 72 ul, 73 video { 74 /* Margins for most elements */ 75 margin-bottom: 1rem; 76 } 77 78 html,input,select,button { 79 /* Set body font family and some finicky elements */ 80 font-family: var(---font-sans); 81 } 82 83 body { 84 /* Center body in page */ 85 margin: 0 auto; 86 max-width: 70rem; 87 padding: 2rem; 88 border-radius: 6px; 89 overflow-x: hidden; 90 word-break: break-word; 91 overflow-wrap: break-word; 92 background: var(---bg-1); 93 94 /* Main body text */ 95 color: var(---tx-2); 96 font-size: 1.03rem; 97 line-height: 1.5; 98 } 99 100 ::selection { 101 /* Set background color for selected text */ 102 background: var(---ac-1); 103 color: var(---ac-tx); 104 } 105 106 h1,h2,h3,h4,h5,h6 { 107 line-height: 1; 108 color: var(---tx-1); 109 padding-top: .875rem; 110 } 111 112 h1, 113 h2, 114 h3 { 115 color: var(---tx-1); 116 padding-bottom: 2px; 117 margin-bottom: 8px; 118 border-bottom: 1px solid var(---bg-2); 119 } 120 121 h4, 122 h5, 123 h6 { 124 margin-bottom: .3rem; 125 } 126 127 h1 { 128 font-size: 2.25rem; 129 } 130 131 h2 { 132 font-size: 1.85rem; 133 } 134 135 h3 { 136 font-size: 1.55rem; 137 } 138 139 h4 { 140 font-size: 1.25rem; 141 } 142 143 h5 { 144 font-size: 1rem; 145 } 146 147 h6 { 148 font-size: .875rem; 149 } 150 151 a { 152 color: var(---lk-1); 153 } 154 155 a:hover { 156 color: var(---lk-2); 157 } 158 159 abbr:hover { 160 /* Set the '?' cursor while hovering an abbreviation */ 161 cursor: help; 162 } 163 164 blockquote { 165 padding: 1.5rem; 166 background: var(---bg-2); 167 border-left: 5px solid var(---bg-3); 168 } 169 170 abbr { 171 cursor: help; 172 } 173 174 blockquote *:last-child { 175 padding-bottom: 0; 176 margin-bottom: 0; 177 } 178 179 header { 180 background: var(---bg-2); 181 border-bottom: 1px solid var(---bg-3); 182 padding: 1rem 1.5rem; 183 184 /* 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. */ 185 186 margin: -2rem calc(0px - (50vw - 50%)) 2rem; 187 188 /* Shorthand for: 189 190 margin-top: -2rem; 191 margin-bottom: 2rem; 192 193 margin-left: calc(0px - (50vw - 50%)); 194 margin-right: calc(0px - (50vw - 50%)); */ 195 196 padding-left: calc(50vw - 50%); 197 padding-right: calc(50vw - 50%); 198 } 199 200 header img#sitelogo { 201 margin-bottom: 0; 202 margin-right: 1em; 203 } 204 205 header h1, 206 header h2, 207 header h3 { 208 padding-bottom: 0; 209 border-bottom: 0; 210 } 211 212 header > *:first-child { 213 margin-top: 0; 214 padding-top: 0; 215 } 216 217 header > *:last-child { 218 margin-bottom: 0; 219 } 220 221 main header { 222 background: var(---bg-3); 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 figure figcaption { 477 text-align: center; 478 color: var(---tx-2); 479 font-style: italic; 480 margin: 0 2rem; 481 } 482 483 footer { 484 text-align: center; 485 color: var(---tx-4); 486 } 487 488 footer a { 489 color: var(---tx-3); 490 } 491 492 section img { 493 display: block; 494 margin-left: auto; 495 margin-right: auto; 496 } 497 498 section img.shadow { 499 box-shadow: 0 28px 50px rgba(0,0,0,0.16); 500 } 501 502 div.drawer:before { 503 content: ""; 504 position: absolute; 505 top: 0; 506 bottom: 0; 507 left: 4.4rem; 508 width: 1px; 509 background-color: #555; 510 } 511 512 div.drawer { 513 display: flex; 514 padding: 0; 515 margin: 1rem; 516 padding-top: 1rem; 517 position: relative; 518 color: #555; 519 } 520 521 div.drawer h6 { 522 box-sizing: border-box; 523 font-style: italic; 524 flex: 0 0 5rem; 525 margin:0; 526 padding:0; 527 align-self: center; 528 text-align: right; 529 padding-right: 1.2rem; 530 } 531 532 div.drawer.info:before { 533 background-color: #00529B; 534 } 535 div.drawer.info { 536 color: #00529B; 537 } 538 539 div.drawer.note:before { 540 background-color: #9F6000; 541 } 542 div.drawer.note { 543 color: #9F6000; 544 } 545 div.drawer.tip:before { 546 background-color: #4F8A10; 547 } 548 div.drawer.tip { 549 color: #4F8A10; 550 } 551 div.drawer.warning:before { 552 background-color: #D8000C; 553 } 554 div.drawer.warning { 555 color: #D8000C; 556 } 557 div.drawer.results:before { 558 background-color: black; 559 } 560 div.drawer.results { 561 font-family:monospace,monospace; 562 font-family: var(---font-mono); 563 color: black; 564 width: 100% !important; 565 } 566 div.drawer.results p { 567 display: block; 568 unicode-bidi: embed; 569 white-space: pre; 570 margin-top: 0; 571 } 572 div.drawer.results pre { 573 background-color: inherit; 574 border: 0; 575 } 576 div.drawer.results pre.src:before { 577 background-color: #eee; 578 color: #555; 579 } 580 581 .tag { 582 font-family:var(---font-mono); 583 font-size: 1rem; 584 } 585 .tag span { 586 padding:.3em; 587 float:right; 588 margin-right:.5em; 589 border:1px solid #bbb; 590 border-radius:3px; 591 background-clip:padding-box; 592 color:#333; 593 background-color:#eee; 594 line-height:1rem; 595 } 596 597 .todo { 598 font-family: monospace; color: red; 599 } 600 .done { 601 font-family: monospace; color: green; 602 } 603 .priority { font-family: monospace; color: orange; } 604 .timestamp { color: #bebebe; } 605 .timestamp-kwd { color: #5f9ea0; }