171 lines
2.5 KiB
CSS
171 lines
2.5 KiB
CSS
/* colors */
|
|
:root {
|
|
--base: #1e1e2e;
|
|
--text: #cdd6f4;
|
|
--crust: #11111b;
|
|
--surface0: #313244;
|
|
--subtext0: #a6adc8;
|
|
--subtext1: #bac2de;
|
|
--pink: #f5c2e7;
|
|
--rosewater: #f5e0dc;
|
|
--blue: #89b4fa;
|
|
--mauve: #cba6f7;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--base: #eff1f5;
|
|
--text: #4c4f69;
|
|
--crust: #dce0e8;
|
|
--surface0: #ccd0da;
|
|
--subtext0: #6c6f85;
|
|
--subtext1: #5c5f77;
|
|
--pink: #ea76cb;
|
|
--rosewater: #dc8a78;
|
|
--blue: #1e66f5;
|
|
--mauve: #8839ef;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
font-family: "Hack", "Hack Nerd Font", "JetBrains Mono", "JetBrainsMono Nerd Font", monospace, sans-serif;
|
|
scrollbar-width: none;
|
|
|
|
background-color: var(--base);
|
|
color: var(--text);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
background-color: var(--base);
|
|
}
|
|
|
|
main {
|
|
padding: 1em;
|
|
|
|
background-color: var(--base);
|
|
}
|
|
|
|
body > main > h1:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--pink);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--rosewater);
|
|
}
|
|
|
|
a:active {
|
|
color: var(--blue);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--mauve);
|
|
}
|
|
|
|
progress {
|
|
width: 100%;
|
|
border: 2px solid;
|
|
|
|
border-color: var(--text);
|
|
background-color: var(--base);
|
|
color: var(--pink);
|
|
}
|
|
|
|
::-moz-progress-bar,
|
|
::-webkit-progress-bar {
|
|
background-color: var(--pink);
|
|
}
|
|
|
|
footer {
|
|
text-align: end;
|
|
font-size: small;
|
|
opacity: 50%;
|
|
}
|
|
|
|
code {
|
|
padding: 0.15em 0.4em;
|
|
|
|
background-color: var(--surface0);
|
|
color: var(--subtext1);
|
|
}
|
|
|
|
legend {
|
|
font-weight: 900;
|
|
}
|
|
|
|
summary:hover,
|
|
summary:active,
|
|
details[open] > summary {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
summary::after {
|
|
content: " (click to expand)";
|
|
opacity: 50%;
|
|
font-size: smaller;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
details[open] > summary::after {
|
|
content: " (click to collapse)";
|
|
}
|
|
|
|
div.buttons > a {
|
|
font-size: 0;
|
|
& > img {
|
|
image-rendering: crisp-edges;
|
|
image-rendering: pixelated;
|
|
object-fit: contain;
|
|
width: 88px;
|
|
height: 31px;
|
|
}
|
|
}
|
|
|
|
td:nth-child(1) {
|
|
font-weight: bold;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
td:nth-child(2) {
|
|
padding-left: 0.5em;
|
|
word-break: break-all;
|
|
}
|
|
|
|
@media (min-width: 956px) {
|
|
:root {
|
|
--target-ratio: 0.7; /* 669px - 1344x */
|
|
--width: min(100% * var(--target-ratio), 1920px * var(--target-ratio));
|
|
--padding: 4em;
|
|
--padded-width: calc(var(--width) - var(--padding) * 2);
|
|
}
|
|
|
|
body {
|
|
padding: 4em 0;
|
|
|
|
background: var(--crust);
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--base) 0%,
|
|
var(--crust) calc((100% - var(--width)) / 2),
|
|
var(--crust) calc(50% + var(--width) / 2),
|
|
var(--base) 100%
|
|
);
|
|
}
|
|
|
|
body > * {
|
|
margin: auto;
|
|
padding: var(--padding);
|
|
width: var(--padded-width);
|
|
}
|
|
|
|
body > footer {
|
|
padding: initial;
|
|
width: var(--width);
|
|
}
|
|
}
|