Set up dark mode styles

AramZS · Sep 27, 2021 · ccb0049 · ccb0049
1 parent 68c225b
commit ccb0049
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 0 deletions.
diff --git a/src/_sass/_index.sass b/src/_sass/_index.sass
@@ -3,3 +3,5 @@
 @use 'syntax-highlighting'
 
 @use 'user'
+
+@use 'dark-mode'
diff --git a/src/_sass/_variables.sass b/src/_sass/_variables.sass
@@ -1 +1,2 @@
 $mobile-width: 890px
+$large-mobile: 960px
diff --git a/src/_sass/template-index.sass b/src/_sass/template-index.sass
@@ -6,6 +6,10 @@
         a
             text-decoration: none
             color: #bdbdbd
+        @media (prefers-color-scheme: dark)
+            color: #424242
+            a
+                color: #424242
     .front-container
         display: grid
         grid-template-columns: repeat(auto-fill, minmax(270px, 1fr))

diff --git a/src/_sass/template-post.sass b/src/_sass/template-post.sass
@@ -43,3 +43,6 @@
             &:first-of-type::before
                 margin: 0
                 margin-right: 3px
+@media (prefers-color-scheme: dark)
+    #taglist ul li
+        font-size: 11px
diff --git a/src/posts/projects/devblog/hello-day-24.md b/src/posts/projects/devblog/hello-day-24.md
@@ -134,6 +134,8 @@ I'll try a blank page.
 
 Still nothing. Maybe I'm crazy, but unless the rendering engine is broken by HTML comments, something at the rendering engine level is broken.
 
+Let's google this and read some Github issues.
+
 Ok... [this is some eleventy stuff apparently. It just doesn't work as anticipated](https://github.com/11ty/eleventy/issues/834#issuecomment-569474008). I guess it is just rendering everything in the `content` tag.
 
 Yup, that is what it is... the warning there isn't very clear but yup, can't mix and match. So no njk templates that use blocks in the base site, anywhere I want to have Nunjuck inherence I'll need to use a markdown file in my site folder and manage the actual templates using `_layouts`.