The old Pelican theme I used to use for mcol.xyz
git clone https://mcol.xyz/code/rice-theme
Log | Files | Refs | README

main.css (23016B)


      1 /* 🐱  🐭  */
      2 
      3 
      4 /* COMMON */
      5 
      6 /* all colours are defined here */
      7 :root {
      8     --bg: #efebf4; /* purply white */
      9     --text: #333; /* dark grey */
     10     --text2: #904ff0; /* pink */
     11     --trim: #5D479D; /* purple */
     12 
     13     /* code colours */
     14     --c0: #030405; /* dark */
     15     --c1: #8742a5; /* red */
     16     --c2: #e6df52; /* green */
     17     --c3: #406794; /* yellow */
     18     --c4: #8f4ff0; /* blue */
     19     --c5: var(--trim); /* purple */
     20     --c6: var(--text2); /* cyan */
     21 
     22     /* fonts */
     23     --mono: "Droid Sans Mono", "Lucida Console", Monaco, Inconsolata, monospace;
     24 }
     25 
     26 @viewport {
     27     width: device-width;
     28     zoom: 1.0;
     29 }
     30 
     31 @font-face {
     32     font-family: lato;
     33     src: url(/theme/webfonts/Lato-Regular.ttf);
     34 }
     35 
     36 html {
     37     font-family: lato, "Liberation Sans", "DejaVu Sans", sans-serif;
     38     font-size: 1.3em;
     39     color: var(--text);
     40 }
     41 
     42 .body {
     43     display: flex;
     44     justify-content: space-evenly;
     45     flex-direction: row;
     46 }
     47 
     48 li {
     49     list-style-type: square;
     50     padding-left: 5px;
     51 }
     52 
     53 ::selection {
     54     background: var(--trim);
     55     color: var(--bg);
     56 }
     57 
     58 a {
     59     color: inherit;
     60     text-decoration: none;
     61 }
     62 
     63 a:hover {
     64     background: var(--text2);
     65     color: var(--bg);
     66 }
     67 
     68 h1 a:hover {
     69     background: var(--text);
     70 }
     71 
     72 .fas {
     73     vertical-align:-5%;
     74 }
     75 
     76 
     77 /* PRIVACY POLICY */
     78 
     79 #priv-pol {
     80     font-size: 0.7em;
     81     display: none;
     82     margin-left: 30px;
     83     transform: translateY(-115%);
     84 }
     85 
     86 #priv-pol .wc {
     87     padding: 12%;
     88 }
     89 
     90 #priv {
     91     font-size: 0.8em;
     92     opacity: 0.25;
     93     display: inline-block;
     94 }
     95 
     96 #priv:hover + #priv-pol {
     97     display: block;
     98 }
     99 
    100 #priv.athome {
    101     position: absolute;
    102     bottom: 8px;
    103 }
    104 
    105 #priv-pol.athome {
    106     transform: unset;
    107     position: absolute;
    108     bottom: 35px;
    109 }
    110 
    111 /* WINDOWS */
    112 
    113 .win {
    114     font-family: var(--mono);
    115     color: var(--trim);
    116     width: 428px;
    117     height: 238px;
    118     box-shadow: 12px 12px 0px rgba(0, 0, 0, 0.3);
    119     border: 6px solid;
    120     border-color: var(--trim);
    121     background-clip: padding-box;
    122     background-color: var(--bg);
    123     overflow: hidden;
    124     display: flex;
    125     flex-direction: column;
    126     flex: 0 0 auto;
    127 }
    128 
    129 .bar {
    130     border-top-style: solid;
    131     border-width: 18px;
    132     border-color: inherit;
    133 }
    134 
    135 .wc {
    136     font-size: 1.2em;
    137     display: flex;
    138     flex: 1 1 auto;
    139     align-items: center;
    140     justify-content: center;
    141 }
    142 
    143 .wc ul {
    144     padding: 10px;
    145     flex-basis: 50%;
    146 }
    147 
    148 .wc li {
    149     list-style-type: none;
    150 }
    151 
    152 .wc .icons {
    153     direction: rtl;
    154 }
    155 
    156 .wc .icons a {
    157     padding: 10px;
    158 }
    159 
    160 .wc .icons li {
    161     padding-right: 15px;
    162 }
    163 
    164 .wc .menu {
    165     border-left: 2px solid var(--text);
    166 }
    167 
    168 .win:hover .wc .menu {
    169     border-left: 2px solid var(--trim);
    170 }
    171 
    172 .win a:hover
    173 {
    174     background: var(--trim);
    175 }
    176 
    177 
    178 /* HOME PAGE */
    179 
    180 #home { /* this flex is only used on small screens */
    181     display: flex;
    182     height: 100%;
    183     width: 100%;
    184     justify-content: space-evenly;
    185     align-items: center;
    186 }
    187 
    188 #home1,#home2 {
    189     position: absolute;
    190     border-color: var(--text);
    191     color: var(--text);
    192     margin: 10px 0;
    193 }
    194 
    195 #home1:hover,#home2:hover
    196 {
    197     border-color: var(--trim);
    198     color: var(--trim);
    199 }
    200 
    201 @keyframes blink{50%{opacity:0;}}
    202 #c{
    203     color: var(--text2);
    204     animation:blink 2s step-start infinite;
    205 }
    206 
    207 #home2 {
    208     top: calc(50% + 22px);
    209     left: calc(50% - 352px);
    210 }
    211 #home1 {
    212     top: calc(50% - 260px);
    213     left: calc(50% - 88px);
    214 }
    215 
    216 #home1 .wc {
    217     align-self: center;
    218     width: 75%;
    219     line-height: 1.4em;
    220     padding-bottom: 0.5em;
    221 }
    222 
    223 
    224 /* PAGES */
    225 
    226 #nav {
    227     margin-top: 10%;
    228 }
    229 
    230 #page {
    231     width: calc(74% - 428px);
    232     padding-bottom: 3%;
    233 }
    234 
    235 .art-info {
    236     font-family: var(--mono);
    237     line-height: 0.8em;
    238     margin: 30px 0;
    239 }
    240 
    241 #page a
    242 {
    243     color: var(--text2);
    244 }
    245 
    246 #page a:hover
    247 {
    248     color: var(--bg);
    249 }
    250 
    251 .mod {
    252     font-style: italic;
    253 }
    254 
    255 code {
    256     font-size: 1.1em;
    257     padding: 3px 6px;
    258     background-color: var(--alt-bg); 
    259 }
    260 
    261 table {
    262     border-collapse: collapse;
    263 }
    264 
    265 #page img, #page video {
    266     max-width: 100%;
    267     margin: 0 auto;
    268     display: block;
    269 }
    270 
    271 #page h1 a,
    272 #ar a
    273 {
    274     color: var(--text);
    275 }
    276 
    277 .cats {
    278     font-family: var(--mono);
    279 }
    280 
    281 
    282 /* BLOGROLL */
    283 
    284 #blogroll li {
    285     padding: 6px;
    286 }
    287 
    288 
    289 /* ARCHIVES */
    290 
    291 #ar {
    292     display: grid;
    293     grid-row-gap: 10px;
    294     grid-template-columns: 5fr 1fr;
    295     color: var(--text2);
    296 }
    297 
    298 .ar-yr {
    299     padding-top: 20px;
    300     font-weight: bold;
    301     grid-column: 1 / 2;
    302 }
    303 
    304 .ar-art {
    305     padding-top: 10px;
    306     grid-column: 1;
    307 }
    308 
    309 
    310 /* CGIT */
    311 
    312 #cgit {
    313     font-size: 0.8em;
    314     height: 100%;
    315     width: 90%;
    316     margin: 3% auto;
    317 }
    318 
    319 #cgit table#header {
    320     width: 100%;
    321     margin-bottom: 1em;
    322 }
    323 
    324 #cgit table#header td.logo {
    325     width: 96px;
    326     vertical-align: top;
    327 }
    328 
    329 #cgit table#header td.main {
    330     font-size: 250%;
    331     padding-left: 10px;
    332     white-space: nowrap;
    333 }
    334 
    335 #cgit table#header td.form {
    336     text-align: right;
    337     vertical-align: bottom;
    338     padding-right: 1em;
    339     padding-bottom: 2px;
    340     white-space: nowrap;
    341 }
    342 
    343 #cgit table#header td.form form,
    344 #cgit table#header td.form input,
    345 #cgit table#header td.form select {
    346     font-size: 90%;
    347 }
    348 
    349 #cgit table#header td.sub {
    350     font-family: var(--mono);
    351     color: #777;
    352     border-top: solid 1px #ccc;
    353     padding-left: 10px;
    354 }
    355 
    356 #cgit table.tabs {
    357     border-bottom: solid 3px #ccc;
    358     margin-top: 2em;
    359     margin-bottom: 0px;
    360     width: 100%;
    361 }
    362 
    363 #cgit table.tabs td {
    364     padding: 0px 1em;
    365     vertical-align: bottom;
    366 }
    367 
    368 #cgit table.tabs td a {
    369     padding: 2px 0.75em;
    370     font-size: 1.1em;
    371 }
    372 
    373 #cgit table.tabs td a.active {
    374     color: #000;
    375     background-color: #ccc;
    376 }
    377 
    378 #cgit table.tabs a[href^="http://"]:after, #cgit table.tabs a[href^="https://"]:after {
    379     content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgAhcJDQY+gm2TAAAAHWlUWHRDb21tZW50AAAAAABDcmVhdGVkIHdpdGggR0lNUGQuZQcAAABbSURBVAhbY2BABs4MU4CwhYHBh2Erww4wrGFQZHjI8B8IgUIscJWyDHcggltQhI4zGDCcRwhChPggHIggP1QoAVmQkSETrGoHsiAEsACtBYN0oDAMbgU6EBcAAL2eHUt4XUU4AAAAAElFTkSuQmCC);
    380     opacity: 0.5;
    381     margin: 0 0 0 5px;
    382 }
    383 
    384 #cgit table.tabs td.form {
    385     text-align: right;
    386 }
    387 
    388 #cgit table.tabs td.form form {
    389     padding-bottom: 2px;
    390     font-size: 90%;
    391     white-space: nowrap;
    392 }
    393 
    394 #cgit table.tabs td.form input,
    395 #cgit table.tabs td.form select {
    396     font-size: 90%;
    397 }
    398 
    399 #cgit div.path {
    400     padding: 5px 2em 2px 2em;
    401     color: #000;
    402     background-color: #eee;
    403 }
    404 
    405 #cgit div.content {
    406     padding: 2em;
    407     border-bottom: solid 3px #ccc;
    408 }
    409 
    410 
    411 #cgit table.list {
    412     width: 100%;
    413     border: none;
    414 }
    415 
    416 #cgit table.list tr:hover,
    417 #cgit table.list tr.logheader {
    418     background: #eee;
    419 }
    420 
    421 
    422 #cgit table.list tr.nohover-highlight:hover:nth-child(even),
    423 #cgit table.list tr:nth-child(even) {
    424     background: #f7f7f7;
    425 }
    426 
    427 #cgit table.list tr.nohover-highlight:hover:nth-child(odd),
    428 #cgit table.list tr.nohover,
    429 #cgit table.list tr,
    430 #cgit table.list tr:nth-child(odd) {
    431     background: var(--bg);
    432 }
    433 
    434 #cgit table.list th {
    435     font-weight: bold;
    436     padding: 0.1em 0.5em 0.05em 0.5em;
    437     vertical-align: baseline;
    438 }
    439 
    440 #cgit table.list td {
    441     border: none;
    442     padding: 0.1em 0.5em 0.1em 0.5em;
    443 }
    444 
    445 #cgit table.list td.logmsg {
    446     font-family: var(--mono);
    447     white-space: pre;
    448     padding: 0 0.5em;
    449 }
    450 
    451 #cgit table.list td a {
    452     color: black;
    453 }
    454 
    455 #cgit table.list td a.ls-dir {
    456     font-weight: bold;
    457     color: var(--c4);
    458 }
    459 
    460 #cgit table.list td a:hover,
    461 #cgit pager a
    462 {
    463     color: var(--bg);
    464 }
    465 
    466 #cgit input#switch-btn {
    467     margin: 2px 0px 0px 0px;
    468 }
    469 
    470 #cgit td#sidebar input.txt {
    471     width: 100%;
    472     margin: 2px 0px 0px 0px;
    473 }
    474 
    475 #cgit table#grid {
    476     margin: 0px;
    477 }
    478 
    479 #cgit td#content {
    480     vertical-align: top;
    481     padding: 1em 2em 1em 1em;
    482     border: none;
    483 }
    484 
    485 #cgit div#summary {
    486     vertical-align: top;
    487     margin: 0 auto;
    488     width: 75%;
    489 }
    490 
    491 #cgit table#downloads {
    492     float: right;
    493     border: solid 1px #777;
    494     margin-left: 0.5em;
    495     margin-bottom: 0.5em;
    496 }
    497 
    498 #cgit table#downloads th {
    499     background-color: #ccc;
    500 }
    501 
    502 #cgit div#blob {
    503     border: solid 1px black;
    504 }
    505 
    506 #cgit div.error {
    507     color: red;
    508     font-weight: bold;
    509     margin: 1em 2em;
    510 }
    511 
    512 #cgit a.ls-blob, #cgit a.ls-dir, #cgit .ls-mod {
    513     font-family: var(--mono);
    514 }
    515 
    516 #cgit td.ls-size {
    517     text-align: right;
    518     font-family: var(--mono);
    519     width: 10em;
    520 }
    521 
    522 #cgit td.ls-mode {
    523     font-family: var(--mono);
    524     width: 10em;
    525 }
    526 
    527 #cgit table.blob {
    528     margin-top: 0.5em;
    529     border-top: solid 1px black;
    530 }
    531 
    532 #cgit table.blob td.hashes,
    533 #cgit table.blob td.lines {
    534     margin: 0; padding: 0 0 0 0.5em;
    535     vertical-align: top;
    536     color: black;
    537 }
    538 
    539 #cgit table.blob td.linenumbers {
    540     margin: 0; padding: 0 0.5em 0 0.5em;
    541     vertical-align: top;
    542     text-align: right;
    543     border-right: 1px solid gray;
    544 }
    545 
    546 #cgit table.blob pre {
    547     padding: 0; margin: 0;
    548 }
    549 
    550 #cgit table.blob td.linenumbers a,
    551 #cgit table.ssdiff td.lineno a {
    552     color: gray;
    553     text-align: right;
    554     text-decoration: none;
    555 }
    556 
    557 #cgit table.blob td.linenumbers a:hover,
    558 #cgit table.ssdiff td.lineno a:hover {
    559     color: black;
    560 }
    561 
    562 #cgit table.blame td.hashes,
    563 #cgit table.blame td.lines,
    564 #cgit table.blame td.linenumbers {
    565     padding: 0;
    566 }
    567 
    568 #cgit table.blame td.hashes div.alt,
    569 #cgit table.blame td.lines div.alt {
    570     padding: 0 0.5em 0 0.5em;
    571 }
    572 
    573 #cgit table.blame td.linenumbers div.alt {
    574     padding: 0 0.5em 0 0;
    575 }
    576 
    577 #cgit table.blame div.alt:nth-child(even) {
    578     background: #eee;
    579 }
    580 
    581 #cgit table.blame div.alt:nth-child(odd) {
    582     background: var(--bg);
    583 }
    584 
    585 #cgit table.blame td.lines > div {
    586     position: relative;
    587 }
    588 
    589 #cgit table.blame td.lines > div > pre {
    590     padding: 0 0 0 0.5em;
    591     position: absolute;
    592     top: 0;
    593 }
    594 
    595 #cgit table.bin-blob {
    596     margin-top: 0.5em;
    597     border: solid 1px black;
    598 }
    599 
    600 #cgit table.bin-blob th {
    601     font-family: var(--mono);
    602     white-space: pre;
    603     border: solid 1px #777;
    604     padding: 0.5em 1em;
    605 }
    606 
    607 #cgit table.bin-blob td {
    608     font-family: var(--mono);
    609     white-space: pre;
    610     border-left: solid 1px #777;
    611     padding: 0em 1em;
    612 }
    613 
    614 #cgit table.nowrap td {
    615     white-space: nowrap;
    616 }
    617 
    618 #cgit table.commit-info {
    619     margin-top: 1.5em;
    620 }
    621 
    622 #cgit div.cgit-panel {
    623     float: right;
    624     margin-top: 1.5em;
    625 }
    626 
    627 #cgit div.cgit-panel table {
    628     border: solid 1px #aaa;
    629     background-color: #eee;
    630 }
    631 
    632 #cgit div.cgit-panel th {
    633     text-align: center;
    634 }
    635 
    636 #cgit div.cgit-panel td {
    637     padding: 0.25em 0.5em;
    638 }
    639 
    640 #cgit div.cgit-panel td.label {
    641     padding-right: 0.5em;
    642 }
    643 
    644 #cgit div.cgit-panel td.ctrl {
    645     padding-left: 0.5em;
    646 }
    647 
    648 #cgit table.commit-info th {
    649     text-align: left;
    650     font-weight: normal;
    651     padding: 0.1em 1em 0.1em 0.1em;
    652     vertical-align: top;
    653 }
    654 
    655 #cgit table.commit-info td {
    656     font-weight: normal;
    657     padding: 0.1em 1em 0.1em 0.1em;
    658 }
    659 
    660 #cgit div.commit-subject {
    661     font-weight: bold;
    662     font-size: 125%;
    663     margin: 1.5em 0em 0.5em 0em;
    664     padding: 0em;
    665 }
    666 
    667 #cgit div.commit-msg {
    668     white-space: pre;
    669     font-family: var(--mono);
    670 }
    671 
    672 #cgit div.notes-header {
    673     font-weight: bold;
    674     padding-top: 1.5em;
    675 }
    676 
    677 #cgit div.notes {
    678     white-space: pre;
    679     font-family: var(--mono);
    680     border: solid 1px #ee9;
    681     background-color: #ffd;
    682     padding: 0.3em 2em 0.3em 1em;
    683     float: left;
    684 }
    685 
    686 #cgit div.notes-footer {
    687     clear: left;
    688 }
    689 
    690 #cgit div.diffstat-header {
    691     font-weight: bold;
    692     padding-top: 1.5em;
    693 }
    694 
    695 #cgit table.diffstat {
    696     border: solid 1px #aaa;
    697     background-color: #eee;
    698 }
    699 
    700 #cgit table.diffstat th {
    701     font-weight: normal;
    702     text-align: left;
    703     text-decoration: underline;
    704     padding: 0.1em 1em 0.1em 0.1em;
    705     font-size: 100%;
    706 }
    707 
    708 #cgit table.diffstat td {
    709     padding: 0.2em 0.2em 0.1em 0.1em;
    710     font-size: 100%;
    711     border: none;
    712 }
    713 
    714 #cgit table.diffstat td.mode {
    715     white-space: nowrap;
    716 }
    717 
    718 #cgit table.diffstat td span.modechange {
    719     padding-left: 1em;
    720     color: red;
    721 }
    722 
    723 #cgit table.diffstat td.add a {
    724     color: green;
    725 }
    726 
    727 #cgit table.diffstat td.del a {
    728     color: red;
    729 }
    730 
    731 #cgit table.diffstat td.graph {
    732     width: 500px;
    733     vertical-align: middle;
    734 }
    735 
    736 #cgit table.diffstat td.graph table {
    737     border: none;
    738 }
    739 
    740 #cgit table.diffstat td.graph td {
    741     padding: 0px;
    742     border: 0px;
    743     height: 7pt;
    744 }
    745 
    746 #cgit table.diffstat td.graph td.add {
    747     background-color: #5c5;
    748 }
    749 
    750 #cgit table.diffstat td.graph td.rem {
    751     background-color: #c55;
    752 }
    753 
    754 #cgit div.diffstat-summary {
    755     color: #888;
    756     padding-top: 0.5em;
    757 }
    758 
    759 #cgit table.diff {
    760     width: 75%;
    761     font-size: 0.9em;
    762 }
    763 
    764 #cgit table.diff td {
    765     font-family: var(--mono);
    766     white-space: pre;
    767 }
    768 
    769 #cgit table.diff td div.head {
    770     font-weight: bold;
    771     margin-top: 1em;
    772     color: black;
    773 }
    774 
    775 #cgit table.diff td div.hunk {
    776     color: #009;
    777 }
    778 
    779 #cgit table.diff td div.add {
    780     color: green;
    781 }
    782 
    783 #cgit table.diff td div.del {
    784     color: red;
    785 }
    786 
    787 #cgit .sha1 {
    788     font-family: var(--mono);
    789     font-size: 90%;
    790 }
    791 
    792 #cgit .left {
    793     text-align: left;
    794 }
    795 
    796 #cgit .right {
    797     display: none;
    798 }
    799 
    800 #cgit table.list td.reposection {
    801     font-style: italic;
    802     color: #888;
    803 }
    804 
    805 #cgit a.button {
    806     font-size: 80%;
    807     padding: 0em 0.5em;
    808 }
    809 
    810 #cgit a.secondary {
    811     font-size: 90%;
    812 }
    813 
    814 #cgit table.list td.sublevel-repo {
    815     padding-left: 1.5em;
    816 }
    817 
    818 #cgit ul.pager {
    819     list-style-type: none;
    820     text-align: center;
    821     margin: 1em 0 0 0;
    822 }
    823 
    824 #cgit ul.pager li {
    825     display: inline-block;
    826     margin: 0.25em 0.5em;
    827 }
    828 
    829 #cgit ul.pager .current {
    830     font-weight: bold;
    831 }
    832 
    833 #cgit span.age-mins {
    834     font-weight: bold;
    835     color: #080;
    836 }
    837 
    838 #cgit span.age-hours {
    839     color: #080;
    840 }
    841 
    842 #cgit span.age-days {
    843     color: #040;
    844 }
    845 
    846 #cgit span.age-weeks {
    847     color: #444;
    848 }
    849 
    850 #cgit span.age-months {
    851     color: #888;
    852 }
    853 
    854 #cgit span.age-years {
    855     color: #bbb;
    856 }
    857 
    858 #cgit span.insertions {
    859     color: #080;
    860 }
    861 
    862 #cgit span.deletions {
    863     color: #800;
    864 }
    865 
    866 #cgit div.footer {
    867     margin: 0.5em 0;
    868     text-align: center;
    869     font-size: 80%;
    870     color: #ccc;
    871 }
    872 
    873 #cgit div.footer a {
    874     color: #ccc;
    875 }
    876 
    877 #cgit a.branch-deco {
    878     color: #000;
    879     margin: 0px 0.5em;
    880     padding: 0px 0.25em;
    881     background-color: #88ff88;
    882     border: solid 1px #007700;
    883 }
    884 
    885 #cgit a.tag-deco {
    886     color: #000;
    887     margin: 0px 0.5em;
    888     padding: 0px 0.25em;
    889     background-color: #ffff88;
    890     border: solid 1px #777700;
    891 }
    892 
    893 #cgit a.tag-annotated-deco {
    894     color: #000;
    895     margin: 0px 0.5em;
    896     padding: 0px 0.25em;
    897     background-color: #ffcc88;
    898     border: solid 1px #777700;
    899 }
    900 
    901 #cgit a.remote-deco {
    902     color: #000;
    903     margin: 0px 0.5em;
    904     padding: 0px 0.25em;
    905     background-color: #ccccff;
    906     border: solid 1px #000077;
    907 }
    908 
    909 #cgit a.deco {
    910     color: #000;
    911     margin: 0px 0.5em;
    912     padding: 0px 0.25em;
    913     background-color: #ff8888;
    914     border: solid 1px #770000;
    915 }
    916 
    917 #cgit div.commit-subject a.branch-deco,
    918 #cgit div.commit-subject a.tag-deco,
    919 #cgit div.commit-subject a.tag-annotated-deco,
    920 #cgit div.commit-subject a.remote-deco,
    921 #cgit div.commit-subject a.deco {
    922     margin-left: 1em;
    923     font-size: 75%;
    924 }
    925 
    926 #cgit table.stats {
    927     border: solid 1px black;
    928 }
    929 
    930 #cgit table.stats th {
    931     text-align: left;
    932     padding: 1px 0.5em;
    933     background-color: #eee;
    934     border: solid 1px black;
    935 }
    936 
    937 #cgit table.stats td {
    938     text-align: right;
    939     padding: 1px 0.5em;
    940     border: solid 1px black;
    941 }
    942 
    943 #cgit table.stats td.total {
    944     font-weight: bold;
    945     text-align: left;
    946 }
    947 
    948 #cgit table.stats td.sum {
    949     font-weight: bold;
    950 }
    951 
    952 #cgit table.stats td.left {
    953     text-align: left;
    954 }
    955 
    956 #cgit table.vgraph {
    957     border: solid 1px black;
    958     height: 200px;
    959 }
    960 
    961 #cgit table.vgraph th {
    962     background-color: #eee;
    963     font-weight: bold;
    964     border: solid 1px var(--bg);
    965     padding: 1px 0.5em;
    966 }
    967 
    968 #cgit table.vgraph td {
    969     vertical-align: bottom;
    970     padding: 0px 10px;
    971 }
    972 
    973 #cgit table.vgraph div.bar {
    974     background-color: #eee;
    975 }
    976 
    977 #cgit table.hgraph {
    978     border: solid 1px black;
    979     width: 800px;
    980 }
    981 
    982 #cgit table.hgraph th {
    983     background-color: #eee;
    984     font-weight: bold;
    985     border: solid 1px black;
    986     padding: 1px 0.5em;
    987 }
    988 
    989 #cgit table.hgraph td {
    990     vertical-align: middle;
    991     padding: 2px 2px;
    992 }
    993 
    994 #cgit table.hgraph div.bar {
    995     background-color: #eee;
    996     height: 1em;
    997 }
    998 
    999 #cgit table.ssdiff {
   1000     width: 100%;
   1001 }
   1002 
   1003 #cgit table.ssdiff td {
   1004     font-size: 75%;
   1005     font-family: var(--mono);
   1006     white-space: pre;
   1007     padding: 1px 4px 1px 4px;
   1008     border-left: solid 1px #aaa;
   1009     border-right: solid 1px #aaa;
   1010 }
   1011 
   1012 #cgit table.ssdiff td.add {
   1013     color: black;
   1014     background: #cfc;
   1015     min-width: 50%;
   1016 }
   1017 
   1018 #cgit table.ssdiff td.add_dark {
   1019     color: black;
   1020     background: #aca;
   1021     min-width: 50%;
   1022 }
   1023 
   1024 #cgit table.ssdiff span.add {
   1025     background: #cfc;
   1026     font-weight: bold;
   1027 }
   1028 
   1029 #cgit table.ssdiff td.del {
   1030     color: black;
   1031     background: #fcc;
   1032     min-width: 50%;
   1033 }
   1034 
   1035 #cgit table.ssdiff td.del_dark {
   1036     color: black;
   1037     background: #caa;
   1038     min-width: 50%;
   1039 }
   1040 
   1041 #cgit table.ssdiff span.del {
   1042     background: #fcc;
   1043     font-weight: bold;
   1044 }
   1045 
   1046 #cgit table.ssdiff td.changed {
   1047     color: black;
   1048     background: #ffc;
   1049     min-width: 50%;
   1050 }
   1051 
   1052 #cgit table.ssdiff td.changed_dark {
   1053     color: black;
   1054     background: #cca;
   1055     min-width: 50%;
   1056 }
   1057 
   1058 #cgit table.ssdiff td.lineno {
   1059     color: black;
   1060     background: #eee;
   1061     text-align: right;
   1062     width: 3em;
   1063     min-width: 3em;
   1064 }
   1065 
   1066 #cgit table.ssdiff td.hunk {
   1067     color: black;
   1068     background: #ccf;
   1069     border-top: solid 1px #aaa;
   1070     border-bottom: solid 1px #aaa;
   1071 }
   1072 
   1073 #cgit table.ssdiff td.head {
   1074     border-top: solid 1px #aaa;
   1075     border-bottom: solid 1px #aaa;
   1076 }
   1077 
   1078 #cgit table.ssdiff td.head div.head {
   1079     font-weight: bold;
   1080     color: black;
   1081 }
   1082 
   1083 #cgit table.ssdiff td.foot {
   1084     border-top: solid 1px #aaa;
   1085     border-left: none;
   1086     border-right: none;
   1087     border-bottom: none;
   1088 }
   1089 
   1090 #cgit table.ssdiff td.space {
   1091     border: none;
   1092 }
   1093 
   1094 #cgit table.ssdiff td.space div {
   1095     min-height: 3em;
   1096 }
   1097 
   1098 #cgit table.blob .num { color:#b07e00; }
   1099 #cgit table.blob .esc { color:#ff00ff; }
   1100 #cgit table.blob .str { color:#bf0303; }
   1101 #cgit table.blob .pps { color:#818100; }
   1102 #cgit table.blob .slc { color:#838183; font-style:italic; }
   1103 #cgit table.blob .com { color:#838183; font-style:italic; }
   1104 #cgit table.blob .ppc { color:#008200; }
   1105 #cgit table.blob .opt { color:#000000; }
   1106 #cgit table.blob .lin { color:#555555; }
   1107 #cgit table.blob .kwa { color:#000000; font-weight:bold; }
   1108 #cgit table.blob .kwb { color:#0057ae; }
   1109 #cgit table.blob .kwc { color:#000000; font-weight:bold; }
   1110 #cgit table.blob .kwd { color:#010181; }
   1111 
   1112 .highlight {
   1113     white-space: pre-wrap;
   1114     word-wrap: break-word;
   1115     padding: 4px 14px;
   1116 }
   1117 
   1118 #page pre {
   1119     overflow-x: auto;
   1120     margin-left: 50px;
   1121     padding: 8px;
   1122     border-left: 2px solid var(--trim);
   1123 }
   1124 
   1125 #page code {
   1126     font-family: var(--mono);
   1127     font-size: 0.85em;
   1128     background-color: var(--trim);
   1129     color: var(--bg);
   1130     padding: 2px 7px;
   1131 }
   1132 
   1133 .err { color: var(--c1); } /* Error */
   1134 .o { color: var(--c1); } /* Operator */
   1135 .c { color: var(--c4); } /* Comment */
   1136 .ch { color: var(--c4); } /* Comment.Hashbang */
   1137 .cm { color: var(--c4); } /* Comment.Multiline */
   1138 .cp { color: var(--c4); } /* Comment.Preproc */
   1139 .cpf{ color: var(--c4); } /* Comment.PreprocFile */
   1140 .c1 { color: var(--c4); } /* Comment.Single */
   1141 .cs { color: var(--c4); font-weight: bold } /* Comment.Special */
   1142 .gd { color: var(--c1); } /* Generic.Deleted */
   1143 .ge { font-style: italic; } /* Generic.Emph */
   1144 .gr { color: var(--c1); } /* Generic.Error */
   1145 .gh { color: var(--c0); font-weight: bold } /* Generic.Heading */
   1146 .gi { color: var(--c0); } /* Generic.Inserted */
   1147 .go { color: var(--c0); } /* Generic.Output */
   1148 .gp { color: var(--c0); font-weight: bold; } /* Generic.Prompt */
   1149 .gs { font-weight: bold; } /* Generic.Strong */
   1150 .gu { color: var(--c0); font-weight: bold; } /* Generic.Subheading */
   1151 .gt { color: var(--c0); } /* Generic.Traceback */
   1152 .k  { color: var(--c3); } /* Keyword */
   1153 .kc { color: var(--c3); font-weight: bold } /* Keyword.Constant */
   1154 .kd { color: var(--c3); font-weight: bold } /* Keyword.Declaration */
   1155 .kn { color: var(--c3); font-weight: bold } /* Keyword.Namespace */
   1156 .kp { color: var(--c3); font-weight: bold } /* Keyword.Pseudo */
   1157 .kr { color: var(--c3); font-weight: bold } /* Keyword.Reserved */
   1158 .kt { color: var(--c3); font-weight: bold } /* Keyword.Type */
   1159 .n  { color: var(--text); } /* Name */
   1160 .na { color: var(--c3); } /* Name.Attribute */
   1161 .nb { color: var(--c3); } /* Name.Builtin */
   1162 .nc { color: var(--c2); font-weight: bold; } /* Name.Class */
   1163 .no { color: var(--c2); font-weight: bold; } /* Name.Constant */
   1164 .nd { color: var(--c2); font-weight: bold; } /* Name.Decorator */
   1165 .ni { color: var(--c2); font-weight: bold; } /* Name.Entity */
   1166 .ne { color: var(--c2); font-weight: bold; } /* Name.Exception */
   1167 .nf { color: var(--c2); } /* Name.Function - used in conf code blocks */
   1168 .nl { color: var(--c2); font-weight: bold; } /* Name.Label */
   1169 .nn { color: var(--c2); font-weight: bold; } /* Name.Namespace */
   1170 .nt { color: var(--text); } /* Name.Tag */
   1171 .nv { color: var(--text); } /* Name.Variable */
   1172 .ow { color: #000000; font-weight: bold; } /* Operator.Word */
   1173 .w  { } /* Text.Whitespace */
   1174 .s  { color: var(--c5); } /* Literal.String */
   1175 .m  { color: var(--c3); } /* Literal.Number */
   1176 .mb { color: var(--c3); } /* Literal.Number.Bin */
   1177 .mf { color: var(--c3); } /* Literal.Number.Float */
   1178 .mh { color: var(--c3); } /* Literal.Number.Hex */
   1179 .mi { color: var(--c3); } /* Literal.Number.Integer */
   1180 .mo { color: var(--c6); font-weight: bold; } /* Literal.Number.Oct */
   1181 .sa { background-color: var(--c5) } /* Literal.String.Affix */
   1182 .sb { background-color: var(--c5) } /* Literal.String.Backtick */
   1183 .sc { color: var(--c5) } /* Literal.String.Char */
   1184 .dl { background-color: var(--c2) } /* Literal.String.Delimiter */
   1185 .sd { color: var(--c5); } /* Literal.String.Doc */
   1186 .s2 { color: var(--c5) } /* Literal.String.Double */
   1187 .se { color: var(--c5) font-weight: bold; } /* Literal.String.Escape */
   1188 .sh { color: var(--c5)} /* Literal.String.Heredoc */
   1189 .si { color: var(--c4); } /* Literal.String.Interpol */
   1190 .sx { color: var(--c4); } /* Literal.String.Other */
   1191 .sr { color: var(--c4); } /* Literal.String.Regex */
   1192 .s1 { color: var(--c4); } /* Literal.String.Single */
   1193 .ss { color: var(--c4); } /* Literal.String.Symbol */
   1194 .bp { color: var(--c2) } /* Name.Builtin.Pseudo */
   1195 .fm { color: var(--c2); font-weight: bold } /* Name.Function.Magic */
   1196 .vc { color: var(--c2) } /* Name.Variable.Class */
   1197 .vg { color: var(--c2); font-weight: bold } /* Name.Variable.Global */
   1198 .vi { color: var(--c2) } /* Name.Variable.Instance */
   1199 .vm { color: var(--c2) } /* Name.Variable.Magic */
   1200 .il { color: var(--c2); font-weight: bold } /* Literal.Number.Integer.Long */
   1201 
   1202 
   1203 /* RESPONSIVENESS */
   1204 
   1205 @media (max-height: 580px) {
   1206     #home1,#home2 {
   1207 	position: initial;
   1208     }
   1209     #nav {
   1210 	margin-top: 2%;
   1211     }
   1212 }
   1213 
   1214 @media (min-width: 491px) and (max-width: 780px) {
   1215     #home1 {
   1216 	right: 5%;
   1217 	margin-left: auto;
   1218     }
   1219     #home2 {
   1220 	left: 5%;
   1221 	margin-right: auto;
   1222     }
   1223 }
   1224 
   1225 @media (max-width: 1180px) {
   1226     .body {
   1227 	flex-direction: column;
   1228 	height: unset;
   1229 	min-height: 97vh;
   1230 	align-items: center;
   1231     }
   1232     #page {
   1233 	height: initial;
   1234 	overflow: unset;
   1235 	width: 75%;
   1236     }
   1237 }
   1238 
   1239 @media (max-width: 490px) {
   1240     .win,#home1,#home2,#page {
   1241 	width: 88%;
   1242 	position: initial;
   1243     }
   1244     #nav {
   1245 	margin-top: 2%;
   1246     }
   1247     #priv-pol {
   1248 	margin-left: 0;
   1249     }
   1250 }
   1251 
   1252 @media (max-width: 960px) {
   1253     #home {
   1254 	flex-direction: column;
   1255     }
   1256 }