michal-sapka-me

commit 9cace0982a14f4c8a83371c7edf2b2acfa3843cb
parent 03ab8024ac302847d0608c141dc1d306cc74d119
Author: Michał M. Sapka <michal@sapka.me>
Date:   Sat,  4 Mar 2023 00:33:33 +0100

chore: extract colors to vars

in preparation for dark mode

Diffstat:
M
static/style.css
 | 
34
+++++++++++++++++++++++++---------

1 file changed, 25 insertions(+), 9 deletions(-)
diff --git a/static/style.css b/static/style.css
@@ -1,10 +1,25 @@
-::root {
+:root {
     --menu-bg: #fff;
     --site-bg: #fff;
     --text-color: #000;
     --link-color: #000;
+    
+    --article-bg: ##fcfcfc;
+    --article-border-color: #f3f1f1;
+    --article-shadow-color: rgba(0,0,0,0.42);
+    
+    --h2-color: #000000;
+    
+    --blockquote-border-color:  #d2d2d2;
+    --blockquote-color: ##666666;
+    
+    --pre-bg: #f0f0f0;
 }
 
+@media (prefers-color-scheme: dark) {
+    :root  {
+    }
+}
 /* ----------- Entire site */
 body {
     font-family: 'helvetica';
@@ -77,7 +92,7 @@ h1 {
         height: 40px;
     }
 }
-
+p
 /* ----------- Main navigation */
 .left-column nav {
     margin-top: 30px;
@@ -148,11 +163,11 @@ main {
 article {
     margin-bottom: 20px;
     padding: 25px;
-    background-color: ##fcfcfc;
+    background-color: var(--article-bg);
     border-style: solid;
-    border-color: #f3f1f1;
+    border-color: var(--article-border-color);
     border-radius: 3px;
-    box-shadow: -1px 8px 35px -18px rgba(0,0,0,0.42);
+    box-shadow: -1px 8px 35px -18px var(--article-shadow-color);
     line-height: 1.32em;
 }
 article p {
@@ -171,24 +186,25 @@ h2 {
     text-align: left;
     padding: 0;
     margin: 0;
-    color: #000000;
+    color: var(--h2-color);
     font-size: 1.5em;
+    line-height: 35px;
 }
 blockquote {
     border: 0;
     border-left: 3px;
     border-style: solid;
-    border-color: #d2d2d2;
+    border-color: var(--blockquote-border-color);
     margin-left: 15px;
     padding-left: 15px;
-    color: #666666;
+    color: var(--blockquote-color);
 }
 pre {
     width: 93%;
     padding-bottom: 5px;
     white-space: pre-wrap;
     padding: 11px;
-    background-color: #f0f0f0;
+    background-color: var(--pre-bg);
     word-break: keep-all;
 }