feat: add backdrop filter to fixed header

package.json

@@ -46,7 +46,7 @@
     "react-body-classname": "^1.3.1",
     "react-dom": "17.0.1",
     "react-icons": "^4.1.0",
-    "react-notion-x": "^4.2.13",
+    "react-notion-x": "^4.2.14",
     "react-use": "^15.3.3",
     "use-dark-mode": "^2.3.1"
   },

styles/notion.css

@@ -9,6 +9,7 @@
 
 .notion {
   --notion-max-width: 720px;
+  --notion-header-height: 54px;
 }
 
 .notion-page {
@@ -317,3 +318,13 @@
   border-radius: 50%;
   box-shadow: 0 8px 40px 0 rgb(0 0 0 / 21%);
 }
+
+.notion-header {
+  background: hsla(0, 0%, 100%, 0.8);
+  backdrop-filter: saturate(180%) blur(5px);
+}
+
+.dark-mode .notion-header {
+  background: transparent;
+  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+}

yarn.lock

@@ -4110,10 +4110,10 @@ react-modal@^3.11.2:
     react-lifecycles-compat "^3.0.0"
     warning "^4.0.3"
 
-react-notion-x@^4.2.13:
-  version "4.2.13"
-  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-4.2.13.tgz#fe98f5b640f4229f79c787539fd9d940f46cf0c9"
-  integrity sha512-GAsHpgPv1H4sfkxvWD33J9hd7eqFXE+8GVQEDldHu+Mj3yCR39hH6+zHlprQHBfCmG3f1CteiTToVs3ZbMgT8A==
+react-notion-x@^4.2.14:
+  version "4.2.14"
+  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-4.2.14.tgz#0c03170de55eef3918fe4f9c5b8a23f6fb1dd3ff"
+  integrity sha512-MxHI08qj9HfjnLmvLHG19ZfpUora6ZznLGZWD245OxTSJyuWc/ScI1ELjJU7V+kxKdfLnTLwuAN2i5eltgILXQ==
   dependencies:
     "@matejmazur/react-katex" "^3.1.3"
     date-fns "^2.15.0"