1 @import "/css/colors.css"; 2 3 * { 4 margin: 0; 5 padding: 0; 6 border: 0; 7 overflow-x: visible; 8 overflow-y: unset; 9 } 10 11 /* Avoid showing the background of the scrollbar when the content is small enough */ 12 html { 13 margin-left: calc(100vw - 100%); 14 margin-right: 0; 15 overflow-y: scroll; 16 } 17 18 ::selection { 19 color: var(--selection-fg-color); 20 background: var(--selection-bg-color); 21 } 22 23 ::-moz-selection { 24 color: var(--selection-fg-color); 25 background: var(--selection-bg-color); 26 } 27 28 body { 29 color: var(--fg-color); 30 background: var(--bg-color); 31 margin-bottom: 15em; 32 margin-left: .5em; 33 margin-right: .5em; 34 font-size: 18px; 35 font-family: "Nimbus Sans", "Nimbus Sans L", "Helvetica", 36 "Arial", "Inter", "DejaVu Sans", sans-serif; 37 font-weight: 500; 38 } 39 40 header { 41 color: var(--accent-color); 42 43 max-width: 680px; 44 45 margin-left: auto; 46 margin-right: auto; 47 margin-top: 16px; 48 margin-bottom: 6px; 49 50 text-align: center; 51 52 /* padding-top: 12px; */ 53 /* padding-bottom: .25em; */ 54 padding-left: 0.75em; 55 padding-right: 0.75em; 56 57 /* border-top: 1em; */ 58 } 59 60 table { 61 border-spacing: 0px; 62 } 63 64 #color-scheme-button-light { 65 display: none; 66 } 67 68 .header_flex_div { 69 display: flex; 70 justify-content: center; 71 flex-wrap: wrap; 72 align-items: baseline; 73 position: relative; 74 padding: 0 1.25em; 75 } 76 77 .header_bottom_bar{ 78 border: 0; 79 clear:both; 80 81 display: block; 82 83 width: 100%; 84 max-width: 680px; 85 height: 0px; 86 margin-left: auto; 87 margin-right: auto; 88 margin-top: .5em; 89 margin-bottom: .5em; 90 padding-top: 0; 91 padding-bottom: 0; 92 border-top: 1px dashed var(--secondary-accent-color); 93 } 94 95 .article_top_bar { 96 border: 0; 97 clear:both; 98 display: block; 99 width: 100%; 100 max-width: 680px; 101 height: 0px; 102 margin-left: auto; 103 margin-right: auto; 104 margin-top: 0em; 105 margin-bottom: 16px; 106 padding-top: 0; 107 padding-bottom: 0; 108 border-top: 1px dashed var(--secondary-accent-color); 109 } 110 111 #header_link, #header_link_short { 112 text-decoration: none; 113 color: inherit; 114 transition: .75; 115 116 /* font-family: "Nimbus Sans", "Nimbus Sans L", "Inter", "Helvetica", "inconsolata", monospace, "DejaVu Sans", sans, "Verdana", sans-serif, "Georgia", serif; */ 117 } 118 119 #color-scheme-button { 120 position: absolute; 121 top: 30px; 122 right: 0; 123 display: inline-block; 124 cursor: pointer; 125 fill: var(--fg-color); 126 opacity: 75%; 127 } 128 129 #header_link:hover { 130 color: var(--header-hover-fg-color); 131 } 132 133 #header_title { 134 /* margin-bottom: .150em; */ 135 font-size: 2em; 136 width: 100%; 137 margin-bottom: 4px; 138 } 139 140 #rss { 141 display: inline-flex; 142 width: 28px; 143 height: 28px; 144 align-items: center; 145 justify-content: center; 146 color: var(--fg-color); 147 /* margin-left: 8px; */ 148 /* margin-bottom: 8px; */ 149 /* padding-left: 8px; */ 150 /* padding-bottom: 8px; */ 151 opacity: 20%; 152 153 /* position: absolute; */ 154 /* left: calc(50% + 6rem); */ 155 /* top: 40%; */ 156 /* transform: translateY(-50%); */ 157 158 position: relative; 159 bottom: 4px; 160 left: 4px; 161 } 162 163 #rss svg { 164 width: 22px; 165 height: 22px; 166 fill: currentColor; 167 } 168 169 #rss:hover, 170 #color-scheme-button:hover { 171 opacity: 100%; 172 } 173 174 article { 175 color: var(--fg-color); 176 177 max-width: 680px; 178 179 margin-left: auto; 180 margin-right: auto; 181 margin-bottom: .9em; 182 183 text-align: left; 184 185 -webkit-hyphens: auto; 186 -ms-hyphens: auto; 187 hyphens: auto; 188 189 overflow-wrap: break-word; 190 191 padding-left: 0.5em; 192 padding-right: 0.5em; 193 padding-top: 0.5em; 194 padding-bottom: 1em; 195 /* padding: 20px; */ 196 /* border: 1px solid var(--hover-bg-color); */ 197 198 border-radius: 10px; 199 } 200 201 a { 202 -webkit-hyphens: auto; 203 -ms-hyphens: auto; 204 hyphens: auto; 205 white-space: normal; 206 207 word-break: auto-phrase; 208 } 209 210 211 .article_bottom_bar { 212 border: 0; 213 clear: both; 214 215 display: block; 216 217 width: 100%; 218 max-width: 680px; 219 height: 0px; 220 221 margin-left: auto; 222 margin-right: auto; 223 margin-top: .25em; 224 margin-bottom: 0; 225 226 padding-top: 0; 227 padding-bottom: 0; 228 /*! border-bottom: dashed; */ 229 border-top: 1px dashed var(--secondary-accent-color); 230 } 231 232 footer { 233 text-align: center; 234 font-size: 0.75em; 235 a:hover { 236 text-decoration: none; 237 } 238 br { 239 margin-bottom: 3px; 240 } 241 } 242 243 #footer-buttons { 244 padding: 0; 245 margin: 0; 246 border-width: 0; 247 width: 80px; 248 opacity: 45%; 249 } 250 251 #footer-buttons:hover { 252 opacity: 100%; 253 } 254 255 .footer-div { 256 padding: 0em 2em 2.5em 2em; 257 margin-left: auto; 258 margin-right:auto; 259 } 260 261 #index-title, #blog-title { 262 text-align: center; 263 color: var(--title-color); 264 padding-top: 0em; 265 padding-bottom: .25em; 266 /* animation: zoom-in-zoom-out 5s ease-in-out infinite; */ 267 animation: none; 268 font-size: 1.5em; 269 } 270 271 #blog-title { 272 animation: none; 273 } 274 275 img { 276 overflow: hidden; 277 278 height: 100%; 279 width: 100%; 280 281 color: black; 282 background: transparent; 283 } 284 285 a:visited, a:active, a:link { 286 color: var(--link-color); 287 text-decoration: none; 288 } 289 290 a:hover { 291 /* color: var(--link-hover-color); */ 292 text-decoration: underline; 293 text-decoration: none; 294 background: var(--hover-bg-color); 295 /* filter: brightness(var(--hover-brightness)); */ 296 } 297 298 ol { 299 list-style-position: inside; 300 } 301 302 ul { 303 list-style-type: none; /* Remove bullets */ 304 list-style-position: inside; 305 list-style: inside; 306 padding: 0; 307 padding-bottom: .5em; 308 margin: 0; /* Remove margins */ 309 } 310 311 .header_buttons { 312 /* margin: 0 0 .100em 0; */ 313 margin: 0; 314 padding-bottom: 0em; 315 font-size: 1.65em; 316 display: flex; 317 flex-wrap: wrap; 318 justify-content: center; 319 list-style-type: none; 320 } 321 322 h1 { font-size: 1.75em; } 323 324 h2 { 325 font-size: 1.25em; 326 327 padding-top: .5em; 328 padding-bottom: .5em; 329 } 330 331 h3 { 332 font-size: 1em; 333 text-align: left; 334 335 padding-top: .5em; 336 padding-bottom: .5em; 337 } 338 339 h4 { padding-top: .5em; text-align: left; } 340 341 h5 { 342 padding-bottom: .25em; 343 font-size: 1em; 344 } 345 346 p { padding-bottom: 1em; } 347 348 code { 349 font-size: 85%; 350 font-family: "Ubuntu Mono", monospace; 351 /* background-color: #656c7633; */ 352 background-color: var(--code-bg); 353 padding: 0 .2em; 354 margin: 0; 355 /* border-radius: 6px; */ 356 white-space: wrap; 357 word-break: break-all; 358 } 359 360 pre { 361 text-align: left; 362 363 padding: .75em; 364 border-radius: 0em; 365 background-color: var(--code-bg); 366 width: auto; 367 display: block; 368 margin-left: auto; 369 margin-right: auto; 370 margin-top: 0em; 371 margin-bottom: 1.25em; 372 border-width: 0px; 373 border-color: var(--pre-border-color); 374 border-style: solid; 375 /* box-shadow: 5px 5px 7px black; */ 376 overflow: auto; 377 font-size: 90%; 378 scrollbar-color: var(--pre-border-color); 379 scrollbar-width: thin; 380 text-wrap: wrap; 381 } 382 383 pre code { 384 font-size: 1em; 385 background-color: inherit; 386 padding: 0; 387 margin: 0; 388 border-radius: 0; 389 word-break: normal; 390 /* word-break: break-all; */ 391 overflow-wrap: normal; 392 /* white-space: pre-wrap; */ 393 white-space: pre; 394 hyphens: none; 395 } 396 397 /* #command { color: #33ff11; } */ 398 #command_sym { color: #ff1694; } 399 #command_red { color: gold; } 400 401 a.anchor{ 402 display:block; 403 position: relative; 404 top: 150px; 405 visibility: hidden; 406 } 407 408 hr { 409 border: 0; 410 clear:both; 411 412 display:block; 413 414 width: 90%; 415 height: .1em; 416 margin-left: auto; 417 margin-right: auto; 418 margin-top: 0; 419 margin-bottom: 0; 420 padding-top: 0; 421 padding-bottom: 0; 422 } 423 424 #go_top { 425 text-decoration: none; 426 color: var(--link-color); 427 } 428 429 #go_top:hover { 430 color: var(--accent-color); 431 } 432 433 /* list-style-type: none; /1* Remove bullets *1/ */ 434 /* padding: 0; */ 435 /* padding-bottom: .5em; */ 436 /* text-align: left; */ 437 438 #latest-uploads { 439 padding: 0; 440 #latest-uploads-title { 441 display: flex; 442 align-items: center; 443 color: var(--fg-color); 444 445 /* justify-content: center; */ 446 447 /* position: relative; */ 448 /* text-align: center; */ 449 450 h2 { 451 padding: 0; 452 font-size: 1.10em; 453 padding-bottom: .25em; 454 text-decoration: underline; 455 } 456 img { 457 margin-bottom: 2px; 458 margin-left: .5em; 459 } 460 } 461 #date { 462 text-wrap: nowrap; 463 vertical-align: top; 464 font-family: "inconsolata", monospace; 465 a { 466 color: var(--fg-color); 467 text-decoration: none; 468 font-family: "inconsolata", monospace; 469 font-size: 18px; 470 padding-right: 4px; 471 } 472 } 473 #see-all-blog-entries { 474 padding-top: .5em; 475 } 476 } 477 478 #latest-uploads-blog-entries, #blog_entries { 479 #title a:hover { 480 text-decoration: none; 481 } 482 483 a:hover { 484 filter: brightness(1.0); 485 } 486 487 tr:hover { 488 /* background: #000; */ 489 background: var(--hover-bg-color); 490 filter: brightness(var(--hover-brightness)); 491 cursor: pointer; 492 } 493 494 td a { 495 display: block; 496 } 497 } 498 499 @media (hover: hover) and (pointer: fine) { 500 a:hover { 501 filter: brightness(var(--hover-brightness)); 502 } 503 504 #latest-uploads-blog-entries, #blog_entries { 505 tr:hover { 506 filter: brightness(var(--hover-brightness)); 507 } 508 } 509 } 510 511 512 #urgent-announcement { 513 color: var(--fg-color); 514 font-weight: bold; 515 padding: 0.5em 0em 1em 0em; 516 a { 517 color: orangered; 518 text-decoration: underline; 519 } 520 } 521 522 b-time { 523 font-family: "inconsolata", monospace; 524 } 525 526 #blog-index-table { 527 width: 100%; 528 } 529 530 #blog-index-table #date, 531 #blog-index-table #date a { 532 white-space: nowrap; 533 } 534 535 @media (max-width: 800px) { 536 body { 537 margin-left: 0em; 538 margin-right: 0em; 539 } 540 header { 541 padding-top: .25em; 542 padding-bottom: 0; 543 margin-top: .5em; 544 } 545 article { 546 padding-top: 0.25em; 547 padding-bottom: .5em; 548 margin-bottom: .25em; 549 /* padding: 20px 10px */ 550 } 551 footer { 552 padding-top: .5em; 553 } 554 a { 555 -webkit-tap-highlight-color: transparent; 556 user-select: none; 557 } 558 .header_flex_div{ 559 flex-direction: column; 560 align-items: center; 561 } 562 .header_buttons{ 563 margin-top: 0; 564 font-size: 1.50em; 565 align-self: center; 566 padding-top: 0em; 567 padding-bottom: .25em; 568 569 a:hover { 570 color: var(--hover-fg-color); 571 } 572 } 573 .header_bottom_bar{ 574 /* width: 55%; */ 575 } 576 .article_bottom_bar { 577 /* width: 40%; */ 578 padding-top: .5em; 579 margin-top: .5em; 580 margin-bottom: .75em; 581 } 582 #header_title { 583 font-size: 2.20em; 584 line-height: 1.10em; 585 /* padding-bottom: .10em; */ 586 } 587 #index-title { 588 padding-top: 0; 589 padding-bottom: .25em; 590 font-size: 26px; 591 } 592 593 594 #blog-index-table { 595 a { 596 text-decoration: none; 597 text-align: left; 598 } 599 a:hover { 600 color: var(--link-color); 601 text-decoration: none; 602 } 603 /* border: 1px solid #505050; */ 604 /* border-radius: .5em; */ 605 /* padding: .5em; */ 606 #entry { 607 display: flex; 608 flex-direction: column-reverse; 609 margin-bottom: .5em; 610 } 611 #date { 612 /* padding-top: .10em; */ 613 /* padding-bottom: 1em; */ 614 } 615 #title { 616 display: block; 617 } 618 #title a { 619 /* color: var(--fg-color); */ 620 font-size: 1.00em; 621 display: block; 622 } 623 #date a { 624 display: block; 625 font-size: 1.00em; 626 /* color: var(--article-date); */ 627 } 628 #date a:hover { 629 color: var(--fg-color); 630 } 631 } 632 633 #latest-uploads { 634 tr:nth-child(n + 6) { 635 display: none !important; 636 } 637 tr:nth-child(6) #date { 638 padding-bottom: 0; 639 } 640 } 641 642 #latest-uploads-title { 643 padding-bottom: .25em; 644 } 645 #see-all-blog-entries { 646 padding-top: 0em; 647 } 648 #header_link { 649 display: none; 650 } 651 #header_link_short { 652 display: initial !important; 653 } 654 } 655 656 @media (max-width: 400px) { 657 article { 658 margin-bottom: .25em; 659 /* padding: 10px 15px; */ 660 } 661 p { padding-bottom: .75em; } 662 #header_title { 663 font-size: 2.00em; 664 padding-bottom: 0; 665 } 666 .header_bottom_bar { 667 margin-top: 0; 668 margin-bottom: 0; 669 } 670 .header_buttons { 671 padding-bottom: .25em; 672 } 673 #index-title { 674 padding-top: 10px; 675 padding-bottom: 5px; 676 font-size: 1.5em; 677 } 678 #latest-uploads-title { 679 padding-bottom: 0; 680 } 681 .article_bottom_bar { 682 padding-top: .25em; 683 margin-top: .5em; 684 } 685 .footer-div { 686 padding: 0em 2em 1.75em 2em; 687 } 688 } 689 690 /* 691 @media (prefers-color-scheme: light) { 692 #header_link:hover { 693 color: #a04a00; 694 } 695 .header_bottom_bar { 696 border-top: 1px dashed; 697 } 698 .article_bottom_bar { 699 border-top: 1px dashed; 700 } 701 a:visited { 702 color: #a04a00; 703 } 704 a:link { 705 color: #a04a00; 706 } 707 a:hover { 708 color: #CC2936; 709 } 710 pre { 711 background-color: #eee; 712 border: 3px solid #aaa; 713 border-radius: 0px; 714 margin-top: 0; 715 box-shadow: 0px 0px 0px; 716 } 717 #command { color: inherit; } 718 #command_sym { color: inherit; } 719 #command_red { color: inherit; } 720 721 #go_top:hover { 722 color: #CC2936; 723 } 724 #go_top { 725 color: #a04a00; 726 } 727 #urgent-announcement { 728 color: #090909; 729 } 730 731 code { 732 background-color: rgba(190,198,219,0.2); 733 } 734 } 735 */
