2023-05-19 14:05:58 +02:00
|
|
|
:root, html.Light {
|
2023-05-18 17:31:16 +02:00
|
|
|
--nav-height: 3rem;
|
|
|
|
|
--standard-border: 0.0625rem solid var(--tertiary-background-color);
|
|
|
|
|
--background-color: hsl(0 0% 100%);
|
|
|
|
|
--secondary-background-color: hsl(0 0% 95%);
|
|
|
|
|
--tertiary-background-color: hsl(0 0% 90%);
|
|
|
|
|
--text-color: hsl(0 0% 10%);
|
|
|
|
|
--accent-color: #1e40af;
|
2023-05-18 20:20:43 +02:00
|
|
|
color-scheme: light;
|
2023-05-18 17:31:16 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
|
:root {
|
|
|
|
|
--background-color: hsl(0 0% 10%);
|
|
|
|
|
--secondary-background-color: hsl(0 0% 15%);
|
|
|
|
|
--tertiary-background-color: hsl(0 0% 20%);
|
|
|
|
|
--text-color: hsl(0 0% 90%);
|
|
|
|
|
--accent-color: #93c5fd;
|
|
|
|
|
color-scheme: dark;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-18 20:20:43 +02:00
|
|
|
html.Dark {
|
|
|
|
|
--background-color: hsl(0 0% 10%);
|
|
|
|
|
--secondary-background-color: hsl(0 0% 15%);
|
|
|
|
|
--tertiary-background-color: hsl(0 0% 20%);
|
|
|
|
|
--text-color: hsl(0 0% 90%);
|
|
|
|
|
--accent-color: #93c5fd;
|
|
|
|
|
color-scheme: dark;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-18 17:31:16 +02:00
|
|
|
html {
|
|
|
|
|
scroll-behavior: smooth;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-family: "Roboto", sans-serif;
|
|
|
|
|
background-color: var(--background-color);
|
|
|
|
|
color: var(--text-color);
|
2023-05-20 21:44:02 +02:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
min-block-size: 100vh;
|
2023-05-18 17:31:16 +02:00
|
|
|
}
|
|
|
|
|
|
2023-05-18 22:17:46 +02:00
|
|
|
nav,
|
|
|
|
|
header,
|
|
|
|
|
main,
|
|
|
|
|
footer {
|
2023-05-18 17:31:16 +02:00
|
|
|
padding-inline: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-20 21:44:02 +02:00
|
|
|
main {
|
|
|
|
|
margin-block-end: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-18 17:31:16 +02:00
|
|
|
.container {
|
|
|
|
|
max-inline-size: 65ch;
|
|
|
|
|
margin-inline: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-18 22:17:46 +02:00
|
|
|
h1,
|
|
|
|
|
h2,
|
|
|
|
|
h3,
|
|
|
|
|
h4,
|
|
|
|
|
h5,
|
|
|
|
|
h6 {
|
2023-05-18 17:31:16 +02:00
|
|
|
scroll-margin-block-start: var(--nav-height);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
display: block;
|
|
|
|
|
max-inline-size: 100%;
|
|
|
|
|
block-size: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-18 22:17:46 +02:00
|
|
|
.icon {
|
2023-05-18 17:31:16 +02:00
|
|
|
inline-size: 1.5rem;
|
|
|
|
|
block-size: 1.5rem;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
display: block;
|
|
|
|
|
max-inline-size: 100%;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-18 22:17:46 +02:00
|
|
|
td,
|
|
|
|
|
th {
|
2023-05-18 17:31:16 +02:00
|
|
|
border: var(--standard-border);
|
|
|
|
|
padding-inline: 0.5rem;
|
|
|
|
|
padding-block: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pre {
|
|
|
|
|
padding: 1rem;
|
2023-05-19 13:58:58 +02:00
|
|
|
background-color: hsl(0 0% 15%) !important;
|
|
|
|
|
border: var(--standard-border);
|
2023-05-18 17:31:16 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
code {
|
|
|
|
|
font-family: "JetBrains Mono", monospace;
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.heading-linker {
|
|
|
|
|
color: inherit;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.heading-linker::before {
|
|
|
|
|
content: "#";
|
|
|
|
|
color: var(--accent-color);
|
|
|
|
|
margin-inline-end: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
font: inherit;
|
|
|
|
|
padding-inline: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-18 22:17:46 +02:00
|
|
|
summary,
|
|
|
|
|
button {
|
2023-05-18 17:31:16 +02:00
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-18 22:17:46 +02:00
|
|
|
ul,
|
|
|
|
|
ol {
|
2023-05-18 17:31:16 +02:00
|
|
|
line-height: 2;
|
2023-05-19 14:05:58 +02:00
|
|
|
padding-inline-start: 1rem;
|
2023-05-18 17:31:16 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
color: var(--accent-color);
|
|
|
|
|
}
|
2023-05-20 21:44:02 +02:00
|
|
|
|
|
|
|
|
blockquote {
|
|
|
|
|
margin-inline-start: 0;
|
|
|
|
|
padding-inline-start: 1rem;
|
|
|
|
|
border-inline-start: var(--standard-border);
|
|
|
|
|
}
|