210 lines
8.8 KiB
HTML
210 lines
8.8 KiB
HTML
{{ define "styles"}}
|
|
{{ $customCSS := resources.Get "css/single-spectacle.css" | resources.ToCSS }}
|
|
<link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">
|
|
{{ end }}
|
|
|
|
{{ define "content" }}
|
|
<section class="section is-large p-0 m-0 has-background-warning-light">
|
|
<div id="title-section" class="columns p-0 m-0">
|
|
<div class="column is-two-thirds p-5 m-0 is-flex is-justify-content-center is-align-items-center">
|
|
<h1 class="title has-text-centered is-size-1 has-text-weight-bold">{{ .Title }}</h1>
|
|
</div>
|
|
<div class="column m-0 is-one-third has-background-black is-hidden-mobile"></div>
|
|
</div>
|
|
</section>
|
|
<section class="section is-large p-0 m-0 has-background-warning">
|
|
<div class="columns p-0 m-0">
|
|
<div class="column is-four-fifths p-0 m-0 has-background-danger">
|
|
{{ $img := resources.GetMatch (print .File.Dir "/principal.*") }}
|
|
{{ with $img }}
|
|
{{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
|
|
{{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
|
|
<figure class="image">
|
|
<picture>
|
|
<source srcset="{{ $webp.Permalink }}" type="image/webp">
|
|
<img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}" alt="{{ .Permalink }}">
|
|
</picture>
|
|
</figure>
|
|
{{ end }}
|
|
</div>
|
|
<div class="column is-one-fifth p-0 m-0 has-background-success is-flex is-justify-content-center is-align-items-center is-size-3">
|
|
<div class="has-text-black has-text-weight-bold p-6">{{ .Date.Year}}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section is-large p-0 m-0 has-background-warning">
|
|
<div class="columns p-0 m-0">
|
|
<div class="column is-1 has-background-black is-hidden-mobile"></div>
|
|
<div class="column is-10 p-6 has-background-warning-light">
|
|
<h2 class="subtitle">{{ .Params.Subtitle }}</h2>
|
|
<div class="has-text-black">{{ .Content }}</div>
|
|
</div>
|
|
<div class="column is-1 has-background-black is-hidden-mobile"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section is-large p-0 m-0 has-background-warning">
|
|
<div class="columns p-0 m-0">
|
|
<div class="column p-6 is-two-fifths has-background-primary-dark has-text-black">
|
|
<h2 class="subtitle mb-6">En savoir plus</h2>
|
|
{{ $presse := resources.GetMatch (print .File.Dir "/dossier.pdf") }}
|
|
{{ with $presse }}
|
|
<div class="columns is-gapless is-vcentered ">
|
|
<div class="column">
|
|
<a href={{ .Permalink }} rel="canonical" aria-label="Lien de téléchargement du dossier de présentation">
|
|
<h3 class="title is-6">Télécharger le Dossier de présentation</h3>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{ end }}
|
|
|
|
{{ with .Params.presentation }}
|
|
<div class="column px-0 mb-4">
|
|
<a href="{{ .lien}}" rel="canonical" aria-label="">
|
|
<h3 class="title is-6"> {{ .texte }}</h3>
|
|
</a>
|
|
</div>
|
|
{{ end }}
|
|
{{ with .Params.Dates }}
|
|
<h3 class="title is-6">Prochaines Dates</h3>
|
|
{{ range .}}
|
|
<div class="columns is-gapless">
|
|
{{ if in (printf "%T" .) "map" }}
|
|
{{ range $month, $events := . }}
|
|
<div class="column is-3 is-flex is-flex-direction-column is-justify-content-center">
|
|
<h4 class="title is-7">{{ $month }}</h4>
|
|
</div>
|
|
<div class="column is-9">
|
|
<ul>
|
|
{{ range $events }}
|
|
<li>{{ . }}</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
{{ end }}
|
|
{{ else }}
|
|
<p>{{ . }}</p>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
</div>
|
|
<div class="column is-three-fifths p-0 m-0 has-background-danger is-hidden-mobile">
|
|
{{ $img := resources.GetMatch ( print .File.Dir "/savoir.*") }}
|
|
{{ with $img }}
|
|
{{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
|
|
{{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
|
|
<figure class="image">
|
|
<picture>
|
|
<source srcset="{{ $webp.Permalink }}" type="image/webp">
|
|
<img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}" alt="{{ .Permalink }}">
|
|
</picture>
|
|
</figure>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section is-large p-6 m-0 has-background-black has-text-white">
|
|
<h2 class="subtitle">Crédits</h2>
|
|
<div class="columns is-multiline mt-2">
|
|
{{ $param := .Params.Credits }}
|
|
{{ range $param }}
|
|
<div class="column is-one-quarter">{{ .role }}</div>
|
|
{{ if and $param (not (isset .name 0))}}
|
|
<div class="column is-three-quarters">{{ .name | markdownify }}</div>
|
|
{{ else }}
|
|
<div class="column is-three-quarters">
|
|
<ul>
|
|
{{ range .name }}
|
|
<li>{{ . | markdownify }}</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</section>
|
|
<section class="section is-large m-0 p-6 has-background-black">
|
|
<h2 class="subtitle">Galerie</h2>
|
|
<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 first 10 . }}
|
|
{{- $jpeg := .Resize "600x jpeg" }}
|
|
{{- $webp := .Resize "600x webp 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" style="width: 100%; height: auto; object-fit: contain;" width="{{ $webp.Width }}" height="{{ $webp.Height }}" alt="{{ .Name }}">
|
|
</picture>
|
|
{{ end}}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{ end }}
|
|
|
|
{{ define "scripts" }}
|
|
<script>
|
|
|
|
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>
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "http://schema.org",
|
|
"@type": "Event",
|
|
"name": "{{ .Title }}",
|
|
"startDate": "{{ .Params.date}}",
|
|
"image": "{{ (resources.GetMatch (print .File.Dir "/principal.*")).Permalink }}",
|
|
"description": "{{ .Params.subtitle}}",
|
|
"performer": {
|
|
"@type": "PerformingGroup",
|
|
"name": "Compagnie Le Temps Qu'il Faut"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{{ end }} |
