« get me outta code hell

page color "bleeds" into backdrop; remove blur fx - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
diff options
context:
space:
mode:
author(quasar) nebula <towerofnix@gmail.com>2021-05-13 20:33:41 -0300
committer(quasar) nebula <towerofnix@gmail.com>2021-05-13 20:33:41 -0300
commit16bea3a53372692ebf4b47e59123e0e11f2f8db2 (patch)
tree1a8ca4907852e6e7958a16d0105e9834f539b221
parent99d1e39d8a63b2b7007ebaa2cc387663d2117d0f (diff)
page color "bleeds" into backdrop; remove blur fx
-rw-r--r--src/static/site.css3
-rwxr-xr-xsrc/upd8.js2
-rw-r--r--src/util/colors.js6
3 files changed, 6 insertions, 5 deletions
diff --git a/src/static/site.css b/src/static/site.css
index c964c51..b71f0cd 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 279b005..b220bbf 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 1df591b..01c5502 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);