From 2d8c6265184a8de3de9297295098440ba45369e7 Mon Sep 17 00:00:00 2001
From: Alexander Wang <zxcvb22217@gmail.com>
Date: Sat, 9 Jul 2022 19:25:41 +0800
Subject: [PATCH] fix: color inconsistency when blur effect is not supported

---
 themes/pure-ejs/assets/css/notablog.css | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/themes/pure-ejs/assets/css/notablog.css b/themes/pure-ejs/assets/css/notablog.css
index 3912b5b2..fb03ac14 100644
--- a/themes/pure-ejs/assets/css/notablog.css
+++ b/themes/pure-ejs/assets/css/notablog.css
@@ -1,5 +1,10 @@
+:root {
+  --bg: rgb(250, 250, 246);
+  --bg-blur: rgba(250, 250, 246, 0.4);
+}
+
 body {
-  background: rgb(250, 250, 246);
+  background: var(--bg);
 }
 
 /* Navbar */
@@ -16,7 +21,7 @@ body {
   height: 50px;
   padding: 10px 20px;
   /* Background blur stuff. */
-  background-color: rgba(250, 250, 246, 0.4);
+  background-color: var(--bg-blur);
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
   overflow-x: auto;
@@ -303,7 +308,7 @@ body {
 @supports (not (backdrop-filter: blur(20px))) and
   (not (-webkit-backdrop-filter: blur(20px))) {
   .Navbar {
-    background-color: white;
+    background-color: var(--bg);
   }
 }