Merge pull request 'carmen' (#20) from carmen into main

Reviewed-on: #20

assets/css/index.css

@@ -16,7 +16,7 @@
   }
   .carousel-item {
     max-height: 100vh;
-    overflow-y: hidden;
+    overflow: hidden;
   }
 }
 

assets/css/single-spectacle.css

@@ -2,22 +2,6 @@
     height: 20vh;
 }
 
-
-
-.carousel .image img {
-    height: 40vh; /* Set a fixed height */
-    width: auto; /* Maintain aspect ratio */
-    /*overflow: hidden;
-     object-fit: contain; Ensure the whole image fits into the container */
-  }
-
-.slider-navigation-previous {
-    display: none;
-}
-.slider-navigation-next {
-    display: none;
-}
-
 @media screen and (max-width: 768px) {
     .p-6 {
         padding-left: 1.5rem !important;
@@ -30,4 +14,9 @@
         flex-direction: column;
         justify-content: center;
     }
-}
+}
+
+
+#galerie picture {
+    transition: all 2s ease;
+}

assets/css/style.css

@@ -17,6 +17,10 @@ p {
   background-color: #000 !important;
 }
 
+a.has-text-white:hover {
+  color: #000 !important;
+}
+
 .menu-list li a:hover {
   color: #000 !important;
 }
@@ -39,6 +43,7 @@ p {
     width: 80%;
   }
 }
+
 @media screen and (orientation: portrait) {
   .navbar {
     display: flex;

content/contact/_index.md

@@ -14,6 +14,10 @@ email: cie@ltqf.fr
 telephone: 
   - +33 6 63 91 23 46
   - +33 6 15 08 30 80
+administrateur:
+  nom: Thomas Clédé
+  mail:  cledethomas@gmail.com
+  tel:  +33 6 62 50 64 50
 description: "Page de contact pour la Compagnie Le temps Qu'il Faut"
 canonical: "https://ltqf.fr/contact/"
 ---

layouts/_default/baseof.html

@@ -21,7 +21,7 @@
               <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: 1%; right: 2%; z-index: 100;">
+              <div class="is-flex is-flex-direction-column is-justify-content-flex-end" style="position: fixed; bottom: 1%; right: 5%; 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>

layouts/actions_culturelles/list.html

@@ -30,8 +30,8 @@
                         {{ with $img }}
                         {{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
                         {{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
-                        <figure class="image is-flex"  style="max-width: 100%; max-height: 40vh; width: auto;">
+                        <figure class="image is-flex is-justify-content-center"  style="max-width: 100%; max-height: 40vh; width: auto;">
-                            <picture>
+                            <picture class=" is-flex is-align-items-center is-justify-content-center">
                                 <source srcset="{{ $webp.Permalink }}" type="image/webp">
                                 <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}"  alt="{{ .Permalink }}"  style="max-width: 100%; max-height: 100%; width: auto;">
                             </picture>

layouts/contact/list.html

@@ -21,33 +21,7 @@
 
 {{ define "content" }}
 <section class="hero is-fullheight is-flex is-flex-direction-column is-justify-content-flex-start p-6">
-    <section class="section m-0">
+	<h1 class="is-size-1 title has-text-centered has-text-weight-bold has-text-white" style="margin-bottom: 0; position: relative;">{{ .Title }}</h1>
-        <h1 class="is-size-1 title has-text-weight-bold has-text-white has-text-centered ">{{ .Title }}</h1>
-        <div class="columns my-2 mx-5  is-justify-content-space-between">
-			{{ range .Params.adresses }}
-            <div class="column is-narrow p-0 is-flex-mobile is-flex-direction-row has-text-centered is-align-items-center">
-				<i class="fa-solid fa-location-dot fa-2x mb-5"></i>
-				<h2 class="title is-4 has-text-white is-hidden-mobile">{{.type}}</h2>
-				<p class="subtitle is-6 has-text-white">{{ .adresse | markdownify}}</p>
-            </div>
-			{{ end }}
-            <div class="column is-narrow p-0 is-flex-mobile is-flex-direction-row has-text-centered is-align-items-center">
-                <i class="fa-solid fa-envelope fa-2x mb-5"></i>
-                <h2 class="title is-4 has-text-white is-hidden-mobile">Email:</h2>
-                    <p class="subtitle is-6 has-text-white">
-                        <a href="mailto:{{ .Params.email }}" class="has-text-white">{{ .Params.email }}</a>
-					</p>
-            </div>
-            <div class="column is-narrow p-0 is-flex-mobile is-flex-direction-row has-text-centered is-align-items-center">
-                    <i class="fa-solid fa-phone fa-2x mb-5"></i>
-                    <h2 class="title is-4 has-text-white is-hidden-mobile mb-1">Téléphone:</h2>
-                        {{ range .Params.telephone }}
-                        <a href="tel:{{ . }}"><p class="subtitle is-6 has-text-white">{{ . }}</p></a>
-                        {{ end }}
-            </div>
-        </div>
-    </section>
-
     <form action="https://form.ltqf.fr/send/llBAJp_9Vag=/jVZs3WGqLXdpqF8=/AZVODerOHnNDZ7aBdUE1wJxMcL97KqTF_5XBETk0N6g=" method="POST">
 	    <div class="container contactform p-5 has-text-white">
 	        <h2 class="is-size-3 mb-3">Formulaire de contact</h2>
@@ -84,6 +58,67 @@
 
 	    </div>
 	</form>
+	<section class="column m-0 p-0 has-text-centered is-flex is-flex-direction-column">
+        <!-- <h1 class="is-size-1 title has-text-weight-bold has-text-white" style="margin-bottom: 0; position: relative;">{{ .Title }}</h1> -->
+        <div class="columns my-5 has-text-centered  is-centered is-multiline is-justify-content-space-around">
+			{{ range .Params.adresses }}
+			<div class="column is-narrow p-0 mt-4  has-text-centered is-align-items-center is-flex-direction-row">
+				<i class="fa-solid fa-location-dot fa-2x mb-5 "></i>
+				<h2 class="title is-4 has-text-white is-hidden-mobile">{{.type}}</h2>
+				<p class="subtitle is-6 p-4 has-text-centered has-text-white is-align-items-center">{{ .adresse | markdownify}}</p>
+            </div>
+			{{ end }}
+			<div class="column is-narrow p-0 mt-4  has-text-centered is-align-items-center is-flex-direction-row">
+				<i class="fa-solid fa-envelope fa-2x mb-5"></i>
+                <h2 class="title is-4 has-text-white is-hidden-mobile">Email:</h2>
+                    <p class="subtitle is-6 p-4 has-text-centered has-text-white">
+                        <a href="mailto:{{ .Params.email }}" class="has-text-white">{{ .Params.email }}</a>
+					</p>
+			</div>
+			<div class="column is-narrow p-0 mt-4  has-text-centered is-align-items-center is-flex-direction-row">
+				<i class="fa-solid fa-phone fa-2x mb-5"></i>
+				<h2 class="title is-4 has-text-white is-hidden-mobile mb-5 pb-4">Téléphone:</h2>
+					
+					<p class="subtitle is-6 has-text-centered p-0 has-text-white">
+						{{ range .Params.telephone }}
+						<a  class="has-text-white" href="tel:{{ . }}">{{ . }}</a></br>
+						{{ end }}
+					</p>
+					
+			</div>
+			<div class="column is-narrow p-0 mt-4  has-text-centered is-align-items-center is-flex-direction-row">
+				<i class="fa-solid fa-house fa-2x mb-5"></i>
+				<h2 class="title is-4 has-text-white is-hidden-mobile mb-5 pb-4">Administrateur:</h2>
+					
+					<p class="subtitle is-6 has-text-centered p-0 has-text-white">
+						{{ with .Params.administrateur.nom }}
+						<p class="subtitle is-6 p-0 m-0 has-text-centered has-text-white is-align-items-center">{{ . | markdownify}}</p>
+						{{ end }}
+						{{ with .Params.administrateur.mail }}
+						<a  class="has-text-white" href="mailto:{{ . }}">{{ . }}</a></br>
+						{{ end }}
+						{{ with .Params.administrateur.tel }}
+						<a  class="has-text-white" href="tel:{{ . }}">{{ . }}</a></br>
+						{{ end }}
+					</p>
+					
+			</div>
+            <!-- <div class="column is-narrow p-0 is-flex-mobile is-align-items-center">
+				<i class="fa-solid fa-envelope fa-2x mb-5"></i>
+                <h2 class="title is-4 has-text-white is-hidden-mobile">Email:</h2>
+                    <p class="subtitle is-6 has-text-white">
+                        <a href="mailto:{{ .Params.email }}" class="has-text-white">{{ .Params.email }}</a>
+					</p>
+            </div>
+            <div class="column is-narrow p-0 is-flex-mobile is-flex-direction-row has-text-centered is-align-items-center">
+                    <i class="fa-solid fa-phone fa-2x mb-5"></i>
+                    <h2 class="title is-4 has-text-white is-hidden-mobile mb-1">Téléphone:</h2>
+                        {{ range .Params.telephone }}
+                        <a href="tel:{{ . }}"><p class="subtitle is-6 has-text-white">{{ . }}</p></a>
+                        {{ end }}
+            </div> -->
+        </div>
+    </section>
 	{{ $mentionsLegales := .Site.GetPage "/mentions_legales" }}
 	<div class="column has-text-centered">
 		<a href="{{ $mentionsLegales.Permalink }}" aria-label="Lien vers les mentions légales">Mentions légales</a>

layouts/index.html

@@ -97,7 +97,7 @@
             } else {
                 item.classList.add('is-block')
             };
-            item.style.transition = "transform 1s ease";
+            item.style.transition = "transform 2s ease";
         });
 
         function moveToNextItem() {
@@ -122,7 +122,7 @@
                 }
             })
         }
-        setInterval(moveToNextItem, 20000);
+        setInterval(moveToNextItem, 4000);
     });
 </script>
 

layouts/spectacles/single.html

@@ -122,17 +122,17 @@
 </section>
 <section class="section is-large m-0 p-6 has-background-black">
     <h2 class="subtitle">Galerie</h2>
-    <div class="container" style="height: 20vh; overflow: hidden;">
+    <div class="container">
-        <div id="galerie" class="carousel">
+        <div id="galerie" class="carousel is-flex is-flex-direction-row"> <!--style="overflow-x: hidden;" >-->
             {{ $imgs := (resources.Match ( print .File.Dir "/*")).ByType "image" }}
 
             {{ with $imgs }}
-            {{ range $imgs }}
+            {{ range first 10 . }}
             {{- $jpeg := .Resize "600x jpeg" }}
             {{- $webp := .Resize "600x webp picture" }}
-            <picture>
+            <picture class="is-flex is-flex-grow-0 is-flex-shrink-0">
                 <source srcset="{{ $webp.Permalink }}" type="image/webp">
-                <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Name }}">
+                <img  src='{{ $jpeg.Permalink }}' loading="lazy" style="width: 100%; height: auto; object-fit: contain;" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Name }}">
             </picture>         
             {{ end}}
             {{ end }}
@@ -144,20 +144,47 @@
 
 {{ define "scripts" }}
 <script>
-    bulmaCarousel.attach('#galerie', {
+
-    slidesToScroll: 1,
+    document.addEventListener('DOMContentLoaded', function() {
-    slidesToShow: 3,
+        var slider = document.querySelector('#galerie');
-    navigation: false,
+        var items = slider.querySelectorAll('picture');
-    navigationKeys: false,
+
-    pagination: false,
+        let currentIndex = 0;
-    loop: false,
+
-    infinite: true,
+        function moveItems() {
-    autoplay: true,
+            currentIndex = (currentIndex + 1) % items.length;
-    autoplaySpeed: 2000,
+            let translationVector;
-    pauseOnHover: true,
+            items.forEach((item, index) => {
-    duration: 300
+                item.style.zIndex = 0;
-});
+                if (index === currentIndex -2 || (index === (items.length -2) && currentIndex === 0) || (index === (items.length -1) && currentIndex === 1)) {
-    </script>
+                    item.style.zIndex = -100;
+                } 
+                if (currentIndex == 0) {
+                    if (index == items.length - 1){
+                        translationVector = items.length * -600
+                    } else {
+                        translationVector = 0;
+                    }
+                    
+                } else if ( currentIndex == 1) {
+                    translationVector = -600;
+                } else if (index < currentIndex - 1){
+                    translationVector = (items.length - currentIndex) *600;
+                } else {
+                    translationVector = -currentIndex * 600;
+                }
+
+                item.style.transform = `translateX(${translationVector}px)`;
+                if (index === currentIndex -2 || (index === (items.length -2) && currentIndex === 0) || (index === (items.length -1) && currentIndex === 1)) {
+                    item.style.zIndex = 0;
+                }            
+            })
+        }
+        if (items.length > 2){
+            setInterval(moveItems, 5000); // Move items every 5 seconds
+        }
+    });
+</script>
 
 <script type="application/ld+json">
     {