GARAGENUM/ltqf
15
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases 1 Wiki Activity

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

Browse Source 
Reviewed-on: #20
This commit is contained in:
Florian Roger 2024-01-15 15:18:04 +01:00
commit d39f73d583
9 changed files with 129 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/index.css
View File

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

21
assets/css/single-spectacle.css
View File

@ -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;
@ -31,3 +15,8 @@
justify-content: center;
}
}
#galerie picture {
transition: all 2s ease;
}

5
assets/css/style.css
View File

@ -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;

4
content/contact/_index.md
View File

@ -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/"
---

2
layouts/_default/baseof.html
View File

@ -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>

4
layouts/actions_culturelles/list.html
View File

@ -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;">
<picture>
<figure class="image is-flex is-justify-content-center" style="max-width: 100%; max-height: 40vh; width: auto;">
<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>

89
layouts/contact/list.html
View File

@ -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-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>
<h1 class="is-size-1 title has-text-centered has-text-weight-bold has-text-white" style="margin-bottom: 0; position: relative;">{{ .Title }}</h1>
<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>

4
layouts/index.html
View File

@ -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>

61
layouts/spectacles/single.html
View File

@ -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 id="galerie" class="carousel">
<div class="container">
<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,18 +144,45 @@
{{ define "scripts" }}
<script>
bulmaCarousel.attach('#galerie', {
slidesToScroll: 1,
slidesToShow: 3,
navigation: false,
navigationKeys: false,
pagination: false,
loop: false,
infinite: true,
autoplay: true,
autoplaySpeed: 2000,
pauseOnHover: true,
duration: 300
document.addEventListener('DOMContentLoaded', function() {
var slider = document.querySelector('#galerie');
var items = slider.querySelectorAll('picture');
let currentIndex = 0;
function moveItems() {
currentIndex = (currentIndex + 1) % items.length;
let translationVector;
items.forEach((item, index) => {
item.style.zIndex = 0;
if (index === currentIndex -2 || (index === (items.length -2) && currentIndex === 0) || (index === (items.length -1) && currentIndex === 1)) {
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>