feat(ui): improve the design for top bar

Author: cotes2020

_sass/addon/commons.scss

@@ -423,7 +423,7 @@ i {
 
 .post {
   h1 {
-    margin-top: 3rem;
+    margin-top: 2rem;
     margin-bottom: 1.5rem;
   }
 
@@ -966,12 +966,23 @@ $btn-mb: 0.5rem;
   right: 0;
   transition: top 0.2s ease-in-out;
   z-index: 50;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-  background-color: var(--topbar-wrapper-bg);
+  background-color: var(--topbar-bg);
 
   [data-topbar-visible='false'] & {
     top: -$topbar-height; /* same as topbar height. */
   }
+
+  &::before {
+    $blur: 12px;
+
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: $topbar-height;
+    z-index: -1;
+    -webkit-backdrop-filter: blur($blur);
+    backdrop-filter: blur($blur);
+  }
 }
 
 #topbar {
@@ -1010,7 +1021,7 @@ $btn-mb: 0.5rem;
   width: 100%;
   border-radius: 1rem;
   border: 1px solid var(--search-wrapper-border-color);
-  background: var(--search-wrapper-bg);
+  background: var(--main-bg);
   padding: 0 0.5rem;
 
   i {
@@ -1039,7 +1050,6 @@ $btn-mb: 0.5rem;
 
   &:focus {
     box-shadow: none;
-    background: center;
 
     &.form-control {
       &::-moz-placeholder {
@@ -1430,7 +1440,7 @@ $btn-mb: 0.5rem;
     display: none;
 
     ~ .post-content {
-      margin-top: 3rem;
+      margin-top: 2.5rem;
     }
   }
 } /* max-width: 849px */
@@ -1479,6 +1489,12 @@ $btn-mb: 0.5rem;
     max-width: $main-content-max-width;
   }
 
+  .post {
+    h1 {
+      margin-top: 3rem;
+    }
+  }
+
   div.post-content .table-wrapper > table {
     min-width: 70%;
   }

_sass/colors/dark-typography.scss

@@ -43,10 +43,9 @@
   --avatar-border-color: rgb(206, 206, 206, 0.9);
 
   /* Topbar */
+  --topbar-bg: rgb(27, 27, 30, 0.64);
   --topbar-text-color: var(--text-color);
-  --topbar-wrapper-bg: rgb(39, 40, 43);
-  --search-wrapper-bg: rgb(34, 34, 39);
-  --search-wrapper-border-color: rgb(34, 34, 39);
+  --search-wrapper-border-color: rgb(55, 55, 55);
   --search-icon-color: rgb(100, 102, 105);
   --input-focus-border-color: rgb(112, 114, 115);
 

_sass/colors/light-typography.scss

@@ -45,13 +45,12 @@
   --avatar-border-color: white;
 
   /* Topbar */
+  --topbar-bg: rgb(255, 255, 255, 0.7);
   --topbar-text-color: rgb(78, 78, 78);
-  --topbar-wrapper-bg: white;
-  --search-wrapper-bg: rgb(245, 245, 245, 0.5);
-  --search-wrapper-border-color: rgb(245, 245, 245);
+  --search-wrapper-border-color: rgb(240, 240, 240);
   --search-tag-bg: #f8f9fa;
   --search-icon-color: #c2c6cc;
-  --input-focus-border-color: var(--btn-border-color);
+  --input-focus-border-color: #b8b8b8;
 
   /* Home page */
   --post-list-text-color: dimgray;

_sass/layout/home.scss

@@ -3,7 +3,7 @@
 */
 
 #post-list {
-  margin-top: 1.75rem;
+  margin-top: 2rem;
 
   a.card-wrapper {
     display: block;