From dc02a8df97181c31df3141e8b65d3f9ed151fa29 Mon Sep 17 00:00:00 2001 From: Michael Zhang Date: Tue, 11 Feb 2020 21:21:15 -0600 Subject: [PATCH] add dark mode --- sass/_content.scss | 54 ++++++++++++++++++++++++++++++++++++ sass/main.scss | 64 ++++++++++--------------------------------- templates/layout.html | 4 ++- 3 files changed, 71 insertions(+), 51 deletions(-) create mode 100644 sass/_content.scss diff --git a/sass/_content.scss b/sass/_content.scss new file mode 100644 index 0000000..bdc8d70 --- /dev/null +++ b/sass/_content.scss @@ -0,0 +1,54 @@ +body { + max-width: 850px; + margin: auto; + min-height: 100%; + padding-bottom: 20px; + font-family: $sansfont; + + background-color: $background-color; + color: $text-color; +} + +header { + margin: auto 12px; + + #header { + border-bottom: 2px solid $link-color; + box-sizing: border-box; + padding: 20px; + margin-bottom: 12px; + + #title { + font-size: 2em; + color: $text-color; + + &:hover { + text-decoration: none; + } + } + } +} + +a { + color: $link-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + + &.permalink { + color: lighten($link-color, 25%); + font-size: 0.65em; + } +} + +#content { + line-height: 1.25em; +} + +pre { + padding: 5px; + overflow-x: auto; + font-family: $monofont; +} diff --git a/sass/main.scss b/sass/main.scss index f4167c8..5b18899 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -1,56 +1,20 @@ -@import "syntax.scss"; +@import "syntax"; +$sansfont: "Helvetica", "Arial", "Liberation Sans", sans-serif; $monofont: "Roboto Mono", "Roboto Mono for Powerline", "Inconsolata", "Consolas", monospace; -html { - background-color: lightskyblue; +// colors + +@media (prefers-color-scheme: light) { + $background-color: #EADFD4; + $text-color: #15202B; + $link-color: royalblue; + @import "content"; } -body { - max-width: 850px; - margin: auto; - background-color: white; - min-height: 100%; - padding-bottom: 20px; - font-family: sans-serif; -} - -#header { - border-bottom: 4px solid lightskyblue; - box-sizing: border-box; - padding: 20px; - margin-bottom: 12px; - - #title { - font-size: 2em; - color: black; - - &:hover { - text-decoration: none; - } - } -} - -a { - color: royalblue; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - - &.permalink { - color: lighten(royalblue, 25%); - font-size: 0.65em; - } -} - -#content { - line-height: 1.25em; -} - -pre { - padding: 5px; - overflow-x: auto; - font-family: $monofont; +@media (prefers-color-scheme: dark) { + $background-color: #15202B; + $text-color: #EADFD4; + $link-color: lightskyblue; + @import "content"; } diff --git a/templates/layout.html b/templates/layout.html index 0913155..278c8e0 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -3,9 +3,11 @@ + + + {% block title %}{% endblock %} -