From f75befae8a88da8a473fa6662ab944f58bf4350f Mon Sep 17 00:00:00 2001
From: Gayathri625 <gyarrabothula@google.com>
Date: Mon, 29 Jul 2024 22:18:47 +0530
Subject: [PATCH] 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
---
 assets/scss/_grpc.scss              | 19 ++++++++++++++++---
 assets/scss/_variables_project.scss |  2 ++
 layouts/shortcodes/page/header.html |  6 +++---
 themes/docsy                        |  2 +-
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/assets/scss/_grpc.scss b/assets/scss/_grpc.scss
index 595c665..0874536 100644
--- a/assets/scss/_grpc.scss
+++ b/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,10 +234,10 @@ 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;
@@ -240,6 +245,14 @@ c - Component (Aware of its content/context...)
   & 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 {
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index 9e8c4f4..91dafe9 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -17,3 +17,5 @@ $display4-weight: $_font-weight-light;
 $link-color: #379c9c;
 
 $enable-rounded: false;
+
+$navbar-z-index: 32;
diff --git a/layouts/shortcodes/page/header.html b/layouts/shortcodes/page/header.html
index 2d579e8..a1f8733 100644
--- a/layouts/shortcodes/page/header.html
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/themes/docsy b/themes/docsy
index 5480532..ba20af1 160000
--- a/themes/docsy
+++ b/themes/docsy
@@ -1 +1 @@
-Subproject commit 5480532e98b64b10a6a10dcf0098fda00be68719
+Subproject commit ba20af1c9044e3ad8d83ead5153b243c88539038