diff --git a/app.js b/app.js index 54ebd43..5e7118e 100644 --- a/app.js +++ b/app.js @@ -671,7 +671,7 @@ const size = 14 + (p * 24); // start at edges, creep inward const darkness = 0.3 + (p * 0.55); const vignette = 0.35 + (p * 0.35); - const blur = 3 + (p * 5); + const blur = 0 + (p * 2); const glow = 0.08 + (p * 0.92); overlay.style.opacity = opacity; overlay.style.setProperty('--circle-size', `${size}%`); @@ -687,7 +687,7 @@ overlay.style.opacity = 0; overlay.style.setProperty('--circle-size', '12%'); overlay.style.setProperty('--circle-strength', '0.25'); - overlay.style.setProperty('--circle-blur', '3px'); + overlay.style.setProperty('--circle-blur', '0px'); overlay.style.setProperty('--vignette-strength', '0.35'); document.documentElement.style.setProperty('--focus-glow', '0'); saveData(); diff --git a/style.css b/style.css index df730a3..6c89e00 100644 --- a/style.css +++ b/style.css @@ -127,17 +127,17 @@ z-index: 120; --circle-size: 12%; --circle-strength: 0.25; - --circle-blur: 3px; + --circle-blur: 0px; --vignette-strength: 0.35; background: - radial-gradient(circle at 0% 12%, rgba(0,0,0,var(--circle-strength)) 0%, transparent var(--circle-size)), - radial-gradient(circle at 100% 12%, rgba(0,0,0,var(--circle-strength)) 0%, transparent var(--circle-size)), - radial-gradient(circle at 0% 88%, rgba(0,0,0,var(--circle-strength)) 0%, transparent var(--circle-size)), - radial-gradient(circle at 100% 88%, rgba(0,0,0,var(--circle-strength)) 0%, transparent var(--circle-size)), - radial-gradient(circle at 0% 50%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) 0%, transparent var(--circle-size)), - radial-gradient(circle at 100% 50%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) 0%, transparent var(--circle-size)), - radial-gradient(circle at 50% 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) 0%, transparent var(--circle-size)), - radial-gradient(circle at 50% 100%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) 0%, transparent var(--circle-size)), + radial-gradient(circle at 0% 12%, rgba(0,0,0,var(--circle-strength)) 0%, rgba(0,0,0,var(--circle-strength)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)), + radial-gradient(circle at 100% 12%, rgba(0,0,0,var(--circle-strength)) 0%, rgba(0,0,0,var(--circle-strength)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)), + radial-gradient(circle at 0% 88%, rgba(0,0,0,var(--circle-strength)) 0%, rgba(0,0,0,var(--circle-strength)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)), + radial-gradient(circle at 100% 88%, rgba(0,0,0,var(--circle-strength)) 0%, rgba(0,0,0,var(--circle-strength)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)), + radial-gradient(circle at 0% 50%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)), + radial-gradient(circle at 100% 50%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)), + radial-gradient(circle at 50% 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)), + radial-gradient(circle at 50% 100%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)), radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,var(--vignette-strength)) 78%, rgba(0,0,0,calc(var(--vignette-strength) * 1.2)) 100%); opacity: 0; filter: blur(var(--circle-blur));