feat(landing): add landing video

This commit is contained in:
Matthieu Bessat 2023-07-06 22:28:16 +02:00
parent cea3b2f98b
commit ab7f67d4ba
3 changed files with 41 additions and 24 deletions

View file

@ -1,18 +1,31 @@
.cover__container { .cover__container {
margin-top: 1px;
position: relative; position: relative;
min-height: 40rem; min-height: 50rem;
} }
.cover__back { .cover__back {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-x: center; background-position-x: center;
background-position-y: center; background-position-y: center;
z-index: 1; z-index: 1;
// to center the video
text-align: center;
display: flex;
justify-content: center;
video {
width: 100%;
height: 100%;
background-color: gray;
object-fit: cover;
position: relative;
}
} }
.cover__content { .cover__content {
@ -79,6 +92,11 @@
@import 'landing/timeline.scss'; @import 'landing/timeline.scss';
@media (max-width: $lg-breakpoint) {
.cover__back {
}
}
@media (min-width: $lg-breakpoint) { @media (min-width: $lg-breakpoint) {
.cover__back { .cover__back {
background-position-x: center; background-position-x: center;
@ -263,22 +281,6 @@
@media (max-width: $md-breakpoint) { @media (max-width: $md-breakpoint) {
.history-container { .history-container {
.layout-grid-image.third {
display: block;
}
.image-container {
display: flex;
justify-content: center;
}
.slide-image {
height: 19rem;
img {
width: auto;
height: 100%;
}
}
} }
} }

View file

@ -1,6 +1,9 @@
{{ define "main" }} {{ define "main" }}
<div class="cover__container"> <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')"> <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/cover_trailer.webm" type="video/webm">
</video>
</div> </div>
<div class="cover__overlay"> <div class="cover__overlay">
</div> </div>
@ -15,7 +18,7 @@
<div class="accent-separator"> <div class="accent-separator">
</div> </div>
<div class="page-container" style="margin-top: 2rem"> <div class="page-container" style="padding: 2rem 0">
<a class="button">Adhérer !</a> <a class="button">Adhérer !</a>
</div> </div>
@ -310,10 +313,10 @@
<section class="organization-section"> <section class="organization-section">
<div class="page-container"> <div class="page-container">
<div class="organization__image"> <!-- <div class="organization__image"> -->
<!-- {{ $image := resources.Get "images/assemblee_constitutive_ensemble.jpg" }} --> <!-- <!-1- {{ $image := resources.Get "images/assemblee_constitutive_ensemble.jpg" }} -1-> -->
<img src="https://picsum.photos/300/300" alt="Assemblée générale constitutive" /> <!-- <img src="https://picsum.photos/300/300" alt="Assemblée générale constitutive" /> -->
</div> <!-- </div> -->
<div class="organization__explain"> <div class="organization__explain">
<h2>L'association : L'Étoile de Bethléem</h2> <h2>L'association : L'Étoile de Bethléem</h2>
<p> <p>
@ -388,8 +391,10 @@
<!-- </div> --> <!-- </div> -->
<!-- </div> --> <!-- </div> -->
<div class="page-container">
Others articles... Others articles...
</div> </div>
</div>
</section> </section>

View file

@ -7,12 +7,22 @@
<!-- src="{{ $image.RelPermalink }}" /> --> <!-- src="{{ $image.RelPermalink }}" /> -->
</a> </a>
<nav class="site-header__nav desktop-nav"> <nav class="site-header__nav desktop-nav">
{{ if eq .File.Dir "/" }}
<ul class="inline-menu-list">
<li><a href="#association">L'association</a></li>
<li><a href="#histoires">Histoire</a></li>
<li><a href="#images">Galerie</a></li>
<li><a href="#actualites">Actualités</a></li>
</ul>
{{ end }}
{{ if not (eq .File.Dir "/") }}
<ul class="inline-menu-list"> <ul class="inline-menu-list">
<li><a href="/actualites">Actualités</a></li> <li><a href="/actualites">Actualités</a></li>
<li><a href="/association">L'association</a></li> <li><a href="/association">L'association</a></li>
<li><a href="/histoires">Histoire</a></li> <li><a href="/histoires">Histoire</a></li>
<li><a href="/images">Galerie</a></li> <li><a href="/images">Galerie</a></li>
</ul> </ul>
{{ end }}
</nav> </nav>
<div class="burger-menu"> <div class="burger-menu">
<div class="burger-button-container"> <div class="burger-button-container">