page color "bleeds" into backdrop; remove blur fx

3 files changed, 6 insertions, 5 deletions

diff --git a/src/static/site.css b/src/static/site.css
index c964c512..b71f0cd5 100644
--- a/src/static/site.css
+++ b/src/static/site.css
@@ -29,8 +29,7 @@ body::before {
 }
 
 #page-container {
-    background-color: rgba(35, 35, 35, 0.80);
-    backdrop-filter: blur(4px);
+    background-color: var(--bg-color, rgba(35, 35, 35, 0.80));
     color: #ffffff;
 
     max-width: 1100px;
diff --git a/src/upd8.js b/src/upd8.js
index 279b0053..b220bbf4 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -157,7 +157,7 @@ import {
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-const CACHEBUST = 5;
+const CACHEBUST = 6;
 
 const WIKI_INFO_FILE = 'wiki-info.txt';
 const HOMEPAGE_INFO_FILE = 'homepage.txt';
diff --git a/src/util/colors.js b/src/util/colors.js
index 1df591bf..01c55024 100644
--- a/src/util/colors.js
+++ b/src/util/colors.js
@@ -15,8 +15,9 @@ export function getColors(primary) {
         .map(val => parseInt(val, 16) / 255);
     const [ h, s, l ] = rgb2hsl(r, g, b);
     const dim = `hsl(${Math.round(h)}deg, ${Math.round(s * 50)}%, ${Math.round(l * 80)}%)`;
+    const bg = `hsla(${Math.round(h)}deg, ${Math.round(s * 15)}%, 12%, 0.80)`;
 
-    return {primary, dim};
+    return {primary, dim, bg};
 }
 
 export function getLinkThemeString(color) {
@@ -29,11 +30,12 @@ export function getLinkThemeString(color) {
 export function getThemeString(color, additionalVariables = []) {
     if (!color) return '';
 
-    const { primary, dim } = getColors(color);
+    const { primary, dim, bg } = getColors(color);
 
     const variables = [
         `--primary-color: ${primary}`,
         `--dim-color: ${dim}`,
+        `--bg-color: ${bg}`,
         ...additionalVariables
     ].filter(Boolean);