Merge pull request #127 from cherryblossom000/minima-update-fixes

fix dark mode colours
tgdwyer · Sep 4, 2024 · 54c4bb6 · 54c4bb6
2 parents 9c52b58 + 8fd6650
commit 54c4bb6
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 22 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -18,21 +18,21 @@
             </span>
             </label>
 
-            <div class="trigger">
-            {%- for path in page_paths -%}
-                {%- assign my_page = site.pages | where: "path", path | first -%}
-                {%- if my_page.title -%}
-                <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
-                {%- endif -%}
-            {%- endfor -%}
-            <!-- Radio Switch -->
-            <div id="toggle-div" style="display: none;">
-                <p class="page-link" style="margin-bottom: 0px;">Show Solutions?</p>
-                <label class="switch" style="vertical-align: middle;">
-                    <input type="checkbox" id="toggle-switch">
-                    <span class="slider round"></span>
-                </label>
-            </div>
+            <div id="nav-menu" class="trigger">
+                {%- for path in page_paths -%}
+                    {%- assign my_page = site.pages | where: "path", path | first -%}
+                    {%- if my_page.title -%}
+                    <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
+                    {%- endif -%}
+                {%- endfor -%}
+                <!-- Radio Switch -->
+                <div id="toggle-div" style="display: none;">
+                    <p class="page-link" style="margin-bottom: 0px;">Show Solutions?</p>
+                    <label class="switch" style="vertical-align: middle;">
+                        <input type="checkbox" id="toggle-switch">
+                        <span class="slider round"></span>
+                    </label>
+                </div>
             </div>
         </nav>
         {%- endif -%}

diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss
@@ -1,13 +1,13 @@
-.cheatsheet {
-  background-color: #e8e8e8;
-  padding: 8px 12px;
-}
-
-.glossary {
+.cheatsheet, .glossary {
   background-color: #f3f0f0;
   padding: 8px 12px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .cheatsheet, .glossary {
+    background-color: #333;
+  }
+}
 
 .post-header {
   &, h1 {
@@ -37,7 +37,7 @@
   margin-left: -120px;
 
   padding: 10px;
-  background: #fff;
+  background: var(--minima-background-color);
   border: 1px solid #ccc;
   box-shadow: 0 0 10px rgba(0,0,0,0.1);
   z-index: 1000;
@@ -49,6 +49,12 @@
   font: 400 16px / 1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
+@media (prefers-color-scheme: dark) {
+  .glossary-popup {
+    border-color: #444;
+  }
+}
+
 
 #pagination {
   width: 100%;
@@ -144,6 +150,11 @@ input:checked + .slider:before {
   z-index: 1;
 }
 
+
+#nav-menu {
+  display: flex;
+}
+
 .site-nav .trigger {
   display: flex;
   align-items: center;
@@ -180,3 +191,23 @@ input:checked + .slider:before {
   background-color: #aaa;
   border: 1px solid #999;
 }
+
+@media (prefers-color-scheme: dark) {
+  .spoiler, .spoiler * {
+    color: #333;
+  }
+
+  .spoiler {
+    color: white;
+    background-color: #333;
+  }
+
+  .spoiler[data-revealed], .spoiler[data-revealed] * {
+    background-color: #333;
+  }
+
+  .spoiler[data-revealed] code {
+    background-color: #222;
+    border-color: #111;
+  }
+}