From 7c3dfcbc97d36fd1fda4491b0b637380e4577eb6 Mon Sep 17 00:00:00 2001
From: Travis Fischer <fisch0920@gmail.com>
Date: Fri, 5 Feb 2021 23:20:12 -0500
Subject: [PATCH] feat: add backdrop filter to fixed header

---
 package.json      |  2 +-
 styles/notion.css | 11 +++++++++++
 yarn.lock         |  8 ++++----
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 9d53d1a..fac8794 100644
--- a/package.json
+++ b/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"
   },
diff --git a/styles/notion.css b/styles/notion.css
index 349db23..4e4ba79 100644
--- a/styles/notion.css
+++ b/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);
+}
diff --git a/yarn.lock b/yarn.lock
index 2dc9cc5..7cd96a4 100644
--- a/yarn.lock
+++ b/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"