website

Portfolio website
git clone https://willem.vanzwol.com/git/website/repo.bundle
Log | Files | Refs | README | LICENSE

styles.css (9810B)

      1 :root {
      2   --bg: #fff;
      3   --text: #000;
      4   --border: #d0d0d0;
      5   --link: #0645ad;
      6 
      7   --transition-fast: 120ms;
      8 }
      9 
     10 /* system dark */
     11 @media (prefers-color-scheme: dark) {
     12   html:not(.light) {
     13     --bg: #090909;
     14     --text: #eaeaea;
     15     --border: #262626;
     16     --link: #6aa7ff;
     17 
     18   a[href^="http://"]::after,
     19   a[href^="https://"]::after {
     20     filter: invert(1);
     21   }
     22 }
     23 
     24 /* manual override */
     25 html.dark {
     26   --bg: #090909;
     27   --text: #eaeaea;
     28   --border: #262626;
     29   --link: #6aa7ff;
     30 }
     31 
     32 html.light {
     33   --bg: #fff;
     34   --text: #000;
     35   --border: #d0d0d0;
     36   --link: #0645ad;
     37 }
     38 
     39 html {
     40   scroll-behavior: smooth;
     41 }
     42 
     43 a[href^="http"]::after {
     44   content: "";
     45   position: relative;
     46   display: inline-block;
     47 
     48   width: 0.85em;
     49   height: 0.85em;
     50   top: 0.1em;
     51   margin-left: 0.15em;
     52 
     53   background: url("./assets/external-link.svg") no-repeat center / contain;
     54 
     55   vertical-align: text-top;
     56 }
     57 
     58 /* Markdown symbols */
     59 h1::before { content: "# "; }
     60 h2::before { content: "## "; }
     61 h3::before { content: "### "; }
     62 
     63 h1::before, h2::before, h3::before {
     64   color: color-mix(in srgb, currentColor 25%, transparent);
     65 }
     66 
     67 em::before { content: "_"; }
     68 em::after { content: "_"; }
     69 b::before { content: "**"; }
     70 b::after { content: "**"; }
     71 del::before { content: "~~"; }
     72 del::after { content: "~~"; }
     73 
     74 em::before, em::after,
     75 b::before, b::after,
     76 del::before, del::after {
     77   color: color-mix(in srgb, currentColor 40%, transparent);
     78 }
     79 
     80 hr {
     81   border: none;
     82   border-top: 0.0625rem solid var(--border);
     83 }
     84 
     85 a {
     86   color: var(--link);
     87   text-decoration: none;
     88 }
     89 
     90 a:hover {
     91   text-decoration: underline;
     92 }
     93 
     94 table {
     95   width: fit;
     96   border-collapse: collapse;
     97 }
     98 
     99 th,
    100 td {
    101   padding: 0.3em 0.8em;
    102   border: 0.0625rem solid var(--border);
    103   text-align: left;
    104 }
    105 
    106 th {
    107   background: var(--bg-secondary);
    108 }
    109 
    110 blockquote {
    111   position: relative;
    112 
    113   margin: 1em 0.4em;
    114   padding: 0.15em 0.8em;
    115 
    116   border-left: 0.3em solid var(--border);
    117 }
    118 
    119 .quote-source {
    120   position: absolute;
    121   top: 0.4rem;
    122   right: 0.5rem;
    123 
    124   opacity: 0.45;
    125   text-decoration: none;
    126 
    127   transition: opacity var(--transition-fast);
    128 }
    129 
    130 .quote-source:hover {
    131   opacity: 1;
    132 }
    133 
    134 ul,
    135 ol {
    136   padding-left: 2ch;
    137   margin: 0;
    138 }
    139 ul {
    140   padding-left: 0ch;
    141   list-style: none;
    142 }
    143 
    144 ul li::before {
    145   content: "* ";
    146   font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    147   color: var(--border);
    148   font-weight: 600;
    149 }
    150 
    151 ol li::marker {
    152   color: var(--border);
    153 }
    154 
    155 legend {
    156   padding: 0 1ch;
    157   border-left: 0.0625rem solid var(--border);
    158   border-right: 0.0625rem solid var(--border);
    159   font-size: 0.75em;
    160 }
    161 
    162 fieldset {
    163   border: 0.0625rem solid var(--border);
    164   margin: 0;
    165   margin-bottom: 0.5em;
    166 }
    167 
    168 input[type="checkbox"],
    169 input[type="radio"] {
    170   appearance: none;
    171   position: relative;
    172   bottom: 0.18em;
    173 
    174 }
    175 
    176 label {
    177   padding: 1ch;
    178 }
    179 
    180 input[type="checkbox"]::before {
    181   position: relative;
    182   left: 1ch;
    183   content: "[ ]";
    184   font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    185   color: var(--border);
    186   font-weight: 600;
    187 }
    188 
    189 input[type="radio"]::before {
    190   position: relative;
    191   left: 1ch;
    192   content: "( )";
    193   font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    194   color: var(--border);
    195   font-weight: 600;
    196 }
    197 
    198 input[type="checkbox"]:hover::before {
    199   content: "[×]";
    200   font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    201 }
    202 
    203 input[type="radio"]:hover::before {
    204   content: "(•)";
    205   font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    206 }
    207 
    208 input[type="checkbox"]:checked::before {
    209   content: "[×]";
    210   font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    211   color: var(--text);
    212 }
    213 
    214 input[type="radio"]:checked::before {
    215   content: "(•)";
    216   font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    217   color: var(--text);
    218 }
    219 
    220 button {
    221   padding: 0.4rem 0.8rem;
    222   border: 0.0625rem solid var(--border);
    223   background: var(--bg);
    224   color: var(--text);
    225   cursor: pointer;
    226 }
    227 
    228 button:hover {
    229   background: var(--border);
    230 }
    231 
    232 button:active {
    233   transform: translateY(0.125rem);
    234 }
    235 
    236 button:focus-visible {
    237   outline: 2px solid var(--link);
    238   outline-offset: 2px;
    239 }
    240 
    241 code {
    242   font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    243   background: var(--bg-secondary);
    244   padding: 0.2em;
    245   border: 0.0625rem solid var(--border);
    246   font-size: 0.9em;
    247 }
    248 
    249 pre {
    250   background: var(--bg);
    251   position: relative;
    252   margin: 1em 0em;
    253 
    254   font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    255   border: 0.0625rem solid var(--border);
    256   padding: 1rem;
    257 
    258   overflow-x: auto;
    259   resize: vertical;
    260   white-space: pre;
    261   word-break: break-word;
    262 
    263   font-size: 0.9em;
    264   max-height: 32em;
    265 
    266   border: 0.0625rem solid var(--border);
    267 
    268   cursor: pointer;
    269 }
    270 
    271 pre::before {
    272   content: attr(data-lang);
    273   position: absolute;
    274   top: 0.3em;
    275   right: 0.6em;
    276 
    277   font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    278   font-size: 0.85em;
    279 
    280   padding: 0.1em 0.4em;
    281 
    282   background: var(--bg);
    283   border: 0.0625rem solid var(--border);
    284 }
    285 
    286 pre:hover::before {
    287   content: "COPY";
    288   border-bottom: 0.0625rem solid var(--text);
    289 }
    290 
    291 pre[data-copied="true"]::before {
    292   content: "COPIED";
    293   border: 0.125rem solid var(--link);
    294 }
    295 
    296 details {
    297   display: inline-block;
    298 }
    299 
    300 details summary {
    301   color: var(--link);
    302   text-decoration: underline dotted;
    303   list-style: none;
    304 
    305   text-decoration-thickness: 2px;
    306   text-decoration-color: color-mix(in srgb, currentcolor 50%, transparent);
    307   cursor: help;
    308 }
    309 
    310 abbr[title] {
    311   text-decoration: underline dotted;
    312   text-decoration-thickness: 2px;
    313   text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
    314   cursor: help;
    315 }
    316 
    317 aside.left {
    318   position: absolute;
    319   box-sizing: border-box;
    320   left: calc(50% - 60ch - 2.5em);
    321   padding-right: 2ch;
    322   transform: translateY(calc(-50% - 0.9em));
    323   width: 20ch;
    324   border-right: 0.0625rem solid var(--border);
    325 }
    326 
    327 aside.right {
    328   position: absolute;
    329   box-sizing: border-box;
    330   right: calc(50% - 60ch - 2.5em);
    331   padding-left: 2ch;
    332   transform: translateY(calc(-50% - 0.9em));
    333   width: 20ch;
    334   border-left: 0.0625rem solid var(--border);
    335 }
    336 
    337 aside.right::before {
    338   content: "";
    339   position: absolute;
    340   top: 50%;
    341   left: -4.5ch;
    342   width: 4.5ch;
    343   height: 0.0625rem;
    344   background: var(--border);
    345 }
    346 
    347 aside.left::after {
    348   content: "";
    349   position: absolute;
    350   top: 50%;
    351   left: 100%;
    352   width: 4.5ch;
    353   height: 0.0625rem;
    354   background: var(--border);
    355 }
    356 
    357 @media (max-width: 134ch) {
    358   aside {
    359     position: static;
    360     left: auto;
    361     transform: none;
    362 
    363     width: auto;
    364 
    365     margin: 1em 0.4em;
    366     padding: 0.15em 0.8em;
    367 
    368     border: none;
    369     border-left: 0.3em solid var(--border);
    370   }
    371 
    372   aside::after {
    373     display: none;
    374   }
    375 }
    376 
    377 .callout {
    378   position: relative;
    379 
    380   margin: 1em 0.4em;
    381   padding: 1em 0.8em;
    382 
    383   background: var(--callout-bg);
    384   border: 0.0625rem solid var(--callout-accent);
    385 }
    386 
    387 .callout::before {
    388   content: var(--callout-label);
    389   position: absolute;
    390   top: -0.6em;
    391   left: 0.6em;
    392 
    393   font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    394   font-size: 0.75em;
    395 
    396   padding: 0 0.4em;
    397 
    398   background: var(--bg);
    399   color: var(--callout-accent);
    400   border: 0.0625rem solid var(--callout-accent);
    401 }
    402 
    403 .callout.note {
    404   --callout-label: "![NOTE]";
    405   --callout-accent: #3b82f6;
    406   --callout-bg: color-mix(in srgb, var(--callout-accent) 10%, transparent);
    407 }
    408 
    409 .callout.important {
    410   --callout-label: "![IMPORTANT]";
    411   --callout-accent: #facc15;
    412   --callout-bg: color-mix(in srgb, var(--callout-accent) 10%, transparent);
    413 }
    414 
    415 body {
    416   position: relative;
    417   background: var(--bg);
    418   color: var(--text);
    419   font-family: "FreeSans", "Liberation Sans", Arial, sans-serif;
    420   font-size: 12pt;
    421   line-height: 1.5;
    422   margin: 1rem auto 0;
    423   width: clamp(40ch, 100%, 80ch);
    424   box-sizing: border-box;
    425   padding: 2.5rem;
    426   border: 0.0625rem solid var(--border);
    427 
    428   transition:
    429     background var(--transition-fast),
    430     color var(--transition-fast),
    431     border-color var(--transition-fast);
    432 }
    433 
    434 
    435 a {
    436   color: var(--link);
    437   text-decoration: none;
    438 }
    439 
    440 a.div {
    441   all: unset;
    442   cursor: pointer;
    443 }
    444 
    445 a.tile {
    446   all: unset;
    447   cursor: pointer;
    448   margin: 0 0.5em 0.5em 0;
    449   display: inline-block;
    450   width: 100%;
    451 
    452   fieldset {
    453     position: relative; 
    454     padding: 0.9em;
    455 
    456     span {
    457       position: absolute; 
    458       top: 0.5em; 
    459       color: var(--border);
    460     }
    461     div {
    462       position: absolute; 
    463       top: 0.5em; 
    464       right: 2ch; 
    465       color: var(--border);
    466       fill: var(--border);
    467     }
    468     h2 {
    469       margin-top: 1em;
    470     }
    471   }
    472 }
    473 
    474 a.tile:hover {
    475   margin-left: 0.3em;
    476 }
    477 
    478 
    479 nav {
    480   display: grid;
    481   grid-template-columns: 1fr auto 1fr;
    482   align-items: center;
    483 }
    484 
    485 .nav-left {
    486   justify-self: start;
    487   display: flex;
    488   align-items: center;
    489   gap: 1ch;
    490   flex-wrap: wrap;
    491 }
    492 
    493 .nav-center {
    494   justify-self: center;
    495 }
    496 
    497 .nav-right {
    498   justify-self: end;
    499 
    500   display: flex;
    501   align-items: center;
    502   gap: 1ch;
    503 }
    504 
    505 /* toggle */
    506 .toggle {
    507   display: none;
    508 }
    509 
    510 .btn {
    511   width: 1em;
    512   height: 1em;
    513   display: inline-block;
    514   position: relative;
    515   cursor: pointer;
    516   vertical-align: -0.15em;
    517 
    518   margin-left: auto;
    519 }
    520 
    521 .btn svg {
    522   position: absolute;
    523   inset: 0;
    524   width: 100%;
    525   height: 100%;
    526   transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
    527 }
    528 
    529 /* default = system light assumed */
    530 .sun {
    531   opacity: 1;
    532 }
    533 
    534 .moon {
    535   fill: currentColor;
    536   opacity: 0;
    537   transform: rotate(90deg) scale(0.75);
    538 }
    539 
    540 /* toggle flips theme */
    541 body:has(#theme-toggle:checked) .sun {
    542   opacity: 0;
    543   transform: rotate(-90deg) scale(0.75);
    544 }
    545 
    546 body:has(#theme-toggle:checked) .moon {
    547   opacity: 1;
    548   transform: rotate(0deg) scale(1);
    549 }