css: colour variables

1 files changed, 24 insertions, 12 deletions

diff --git a/src/styles/style.css b/src/styles/style.css
index b20fd70..c5f9a89 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,6 +1,18 @@
+:root {
+  --bg: #181a1b;
+  --bg-light: #222; 
+  --fg: #ddd; 
+  --gray: #888; 
+  --gray-light: #555; 
+  --yellow: #fda; 
+  --yellow-dark: #ca8; 
+  --yellow-warm: #e6c79a;
+  --wine: #c65a5a
+}
+
 body {
-    background-color: #181a1b;
-    color: #ddd;
+    background-color: var(--bg);
+    color: var(--fg);
     font: 1em/1.8 'Open Sans', sans-serif;
     margin: 0 auto;
     max-width: 50em;
@@ -10,7 +22,7 @@ body {
 header {
     margin-top: 1em;
     font-size: 2em;
-    color: #888;
+    color: var(--gray);
 }
 
 footer {
@@ -18,17 +30,17 @@ footer {
     margin-bottom: 1.5em;
     text-align: center;
     font-size: 0.95em;
-    color: #888;
+    color: var(--gray);
 }
 
 a {
-    color: #fda;
+    color: var(--yellow);
     text-decoration: none;
 }
 
 a:hover {
     text-decoration: underline;
-    text-decoration-color: #ca8;
+    text-decoration-color: var(--yellow-dark);
 }
 
 pre > code {
@@ -41,8 +53,8 @@ pre > code {
 pre, code {
     font-family: 'Fira Code', monospace;
     font-size: 0.98em;
-    color: #ddd;
-    background-color: #222;
+    color: var(--fg);
+    background-color: var(--bg-light);
     border-radius: 5px;
 }
 
@@ -62,14 +74,14 @@ img {
 }
 
 blockquote {
-    background-color: #222;
-    border-left: 5px solid #e6c79a;
+    background-color: var(--bg-light);
+    border-left: 5px solid var(--yellow-warm);
     border-radius: 5px;
     margin: 0em 1em;
     padding-left: 1em;
 }
 
 .homepage-link { 
-    color: rgb(198, 90, 90);
-    text-decoration-color: #555;
+    color: var(--wine);
+    text-decoration-color: var(--gray-light);
 }