portrait responsive with fixed bottom navbar

assets/css/index.css

@@ -1,14 +1,15 @@
-@media screen and (orientation: landscape) {
 .overlay {
-    z-index: 10;
+  background-color: rgba(0, 0, 0, 0.5); 
   opacity: 1;
+}
+
+@media screen and (orientation: landscape) {
+  .overlay {
     position: absolute;
     right: 10%; /* Extending full width */
-    bottom: 10%; 
+    top: 50%; 
     height: auto;
     width: 50%;
-    background-color: rgba(0, 0, 0, 0.5); 
-
   }
   #galerie {
     height: 100vh;
@@ -24,12 +25,14 @@
     .overlay {
         position: sticky;
         bottom: 0;
-        z-index: 100;
         width: 100vw;
         height: 100%;
-        background-color: rgba(0, 0, 0, 0.5); 
     }
     #galerie {
       height: 100%;
     }
+    .navbar {
+      display: flex;
+      position: relative;
+    }
   }

assets/css/style.css

@@ -42,6 +42,9 @@ p {
 @media screen and (orientation: portrait) {
   .navbar {
     display: flex;
+    position: fixed; 
+    bottom: 0%;
+    width: 100%;
   }
   .menu-column {
     display: none;

layouts/_default/baseof.html

@@ -18,9 +18,10 @@
 
             <!-- Contenu de la page -->
             <div class="column m-0 p-0" id="main-col">
+              <section class="hero is-fullheight">
               {{- block "content" . }}{{- end }}
               {{ if not .IsHome}}
-              <div class="is-flex is-flex-direction-column is-justify-content-flex-end" style="position: fixed; bottom: 0%; right: 2%;">
+              <div class="is-flex is-flex-direction-column is-justify-content-flex-end" style="position: fixed; bottom: 1%; right: 2%; z-index: 100;">
                 <a href="#" aria-label="Lien vers le haut de page" class="{{$bg}}" style="position: sticky; bottom: 0; border-radius: 50%;">
                   <span class="icon">
                     <i class="fas fa-arrow-up"></i>
@@ -28,6 +29,9 @@
                 </a>
               </div>
               {{ end }}
+              {{ partial "navbarbottom.html" .}}
+              
+              </section>
             </div>
 
     </main>

layouts/compagnie/list.html

@@ -1,11 +1,10 @@
 {{ define "content" }}
 
-<section class="hero is-fullheight is-flex is-flex-direction-column is-justify-content-flex-start has-background-warning-light pt-6 px-6">
-    <section class="section mb-0 py-0 has-text-justified">
+    <section class="section mb-0 py-0 has-text-justified has-background-warning-light">
             <h1 class="title is-size-1 has-text-weight-bold has-text-centered">{{ .Title }}</h1>
             <p>{{ .Content }}</p>
     </section>
-    <section class="section mb-0 pb-0">
+    <section class="section mb-0 pb-0 has-background-warning-light">
             <h2 class="is-size-3 mb-5 has-text-centered">{{ .Params.subtitle}}</h2>
             <div class="columns is-justify-content-center ">
                 {{ range .Pages }}
@@ -26,7 +25,7 @@
                 {{ end }}
             </div>
     </section>
-    <section class="section">
+    <section class="section has-background-warning-light">
         {{ range .Pages }}
         <div class="py-5 has-text-justified">
             <h2 class="is-size-4 has-text-centered">{{ .Title }}</h2>
@@ -34,7 +33,6 @@
         </div>
         {{ end }}
     </section>
-</div>
 
 
 {{ end }}

layouts/index.html

@@ -10,7 +10,6 @@
 {{ end }}
 
 {{ define "content" }}
-    <section class="hero is-fullheight  has-background-black">
         <div class="is-flex is-flex-grow-1 is-flex-direction-column is-justify-content-space-between">
             <div id="galerie" class="carousel is-flex is-flex-direction-column is-flex-grow-1 is-justify-content-space-around">
                     {{ $carouselImages := resources.Match "carousel/*"}}
@@ -81,8 +80,6 @@
 
             </div>
         </div>
-        {{ partial "navbarbottom.html" . }}
-    </section>     
 {{ end }}
 
 {{ define "scripts"}}