assets/sass/landing.scss

@@ -1,18 +1,31 @@
 .cover__container {
-    margin-top: 1px;
     position: relative;
-    min-height: 40rem;
+    min-height: 50rem;
 }
 
 .cover__back {
     position: absolute;
     height: 100%;
     width: 100%;
+    overflow: hidden;
     background-size: cover;
     background-repeat: no-repeat;
     background-position-x: center;
     background-position-y: center;
     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 {
@@ -79,6 +92,11 @@
 
 @import 'landing/timeline.scss';
 
+@media (max-width: $lg-breakpoint) {
+    .cover__back {
+    }
+}
+
 @media (min-width: $lg-breakpoint) {
     .cover__back {
         background-position-x: center;
@@ -263,22 +281,6 @@
 
 @media (max-width: $md-breakpoint) {
     .history-container {
-
-        .layout-grid-image.third {
-            display: block;
-        }
-
-        .image-container {
-            display: flex;
-            justify-content: center;
-        }
-        .slide-image {
-            height: 19rem;
-            img {
-                width: auto;
-                height: 100%;
-            }
-        }
     }
 }
 

layouts/index.html

@@ -1,6 +1,9 @@
 {{ 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/cover_trailer.webm" type="video/webm">
+            </video>
         </div>
         <div class="cover__overlay">
         </div>
@@ -15,7 +18,7 @@
     <div class="accent-separator">
     </div>
 
-    <div class="page-container" style="margin-top: 2rem"> 
+    <div class="page-container" style="padding: 2rem 0"> 
         <a class="button">Adhérer !</a>
     </div>
 
@@ -310,10 +313,10 @@
 
         <section class="organization-section">
             <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">
                     <h2>L'association : L'Étoile de Bethléem</h2>
                     <p>
@@ -388,8 +391,10 @@
                 <!--     </div> -->
                 <!-- </div> -->
 
+                <div class="page-container">
                     Others articles...
                 </div>
+            </div>
         </section>
 
 

layouts/partials/header.html

@@ -7,12 +7,22 @@
             <!--      src="{{ $image.RelPermalink }}" /> -->
         </a>
         <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">
                 <li><a href="/actualites">Actualités</a></li>
                 <li><a href="/association">L'association</a></li>
                 <li><a href="/histoires">Histoire</a></li>
                 <li><a href="/images">Galerie</a></li>
             </ul>
+            {{ end }}
         </nav>
         <div class="burger-menu">
             <div class="burger-button-container">