From f0b29535ec0f319b72e6c4dc3c153025edeab7de Mon Sep 17 00:00:00 2001
From: Carmen <soumaryngaka95300@gmail.com>
Date: Fri, 5 Jan 2024 16:25:10 +0100
Subject: [PATCH] portrait responsive index

---
 assets/css/index.css               |  36 ++++----
 assets/css/style.css               |   7 ++
 layouts/_default/baseof.html       |   2 +-
 layouts/index.html                 | 136 +++++++++++++++--------------
 layouts/partials/navbar.html       |  21 -----
 layouts/partials/navbarbottom.html |  21 +++++
 6 files changed, 117 insertions(+), 106 deletions(-)
 create mode 100644 layouts/partials/navbarbottom.html

diff --git a/assets/css/index.css b/assets/css/index.css
index 0f5fef8..2ed18df 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -1,33 +1,35 @@
-.section {
-    position: relative;
-}
-
-
-.overlay {
+@media screen and (orientation: landscape) {
+  .overlay {
     z-index: 10;
     opacity: 1;
     position: absolute;
     right: 10%; /* Extending full width */
     bottom: 10%; 
-    height: 30%;
-    width: 30%;
+    height: auto;
+    width: 50%;
     background-color: rgba(0, 0, 0, 0.5); 
-    display: flex;
-    justify-content: center; /* Center content horizontally */
-    align-items: center; /* Center content vertically */
-    text-align: center;
+
+  }
+  #galerie {
+    height: 100vh;
   }
+  .carousel-item {
+    max-height: 100vh;
+    overflow-y: hidden;
+  }
+}
+
 
 @media screen and (orientation: portrait) {
     .overlay {
-        z-index: 10;
-        opacity: 1;
-        position: relative;
-        top: 0;
-        right: 0;
+        position: sticky;
         bottom: 0;
+        z-index: 100;
         width: 100vw;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5); 
     }
+    #galerie {
+      height: 100%;
+    }
   }
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 5e4b485..f800d9c 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -34,6 +34,10 @@ p {
   .menu-column {
     display: flex;
   }
+
+  #main-col {
+    width: 80%;
+  }
 }
 @media screen and (orientation: portrait) {
   .navbar {
@@ -42,4 +46,7 @@ p {
   .menu-column {
     display: none;
   }
+  #main-col {
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index a92b8b9..5c598a8 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -17,7 +17,7 @@
             {{-  partial "navbar.html" . -}}
 
             <!-- Contenu de la page -->
-            <div class="column is-four-fifths m-0 p-0">
+            <div class="column m-0 p-0" id="main-col">
               {{- 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%;">
diff --git a/layouts/index.html b/layouts/index.html
index 3e2069f..45a49c8 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -10,76 +10,78 @@
 {{ end }}
 
 {{ define "content" }}
-    <section class="hero is-fullheight is-flex is-flex-direction-column is-justify-content-flex-start has-background-danger">
-        <section id="galerie" class="carousel">
-                {{ $carouselImages := resources.Match "carousel/*"}}
-                {{ range $index, $image := $carouselImages }}
-                {{- $jpegxxs := $image.Resize (printf "%dx jpeg q%d" 412 75) }}
-                {{- $jpegxs := $image.Resize (printf "%dx jpeg q%d" 768 75) }}
-                {{- $jpegs := $image.Resize (printf "%dx jpeg q%d" 1024 75) }}
-                {{- $jpegm := $image.Resize (printf "%dx jpeg q%d" 1440 75) }}
-                {{- $jpegl := $image.Resize (printf "%dx jpeg q%d" 1920 75) }}
-                {{- $jpegxl := $image.Resize (printf "%dx jpeg q%d" 2560 75) }}
-                {{- $webpxxs := $image.Resize (printf "%dx webp q%d picture" 412 75) }}
-                {{- $webpxs := $image.Resize (printf "%dx webp q%d picture" 768 75) }}
-                {{- $webps := $image.Resize (printf "%dx webp q%d picture" 1024 75) }}
-                {{- $webpm := $image.Resize (printf "%dx webp q%d picture" 1440 75) }}
-                {{- $webpl := $image.Resize (printf "%dx webp q%d picture" 1920 75) }}
-                {{- $webpxl := $image.Resize (printf "%dx webp q%d picture" 2560 75) }}
-                <figure class="image carousel-item"  style="height: 100vh;">
-                    <picture>
-                        <source type="image/webp" 
-                            srcset="{{ $webpxxs.Permalink }} {{ $webpxxs.Width }}w,
-                                    {{ $webpxs.Permalink }} {{ $webpxs.Width }}w,
-                                    {{ $webps.Permalink }} {{ $webps.Width }}w,
-                                    {{ $webpm.Permalink }} {{ $webpm.Width }}w,
-                                    {{ $webpl.Permalink }} {{ $webpl.Width }}w,
-                                    {{ $webpxl.Permalink }} {{ $webpl.Width }}w"
-                            sizes="(max-with: 411px) 100vw,
-                                    (max-width: 767px) 412px, 
-                                    (max-width: 1023px) 768px, 
-                                    (max-width: 1439px) 1024px, 
-                                    (max-width: 1919px) 1440px,
-                                    (max-width: 2559px) 1920px,
-                                    2560px">
-                        <img style="width: 100%; height: 100%; object-fit: cover;" 
-                            src='{{ $jpegl.Permalink }}' 
-                            width="{{ $jpegxl.Width }}"
-                            height="{{ $jpegxl.Height }}"
-                            {{ if ne $index 0 }} loading="lazy" {{ end }} 
-                            srcset="{{ $jpegxxs.Permalink }} {{ $jpegxxs.Width }}w,
-                                    {{ $jpegxs.Permalink }} {{ $jpegxs.Width }}w,
-                                    {{ $jpegs.Permalink }} {{ $jpegs.Width }}w,
-                                    {{ $jpegm.Permalink }} {{ $jpegm.Width }}w,
-                                    {{ $jpegl.Permalink }} {{ $jpegl.Width }}w,
-                                    {{ $jpegxl.Permalink }} {{ $jpegxl.Width }}w"  
-                            sizes="(max-with: 411px) 100vw,
-                                    (max-width: 767px) 412px, 
-                                    (max-width: 1023px) 768px,
-                                    (max-width: 1439px) 1024px, 
-                                    (max-width: 1919px) 1440px,
-                                    (max-width: 2559px) 1920px,
-                                    2560px"
-                            alt="{{ $image.Permalink }}">
-                    </picture>
-                </figure>
-                {{ end }}
-            </section>
+    <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/*"}}
+                    {{ range $index, $image := $carouselImages }}
+                    {{- $jpegxxs := $image.Resize (printf "%dx jpeg q%d" 412 75) }}
+                    {{- $jpegxs := $image.Resize (printf "%dx jpeg q%d" 768 75) }}
+                    {{- $jpegs := $image.Resize (printf "%dx jpeg q%d" 1024 75) }}
+                    {{- $jpegm := $image.Resize (printf "%dx jpeg q%d" 1440 75) }}
+                    {{- $jpegl := $image.Resize (printf "%dx jpeg q%d" 1920 75) }}
+                    {{- $jpegxl := $image.Resize (printf "%dx jpeg q%d" 2560 75) }}
+                    {{- $webpxxs := $image.Resize (printf "%dx webp q%d picture" 412 75) }}
+                    {{- $webpxs := $image.Resize (printf "%dx webp q%d picture" 768 75) }}
+                    {{- $webps := $image.Resize (printf "%dx webp q%d picture" 1024 75) }}
+                    {{- $webpm := $image.Resize (printf "%dx webp q%d picture" 1440 75) }}
+                    {{- $webpl := $image.Resize (printf "%dx webp q%d picture" 1920 75) }}
+                    {{- $webpxl := $image.Resize (printf "%dx webp q%d picture" 2560 75) }}
+                    <figure class="image carousel-item">
+                        <picture>
+                            <source type="image/webp" 
+                                srcset="{{ $webpxxs.Permalink }} {{ $webpxxs.Width }}w,
+                                        {{ $webpxs.Permalink }} {{ $webpxs.Width }}w,
+                                        {{ $webps.Permalink }} {{ $webps.Width }}w,
+                                        {{ $webpm.Permalink }} {{ $webpm.Width }}w,
+                                        {{ $webpl.Permalink }} {{ $webpl.Width }}w,
+                                        {{ $webpxl.Permalink }} {{ $webpl.Width }}w"
+                                sizes="(max-with: 411px) 100vw,
+                                        (max-width: 767px) 412px, 
+                                        (max-width: 1023px) 768px, 
+                                        (max-width: 1439px) 1024px, 
+                                        (max-width: 1919px) 1440px,
+                                        (max-width: 2559px) 1920px,
+                                        2560px">
+                            <img style="width: 100%; height: 100%; object-fit: cover;" 
+                                src='{{ $jpegl.Permalink }}' 
+                                width="{{ $jpegxl.Width }}"
+                                height="{{ $jpegxl.Height }}"
+                                {{ if ne $index 0 }} loading="lazy" {{ end }} 
+                                srcset="{{ $jpegxxs.Permalink }} {{ $jpegxxs.Width }}w,
+                                        {{ $jpegxs.Permalink }} {{ $jpegxs.Width }}w,
+                                        {{ $jpegs.Permalink }} {{ $jpegs.Width }}w,
+                                        {{ $jpegm.Permalink }} {{ $jpegm.Width }}w,
+                                        {{ $jpegl.Permalink }} {{ $jpegl.Width }}w,
+                                        {{ $jpegxl.Permalink }} {{ $jpegxl.Width }}w"  
+                                sizes="(max-with: 411px) 100vw,
+                                        (max-width: 767px) 412px, 
+                                        (max-width: 1023px) 768px,
+                                        (max-width: 1439px) 1024px, 
+                                        (max-width: 1919px) 1440px,
+                                        (max-width: 2559px) 1920px,
+                                        2560px"
+                                alt="{{ $image.Permalink }}">
+                        </picture>
+                    </figure>
+                    {{ end }}
+                </div>
 
-        
+            
 
-        <div id="news" class="newscarousel box overlay">
-            {{ $spectacles := where .Site.RegularPages "Section" "spectacles" }}
-            {{ range $index, $page := where $spectacles ".Params.actu" "!=" nil }}
-            <div class="newscarousel-item text-center has-text-warning-light {{ if eq $index 0}}is-block {{ else }} is-hidden {{end}}">
-                <div class="title has-text-warning-light py-3">Actualités</div>
-                <div class="subtitle has-text-warning-light">{{ .Title }}</div>
-                <p class="p-0-mobile px-4-tablet">{{ .Params.actu }}</p>
-            </div>
-            {{ end }}
+            <div id="news" class="newscarousel box overlay is-flex is-justify-content-center has-text-centered">
+                {{ $spectacles := where .Site.RegularPages "Section" "spectacles" }}
+                {{ range $index, $page := where $spectacles ".Params.actu" "!=" nil }}
+                <div class="newscarousel-item  has-text-warning-light {{ if eq $index 0}}is-block {{ else }} is-hidden {{end}}">
+                    <div class="title has-text-warning-light py-3">Actualités</div>
+                    <div class="subtitle has-text-warning-light">{{ .Title }}</div>
+                    <p class="p-0-mobile px-4-tablet">{{ .Params.actu }}</p>
+                </div>
+                {{ end }}
 
+            </div>
         </div>
-
+        {{ partial "navbarbottom.html" . }}
     </section>     
 {{ end }}
 
@@ -123,7 +125,7 @@
                 }
             })
         }
-        setInterval(moveToNextItem, 2000);
+        setInterval(moveToNextItem, 20000);
     });
 </script>
 
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 5f2c440..a24be8f 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,26 +1,5 @@
 {{ $bg := cond .IsHome "has-background-black has-text-white" "has-background-success has-text-black" }}
 
-<nav class="navbar is-black is-fixed-bottom" role="navigation" aria-label="main navigation">
-  <div class="navbar-brand is-flex is-justify-content-center is-flex-grow-1">
-    <a class="navbar-item" href="/" aria-label="Lien vers la page d'accueil du site">
-      <img src="{{ $.Site.Params.logoHome |relURL }}" alt="Logo de la Compagnie le temps qu'il faut">
-    </a>
-
-    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mynavbar">
-      <span aria-hidden="true"></span>
-      <span aria-hidden="true"></span>
-      <span aria-hidden="true"></span>
-    </a>
-  </div>
-
-  <div id="mynavbar" class="navbar-menu has-background-black">
-    {{ range .Site.Menus.main }}
-    <a class="navbar-item is-uppercase has-text-white" href="{{ .URL }}" aria-label="Lien vers la page {{ .Name }}">{{ .Name }}</a>
-    {{ end }}
-
-  </div>
-</nav>
-
 <div class="column menu-column is-fullheight is-one-fifth has-background-danger has-background-warning is-narrow" style="z-index: 100;">
       <aside id="sidebar" class="menu {{$bg}} is-flex is-flex-direction-column is-justify-content-space-between" style="position: fixed; top: 0; height: 100%; width: 20vw;">
         <div>
diff --git a/layouts/partials/navbarbottom.html b/layouts/partials/navbarbottom.html
new file mode 100644
index 0000000..97e9f3e
--- /dev/null
+++ b/layouts/partials/navbarbottom.html
@@ -0,0 +1,21 @@
+
+<nav class="navbar is-black" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand is-flex is-justify-content-center is-flex-grow-1">
+      <a class="navbar-item" href="/" aria-label="Lien vers la page d'accueil du site">
+        <img src="{{ $.Site.Params.logoHome |relURL }}" alt="Logo de la Compagnie le temps qu'il faut">
+      </a>
+  
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mynavbar">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+  
+    <div id="mynavbar" class="navbar-menu has-background-black">
+      {{ range .Site.Menus.main }}
+      <a class="navbar-item is-uppercase has-text-white" href="{{ .URL }}" aria-label="Lien vers la page {{ .Name }}">{{ .Name }}</a>
+      {{ end }}
+  
+    </div>
+  </nav>
\ No newline at end of file