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 %}
-