Modify banner styling (#1328)

* define variable for navbar z-index

* modify banner styling

* wrapper for banner

* override Docsy's navbar z-index

* add comment

* modify hero section padding values

* keep media queries applied

* Removed docsy submodule

* update docsy submodule

* adjust top for banner

* adjust the top values on for small screens

* make banner relative

* remove banner container

* correct indentation

* add comment for change

Author: Gayathri625

assets/scss/_grpc.scss

@@ -44,6 +44,11 @@ sections site wide to the original site's background svg.
   display: none;
 }
 
+// use variable for navbar z-index as banner z-index depends on it
+.td-navbar {
+  z-index: $navbar-z-index;
+}
+
 // This adds rounded corners to the search inputs, since a Docsy
 // flag affecting these and other elements has been disabled.
 .td-search-input {
@@ -229,17 +234,25 @@ c - Component (Aware of its content/context...)
 // Object
 .o-banner {
   width: 100%;
-  position: fixed;
-  margin-left: -15px;
+  position: relative;
   padding-top: 15px;
-  z-index: 32;
+  // keep banner's z-index value less than the navbar, so that banner moves beneath the navbar when user scrolls the page
+  z-index: $navbar-z-index - 1;
   top: 4rem;
   background: $light;
   text-align: center;
 
   & p {
     padding: 0.5rem;
   }
+  padding-bottom: 0.01rem;
+}
+
+// Ensure no empty space left when navbar changes it's position from fixed to relative on small screens
+@include media-breakpoint-down(sm){
+  .o-banner{
+    top: 0rem;
+  }
 }
 
 .o-icon {

assets/scss/_variables_project.scss

@@ -17,3 +17,5 @@ $display4-weight: $_font-weight-light;
 $link-color: #379c9c;
 
 $enable-rounded: false;
+
+$navbar-z-index: 32;

layouts/shortcodes/page/header.html

@@ -1,13 +1,13 @@
 {{ $title := $.Page.Params.title -}}
 {{ $desc  := $.Page.Params.description | markdownify -}}
 <div class="text-left">
-  <h1 class="display-1 mb-5">
+  <h1 class="display-1">
     {{- $title -}}
   </h1>
 
   {{- with $desc -}}
-  <h3 class="font-weight-light">
+  <h3 class="font-weight-light mt-5">
     {{- . -}}
   </h3>
   {{ end -}}
-</div>
+</div>