System dark theme and darkened post overlay (#4)

Co-authored-by: Locness <37651007+locness3@users.noreply.github.com>
locness3 · Mar 4, 2020 · fabe7df · fabe7df
1 parent 55c2ece
commit fabe7df
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -45,7 +45,7 @@
         <h1>My stuff</h1>
       </div>
       {% for thing in site.stuff %}
-      <div class="post" style="background-image: url('{{ thing.image }}')">
+      <div class="post" style="background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('{{ thing.image }}')">
         <div class="post-overlay"></div>
         <h2 class="post-title">{{ thing.title }}</h2>
         {{ thing.excerpt }}

diff --git a/style.css b/style.css
@@ -34,6 +34,16 @@ body.dark-theme {
   --main-color: #ffffff;
   --bg-color: #262626;
 }
+@media (prefers-color-scheme: dark) {
+  body {
+    --main-color: #ffffff;
+    --bg-color: #262626;
+  }
+
+  .night-mode-toggle {
+    display: none;
+  }
+}
 
 .site-header {
   -webkit-transition: -webkit-box-shadow 0.2s;