website/layouts/index.html
Matthieu Bessat 205f7b421e
All checks were successful
Deploy workflow / deploy (push) Successful in 32s
fix: article card style
2024-12-23 23:04:59 +01:00

608 lines
35 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{ define "main" }}
{{ $cover := (resources.Get (printf "%s" ("images/cover_1.jpg" | safeURL))) }}
{{ $cover = $cover.Resize "1920x" }}
<div class="cover__container">
{{ with $cover }}
<div class="cover__back" style="background-image: url('{{ .RelPermalink }}')">
<!-- For now we are not going to show a video -->
<!-- <video playsinline autoplay muted loop> -->
<!-- <source src="https://static.etoiledebethleem.fr/videos/teaser/md.mp4" type="video/webm"> -->
<!-- </video> -->
</div>
{{ end }}
<div class="cover__overlay">
</div>
<div class="cover__content">
<div class="cover__title-container">
<div class="page-container">
<h1 class="cover__title">Relevons notre Bethléem Normand !</h1>
</div>
</div>
</div>
</div>
<div class="accent-separator">
</div>
<div class="page-container layout-two-spaced">
<div class="alert">
<div class="alert-split-content">
<p>Campagne 2025, nous avons besoin de vous !</p>
<a href="/adhesion" class="button">J'adhère!</a>
</div>
</div>
</div>
<main class="landing-main">
<!-- <div style="display: flex; justify-content: center; font-size: 1.3em; border: 1px dashed gray; padding: 1rem;"> -->
<!-- 🚧 Site en construction... 🚧 -->
<!-- </div> -->
<section class="trailer-section landing-section" id="trailer-organization">
<div class="side-icon">
{{ partial "helpers/svg" (dict "path" "icons/old_tv_3d") }}
</div>
<div class="landing-section__content page-container">
<div class="organization__explain">
<h2>Regardez la vidéo de présentation</h2>
<!-- <iframe
class="video"
title="Campagne d'adhésion 2023-2024 - L'étoile de Bethléem"
width="100%" height="431"
src="https://peertube.iriseden.eu/videos/embed/9db3e44d-6474-44d9-b528-72fa46cc788b?warningTitle=0&amp;p2p=0"
frameborder="0" allowfullscreen=""
sandbox="allow-same-origin allow-scripts allow-popups"
></iframe> -->
<!-- <video class="video"> -->
<!-- <source src="https://fichiers.etoiledebethleem.fr/videos/teaser/md.mp4" type="video/mp4"> -->
<!-- </video> -->
<iframe
class="video"
width="100%" height="431"
src="https://www.youtube-nocookie.com/embed/vJeEqDfz_4c?si=tAD28g6YL4xEpnmR"
title="YouTube video player" frameborder="0" allow="web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
<div class="end-action-container">
<a
href="https://youtube.com/watch?v=vJeEqDfz_4c"
target="_blank"
class="button button-sm button-light mr-1">
Sur YouTube
</a>
<!--
<a
href="https://peertube.iriseden.eu/w/kttSsyAhtBDX76VciXDRDM"
target="_blank"
class="button button-sm button-light">
Sur Peertube
</a>
-->
</div>
</div>
</div>
</section>
{{ $slides_count := 6 }}
<section class="history-container" id="section-history">
<div class="page-container">
<h2>La chapelle au fil du temps</h2>
</div>
<div class="carousel history-carousel" aria-label="Histoire de la chapelle">
<ol class="carousel__viewport">
<li id="history__slide0" tabindex="0" class="carousel__slide" data-slide-index="0">
<div class="slide-content history-component__container">
<div class="page-container slide-inner history-component__content">
<div class="layout-grid-image third">
<div>
<h3>Charles de Bourbon, un esprit fondateur</h3>
<p>
À la fin du XVIeme siècle, le cardinal Charles Ier de Bourbon est alors archevêque de Rouen.
Dans un contexte de guerre de religion, il cherche un moyen de revendiquer sa foi catholique.
</p>
<p>
Il envoya par deux fois son architecte en Judée pour y relever les plans de la grotte de la nativité à Bethléem.
Après l'inauguration en 1582, la chapelle et sa crypte sont consacrées par l'évêque d'Évreux en 1584.
</p>
</div>
<div class="image-container">
{{ $image := resources.Get "images/cardinal_charles_de_bourbon.jpg" }}
<figure class="slide-image image-with-caption">
<img
alt="Portrait de Charles de Bourbon"
src="{{ $image.RelPermalink }}"
/>
<figcaption>Portrait de Charles de Bourbon</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="carousel__snapper">
<a href="#history__slide5"
class="carousel__prev">Diapositive précédente</a>
<a href="#history__slide1"
class="carousel__next">Diapositive suivante</a>
</div>
</li>
<li id="history__slide1" tabindex="0" class="carousel__slide" data-slide-index="1">
<div class="slide-content history-component__container">
<div class="page-container slide-inner history-component__content">
<div class="layout-grid-image half">
<div>
<h3>Les Chartreux</h3>
<p>
Le cardinal fit don du domaine aux Chartreux d'Aubevoye. Chaque Noël, ils se rendaient en procession à la lueure des torches pour célébrer la messe de minuit dans la crypte. Ils demandèrent au Cardinal de créer un détachement de la chartreuse à la chapelle.
</p>
<p>
Ils s'occupèrent alors du domaine : les vignes des coteaux et la maintenance de la chapelle jusqu'à la révolution 1791 où ils furent chassés.
</p>
</div>
<div class="image-container">
{{ $image := resources.Get "images/la_chartreuse_1.jpg" }}
{{ $image = $image.Resize "600x" }}
<figure class="slide-image image-with-caption">
<img
alt="Plan de l'église de la chartreuse Bourbons-lez-Gaillon, maintenant détruite."
src="{{ $image.RelPermalink }}"
/>
<figcaption>Église de la chartreuse Bourbons-lez-Gaillon</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="carousel__snapper">
<a href="#history__slide0"
class="carousel__prev">Diapositive précédente</a>
<a href="#history__slide2"
class="carousel__next">Diapositive suivante</a>
</div>
</li>
<li id="history__slide2" tabindex="0" class="carousel__slide" data-slide-index="2">
<div class="slide-content history-component__container">
<div class="page-container slide-inner history-component__content">
<div class="layout-grid-image half">
<div>
<h3>Restauration Mignot</h3>
<p>
Depuis la révolution, la chapelle passe de propriétaire en propriétaire, son état se dégrade.
M. et Mme Mignot, les nouveaux propriétaires renovent la chapelle et la crypte.
Cependant, la nef devient un lieu d'habitation et un grenier est construit.
En novembre 1895, la crypte est rendue au culte, suite à la consécration du vicaire général d'Évreux.
</p>
</div>
<div class="image-container">
{{ $image := resources.Get "images/chapelle_carte_postale_1.jpg" }}
<figure class="slide-image image-with-caption">
<img
alt="Carte postale de la façade sud de la chapelle en 1912."
src="{{ $image.RelPermalink }}"
/>
<figcaption>La chapelle en 1912</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="carousel__snapper">
<a href="#history__slide1"
class="carousel__prev">Diapositive précédente</a>
<a href="#history__slide3"
class="carousel__next">Diapositive suivante</a>
</div>
</li>
<li id="history__slide3" tabindex="0" class="carousel__slide" data-slide-index="3">
<div class="slide-content history-component__container">
<div class="page-container slide-inner history-component__content">
<div class="layout-grid-image half">
<div>
<h3>Restauration Villain</h3>
<p>
De nouveau, la chapelle passe de propriétaire en propriétaire et se dégrade, en 1933 la crypte est inscrite aux monuments historiques.
En 1956, M. et Mme Villain natifs de la région font l'acquisition du domaine et rénovent la chapelle jusqu'en 1959.
Le domaine est utilisé comme verger et la chapelle et la crypte font l'objet d'un culte catholique, des baptêmes et des mariages y sont célébrés.
</p>
</div>
<div class="image-container">
{{ $image := resources.Get "images/chapelle_1959.jpg" }}
<figure class="slide-image image-with-caption">
<img
alt="Photo de la chapelle pendant la période Villain"
src="{{ $image.RelPermalink }}"
/>
<figcaption>La chapelle pendant la période Villain</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="carousel__snapper">
<a href="#history__slide2"
class="carousel__prev">Diapositive précédente</a>
<a href="#history__slide4"
class="carousel__next">Diapositive suivante</a>
</div>
</li>
<li id="history__slide4" tabindex="0" class="carousel__slide" data-slide-index="4">
<div class="slide-content history-component__container">
<div class="page-container slide-inner history-component__content">
<div class="layout-grid-image half">
<div>
<h3>La ruine</h3>
<p>
En 1982, la chapelle est vendue au notaire Mme. Bailleul en viager.
Par manque d'activités religieuses et depuis la mort de M. Villain en 1992, le domaine tombe dans l'abandon, la chapelle est régulièrement squattée, le mobilier pillé.
En juin 2000, un témoin rapporte que des saccages expéditifs ont été mené.
Depuis, la chapelle se dégrade alors très vite, le coté ouest de la toiture s'effondre en 2015. Les éléments font le reste et la nature reprend ses droits.
</p>
</div>
<div class="image-container">
{{ $image := resources.Get "images/chapelle_2014_sud.jpg" }}
{{ $image := $image.Resize "800x" }}
<figure class="slide-image image-with-caption">
<img
alt="Chapelle en mauvaise état en hiver derrière les arbres."
src="{{ $image.RelPermalink }}"
/>
<figcaption>La chapelle en 2014 photographiée par Guillaume Hylias</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="carousel__snapper">
<a href="#history__slide3"
class="carousel__prev">Diapositive précédente</a>
<a href="#history__slide5"
class="carousel__next">Diapositive suivante</a>
</div>
</li>
<li id="history__slide5" tabindex="0" class="carousel__slide" data-slide-index="5">
<div class="slide-content history-component__container">
<div class="page-container slide-inner history-component__content">
<div class="layout-grid-image half">
<div>
<h3>Une renaissance</h3>
<p>
En 2021, grâce au changement de propriétaire du domaine, une association a vu le jour en 2022.
Elle dispose d'une délégation de maîtrise d'ouvrage afin de sauvegarder ce qu'il reste de la chapelle et d'envisager une restauration.
L'association s'attele à faire revivre le lieu en organisant des manifestations publiques.
Construisez la suite de l'histoire avec nous !
</p>
</div>
<div class="image-container">
{{ $image := resources.Get "images/activites/visite_28_fev_2023_randonneurs.jpg" }}
<figure class="slide-image image-with-caption">
<img
alt="Photo de groupe de personnes impliqués dans l'association"
src="{{ $image.RelPermalink }}"
/>
<figcaption>Visite de la chapelle par des randonneurs</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="carousel__snapper">
<a href="#history__slide4"
class="carousel__prev">Diapositive précédente</a>
<a href="#history__slide0"
class="carousel__next">Diapositive suivante</a>
</div>
</li>
</ol>
<aside class="carousel__navigation">
<ol class="carousel__navigation-list">
{{ range $index, $s := seq $slides_count }}
<li class="carousel__navigation-item {{ if eq $index 0 }}enabled{{- end -}}">
<a href="#history__slide{{ $index }}"
class="carousel__navigation-button">{{ $index }}ème diapositive</a>
</li>
{{ end }}
</ol>
</aside>
</div>
<div class="page-container end-action-container">
<a
href="/documentation/histoire"
class="button button-sm button-light">
L'Histoire en détails
</a>
</div>
</section>
<!-- <section class="history-section"> -->
<!-- <div class="page-container history-summary"> -->
<!-- <div class="history-summary__text"> -->
<!-- <h2>Bref historique</h2> -->
<!-- <p> -->
<!-- Aubevoye possède un souvenir de Terre Sainte unique en France et en Europe. Une reproduction exacte de le grotte de la nativité de Bethléem dans laquelle le Sauveur vint au monde. -->
<!-- Ce monument est dû à la magnificence et à la piété du Cardinal de Bourbon, Charles Ier de Bourbon, oncle paternel de Henri IV, qui fut pendant quelques temps proclamé roi de France par les Ligueurs sous le nom de Charles X. -->
<!-- Archevêque de Rouen de 1550 à 1590, l'éminent prélat qui avait déjà fondé, en 1563, près de son château de Gaillon, la chartreuse de Notre-Dame de Bonne-Esperance (Bourbon-lès-Gaillon), voulut avoir également à portée de sa résidence princière le berceau du Roi des rois. -->
<!-- A cet effet, il envoya deux fois son architecte en Palestine pour lever les plans nécessaires et en 1582, l'édifice était achevé. Le pieux cardinal, qui le désigne lui-même dans ses actes sous le nom de Bethléem, en fit don aux Chartreux avec les terres qui l'environnaient. -->
<!-- Aujourd'hui, malheureusement, la chapelle tombe en ruines. Elle est régulièrement dégradée, pillée, vandalisée. -->
<!-- </p> -->
<!-- </div> -->
<!-- <div class="history-summary__image"> -->
<!-- {{ $image := resources.Get "images/cardinal_charles_de_bourbon.jpg" }} -->
<!-- <img src="{{ $image.RelPermalink }}" /> -->
<!-- </div> -->
<!-- </div> -->
<!-- </section> -->
<!-- <section class="images-section"> -->
<!-- <h2 class="page-container">Images</h2> -->
<!-- </section> -->
<section class="compare-section" id="section-compare">
<div class="page-container">
<h2>Un petit bout de Palestine en Normandie...</h2>
<p>
La crypte de Bethléem est une reproduction quasi-exacte de la grotte de la nativité à Bethléem en Palestine. Jusqu'a preuve du contraire, il s'agit du seul fac similé dans le monde. La crypte est inscrite aux monuments historiques en 1933.
</p>
<div class="compare-items compare-items-dynamic">
<div class="compare-item compare-east">
<figure>
<div class="compare-duet">
<div class="compare-hidden">
{{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" />
</div>
<div class="compare-shown">
{{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" />
</div>
</div>
<figcaption>Comparaison de la crypte vers l'est</figcaption>
</figure>
</div>
<div class="compare-item compare-west">
<figure>
<div class="compare-duet">
<div class="compare-hidden">
{{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" />
</div>
<div class="compare-shown">
{{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" />
</div>
</div>
<figcaption>Comparaison de la crypte vers l'ouest</figcaption>
</figure>
</figure>
</div>
</div>
</div>
</section>
<section class="organization-section" id="section-organization">
<div class="page-container organization-content">
<div class="organization__image">
{{ $image := resources.Get "images/assemblee_constitutive_ensemble.jpg" }}
<figure class="slide-image image-with-caption">
<img
src="{{ $image.RelPermalink }}"
alt="Photo de groupe de personnes impliqués dans l'association"
/>
<figcaption>Les membres fondateurs à l'assemblée constituante</figcaption>
</figure>
</div>
<div class="organization__explain">
<h2>L'association Étoile de Bethléem</h2>
<p>
Formée en septembre 2022, suite aux efforts des propriétaires et des passionés de ce monument. Elle a pour but de contribuer à la sauvegarde et à la restauration de la chapelle de Bethléem dAubevoye et de promouvoir ce monument ainsi que mieux le connaître et lanimer.
</p>
<div class="end-action-container">
<a
href="/association"
class="button button-sm button-light">
L'association en détails
</a>
</div>
</div>
</div>
</section>
<section class="landing-section news-section" id="section-news">
<div class="side-icon">
{{ partial "helpers/svg" (dict "path" "icons/press") }}
</div>
<div class="landing-section__content article-cards page-container">
<h2 class="section-title">
Les dernières nouvelles…
</h2>
<div class="news-presentation">
{{ $news := where .Site.RegularPages "Section" "in" "actualites" }}
{{ range $index, $element := $news }}{{ if eq $index 0 }}
{{ $featuredImage := (resources.Get (printf "%s" ("cover/cover.jpg" | safeURL))) }}
{{ with $element.Params.featured_image }}
{{ if .square_src }}
{{ $featuredImage = $element.Resources.GetMatch .square_src }}
{{ else }}
{{ $featuredImage = $element.Resources.GetMatch .src }}
{{ end }}
{{ end }}
{{ $featuredImage := $featuredImage.Crop "800x700 Center" }}
<div
class="prominent-article article-card"
>
<a class="article__image" href="{{ .RelPermalink }}">
{{ with $featuredImage }}
<img src="{{ .RelPermalink }}" />
{{ end }}
</a>
<div class="article__content">
<h2 class="article__title">
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h2>
<div class="article__meta">
Le {{ time.Format "Monday 2 January 2006" .Date }}
</div>
<div class="article__summary">
{{ .Summary | truncate 250 }}
</div>
<div class="article__bottom">
<a
href="{{ .RelPermalink }}"
class="article__readmore button button-transparent"
>
Lire plus
</a>
</div>
</div>
</div>
{{ end }}{{ end }}
</div>
<div class="separator news-separator"></div>
<div class="secondary-news">
{{ range $index, $element := $news }}
{{ if (and (gt $index 0) (lt $index 3)) }}
{{ $featuredImage := (resources.Get (printf "%s" ("cover/cover.jpg" | safeURL))) }}
{{ with $element.Params.featured_image }}
{{ $featuredImage = $element.Resources.GetMatch .src }}
{{ end }}
{{ $featuredImage := $featuredImage.Resize "fit 700x" }}
<div
class="article-card"
href="{{ .RelPermalink }}"
>
<a class="article__image" href="{{ .RelPermalink }}">
{{ with $featuredImage }}
<img src="{{ .RelPermalink }}" />
{{ end }}
</a>
<div class="article__content">
<h2 class="article__title">
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h2>
<div class="article__meta">
Le {{ time.Format "Monday 2 January 2006" .Date }}
</div>
<div class="article__summary">
{{ .Summary | truncate 100 }}
</div>
<div class="article__bottom">
<a
href="{{ .RelPermalink }}"
class="article__readmore link"
>
Lire plus
</a>
</div>
</div>
</div>
{{ end }}
{{ end }}
</div>
<div class="end-action-container">
<a
href="/actualites"
class="button button-sm button-light">
Voir toutes les news
</a>
</div>
</div>
</section>
{{ $slides_count := len $.Site.Data.partners.people }}
<section class="partners-container">
<div class="page-container">
<h2>Ils nous soutiennent !</h2>
</div>
<div class="carousel" aria-label="Partners">
<ol class="carousel__viewport">
{{ range $index, $comment := $.Site.Data.partners.people }}
<li id="partners__slide{{ $index }}"
tabindex="0"
class="carousel__slide">
<div class="slide-content partner-comment__container">
<div class="slide-inner partner-comment">
{{ $image := resources.Get (printf "images/partners/%s" $comment.image) }}
<a class="partner-comment__author-link" href="{{ $comment.org.website }}">
<img class="partner-comment__author-picture" alt="Photo d'un de nos soutiens" src="{{ $image.RelPermalink }}" />
</a>
<div class="partner-comment__quote-container">
<div class="quote-decoration quote-before">
{{ partial "helpers/svg" (dict "path" "icons/quote") }}
</div>
<p>
{{ $comment.quote }}
</p>
<div class="quote-decoration quote-after">
{{ partial "helpers/svg" (dict "path" "icons/quote") }}
</div>
</div>
<div class="partner-comment__author">
<div class="partner-comment__author-name">
{{ with $comment.name }}{{ . }}{{ end }} {{ with $comment.org.intro }}{{ . }}{{ end }} {{ $comment.org.name }}
</div>
</div>
</div>
</div>
<div class="carousel__snapper">
<a href="#partners__slide{{ partial "fullmod" (slice (sub $index 1) $slides_count) }}"
class="carousel__prev">Diapositive précédente</a>
<a href="#partners__slide{{ partial "fullmod" (slice (add $index 1) $slides_count) }}"
class="carousel__next">Diapositive suivante</a>
</div>
</li>
{{ end }}
</ol>
<aside class="carousel__navigation">
<ol class="carousel__navigation-list">
{{ range $index, $s := seq $slides_count }}
<li class="carousel__navigation-item {{ if eq $index 0 }}enabled{{- end -}}">
<a href="#partners__slide{{ $index }}"
class="carousel__navigation-button">{{ $index }}ème diapositive</a>
</li>
{{ end }}
</ol>
</aside>
</div>
</section>
</main>
<div class="section section-with-bg end-landing-section">
{{ with $cover }}
<div class="section__bg" style="background-image: url('{{ .RelPermalink }}')">
</div>
{{ end }}
<div class="section__content">
<div class="page-container">
<h2>Rejoignez nous dans notre aventure !</h2>
<p>
Déjà plus de 120 membres !
</p>
<div class="end-action-container">
<a href="/adhesion" class="button button-transparent">
Adhérer !
</a>
</div>
</div>
</div>
</div>
{{ $js := resources.Get "scripts/carousel.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
<script defer src="{{ $js.Permalink }}"></script>
{{ end }}