feat(landing): add prominent article and carousel sections

assets/sass/article.scss

@@ -12,3 +12,68 @@
 
 .article {
 }
+
+.prominent-article {
+    position: relative;
+    overflow: hidden;
+
+    .article__background {
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-size: cover;
+        z-index: 0;
+        transition: all 0.2s ease-in-out;
+    }
+
+    .article__background-overlay {
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: rgba(1, 1, 1, 0.5);
+        z-index: 1;
+    }
+
+    .article__content {
+        position: relative;
+        z-index: 2;
+        color: white;
+        padding: 2rem 0;
+        
+        .article__title {
+            color: white;
+            a {
+                color: white;
+                text-decoration: none;
+            }
+        }
+        .article__summary {
+        }
+        .article__meta {
+            margin-bottom: 1rem;
+            opacity: 0.8;
+        }
+        .article__bottom {
+            display: flex;
+            justify-content: end;
+        }
+        .article__readmore {
+            border: 1px solid white;
+        }
+    }
+
+    &:hover {
+        .article__background {
+            transform: scale(1.1);
+        }
+    }
+}
+
+.less-prominent-articles {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}

assets/sass/button.scss

@@ -4,8 +4,8 @@
     background-color: $accent;
     color: white;
     padding: 1rem 2.5rem;
-    font-weight: lighter;
     text-transform: uppercase;
+    text-decoration: none;
     user-select: none;
     min-width: 10rem;
     font-size: 1.2rem;
@@ -24,3 +24,11 @@
     }
 }
 
+.button.button-transparent {
+    background-color: transparent;
+
+    &:hover {
+        background-color: transparent;
+        color: white;
+    }
+}

assets/sass/carousel.scss

@@ -0,0 +1,241 @@
+// FROM https://css-tricks.com/css-only-carousel/
+
+@keyframes tonext {
+75% {
+    left: 0;
+}
+95% {
+    left: 100%;
+}
+98% {
+    left: 100%;
+}
+99% {
+    left: 0;
+}
+}
+
+@keyframes tostart {
+75% {
+    left: 0;
+}
+95% {
+    left: -300%;
+}
+98% {
+    left: -300%;
+}
+99% {
+    left: 0;
+}
+}
+
+@keyframes snap {
+96% {
+    scroll-snap-align: center;
+}
+97% {
+    scroll-snap-align: none;
+}
+99% {
+    scroll-snap-align: none;
+}
+100% {
+    scroll-snap-align: center;
+}
+}
+
+* {
+    box-sizing: border-box;
+    scrollbar-color: transparent transparent; /* thumb and track color */
+    scrollbar-width: 0px;
+}
+
+*::-webkit-scrollbar {
+    width: 0;
+}
+
+*::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+    background: transparent;
+    border: none;
+}
+
+* {
+    -ms-overflow-style: none;
+}
+
+$height: 30rem;
+
+.carousel {
+    ol, li {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    position: relative;
+    filter: drop-shadow(0 0 10px #0003);
+    perspective: 100px;
+    
+    // define the height of the whole carousel
+    height: $height;
+
+}
+
+.carousel__viewport {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    overflow-x: scroll;
+    counter-reset: item;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+}
+
+.carousel__slide {
+    position: relative;
+    flex: 0 0 100%;
+    width: 100%;
+    background-color: #f99;
+    counter-increment: item;
+}
+
+.carousel__slide:nth-child(even) {
+    background-color: #99f;
+}
+
+.carousel__slide:before {
+    content: counter(item);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%,-40%,70px);
+    color: #fff;
+    font-size: 2em;
+}
+
+.carousel__snapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    scroll-snap-align: center;
+}
+
+// @media (hover: hover) {
+//   .carousel__snapper {
+//     animation-name: tonext, snap;
+//     animation-timing-function: ease;
+//     animation-duration: 4s;
+//     animation-iteration-count: infinite;
+//   }
+
+//   .carousel__slide:last-child .carousel__snapper {
+//     animation-name: tostart, snap;
+//   }
+// }
+
+@media (prefers-reduced-motion: reduce) {
+    .carousel__snapper {
+        animation-name: none;
+    }
+}
+
+.carousel:hover .carousel__snapper,
+.carousel:focus-within .carousel__snapper {
+    animation-name: none;
+}
+
+.carousel__navigation {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    padding-bottom: 1rem;
+}
+
+.carousel__navigation-list,
+.carousel__navigation-item {
+    display: flex;
+    justify-content: center;
+}
+
+.carousel__navigation-button {
+    display: inline-block;
+    width: 1.5rem;
+    height: 1.5rem;
+    background-color: #333;
+    background-clip: content-box;
+    border: 0.25rem solid transparent;
+    border-radius: 50%;
+    font-size: 0;
+    transition: transform 0.1s;
+}
+
+.carousel::before,
+.carousel::after,
+.carousel__prev,
+.carousel__next {
+    position: absolute;
+    top: 0;
+    width: 4rem;
+    height: 4rem;
+    transform: translateY($height/2 - 2rem);
+    border-radius: 50%;
+    font-size: 0;
+    outline: 0;
+}
+
+.carousel::before,
+.carousel__prev {
+    left: .5rem;
+}
+
+.carousel::after,
+.carousel__next {
+    right: .5rem;
+}
+
+.carousel::before,
+.carousel::after {
+    content: '';
+    z-index: 1;
+    background-color: #333;
+    background-size: 1.5rem 1.5rem;
+    background-repeat: no-repeat;
+    background-position: center center;
+    color: #fff;
+    font-size: 2.5rem;
+    line-height: 4rem;
+    text-align: center;
+    pointer-events: none;
+}
+
+.carousel::before {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
+}
+
+.carousel::after {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
+}
+
+.carousel__navigation-item {
+    display: flex;
+    align-items: center;
+}
+
+.carousel__navigation-item.enabled {
+    .carousel__navigation-button {
+        opacity: 0.5;
+        background-color: white;
+    }
+}

assets/sass/main.scss

@@ -32,6 +32,7 @@ $accent: #F2A71B;
 @import 'single_image.scss';
 @import 'footer.scss';
 @import 'sections.scss';
+@import 'carousel.scss';
 
 // components
 @import 'tags.scss';

assets/sass/page_container.scss

@@ -2,6 +2,12 @@
     width: 80%;
     margin: 0 auto;
 }
+
+.page-container-large {
+    width: 75%;
+    margin: 0 auto;
+}
+
 .page-full {
     padding: 0 2rem;
 }

assets/scripts/carousel.js

@@ -0,0 +1,43 @@
+function isElementInViewport (el) {
+    var rect = el.getBoundingClientRect();
+
+    return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
+    );
+}
+//
+
+// little addon to enhance the carousel
+
+
+Array.from(document.getElementsByClassName("carousel")).forEach((carousel) => {
+    let viewport = carousel.getElementsByClassName("carousel__viewport")[0];
+    let slides = carousel.getElementsByClassName("carousel__slide");
+    let nav_items = Array.from(carousel.getElementsByClassName("carousel__navigation-item"))
+    let last_scroll_pos = null;
+
+    viewport.onscroll = (_event) => {
+        let position =  slides.length * viewport.scrollLeft / viewport.scrollWidth;
+        let direction = last_scroll_pos == null || last_scroll_pos < viewport.scrollLeft;
+        last_scroll_pos = viewport.scrollLeft;
+
+        nav_items.forEach((item, index) => {
+            if (
+                (direction && position > index-1 && position <= index) ||
+                (!direction && position >= index && position < index+1)
+            ) {
+                if (!item.classList.contains("enabled")) {
+                    item.classList.add("enabled")
+                }
+                return
+            }
+            if (item.classList.contains("enabled")) {
+                item.classList.remove("enabled")
+            }
+        })
+    }
+})
+

layouts/landing-matthieu/list.html

@@ -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 }}
+