Improve Docs navbar

1 files changed, 64 insertions, 34 deletions

diff --git a/docs/src/docs.scss b/docs/src/docs.scss
index 6c53773..d6a1847 100644
--- a/docs/src/docs.scss
+++ b/docs/src/docs.scss
@@ -244,6 +244,7 @@
 
 .s-brand {
   color: $primary-color;
+  left: 0;
   padding: 0 1.5rem;
   position: fixed;
   top: 1.3rem;
@@ -260,27 +261,22 @@
     &:hover {
       text-decoration: none;
     }
-
+  
     img {
       display: inline;
       height: auto;
       width: 1.6rem;
     }
-
+  
     h2 {
       display: inline;
-      font-size: .8rem;  
+      font-size: .8rem;
+      font-weight: 500;
       margin-bottom: 0;
       margin-left: .5rem;
       margin-right: .5rem;
     }
   }
-
-  .float-btn {
-    position: fixed;
-    right: 4.5rem;
-    top: 1.5rem;
-  }
 }
 
 .s-footer {
@@ -295,10 +291,10 @@
 /* Spectre Homepage style */
 .section-hero {
   padding: 1rem .5rem;
-  position: relative;
 
   .s-brand {
     position: absolute;
+    top: .5rem;
 
     h2 {
       color: $primary-color;
@@ -340,8 +336,9 @@
 }
 
 .grid-hero {
-  margin-top: 6rem;
-  margin-bottom: 2rem;
+  padding-bottom: 2rem;
+  padding-top: 6rem;
+  position: relative;
 
   h1 {
     color: $body-font-color;
@@ -377,11 +374,29 @@
   }
 }
 
-.menu-btn,
 .docs-nav-clear {
   display: none;
 }
 
+.s-navbar {
+  height: 3.5rem;
+  left: 0;
+  padding: .75rem 1.5rem;
+  position: fixed;
+  text-align: center;
+
+  .s-logo,
+  .menu-btn {
+    display: none;
+  }
+
+  .float-btn {
+    position: fixed;
+    right: 4.5rem;
+    top: 1.5rem;
+  }
+}
+
 @media (max-width: 880px) {
   .s-sidebar {
     background: $bg-color;
@@ -404,31 +419,21 @@
       }
     }
 
-    .s-nav {
-      top: 1.5rem;
+    .menu .menu-item > a {
+      padding: .3rem .4rem;
     }
   }
 
-  .s-brand {
-    backdrop-filter: blur(10px); // Safari only feature
-    background: fade($bg-color, 80%);
-    height: 3.5rem;
-    left: 0;
-    padding: .75rem .5rem;
-    text-align: center;
-    top: 0;
+  .s-navbar {
+    backdrop-filter: blur(10px);
+    background: rgba($bg-color, .65);
     right: 0;
-    z-index: $zindex-3;
-
-    .s-logo {
-      h2 {
-        display: none;
-      }
-    }
+    top: 0;
+    z-index: $zindex-2;
 
     .menu-btn {
       display: block;
-      left: .65rem;
+      left: 2.6rem;
       position: fixed;
       top: .95rem;
 
@@ -437,8 +442,17 @@
       }
     }
 
+    .s-logo {
+      align-items: center;
+      border-radius: $border-radius;
+      display: inline-flex;
+      height: 2rem;
+      padding: .2rem;
+      width: auto;
+    }
+
     .float-btn {
-      right: 1rem;
+      right: 2.9rem;
       top: .95rem;
     }
   }
@@ -457,7 +471,7 @@
 
   .s-content {
     min-width: auto;
-    padding: 3.5rem 2.5rem 0 2.5rem;
+    padding: 0 2.5rem;
     width: 100%;
 
     .s-title,
@@ -466,7 +480,7 @@
       position: static;
 
       &::before {
-        display: none;
+        content: none;
       }
     }
   }
@@ -475,6 +489,8 @@
     .s-brand {
       height: 5rem;
       padding: 1.5rem .5rem;
+      text-align: center;
+      width: 100%;
 
       .s-logo {
         height: auto;
@@ -484,6 +500,10 @@
         height: 3.2rem;
         width: 3.2rem;
       }
+
+      h2 {
+        display: none;
+      }
     }
   }
 }
@@ -509,4 +529,14 @@
       display: none;
     }
   }
+
+  .s-navbar {
+    .menu-btn {
+      left: .65rem;
+    }
+
+    .float-btn {
+      right: 1rem;
+    }
+  }
 }
\ No newline at end of file