css: Use CSS custom properties instead of Sass variables

In preparation for the support of prefers-color-scheme, convert all
presently used Sass variables to CSS custom properties. This will enable
us in an upcoming commit to define different values per media query.

While at it, use a better name for variables holding colours.

1 files changed, 20 insertions, 17 deletions

diff --git a/scss/style.scss b/scss/style.scss
index ff443b9..29c7226 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -1,16 +1,19 @@
 @import '_webfonts';
 @import '_responsive_fonts';
 
-$font-sans: Alegreya Sans, sans;
-$font-serif: Alegreya, serif;
-$font-mono: Iosevka, Inconsolata, monospace;
+:root {
+	--font-sans: Alegreya Sans, sans;
+	--font-serif: Alegreya, serif;
+	--font-mono: Iosevka, Inconsolata, monospace;
 
-$font-size-pre: 85%;
+	--font-size-pre: 85%;
 
-$yellow: #ffd400;
-$canary: #ffffc3;
-$canary-text: #191900;
-$mute-text: #5a5a5a;
+	--fg-color-canary: #191900;
+	--fg-color-mute: #5a5a5a;
+
+	--bg-color-canary: #ffffc3;
+	--bg-color-yellow: #ffd400;
+}
 
 body {
 	background-color: white;
@@ -21,7 +24,7 @@ body {
 	margin: 1rem auto;
 	padding: 0 1rem;
 
-	font-family: $font-sans;
+	font-family: var(--font-sans);
 	font-size: 1.3rem;
 }
 
@@ -46,13 +49,13 @@ h1 {
 }
 
 code {
-	font-family: $font-mono;
-	font-size: $font-size-pre;
+	font-family: var(--font-mono);
+	font-size: var(--font-size-pre);
 }
 
 pre {
-	background-color: $canary;
-	color: $canary-text;
+	background-color: var(--bg-color-canary);
+	color: var(--fg-color-canary);
 	overflow: auto;
 	padding: .7rem;
 }
@@ -62,7 +65,7 @@ pre.clear {
 }
 
 pre.indent {
-	font-size: $font-size-pre;
+	font-size: var(--font-size-pre);
 
 	border-left: 4px solid lightgrey;
 
@@ -71,7 +74,7 @@ pre.indent {
 }
 
 blockquote {
-	background-color: $canary;
+	background-color: var(--bg-color-canary);
 	padding: .7rem;
 }
 
@@ -100,7 +103,7 @@ nav li > article {
 		display: flex;
 
 		font-size: 60%;
-		color: $mute-text;
+		color: var(--fg-color-mute);
 	}
 
 	a { align-self: flex-start; }
@@ -152,7 +155,7 @@ section.post {
 
 	figure {
 		figcaption {
-			color: $mute-text;
+			color: var(--fg-color-mute);
 			text-align: center;
 			font-size: smaller;