From 6065f05950f11e0164d353f66a35b46ca7568eea Mon Sep 17 00:00:00 2001
From: tastytea <tastytea@tastytea.de>
Date: Sat, 14 Oct 2023 18:58:07 +0200
Subject: [PATCH] css: make vbariables for alternative colour variants

---
 assets/blog.css | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/assets/blog.css b/assets/blog.css
index 7a6d0f9..7de231a 100644
--- a/assets/blog.css
+++ b/assets/blog.css
@@ -38,6 +38,12 @@
     }
 }
 
+:root {
+    --bg-alt: color-mix(in srgb, var(--bg) 70%, var(--semitrans));
+    --fg-alt: color-mix(in srgb, var(--fg) 70%, var(--semitrans));
+    --link-alt: color-mix(in srgb, var(--link) 50%, var(--fg));
+}
+
 html {
     background-color: var(--bg);
     color: var(--fg);
@@ -82,7 +88,7 @@ a {
 }
 
 a:visited {
-    color: color-mix(in srgb, var(--link) 50%, var(--fg));
+    color: var(--link-alt);
 }
 
 a:hover, a:hover:visited {
@@ -176,7 +182,7 @@ div.admonitionblock td.icon {
 }
 
 div.admonitionblock table {
-    background-color: color-mix(in srgb, var(--bg) 70%, var(--semitrans));
+    background-color: var(--bg-alt);
 }
 
 div.note td.icon {
@@ -233,14 +239,14 @@ kbd {
     padding: 0.05em;
     background-color: var(--fg);
     color: var(--bg);
-    border: 0.15em inset color-mix(in srgb, var(--fg) 50%, var(--semitrans));
+    border: 0.15em inset var(--fg-alt);
     border-radius: 0.2em;
 }
 
 .button {
     display: inline-block;
     padding: 0 0.1em;
-    border: 0.15em outset color-mix(in srgb, var(--bg) 50%, var(--semitrans));
+    border: 0.15em outset var(--bg-alt);
     border-radius: 0.2em;
 }
 
@@ -271,7 +277,7 @@ kbd {
 .pagination {
     margin-top: 0.5em;
     font-family: sans-serif;
-    background-color: color-mix(in srgb, var(--bg) 70%, var(--semitrans));
+    background-color: var(--bg-alt);
     padding-left: 0.2em;
     border-top: 0.1em dotted var(--accent);
 }