feat: add blur effect (#274)

* feat: add blur effect fixes #273 * style: format * chore: npm update
schmelto · Sep 27, 2023 · 788a19e · 788a19e
1 parent 278458a
commit 788a19e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 27 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -35,8 +35,10 @@ h3 {
 }
 
 .navbar {
-    background-color: rgba(248, 249, 250, 0.9);
-  }
+  background-color: rgba(248, 249, 250, 0.7);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
 
 .navbar-nav {
   margin-left: auto;
@@ -421,8 +423,10 @@ a.nav-link:hover {
     color: #fff;
   }
   .navbar {
-    background-color: rgba(48, 49, 52, 0.9);
-}
+    background-color: rgba(48, 49, 52, 0.7);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+  }
   .timeline .event:after {
     background: #202124;
   }

diff --git a/package-lock.json b/package-lock.json