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