feat(landing): trailer and articles section
This commit is contained in:
parent
70a8884495
commit
d5d67f7069
22 changed files with 942 additions and 165 deletions
|
|
@ -1,10 +1,14 @@
|
|||
{{ define "main" }}
|
||||
<div class="cover__container">
|
||||
<div class="cover__back" style="background-image: url('https://share.lefuturiste.fr/u/2478737d-7e5e-42cd-8764-d0136ef83546/cover_v2_01.jpg')">
|
||||
<video playsinline autoplay muted loop>
|
||||
<source src="https://static.etoiledebethleem.fr/videos/teaser_v5.mp4" type="video/webm">
|
||||
</video>
|
||||
{{ $cover := (resources.Get (printf "%s" ("images/cover_1.jpg" | safeURL))) }}
|
||||
{{ 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_v5.mp4" type="video/webm"> -->
|
||||
<!-- </video> -->
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="cover__overlay">
|
||||
</div>
|
||||
<div class="cover__content">
|
||||
|
|
@ -19,22 +23,50 @@
|
|||
</div>
|
||||
|
||||
<div class="page-container layout-two-spaced">
|
||||
<p>Campagne d'adhésion 2024, nous avons besoin de vous !</p>
|
||||
<a href="/adhesion" class="button">Adhérer !</a>
|
||||
<div class="alert">
|
||||
<div class="alert-split-content">
|
||||
<p>Campagne d'adhésion 2024, nous avons besoin de vous !</p>
|
||||
<a href="/adhesion" class="button">Adhérer</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> -->
|
||||
{{/* .Content */}}
|
||||
{{/*
|
||||
{{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
|
||||
{{ range $paginator.Pages }}
|
||||
{{ .Render "summary" }}
|
||||
{{ end }}
|
||||
{{ partial "pagination.html" . }}
|
||||
*/}}
|
||||
<section class="trailer-section landing-section" id="trailer-organization">
|
||||
<div class="page-container">
|
||||
<div class="organization__explain">
|
||||
<h2>Regardez la vidéo de présentation</h2>
|
||||
<div class="side-icon">
|
||||
{{ partial "helpers/svg" (dict "path" "icons/old_tv_3d") }}
|
||||
</div>
|
||||
<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&p2p=0"
|
||||
frameborder="0" allowfullscreen=""
|
||||
sandbox="allow-same-origin allow-scripts allow-popups"
|
||||
></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">
|
||||
|
|
@ -337,51 +369,6 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="timeline-section">
|
||||
<div class="page-container history-section timeline-container">
|
||||
<div class="timeline">
|
||||
<div class="timeline-item timeline-back-decoration">
|
||||
<div class="timeline-item__inner">
|
||||
<div class="timeline-item__dot-container">
|
||||
<div class="timeline-trace"></div>
|
||||
</div>
|
||||
<div class="timeline-item__summary">
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="timeline-list">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-item__inner">
|
||||
<div class="timeline-item__dot-container">
|
||||
<div class="timeline-item__dot"></div>
|
||||
</div>
|
||||
<div class="timeline-item__summary">
|
||||
1970
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item__content card">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-item__inner">
|
||||
<div class="timeline-item__dot-container">
|
||||
<div class="timeline-item__dot"></div>
|
||||
</div>
|
||||
<div class="timeline-item__summary">
|
||||
1970
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item__content card">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="organization-section" id="section-organization">
|
||||
<div class="page-container">
|
||||
<!-- <div class="organization__image"> -->
|
||||
|
|
@ -404,71 +391,95 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="news-section" id="section-news">
|
||||
<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> -->
|
||||
<section class="landing-section news-section" id="section-news">
|
||||
<div class="side-icon">
|
||||
{{ partial "helpers/svg" (dict "path" "icons/press") }}
|
||||
</div>
|
||||
|
||||
<div class="page-container">
|
||||
Others articles...
|
||||
|
||||
<div class="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 }}
|
||||
{{ $featuredImage = $element.Resources.GetMatch .src }}
|
||||
{{ end }}
|
||||
{{ $featuredImage := $featuredImage.Resize "800x" }}
|
||||
<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>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue