60 lines
1.5 KiB
SCSS
60 lines
1.5 KiB
SCSS
|
@import "fonts";
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--sansfont: "Inter", "Helvetica", "Arial", "Liberation Sans", sans-serif;
|
||
|
|
--monofont: "PragmataPro Mono Liga", "Roboto Mono", "Roboto Mono for Powerline", "Inconsolata",
|
||
|
|
"Consolas", monospace;
|
||
|
|
--breakpoint: 720px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
:root {
|
||
|
|
--background-color: white;
|
||
|
|
--faded-background-color: darken(var(--background-color), 10%);
|
||
|
|
--shadow-color: darken($background-color, 10%);
|
||
|
|
--heading-color: darken(royalblue, 10%);
|
||
|
|
--text-color: #15202b;
|
||
|
|
--small-text-color: #6e707f;
|
||
|
|
--smaller-text-color: lighten($text-color, 30%);
|
||
|
|
--faded: lightgray;
|
||
|
|
--hr-color: lightgray;
|
||
|
|
--link-color: royalblue;
|
||
|
|
--code-color: firebrick;
|
||
|
|
--tag-color: lighten($link-color, 35%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root {
|
||
|
|
--background-color: #202030;
|
||
|
|
--faded-background-color: lighten($background-color, 10%);
|
||
|
|
--shadow-color: lighten($background-color, 10%);
|
||
|
|
--heading-color: lighten(lightskyblue, 20%);
|
||
|
|
--text-color: #cdcdcd;
|
||
|
|
--small-text-color: darken($text-color, 8%);
|
||
|
|
--smaller-text-color: darken($text-color, 12%);
|
||
|
|
--faded: #666;
|
||
|
|
--hr-color: gray;
|
||
|
|
--link-color: lightskyblue;
|
||
|
|
--code-color: lighten(firebrick, 25%);
|
||
|
|
--tag-color: darken($link-color, 55%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: var(--background-color);
|
||
|
|
color: var(--text-color);
|
||
|
|
|
||
|
|
font-family: var(--sansfont);
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Layout
|
||
|
|
|
||
|
|
.flex-wrapper {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
height: 100%;
|
||
|
|
}
|