@charset "UTF-8";
-$text-color: #222;
-$link-color: #0000ee;
-$visited-link-color: #551a8b;
+html {
+ --body-background: white;
+ --text-background: #fafaff;
+ --text-color: #222;
+ --light-text-color: lighten(#222, 20%);
+ --lighter-text-color: lighten(#222, 30%);
+ --link-color: #0000ee;
+ --visited-link-color: #551a8b;
+ --gray: gray;
+ --note-background: #fbf7c1;
+ --blockquote-background: #eeeefd;
+}
+
+@media (prefers-color-scheme: dark) {
+ html {
+ --body-background: black;
+ --text-background: #113;
+ --text-color: #eef;
+ --light-text-color: lighten(#eef, 20%);
+ --lighter-text-color: lighten(#eef2, 30%);
+ --link-color: #aaf;
+ --visited-link-color: #b767ff;
+ --gray: gray;
+ --note-background: #867f11;
+ --blockquote-background: #223;
+ }
+}
@import "opensans";
body {
font-family: "Open Sans", sans-serif;
- background: white;
- color: $text-color;
+ background: var(--body-background);
+ color: var(--text-color);
font-size: 100%;
}
a {
- color: $link-color;
+ color: var(--link-color);
text-decoration: none;
- border-bottom: 0.1em dotted $link-color;
+ border-bottom: 0.1em dotted var(--link-color);
&:visited {
- color: $visited-link-color;
- border-color: $visited-link-color;
+ color: var(--visited-link-color);
+ border-color: var(--visited-link-color);
}
&:hover {
border-bottom-style: solid;
text-transform: uppercase;
margin: 1em 0 0 1em;
padding: 0 0.5em;
- color: lighten($text-color, 20%);
- background: #fafaff;
+ color: var(--light-text-color);
+ background: var(--text-background);
display: inline-block;
a {
border: none;
main {
position: relative;
- background: #fafaff;
+ background: var(--text-background);
min-height: 70vh;
clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px);
}
.meta {
padding-top: 0.5rem;
padding-left: 0.5rem;
- color: lighten($text-color, 30%);
+ color: var(--lighter-text-color);
}
}
}
text-align: center;
margin: 1em 0;
img {
- border: 1px solid gray;
+ border: 1px solid var(--gray);
padding: 3px;
max-width: 90%;
max-height: 70vh;
}
div.meta {
margin-top: 3em;
- color: lighten($text-color, 30%);
+ color: var(--lighter-text-color);
}
div.note {
- background: #fbf7c1;;
+ background: var(--note-background);
padding: 0.2em 0.5em 0.2em 2em;
p {
margin: 0.5em 0;
}
}
blockquote {
- background: #eeeefd;
+ background: var(--blockquote-background);
padding: 0.1em 1em;
clip-path: polygon(0px 0px, 94.27% 2px, 99.63% 2.65%, 98.39% 97.48%, 10% 100%, 0% 100%, 0px 0px);
}
.older.post-list {
margin: 5em 0 2em 0;
padding: 1em 0;
- border-top: 0.1em dotted $link-color;
- border-bottom: 0.1em dotted $link-color;
+ border-top: 0.1em dotted var(--link-color);
+ border-bottom: 0.1em dotted var(--link-color);
line-height: 200%;
li {
display: inline;
}
div[contenteditable=true]:focus-within {
- outline: 1px solid gray;
+ outline: 1px solid var(--gray);
outline-offset: 3px;
}