#151, move SCSS vars to CSS vars, implement dark and light modes by browser preference

1 files changed, 11 insertions, 10 deletions

diff --git a/assets/_markdown.scss b/assets/_markdown.scss
index 009473d..e71de43 100644
--- a/assets/_markdown.scss
+++ b/assets/_markdown.scss
@@ -21,12 +21,13 @@
 
     a.anchor {
       opacity: 0;
-      font-size: .75em;
+      font-size: 0.75em;
       vertical-align: middle;
       text-decoration: none;
     }
 
-    &:hover a.anchor, a.anchor:focus {
+    &:hover a.anchor,
+    a.anchor:focus {
       opacity: initial;
     }
   }
@@ -58,7 +59,7 @@
       text-decoration: underline;
     }
     &:visited {
-      color: $color-visited-link;
+      color: var(--color-visited-link);
     }
   }
 
@@ -68,14 +69,14 @@
 
   code {
     padding: 0 $padding-4;
-    background: $gray-200;
+    background: var(--gray-200);
     border-radius: $border-radius;
     font-size: 0.875em;
   }
 
   pre {
     padding: $padding-16;
-    background: $gray-100;
+    background: var(--gray-100);
     border-radius: $border-radius;
     overflow-x: auto;
 
@@ -89,7 +90,7 @@
     margin: $padding-16 0;
     padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
 
-    border-inline-start: $padding-4 solid $gray-200;
+    border-inline-start: $padding-4 solid var(--gray-200);
     border-radius: $border-radius;
 
     :first-child {
@@ -111,18 +112,18 @@
     tr th,
     tr td {
       padding: $padding-8 $padding-16;
-      border: $padding-1 solid $gray-200;
+      border: $padding-1 solid var(--gray-200);
     }
 
     tr:nth-child(2n) {
-      background: $gray-100;
+      background: var(--gray-100);
     }
   }
 
   hr {
     height: $padding-1;
     border: none;
-    background: $gray-200;
+    background: var(--gray-200);
   }
 
   ul,
@@ -156,7 +157,7 @@
 
   details {
     padding: $padding-16;
-    border: $padding-1 solid $gray-200;
+    border: $padding-1 solid var(--gray-200);
     border-radius: $border-radius;
 
     summary {