2 files changed, 37 insertions, 23 deletions
diff --git a/src/_header.html b/src/_header.html
index d0dc361..8247608 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-        <title></title>
-        <link rel="icon" type="image/x-icon" href="images/favicon.ico">
-        <link rel="stylesheet" href="styles/style.css">
-    </head>
-    <body>
-        <header>
-            <a href="/" class="homepage-link">adast.xyz</a>
-        </header>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title></title>
+    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
+    <link rel="stylesheet" href="styles/style.css">
+</head>
+
+<body>
+    <header>
+        <a href="/" class="homepage-link">adast.xyz</a>
+    </header>
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);
 }