css - color theme vars SSOT

1 files changed, 29 insertions, 6 deletions

diff --git a/blog.node5.net/static/main.css b/blog.node5.net/static/main.css
index 4b65acb..ad9a192 100644
--- a/blog.node5.net/static/main.css
+++ b/blog.node5.net/static/main.css
@@ -1,3 +1,26 @@
+:root {
+    --main-color: #02e5e1;
+    --secondary-color: #0aee23;
+    --tertiary-color: #F40B36;
+    --quaternary-color: #FFBF00;
+}
+
+.main-color {
+    color: var(--main-color);
+}
+
+.secondary-color {
+    color: var(--secondary-color);
+}
+
+.tertiary-color {
+    color: var(--tertiary-color);
+}
+
+.quaternary-color {
+    color: var(--quaternary-color);
+}
+
 @font-face {
   font-family: "RobotoMono-Regular";
   src: url("RobotoMono-Regular.ttf");
@@ -28,7 +51,7 @@ body {
   font-family: "RobotoMono-Bold", monospace;
 	font-size: 3em;
 	margin: 0;
-	color: #02e5e1;
+	color: var(--main-color);
 }
 
 .grey {
@@ -44,11 +67,11 @@ body {
 }
 
 hr {
-	color: #02e5e1;
+	color: var(--main-color);
 }
 
 a:link {
-	color: #02e5e1;
+	color: var(--main-color);
 }
 
 a:visited {
@@ -56,16 +79,16 @@ a:visited {
 }
 
 h1 {
-	color: #0aee23;
+	color: var(--seconary-color);
 	margin: 0;
 }
 
 h2 {
-	color: #F40B36;
+	color: var(--tertiary-color);
 }
 
 h3 {
-	color: #FFBF00;
+	color: var(--quaternary-color);
 	margin: 0;
 }