css: Introduce variables for various colours

Currently, colours are set per element. In preparation of the support of
prefers-color-scheme, use variables instead so they can be modified in
one place.

1 files changed, 12 insertions, 7 deletions

diff --git a/scss/style.scss b/scss/style.scss
index 84b88f1..2e7df1f 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -8,16 +8,21 @@
 
 	--font-size-pre: 85%;
 
+	--fg-color: black;
 	--fg-color-canary: #191900;
 	--fg-color-mute: #5a5a5a;
 
+	--bg-color: white;
 	--bg-color-canary: #ffffc3;
 	--bg-color-yellow: #ffd400;
+
+	--border-color-light: lightgrey;
+	--border-color-dark: darkgrey;
 }
 
 body {
-	background-color: white;
-	color: black;
+	background-color: var(--bg-color);
+	color: var(--fg-color);
 	line-height: 1.3;
 
 	max-width: 1024px;
@@ -38,7 +43,7 @@ body.frontpage {
 
 	hr {
 		border: none;
-		border-top: 3px double darkgrey;
+		border-top: 3px double var(--border-color-dark);
 	}
 }
 
@@ -61,13 +66,13 @@ pre {
 }
 
 pre.clear {
-	background-color: white;
+	background-color: var(--bg-color);
 }
 
 pre.indent {
 	font-size: var(--font-size-pre);
 
-	border-left: 4px solid lightgrey;
+	border-left: 4px solid var(--border-color-light);
 
 	margin-left: 1.5rem;
 	padding-left: 1.5rem;
@@ -111,7 +116,7 @@ nav li > article {
 
 header.post {
 	font-size: 1.5rem;
-	border-bottom: 1px solid darkgrey;
+	border-bottom: 1px solid var(--border-color-dark);
 
 	a {
 		font-weight: bold;
@@ -135,7 +140,7 @@ section.post {
 
 	hr {
 		border: none;
-		border-top: 3px double darkgrey;
+		border-top: 3px double var(--border-color-dark);
 	}
 
 	ul { list-style: square; }