Set fixed position of banner and navbar element during page scrolling (…

…#376) * Set fixed position of banner and navbar element during page scrolling * Fill nav bar element left/right space to viewport width * Fix the size of the top margin of the list details page so that the top of the page is properly visible
OSGeo · Jul 14, 2023 · 62a9a9b · 62a9a9b
1 parent 8fe87f6
commit 62a9a9b
Show file tree

Hide file tree

Showing 29 changed files with 262 additions and 149 deletions.
diff --git a/themes/grass/assets/css/style.css b/themes/grass/assets/css/style.css
@@ -801,7 +801,7 @@ ul {
   margin: 0 0 20px 20px;
 }
 ul li a {
-  display: inline-block; 
+  display: inline-block;
   font-size: 15px;
   font-weight: 400;
   padding: 2px 0px;
@@ -980,7 +980,7 @@ li.parent a {
     background: #F6F6F6;
   }
 
-  
+
   .timeline .panel {
     position: relative;
     margin: 10px 0px 0px 40px;
@@ -1090,7 +1090,7 @@ li.parent a {
     display:block;
 }
 
-.timeline .glyphicon.glyphicon-one-fine-dot:before {   
+.timeline .glyphicon.glyphicon-one-fine-dot:before {
   content: "\25cf";
   font-size: 1.5em;
   color: #0039a6;
@@ -1189,7 +1189,7 @@ nobullets {
    list-style-type: none;
 }
 
-  /* 
+  /*
 
 .hljs {
    background:#c5c8c6;
@@ -1272,6 +1272,9 @@ code{
     margin-left:-59px;
     z-index:1;
 }
+.mt-95 {
+    margin-top: 95px;
+}
 
 
 @media (max-width: 576px) {
@@ -1296,7 +1299,7 @@ code{
   font-size: 28px !important;
   }
   h2, .h2 {
-  font-size: 24px !important;    
+  font-size: 24px !important;
   }
   h3, .h3 {
   font-size: 22px !important;
@@ -1331,7 +1334,7 @@ code{
     padding-top: 20px;
     padding-bottom: 20px;
    }
-  
+
   .section-title {
     margin-bottom: 32px;
     font-size: 22px !important;
@@ -1345,7 +1348,7 @@ code{
   }
 
   #links li span a {
-    font-size: 15px !important;      
+    font-size: 15px !important;
   }
   .entry-meta {
     font-size: 14px !important;

diff --git a/themes/grass/layouts/_default/list.html b/themes/grass/layouts/_default/list.html
@@ -1,10 +1,14 @@
 {{ partial "head.html" . }}
-{{ partial "banner.html" . }}
 
 {{ "<!-- navigation -->" | safeHTML }}
 <header class="shadow-bottom position-relative">
-  <div class="container">
-    {{ partial "navigation.html" . }}
+  <div class="fixed-top">
+    {{ partial "banner.html" . }}
+    <div class="bg-white">
+      <div class="container bg-white">
+        {{ partial "navigation.html" . }}
+      </div>
+    </div>
   </div>
 </header>
   {{ "<!-- /navigation -->" | safeHTML }}
@@ -22,7 +26,7 @@ <h1 class="mb-4 wht">{{ .Section }}</h1>
 <!-- /page title -->
 
 <!-- details page -->
-<section class="single section bg-gray pb-0">
+<section class="single section bg-gray pb-0 mt-5">
   <div class="container">
     <div class="row">
       <div class="col-lg-3">

diff --git a/themes/grass/layouts/_default/single.html b/themes/grass/layouts/_default/single.html
@@ -2,15 +2,19 @@
 
 {{ "<!-- navigation -->" | safeHTML }}
 <header class="shadow-bottom position-relative">
-  <div class="container">
-    {{ partial "navigation.html" . }}
+  <div class="fixed-top">
+    <div class="bg-white">
+      <div class="container bg-white">
+        {{ partial "navigation.html" . }}
+      </div>
+    </div>
   </div>
 </header>
 {{ "<!-- /navigation -->" | safeHTML }}
 
 
 <!-- details page -->
-<section class="single pt-5 bg-gray">
+<section class="single pt-5 bg-gray mt-5">
   <div class="container">
     <div class="row">
       <div class="col-lg-4">
@@ -23,7 +27,7 @@
                 {{- end -}}
               </ul>
             </nav>
-    
+
             {{define "menu"}}
             {{- $currentNode := .currentnode -}}
             {{ with .sect }}
@@ -72,11 +76,11 @@ <h2 class="page-title">{{ .Title }}</h2>
             <a class="nav nav-next" href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}<i class="fa fa-arrow-right  ml-2"></i></a>
             {{- end }}
             </nav>
-    
+
             {{- define "pagination" -}}
             {{- $currentNode := .currentnode -}}
             {{- $menu_exclusion := .menu_exclusion -}}
-    
+
             {{- if hasPrefix $currentNode.Permalink .menu.Permalink -}}
               {{- $currentNode.Scratch.Set "NextPageOK" "OK" -}}
               {{- if .menu.IsHome -}}
@@ -93,7 +97,7 @@ <h2 class="page-title">{{ .Title }}</h2>
                 {{- end -}}
               {{- end -}}
             {{- end -}}
-    
+
             {{- $currentNode.Scratch.Set "prevPageTmp" .menu -}}
             {{- $currentNode.Scratch.Set "pages" .menu.Pages -}}
             {{- if .menu.IsHome -}}

diff --git a/themes/grass/layouts/about/brand.html b/themes/grass/layouts/about/brand.html
@@ -1,18 +1,22 @@
 {{ partial "head.html" . }}
-{{ partial "banner.html" . }}
 
 
 {{ "<!-- navigation -->" | safeHTML }}
 <header class="shadow-bottom position-relative">
-  <div class="container">
-    {{ partial "navigation.html" . }}
+  <div class="fixed-top">
+    {{ partial "banner.html" . }}
+    <div class="bg-white">
+      <div class="container bg-white">
+        {{ partial "navigation.html" . }}
+      </div>
+    </div>
   </div>
 </header>
 {{ "<!-- /navigation -->" | safeHTML }}
 
 
 <!-- details page -->
-<section class="single section bg-gray pb-0">
+<section class="single section bg-gray pb-0 mt-5">
   <div class="container">
     <div class="row">
       <div class="col-lg-12">

diff --git a/themes/grass/layouts/about/community.html b/themes/grass/layouts/about/community.html
@@ -1,19 +1,23 @@
 {{ partial "head.html" . }}
-{{ partial "banner.html" . }}
 
 
 {{ "<!-- navigation -->" | safeHTML }}
 <header class="shadow-bottom position-relative">
-  <div class="container">
-    {{ partial "navigation.html" . }}
+  <div class="fixed-top">
+    {{ partial "banner.html" . }}
+    <div class="bg-white">
+      <div class="container bg-white">
+        {{ partial "navigation.html" . }}
+      </div>
+    </div>
   </div>
 </header>
 {{ "<!-- /navigation -->" | safeHTML }}
 
 
 
 <!-- details page -->
-<section class="single section bg-gray pb-0">
+<section class="single section bg-gray pb-0 mt-5">
   <div class="container">
     <div class="row">
       <div class="col-lg-8">
@@ -28,7 +32,7 @@ <h2 class="page-title">Welcome !</h2>
 	<img src="/images/gallery/community/2017_grass-devteam_paris.jpg" alt="GRASS GIS dev team">
 	<label class="nm"><small><i>Some of the GRASS dev team members</i></small></label>
 	</figure>
-      <div class="mt-20">	
+      <div class="mt-20">
 	{{ partial "wiki.html" . }}
       <div class="mt-30">
 	{{ partial "osgeo.html" . }}

diff --git a/themes/grass/layouts/about/credits.html b/themes/grass/layouts/about/credits.html
@@ -1,19 +1,23 @@
 {{ partial "head.html" . }}
-{{ partial "banner.html" . }}
 
 
 {{ "<!-- navigation -->" | safeHTML }}
 <header class="shadow-bottom position-relative">
-  <div class="container">
-    {{ partial "navigation.html" . }}
+  <div class="fixed-top">
+    {{ partial "banner.html" . }}
+    <div class="bg-white">
+      <div class="container bg-white">
+        {{ partial "navigation.html" . }}
+      </div>
+    </div>
   </div>
-</header>
+/header>
 {{ "<!-- /navigation -->" | safeHTML }}
 
 
 
 <!-- details page -->
-<section class="single section bg-gray pb-0">
+<section class="single section bg-gray pb-0 mt-5">
   <div class="container">
     <div class="row">
       <div class="col-lg-8">

diff --git a/themes/grass/layouts/about/general.html b/themes/grass/layouts/about/general.html
@@ -1,20 +1,24 @@
 {{ partial "head.html" . }}
-{{ partial "banner.html" . }}
 
 
 {{ "<!-- navigation -->" | safeHTML }}
 <header class="shadow-bottom position-relative">
-  <div class="container">
-    {{ partial "navigation.html" . }}
+  <div class="fixed-top">
+    {{ partial "banner.html" . }}
+    <div class="bg-white">
+      <div class="container bg-white">
+        {{ partial "navigation.html" . }}
+      </div>
+    </div>
   </div>
-</header>
+/header>
 {{ "<!-- /navigation -->" | safeHTML }}
 
 
 
 
 <!-- details page -->
-<section class="single section bg-gray pb-0">
+<section class="single section bg-gray pb-0 mt-5">
   <div class="container">
     <div class="row">
       <div class="col-lg-12">

diff --git a/themes/grass/layouts/about/list.html b/themes/grass/layouts/about/list.html
@@ -1,17 +1,21 @@
 {{ partial "head.html" . }}
-{{ partial "banner.html" . }}
 
 {{ "<!-- navigation -->" | safeHTML }}
 <header class="shadow-bottom position-relative">
-  <div class="container">
-    {{ partial "navigation.html" . }}
+  <div class="fixed-top">
+    {{ partial "banner.html" . }}
+    <div class="bg-white">
+      <div class="container bg-white">
+        {{ partial "navigation.html" . }}
+      </div>
+    </div>
   </div>
 </header>
 {{ "<!-- /navigation -->" | safeHTML }}
 
 
     <section>
-      <section class="pt-4 bg-gray">
+      <section class="pt-4 bg-gray mt-95">
         <div class="container">
           <div class="row">
             <div class="col-12 text-center">
@@ -24,7 +28,7 @@ <h2 class="section-title">About GRASS GIS</h2>
             <div class="col-12 bg-white mb-4">
               The Geographic Resources Analysis Support System (<a href="https://grass.osgeo.org/" target="_blank">https://grass.osgeo.org/</a>),
               commonly referred to as GRASS GIS, is an Open Source Geographic Information System providing powerful raster, vector and geospatial
-              processing capabilities. It can be used either as a stand-alone application or as backend for other software packages such as 
+              processing capabilities. It can be used either as a stand-alone application or as backend for other software packages such as
               <a href="https://qgis.org" target="_blank">QGIS</a> and <a href="https://www.r-project.org/" target="_blank">R</a>
               or in the cloud. It is distributed freely under the terms of the GNU General Public License (GPL).
               GRASS GIS is a founding member of the Open Source Geospatial Foundation (<a href="https://www.osgeo.org" target="_blank">OSGeo</a>).
@@ -34,7 +38,7 @@ <h2 class="section-title">About GRASS GIS</h2>
         <div class="container">
           <div class="row">
             <div class="col-lg-12">
-	      {{ range where .Pages "File.Dir" "in" "/about/" }}   
+	      {{ range where .Pages "File.Dir" "in" "/about/" }}
               <div class="section bg-white mb-4">
                 <div class="row nm">
                   <div class="col-1 text-center"><i class="fa fa-file-text-o fa-3x grey-color-light"></i></div>
@@ -43,7 +47,7 @@ <h3 class="mt-2 mb-2"><a href="{{.File.TranslationBaseName}}">{{ .Title }}</a></
                   </div>
                 </div>
 		</div>
-	       {{ end }}  
+	       {{ end }}
             </div>
           </div>
         </div>

diff --git a/themes/grass/layouts/about/theme.html b/themes/grass/layouts/about/theme.html
@@ -2,17 +2,20 @@
 
 {{ "<!-- navigation -->" | safeHTML }}
 <header class="shadow-bottom position-relative">
-  <div class="container">
-    {{ partial "navigation.html" . }}
-  </div>
+  <div class="fixed-top">
+    <div class="bg-white">
+      <div class="container bg-white">
+        {{ partial "navigation.html" . }}
+      </div>
+    </div>
 </header>
 {{ "<!-- /navigation -->" | safeHTML }}
 
-    
+
  <section class="elements pt-5 bg-gray">
  <div class="container">
     <div class="row">
- 
+
       <div class="col-lg-12">
       <div class="p-5 bg-white">
 	      {{ .Content }}

diff --git a/themes/grass/layouts/about/timeline.html b/themes/grass/layouts/about/timeline.html
@@ -3,17 +3,19 @@
 
 {{ "<!-- navigation -->" | safeHTML }}
 <header class="shadow-bottom position-relative">
-  <div class="container">
-    {{ partial "navigation.html" . }}
+  <div class="fixed-top">
+    <div class="bg-white">
+      <div class="container bg-white">
+        {{ partial "navigation.html" . }}
+      </div>
+    </div>
   </div>
 </header>
 {{ "<!-- /navigation -->" | safeHTML }}
 
 
-
-
 <!-- details page -->
-<section class="single section bg-gray pb-0">
+<section class="single section bg-gray pb-0 mt-5">
   <div class="container">
     <div class="row">
       <div class="col-lg-8 col-sm-12">