grpc
/
grpc.io
mirror of https://github.com/grpc/grpc.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Gayathri625 2024-07-29 22:18:47 +05:30 committed by GitHub
parent 63ad8717c2
commit f75befae8a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/scss/_grpc.scss
View File

@ -44,6 +44,11 @@ sections site wide to the original site's background svg.
display: none; 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 // This adds rounded corners to the search inputs, since a Docsy
// flag affecting these and other elements has been disabled. // flag affecting these and other elements has been disabled.
.td-search-input { .td-search-input {
@ -229,10 +234,10 @@ c - Component (Aware of its content/context...)
// Object // Object
.o-banner { .o-banner {
width: 100%; width: 100%;
position: fixed; position: relative;
margin-left: -15px;
padding-top: 15px; 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; top: 4rem;
background: $light; background: $light;
text-align: center; text-align: center;
@ -240,6 +245,14 @@ c - Component (Aware of its content/context...)
& p { & p {
padding: 0.5rem; 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 { .o-icon {

2
assets/scss/_variables_project.scss
View File

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

4
layouts/shortcodes/page/header.html
View File

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

2
themes/docsy

@ -1 +1 @@
Subproject commit 5480532e98b64b10a6a10dcf0098fda00be68719 Subproject commit ba20af1c9044e3ad8d83ead5153b243c88539038