From 0c5f903223e49b0d178ca8b4cb958a1ac310f461 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 26 Aug 2020 21:04:34 +0200
Subject: [PATCH] feat: :lipstick: minor UI adjustments

---
 src/components/Header.vue | 6 +-----
 src/components/Navbar.vue | 5 ++---
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 1547760..5873cc3 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -3,7 +3,7 @@
     <div class="nsfw-bar">
       <div class="nsfw-bar__content">
         <div>
-          This Page contains materials considered NSFW. Do you wish to see such
+          This page contains materials considered NSFW. Do you wish to see such
           content?
         </div>
         <nsfw-switch />
@@ -61,10 +61,6 @@ export default {
 <style lang="scss">
 @import "@scss/_variables.scss";
 
-header {
-  background-color: $bg-color-dark;
-}
-
 .header {
   max-width: 40em;
   margin: 1em auto;
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index f4285cc..def5338 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -69,6 +69,8 @@ export default {
 
 .nav {
   &--fixed .nav__list {
+    backdrop-filter: blur(1em);
+    background-color: rgba($bg-color-dark, 0.5);
     position: fixed;
     top: 0;
     left: 0;
@@ -77,14 +79,11 @@ export default {
 }
 
 .nav__list {
-  background-color: $bg-color-light;
-
   margin: 0;
   padding: 0;
 
   list-style-type: none;
 
-  // box-shadow: 0em 0.75em 1.25em -1em #444;
   z-index: 1;
 
   overflow: auto;