etoiledebethleem/website
3
1
Fork 0
Code Issues 6 Pull requests Projects 1 Releases Packages Activity Actions

feat(landing): add prominent article and carousel sections

Browse source
This commit is contained in:
Matthieu Bessat 2023-06-20 15:17:21 +02:00
parent abfd55d14e
commit 2feeb04a14
8 changed files with 514 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

160
layouts/landing-matthieu/list.html
View file

@ -7,10 +7,7 @@
<div class="cover__content">
<div class="cover__title-container">
<div class="page-container">
<h1 class="cover__title">
Sauvons la chapelle
de Bethléem !
</h1>
<h1 class="cover__title">Relevons notre Bethléem Normand</h1>
</div>
</div>
</div>
@ -148,13 +145,149 @@
<section class="organization-section">
<div class="page-container">
<h2>L'Étoile de Bethléem</h2>
<p>
Formé en septembre 2022, suite aux efforts des propriétaires et des passionées de ce monument. Elle a pour but de contribuer à la sauvegarde et à la restauration de la Chapelle de Bethléem d’Aubevoye et de promouvoir ce monument ainsi que mieux le connaitre et l’animer.
</p>
<p>
L’association “L’Étoile de Bethléem - Association des amis de la chapelle de bethléem d’Aubevoye” est immatriculé au près de la préfecture de l’Eure sous le numéro RNA W271006556.
</p>
<div class="organization__image">
<!-- {{ $image := resources.Get "images/assemblee_constitutive_ensemble.jpg" }} -->
<img src="https://picsum.photos/300/300" alt="Assemblée générale constitutive" />
</div>
<div class="organization__explain">
<h2>L'association : L'Étoile de Bethléem</h2>
<p>
Formé en septembre 2022, suite aux efforts des propriétaires et des passionées de ce monument. Elle a pour but de contribuer à la sauvegarde et à la restauration de la Chapelle de Bethléem d’Aubevoye et de promouvoir ce monument ainsi que mieux le connaitre et l’animer.
</p>
<p>
L’association “L’Étoile de Bethléem - Association des amis de la chapelle de bethléem d’Aubevoye” est immatriculé au près de la préfecture de l’Eure sous le numéro RNA W271006556.
</p>
</div>
</div>
</section>
<section class="news-section">
<div class="news-presentation">
{{ $pages := where .Site.RegularPages "Type" "in" "actualites" }}
{{ $pag := .Paginate ($pages) }}
{{ range $index, $element := $pag.Pages }}
{{ if eq $index 0 }}
{{ $featuredImage := (resources.Get (printf "%s" ("cover/cover.jpg" | safeURL))) }}
{{ with .Params.featured_image }}
{{ $featuredImage = .Resources.GetMatch (.src | safeURL) }}
{{ end }}
{{ $featuredImage := $featuredImage.Resize "450x" }}
<div
class="prominent-article article-card"
>
<div
class="article__background"
style="background-image: url('{{ $featuredImage.RelPermalink }}')"
>
</div>
<div
class="article__background-overlay"
>
</div>
<div class="article__content page-container">
<div class="article__pre">
Dernières nouvelles...
</div>
<h2 class="article__title">
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h2>
<div class="article__meta">
Le {{ .Date.Format "Monday 2 January 2006" }}
</div>
<div class="article__summary">
{{ .Summary }}
</div>
<div class="article__bottom">
<a
href="{{ .RelPermalink }}"
class="article__readmore button button-transparent"
>
Lire plus
</a>
</div>
</div>
</div>
{{ end }}
{{ end }}
<!-- <div class="prominent-article"> -->
<!-- <div class="prominent-article__image"> -->
<!-- </div> -->
<!-- <div class="prominent-article__content"> -->
<!-- <div class="prominent-article__title"> -->
<!-- </div> -->
<!-- <div class="prominent-article__summary"> -->
<!-- </div> -->
<!-- <div class="prominent-article__meta"> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
Others articles...
</div>
</section>
<section class="carousel-container">
<div class="carousel" aria-label="Gallery">
<ol class="carousel__viewport">
<li id="carousel__slide1"
tabindex="0"
class="carousel__slide">
<div class="carousel__snapper">
<a href="#carousel__slide4"
class="carousel__prev">Diapositive précédente</a>
<a href="#carousel__slide2"
class="carousel__next">Diapositive suivante</a>
</div>
</li>
<li id="carousel__slide2"
tabindex="0"
class="carousel__slide">
<div class="carousel__snapper"></div>
<a href="#carousel__slide1"
class="carousel__prev">Diapositive précédente</a>
<a href="#carousel__slide3"
class="carousel__next">Diapositive suivante</a>
</li>
<li id="carousel__slide3"
tabindex="0"
class="carousel__slide">
<div class="carousel__snapper"></div>
<a href="#carousel__slide2"
class="carousel__prev">Diapositive précédente</a>
<a href="#carousel__slide4"
class="carousel__next">Diapositive suivante</a>
</li>
<li id="carousel__slide4"
tabindex="0"
class="carousel__slide">
<div class="carousel__snapper"></div>
<a href="#carousel__slide3"
class="carousel__prev">Diapositive précédente</a>
<a href="#carousel__slide1"
class="carousel__next">Diapositive suivante</a>
</li>
</ol>
<aside class="carousel__navigation">
<ol class="carousel__navigation-list">
<li class="carousel__navigation-item enabled">
<a href="#carousel__slide1"
class="carousel__navigation-button">1ère diapositive</a>
</li>
<li class="carousel__navigation-item">
<a href="#carousel__slide2"
class="carousel__navigation-button">2ème diapositive</a>
</li>
<li class="carousel__navigation-item">
<a href="#carousel__slide3"
class="carousel__navigation-button">3ème diapositive</a>
</li>
<li class="carousel__navigation-item">
<a href="#carousel__slide4"
class="carousel__navigation-button">4ème diapositive</a>
</li>
</ol>
</aside>
</div>
</section>
</main>
@ -167,4 +300,9 @@
</div>
<div class="page-container">
</div>
{{ $js := resources.Get "scripts/carousel.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
<script defer src="{{ $js.Permalink }}"></script>
{{ end }}