hugo-soresu

commit 77ccd4c76d20ea9855d78d8e464c864133505051
parent ec754dc90420d59a94f363f212156b82531b23c3
Author: Shimmy Xu <shimmy.xu@shimmy1996.com>
Date:   Tue,  3 Jul 2018 11:20:20 -0500

Parameterize color palette.

Diffstat:
M
layouts/partials/css/style.css
 | 
38
++++++++++++++++++++++++--------------

1 file changed, 24 insertions(+), 14 deletions(-)
diff --git a/layouts/partials/css/style.css b/layouts/partials/css/style.css
@@ -1,6 +1,16 @@
+:root {
+    --accent-color: #700000;
+    --background-color: #fff;
+    --code-background-color: #f9f9f9;
+    --stress-1-color: #eee;
+    --stress-2-color: #ddd;
+    --stress-3-color: #ccc;
+    --text-color: #000;
+}
+
 body {
-    color: #000;
-    background: #fff;
+    color: var(--text-color);
+    background: var(--background-color);
     max-width: 800px;
     margin: auto;
     padding: 1em;
@@ -15,7 +25,7 @@ body {
     display: inline-block;
 }
 .article-meta, .menu a {
-    background: #eee;
+    background: var(--stress-1-color);
     padding: 5px;
     border-radius: 5px;
 }
@@ -31,32 +41,32 @@ header time {
     font-weight: bold;
 }
 hr {
-    border: 1px dashed #ddd;
+    border: 1px dashed var(--stress-2-color);
 }
 .subtitle {
-    color: #700000;
+    color: var(--accent-color);
     font-style: italic;
 }
 a {
     text-decoration:none;
-    color: #700000;
+    color: var(--accent-color);
 }
 /* code */
 pre {
-    border: 1px solid #ddd;
+    border: 1px solid var(--stress-2-color);
     padding: 1em;
     border-radius: 5px;
     overflow-x: auto;
 }
 code {
-    background: #f0f0f0;
+    background: var(--code-background-color);
 }
 pre code {
     background: none;
 }
 kbd {
-    color: #fff;
-    background: #700000;
+    color: var(--background-color);
+    background: var(--accent-color);
     padding: 3px;
     border-radius: 3px;
 }
@@ -68,13 +78,13 @@ main {
     hyphens: auto;
 }
 blockquote {
-    background: #eee;
-    border-left: 5px solid #ccc;
+    background: var(--stress-1-color);
+    border-left: 5px solid var(--stress-3-color);
     border-radius: 5px;
     padding: 3px 1em 3px;
 }
 table {
-    background: #eee;
+    background: var(--stress-1-color);
     border-radius: 5px;
     border-collapse: collapse;
     margin: auto;
@@ -84,5 +94,5 @@ th, td {
     padding: 5px;
 }
 thead, tfoot, tr:nth-child(even) {
-    background: #ccc;
+    background: var(--stress-3-color);
 }