assets/images/icons/quote.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg  viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.62231 6.78278C10.0546 6.43909 10.1265 5.81001 9.78277 5.3777C9.43908 4.94539 8.81001 4.87354 8.37769 5.21724C4.73471 8.11342 4 11.8784 4 16C4 17.6569 5.34315 19 7 19C8.65685 19 10 17.6569 10 16C10 14.3432 8.65685 13 7 13C6.71233 13 6.43412 13.0405 6.17076 13.1161C6.5162 10.5872 7.45738 8.50391 9.62231 6.78278ZM20 16C20 17.6569 18.6569 19 17 19C15.3431 19 14 17.6569 14 16C14 11.8784 14.7347 8.11342 18.3777 5.21724C18.81 4.87354 19.4391 4.94539 19.7828 5.3777C20.1265 5.81001 20.0546 6.43909 19.6223 6.78278C17.4574 8.50391 16.5162 10.5872 16.1708 13.1161C16.4341 13.0405 16.7123 13 17 13C18.6569 13 20 14.3432 20 16Z" />
+</svg>

assets/sass/article.scss

@@ -12,3 +12,72 @@
 
 .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;
+}
+
+.right-floating-image {
+    float: right;
+}

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,336 @@
+// 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;
+    z-index: 2;
+    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%;
+    counter-increment: item;
+}
+
+.slide-content {
+    position: absolute;
+    width: 100%;
+
+
+    .slide-image {
+        padding: 0;
+        margin: 0;
+        figcaption {
+            font-size: .9rem;
+            opacity: 0.9;
+            text-align: center;
+        }
+    }
+}
+
+.slide-inner {
+}
+
+// .carousel__slide:nth-child(even) {
+//     background-color: #99f;
+// }
+
+.carousel__slide:before {
+    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;
+    z-index: 1;
+}
+
+// @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;
+    z-index: 2;
+    right: 0;
+    bottom: 1rem;
+    left: 0;
+    text-align: center;
+}
+
+.carousel__navigation-list,
+.carousel__navigation-item {
+    display: flex;
+    justify-content: center;
+}
+
+.carousel__navigation-button {
+    display: inline-block;
+    width: 1.5rem;
+    height: 1.5rem;
+    background-clip: content-box;
+    background-color: #eeeeee;
+    box-shadow: inset 0 0 2px black;
+    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;
+    z-index: 4;
+}
+
+.carousel::before,
+.carousel__prev {
+    left: -0.5rem;
+}
+
+.carousel::after,
+.carousel__next {
+    right: -0.5rem;
+}
+
+// the big circle navigation button left and right
+.carousel::before,
+.carousel::after {
+    content: '';
+    z-index: 1;
+    background-color: transparent;
+    opacity: 0.65;
+    background-size: 1.5rem 1.5rem;
+    background-repeat: no-repeat;
+    background-position: center center;
+    font-size: 2.5rem;
+    line-height: 4rem;
+    text-align: center;
+    pointer-events: none;
+}
+
+.carousel::before:hover, .carousel::after:hover {
+    opacity: 1 !important;
+}
+
+.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' /%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' /%3E%3C/svg%3E");
+}
+
+.carousel__navigation-item {
+    display: flex;
+    align-items: center;
+}
+
+.carousel__navigation-item.enabled {
+    .carousel__navigation-button {
+        opacity: 0.5;
+        background-color: lighten($accent, 0%);
+    }
+}
+
+@media (max-width: $md-breakpoint) {
+    $md-height: 45rem;
+    .carousel {
+        height: $md-height !important;
+    }
+
+    .carousel::before,
+    .carousel::after,
+    .carousel__prev,
+    .carousel__next {
+        transform: translateY($md-height/2 - 2rem) !important;
+    }
+
+    .carousel::next {
+
+    }
+
+}
+
+
+// layout definitions inside the slides
+.layout-grid-image {
+    display: grid;
+    grid-column-gap: 2rem;
+
+
+    .image-container {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.double-image-container {
+    display: flex;
+}
+
+.layout-grid-image.third {
+    grid-template-columns: 3fr 1fr;
+}
+
+.layout-grid-image.half {
+    grid-template-columns: 1fr 1fr;
+}
+
+@media (max-width: $md-breakpoint) {
+    .carousel {
+        .layout-grid-image.half {
+            display: block;
+        }
+
+        .layout-grid-image.third {
+            display: block;
+        }
+
+        .image-container {
+            display: flex;
+            justify-content: center;
+        }
+
+        .slide-image {
+            height: 19rem;
+            img {
+                width: auto;
+                height: 100%;
+            }
+        }
+    }
+}

assets/sass/countdown.scss

@@ -0,0 +1,205 @@
+.countdown-page {
+    background-color: $background;
+    color: white;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.countdown-page__content__container {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+}
+
+.countdown-page__content {
+    margin-top: -5rem;
+    display: flex;
+    align-items: center;
+}
+
+.accent-band {
+    background-color: $accent;
+    height: 1.5vh;
+    width: 100%;
+}
+
+.launch-logo-back {
+    margin-top: -1.8rem;
+
+    opacity: 0.05;
+    position: absolute;
+    top: 0rem;
+    left: 0;
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+        height: 80vh;
+    }
+}
+
+.launch-logo-aligner {
+    margin-top: -10rem;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 8fr;
+}
+
+.launch-logo-large {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 4rem;
+    svg {
+        height: 10rem;
+    }
+}
+
+.launch-logo {
+    svg {
+        width: 10rem;
+        height: auto;
+    }
+}
+
+.launch-introduction {
+    margin-top: 3rem;
+    margin-bottom: 2rem;
+    letter-spacing: .33rem;
+    text-transform: uppercase;
+    font-size: .8rem;
+    text-align: center;
+}
+
+.countdown__container {
+    .countdown__content {
+        flex-shrink: 1;
+        display: flex;
+    }
+
+    .timer__value {
+        font-size: 5.4rem;
+    }
+
+    .timer__label {
+        font-size: 1rem;
+        text-align: center;
+    }
+
+    .timer__separator {
+        margin: 0 1rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .timer__value {
+            opacity: 0.5;
+            margin-top: -.4rem;
+            font-weight: 300;
+        }
+        .timer__label {
+            opacity: 0;
+        }
+    }
+
+    .timer__value {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+@media (max-width: $md-breakpoint) {
+    .launch-logo-back {
+        top: 0;
+        margin-top: 0;
+    }
+    .countdown-page__content {
+        // margin-top: -10rem;
+    }
+    .countdown__container {
+        .timer__value {
+            font-size: 3rem;
+
+        }
+        .timer__separator {
+            margin: 0 .8rem;
+            .timer__value {
+                font-size: 2rem;
+            }
+        }
+        .timer__label {
+            font-size: .8rem;
+        }
+    }
+
+    .countdown__content {
+        justify-content: center;
+    }
+}
+
+.countdown-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+
+    width: 100%;
+
+    background-color: rgba(1, 1, 1, .5);
+    color: white;
+    // background-color: $tertiary;
+    
+    .page-container {
+        display: flex;
+        justify-content: space-between;
+
+    }
+    padding: .5rem 0;
+    
+    .countdown-footer__logo {
+        padding: .3rem 0;
+        svg {
+            width: auto;
+            height: 5rem;
+        }
+    }
+}
+
+.socials {
+    display: flex;
+    align-items: center;
+    .social-icon {
+        width: 1.4rem;
+        color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .social-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .social-text {
+        margin-right: .8rem;
+    }
+    a {
+        color: white;
+        opacity: 0.8;
+    }
+    svg {
+        fill: white;
+        opacity: 0.8;
+    }
+}
+
+@media (max-width: $md-breakpoint) {
+    .socials {
+        .social-text {
+            display: none;
+        }
+    }
+}

assets/sass/general.scss

@@ -1,15 +1,16 @@
- @import url('https://fonts.googleapis.com/css2?family=Bona+Nova:wght@400;700&family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bona+Nova:wght@400;700&family=Roboto:wght:300;400;500&display=swap');
 
 .serif-font {
     font-family: 'Bona Nova', serif;
- }
+}
+
 
 body {
     // font-family: 'Trebuchet MS', Tahoma,sans-serif;
     // font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
     // font-family: "Open Sans","Segoe UI",HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
     font-family: 'Roboto', sans-serif;
-    font-weight: 300;
+    font-weight: 400;
     margin: 0;
     font-size: 17px;
     line-height: 1.6;
@@ -62,28 +63,33 @@ a:hover {
     }
 
     background-color: darken($background-secondary, 15%);
- }
+}
 
 .separation-section {
     margin-top: 3rem;
     padding: 1.2rem 0;
- }
+}
 
- .w-100 {
+.w-100 {
     width: 100px;
- }
+}
 
- .w-200 {
+.w-200 {
     width: 200px;
- }
+}
 
- img {
+.h-100 {
+    height: 100%;
+}
+
+img {
     max-width: 100%;
- }
+}
 
- .grid {
+.grid {
     display: grid;
- }
- .grid-2 {
+}
+.grid-2 {
     grid-template-columns: 1fr 1fr;
- }
+}
+

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;
@@ -108,14 +126,13 @@
 
     @keyframes compare-anim {
         0% {
-            clip-path: inset(100% 100% 100% 0%);
         }
         100% {
-            clip-path: inset(100% 100% 100% 100%);
         }
     }
     .compare-items-dynamic {
         .compare-duet {
+            border-radius: 4px;
             overflow: hidden;
             position: relative;
 
@@ -126,12 +143,16 @@
                 overflow: hidden;
                 clip-path: inset(100% 100% 100% 0%);
             }
+            .compare-hidden {
+                clip-path: inset(100% 100% 100% 0%);
+                transition: clip-path 2s cubic-bezier(.86,0,.07,1);
+                animation-fill-mode: forwards;
+            }
         }
 
         .compare-duet:hover {
             .compare-hidden {
-                animation: compare-anim 2s cubic-bezier(.86,0,.07,1);
-                animation-fill-mode: forwards;
+                clip-path: inset(100% 100% 100% 100%);
             }
         }
     }
@@ -159,8 +180,107 @@
 }
 
 .landing-main {
+    section:first-of-type {
+        border-top: 1px solid rgba(1, 1, 1, 0.2);
+    }
     section {
         border-bottom: 1px solid rgba(1, 1, 1, 0.2);
     }
 }
 
+
+.partners-container .carousel {
+    border-top: 1px solid #eee;
+}
+
+.partner-comment__container {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background: rgba(1, 1, 1, 0.05);
+
+    .partner-comment {
+        padding-bottom: 1rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .partner-comment__quote-container {
+        display: flex;
+        width: 80%;
+        margin: 0 auto;
+        p {
+            text-align: center;
+            margin: 2.5rem auto;
+            position: relative;
+            display: block;
+            font-style: italic;
+            font-weight: 300;
+        }
+        .quote-decoration {
+            display: flex;
+            flex-direction: column;
+
+            svg {
+                fill: rgba(0, 0, 0, 0.2);
+                width:  3rem;
+                height: 3rem;
+            }
+
+        }
+        .quote-before {
+            justify-content: flex-start;
+        }
+        .quote-after {
+            justify-content: flex-end;
+            svg {
+                transform: rotate(180deg)
+            }
+        }
+    }
+
+    .partner-comment__author {
+        margin-top: .5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .partner-comment__author-picture {
+        width: 10rem;
+        aspect-ratio: 1;
+        // border-radius: 50%;
+    }
+    .partner-comment__author-name {
+        margin-top: .5rem;
+    }
+
+    .partner-comment__author-link:hover {
+        opacity: 0.6;
+    }
+}
+
+
+.history-component__content {
+}
+
+.history-container {
+    .double-horizontal-image-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+
+        img {
+            width: 100%;
+            height: 17rem;
+            object-fit: cover;
+        }
+    }
+}
+
+@media (max-width: $md-breakpoint) {
+    .history-container {
+    }
+}
+

assets/sass/main.scss

@@ -14,6 +14,7 @@ $background-secondary: #BFB78F;
 $secondary: #011F26;
 $tertiary: #A5A692;
 $accent: #F2A71B;
+$accent-dark: #A56F09;
 
 .pagination-nav {
     margin-top: 1em;
@@ -32,6 +33,8 @@ $accent: #F2A71B;
 @import 'single_image.scss';
 @import 'footer.scss';
 @import 'sections.scss';
+@import 'carousel.scss';
+@import 'countdown.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")
+            }
+        })
+    }
+})
+

config.toml

@@ -13,6 +13,9 @@ changefreq = 'weekly'
 
 [params]
 dateFmt = "02.01.2006 15:04"
+    [params.socials]
+    facebook = "https://www.facebook.com/groups/bethleemaubevoye"
+    twitter = "https://www.helloasso.com/associations/l-etoile-de-bethleem-association-des-amis-de-la-chapelle-de-bethleem-d-aubevoye/"
 
 [params.defaultImage] 
 local = true
@@ -28,3 +31,4 @@ imtag = 'imtags'
     [markup.goldmark.renderer]
       unsafe = true
 
+

content/actualites/fake-1/index.md

@@ -0,0 +1,40 @@
+---
+title: Annonce des visites de la chapelle
+date: 2023-02-21
+---
+
+Depuis la création du groupe Facebook dédié à la Chapelle de Bethléem, vous n'avez cessé d'être de plus en plus nombreux à témoigner votre intérêt.🙏
+
+Cet intérêt s'est traduit par le souhait croissant de constituer une association de sauvegarde et de valorisation du site.
+
+Nous avions à cet égard sondé vos intentions au printemps.
+
+## ⭐ Le moment est venu de prendre rendez-vous.
+
+Nous vous convions donc le samedi 24 septembre 2022 à 14 h 30, en la salle fête de Saint-Aubin sur Gaillon.
+
+Nous vous y présenterons le projet d'association, auquel vous pourrez vous joindre comme membres fondateurs.
+
+<!-- Nous vous remercions de bien vouloir nous indiquer par cet évènement si vous souhaitez assister à cette réunion de lancement. -->
+
+## Le Projet d'association
+
+Cette association  culturelle et patrimoniale aura à cœur  de préserver,  promouvoir et valoriser sous tous ses aspects un patrimoine unique. 
+À cet égard,  il sera notamment demandé aux membres fondateurs d'approuver les statuts de L’Etoile de Bethléem - Association des Amis de la Chapelle de Bethléem d’Aubevoye, dont le projet d'article 2  propose l'objet social comme suit :
+
+> L’Association a pour objet de :
+> - Contribuer à la sauvegarde et à la restauration de la Chapelle de Bethléem sise à Aubevoye, dans la commune administrative du Val d’Hazey (Eure) en Normandie  ;
+> - Promouvoir ce monument, particulièrement sa crypte unique, en approfondissant sa connaissance, en défendant son image et en assurant sa communication ;
+> - Valoriser le site  par des actions concourant à l’entretien, à la promotion et à  l'animation de ce patrimoine historique, culturel, religieux et naturel et de tout ce qui le constitue,  qu'elle entend mieux faire connaître, apprécier et protéger.
+> 
+> A cet égard, l’Association reconnaît et s’attache à préserver le caractère chrétien du monument, légué par son histoire, depuis sa fondation par le Cardinal Charles 1er de Bourbon.
+
+## 👉 L'ordre du jour
+
+- Présentation du projet,
+- Adoption des statuts,
+- Constitution des instances,
+- Détermination du montant de la cotisation.
+
+La chapelle compte sur vous ⛪
+

content/actualites/fake-2/index.md

@@ -0,0 +1,40 @@
+---
+title: Partenariat entre X et Y pour faire Z
+date: 2023-06-15
+---
+
+Depuis la création du groupe Facebook dédié à la Chapelle de Bethléem, vous n'avez cessé d'être de plus en plus nombreux à témoigner votre intérêt.🙏
+
+Cet intérêt s'est traduit par le souhait croissant de constituer une association de sauvegarde et de valorisation du site.
+
+Nous avions à cet égard sondé vos intentions au printemps.
+
+## ⭐ Le moment est venu de prendre rendez-vous.
+
+Nous vous convions donc le samedi 24 septembre 2022 à 14 h 30, en la salle fête de Saint-Aubin sur Gaillon.
+
+Nous vous y présenterons le projet d'association, auquel vous pourrez vous joindre comme membres fondateurs.
+
+<!-- Nous vous remercions de bien vouloir nous indiquer par cet évènement si vous souhaitez assister à cette réunion de lancement. -->
+
+## Le Projet d'association
+
+Cette association  culturelle et patrimoniale aura à cœur  de préserver,  promouvoir et valoriser sous tous ses aspects un patrimoine unique. 
+À cet égard,  il sera notamment demandé aux membres fondateurs d'approuver les statuts de L’Etoile de Bethléem - Association des Amis de la Chapelle de Bethléem d’Aubevoye, dont le projet d'article 2  propose l'objet social comme suit :
+
+> L’Association a pour objet de :
+> - Contribuer à la sauvegarde et à la restauration de la Chapelle de Bethléem sise à Aubevoye, dans la commune administrative du Val d’Hazey (Eure) en Normandie  ;
+> - Promouvoir ce monument, particulièrement sa crypte unique, en approfondissant sa connaissance, en défendant son image et en assurant sa communication ;
+> - Valoriser le site  par des actions concourant à l’entretien, à la promotion et à  l'animation de ce patrimoine historique, culturel, religieux et naturel et de tout ce qui le constitue,  qu'elle entend mieux faire connaître, apprécier et protéger.
+> 
+> A cet égard, l’Association reconnaît et s’attache à préserver le caractère chrétien du monument, légué par son histoire, depuis sa fondation par le Cardinal Charles 1er de Bourbon.
+
+## 👉 L'ordre du jour
+
+- Présentation du projet,
+- Adoption des statuts,
+- Constitution des instances,
+- Détermination du montant de la cotisation.
+
+La chapelle compte sur vous ⛪
+

content/countdown/_index.md

@@ -0,0 +1,4 @@
+---
+with_header: false
+with_footer: false
+---

content/landing-matthieu/_index.md

@@ -1 +0,0 @@
-hello world

data/partners.yaml

@@ -0,0 +1,36 @@
+people:
+  - name: Jessica
+    org:
+      name: T'es pas cap
+      intro: de
+      website: https://tes-pas-cap-a-gaillon.fr/
+    image: tespascap.svg
+    quote: |
+      Soutenons l'association qui sauvegarde la chapelle de Bethléem à Aubevoye, témoignage précieux de notre histoire.
+
+  - name: Stéphane
+    org:
+      name: Brasserie Les Cottereaux
+      intro: de la
+      website: https://www.agglo-seine-eure.fr/equipements/brasserie-les-cottereaux/
+    image: BLC_logo_color.png
+    quote: |
+      C'est tout naturellement que nous avons lancé le partenariat avec L'étoile de Bethléem dont la vocation est de rénover une pepite de notre patrimoine historique.
+
+  - name: null
+    org:
+      name: Crédit Mutuel de Normandie
+      intro: du
+    image: credit.svg
+    quote: |
+      Partenaire privilégié des associations comme l'Étoile de Bethléem, le crédit mutuel vous accompagne dans tous vos projets.
+
+  - name: Phillipe
+    org:
+      name: AMSE
+      intro: de l'
+      website: https://www.amse.asso.fr/
+    image: amse.svg
+    quote: |
+      Soucieux de sauvegarder le patrimoine de la région Gaillon Le Val d'Hazey, nous souhaitons bonne réussite à cette association qui œuvre pour la remise en état du site de Bethléem.
+

layouts/_default/baseof.html

@@ -7,9 +7,13 @@
 </head>
 <body>
     <div class="footer-push">
+        {{ if or (not (isset .Params "with_header")) .Params.with_header }}
             {{ partial "header" . }}
+        {{ end }}
         {{ block "main" . }}{{ end }}
     </div>
+    {{ if or (not (isset .Params "with_footer")) .Params.with_footer }}
         {{ partial "footer" . }}
+    {{ end }}
 </body>
 </html>

layouts/countdown/list.html

@@ -0,0 +1,93 @@
+{{ define "main" }}
+<div class="countdown-page">
+    <div class="accent-band">
+    </div>
+
+    <div class="launch-logo-back">
+    {{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent") }}
+    </div>
+    <div class="h-100">
+        <div class="countdown-page__content__container">
+            <div class="countdown-page__content">
+
+                <div class="countdown__container">
+                    <div class="launch-introduction">
+                        <div>Lancement de la campagne d'adhésion dans...</div>
+                    </div>
+                    <div class="countdown__content">
+                        <div class="timer__element days">
+                            <div class="timer__value" id="days"></div>
+                            <div class="timer__label">jours</div>
+                        </div>
+                        <div class="timer__element timer__separator">
+                            <div class="timer__value">:</div>
+                            <div class="timer__label">0</div>
+                        </div>
+                        <div class="timer__element hours">
+                            <div class="timer__value" id="hours"></div>
+                            <div class="timer__label">heures</div>
+                        </div>
+                        <div class="timer__element timer__separator">
+                            <div class="timer__value">:</div>
+                            <div class="timer__label">0</div>
+                        </div>
+                        <div class="timer__element minutes">
+                            <div class="timer__value" id="minutes"></div>
+                            <div class="timer__label">minutes</div>
+                        </div>
+                        <div class="timer__element timer__separator">
+                            <div class="timer__value">:</div>
+                            <div class="timer__label">0</div>
+                        </div>
+                        <div class="timer__element seconds">
+                            <div class="timer__value" id="seconds"></div>
+                            <div class="timer__label">secondes</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="countdown-footer">
+        <div class="page-container">
+            <div class="countdown-footer__logo">
+                {{ partial "helpers/svg" (dict "path" "all_logos/horizontal_white_transparent") }}
+            </div>
+            <div class="socials">
+                <a href="{{ .Site.Params.socials.facebook }}" class="social-item" aria-label="Groupe facebook">
+                    <div class="social-text">
+                        Retrouvez nous sur facebook
+                    </div>
+                    <div class="social-icon">
+                    {{ partial "helpers/svg" (dict "path" "icons/facebook" "class" "site-footer-socials__logo") }}
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.3.0/luxon.min.js" integrity="sha512-KKbQg5o92MwtJKR9sfm/HkREzfyzNMiKPIQ7i7SZOxwEdiNCm4Svayn2DBq7MKEdrqPJUOSIpy1v6PpFlCQ0YA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script>
+
+const components = ['days', 'hours', 'minutes', 'seconds']
+
+function render() {
+    let duration = luxon.DateTime.now().diff(luxon.DateTime.utc(2023, 7, 14, 10, 0, 0), components)
+    console.log(duration.values)
+
+    components.forEach(key => {
+        document.getElementById(key).innerText = (-duration.values[key]).toString().split(".")[0].padStart(2, "0")
+        // test with random values
+        // document.getElementById(key).innerText = (Math.floor(Math.random() * 99)).toString().split(".")[0].padStart(2, "0")
+    })
+}
+
+render()
+setInterval(() => {
+    render()
+}, 1000)
+
+</script>
+{{ end }}
+

layouts/index.html

@@ -1,16 +1,16 @@
 {{ 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>
         <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>
@@ -18,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>
 
@@ -35,52 +35,230 @@
 		{{ partial "pagination.html" . }}
         */}}
 
-        <section class="history-section">
-            <div class="page-container history-summary">
-                <div class="history-summary__text">
-                    <h2>Bref historique</h2>
+        {{ $slides_count := 4 }}
+        <section class="history-container">
+            <div class="page-container">
+                <h2>Une histoire mouvementée...</h2>
+            </div>
+            <div class="carousel" aria-label="Histoire de la chapelle">
+                <ol class="carousel__viewport">
+
+                    <!-- Bourbon chateau, une crypte particulière, Les chartreux, Mignot et Villain -->
+                    
+                    <li id="history__slide0" tabindex="0" class="carousel__slide">
+                        <div class="slide-content history-component__container">
+                            <div class="page-container slide-inner history-component__content">
+                                <div class="layout-grid-image third">
+                                    <div>
+                                        <h3>Charles de Bourbon, un esprit fondateur</h3>
                                         <p>
-                    Aubevoye possède un souvenir de Terre Sainte unique en France et en Europe. Une reproduction exacte de le grotte de la nativité de Bethléem dans laquelle le Sauveur vint au monde.
-                    Ce monument est dû à la magnificence et à la piété du Cardinal de Bourbon, Charles Ier de Bourbon, oncle paternel de Henri IV, qui fut pendant quelques temps proclamé roi de France par les Ligueurs sous le nom de Charles X.
-                    Archevêque de Rouen de 1550 à 1590, l'éminent prélat qui avait déjà fondé, en 1563, près de son château de Gaillon, la chartreuse de Notre-Dame de Bonne-Esperance (Bourbon-lès-Gaillon), voulut avoir également à portée de sa résidence princière le berceau du Roi des rois.
-                    A cet effet, il envoya deux fois son architecte en Palestine pour lever les plans nécessaires et en 1582, l'édifice était achevé. Le pieux cardinal, qui le désigne lui-même dans ses actes sous le nom de Bethléem, en fit don aux Chartreux avec les terres qui l'environnaient.
-                    Aujourd'hui, malheureusement, la chapelle tombe en ruines. Elle est régulièrement dégradée, pillée, vandalisée.
+                                            Il est le fondateur de la chapelle..
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                         </p>
                                     </div>
-                <div class="history-summary__image">
+                                    <div class="image-container">
                                         {{ $image := resources.Get "images/cardinal_charles_de_bourbon.jpg" }}
-                    <img src="{{ $image.RelPermalink }}" />
+                                        <figure class="slide-image image-with-caption">
+                                            <img
+                                                alt="Portrait de Charles de Bourbon"
+                                                src="{{ $image.RelPermalink }}"
+                                            />
+                                            <figcaption>Portrait de Charles de Bourbon</figcaption>
+                                        </figure>
                                     </div>
                                 </div>
+                            </div>
+                        </div>
+                        <div class="carousel__snapper">
+                            <a href="#history__slide3"
+                               class="carousel__prev">Diapositive précédente</a>
+                            <a href="#history__slide1"
+                               class="carousel__next">Diapositive suivante</a>
+                        </div>
+                    </li>
+
+                    <li id="history__slide1" tabindex="0" class="carousel__slide">
+                        <div class="slide-content history-component__container">
+                            <div class="page-container slide-inner history-component__content">
+                                <div>
+                                    <h3>Une crypte particulière</h3>
+                                    <p>
+                                        La crypte de la chapelle est un lieu unique : c'est une copie presque parfaite de la crypte de la nativité en Judée.
+                                        <!-- Le cardinal ayant envoyé deux fois son architecte en palestine pour faire les relevés, la crypte a Aubevoye est remarquablement similaire à sa jumelle de bethléem -->
+                                    </p>
+                                    <!-- image: porte d'entré crypte ancienne, je pense faire une double 
+                                     aussi: petit ange -->
+                                </div>
+                                <div class="image-container double-horizontal-image-container">
+                                    <figure class="slide-image image-with-caption">
+                                        {{ $image := resources.Get "images/crypte_entree_1.jpg" }}
+                                        {{ $caption := "L'entrée de la crypte" }}
+                                        <img
+                                            alt="{{ $caption }}"
+                                            src="{{ $image.RelPermalink }}"
+                                        />
+                                        <figcaption>{{ $caption }}</figcaption>
+                                    </figure>
+                                    <figure class="slide-image image-with-caption">
+                                        {{ $image := resources.Get "images/crypte_anges_1.jpg" }}
+                                        {{ $caption := "Les anges de la crypte" }}
+                                        <img
+                                            alt="{{ $caption }}"
+                                            src="{{ $image.RelPermalink }}"
+                                        />
+                                        <figcaption>{{ $caption }}</figcaption>
+                                    </figure>
+
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel__snapper">
+                            <a href="#history__slide0"
+                               class="carousel__prev">Diapositive précédente</a>
+                            <a href="#history__slide2"
+                               class="carousel__next">Diapositive suivante</a>
+                        </div>
+                    </li>
+
+                    <li id="history__slide2" tabindex="0" class="carousel__slide">
+                        <div class="slide-content history-component__container">
+                            <div class="page-container slide-inner history-component__content">
+                                <div class="layout-grid-image half">
+                                    <div>
+                                        <h3>Les Chartreux</h3>
+                                        <p>
+                                            Le cardinal fit don de la chapelle et de sa crypte aux Chartreux d'Aubevoye. Chaque Noël ils se rendèrent en procession à la lueure des torches pour célébrer la messe de minuit dans la crypte sacrée. Ils demandèrent au Cardinal de créer un détachement de la chartreuse à la chapelle. 
+                                        </p>
+                                        <p>
+                                            Ils s'occupairent alors du domaine, des vignerons sur les cotaux et de la maintenance de la chapelle jusqu'à la révolution 1791 où ils furent chassés.
+                                        </p>
+                                    </div>
+                                    <div class="image-container">
+                                        {{ $image := resources.Get "images/la_chartreuse_1.jpg" }}
+                                        <figure class="slide-image image-with-caption">
+                                            <img
+                                                alt="Église de la chartreuse Bourbons-lez-Gaillon"
+                                                src="{{ $image.RelPermalink }}"
+                                            />
+                                            <figcaption>Église de la chartreuse Bourbons-lez-Gaillon</figcaption>
+                                        </figure>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel__snapper">
+                            <a href="#history__slide1"
+                               class="carousel__prev">Diapositive précédente</a>
+                            <a href="#history__slide3"
+                               class="carousel__next">Diapositive suivante</a>
+                        </div>
+                    </li>
+
+
+                    <li id="history__slide3" tabindex="0" class="carousel__slide">
+                        <div class="slide-content history-component__container">
+                            <div class="page-container slide-inner history-component__content">
+                                <div class="layout-grid-image half">
+                                    <div>
+                                        <h3>Restauration Mignot et Villain</h3>
+                                        <p>
+                                        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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                                        <p>
+                                    </div>
+                                    <div class="image-container">
+                                        {{ $image := resources.Get "images/chapelle_carte_postale_1.jpg" }}
+                                        <figure class="slide-image image-with-caption">
+                                            <img
+                                                alt="Portrait de Charles de Bourbon"
+                                                src="{{ $image.RelPermalink }}"
+                                            />
+                                            <figcaption>La chapelle en 1912</figcaption>
+                                        </figure>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel__snapper">
+                            <a href="#history__slide2"
+                               class="carousel__prev">Diapositive précédente</a>
+                            <a href="#history__slide0"
+                               class="carousel__next">Diapositive suivante</a>
+                        </div>
+                    </li>
+                </ol>
+                <aside class="carousel__navigation">
+                    <ol class="carousel__navigation-list">
+                    {{ range $index, $s := seq $slides_count }}
+                        <li class="carousel__navigation-item {{ if eq $index 0 }}enabled{{- end -}}">
+                            <a href="#history__slide{{ $index }}"
+                               class="carousel__navigation-button">{{ $index }}ème diapositive</a>
+                        </li>
+                    {{ end }}
+                    </ol>
+                </aside>
+            </div>
         </section>
 
-        <section class="images-section">
-            <h2 class="page-container">Images</h2>
-        </section>
+
+        <!-- <section class="history-section"> -->
+        <!--     <div class="page-container history-summary"> -->
+        <!--         <div class="history-summary__text"> -->
+        <!--             <h2>Bref historique</h2> -->
+        <!--             <p> -->
+        <!--             Aubevoye possède un souvenir de Terre Sainte unique en France et en Europe. Une reproduction exacte de le grotte de la nativité de Bethléem dans laquelle le Sauveur vint au monde. -->
+        <!--             Ce monument est dû à la magnificence et à la piété du Cardinal de Bourbon, Charles Ier de Bourbon, oncle paternel de Henri IV, qui fut pendant quelques temps proclamé roi de France par les Ligueurs sous le nom de Charles X. -->
+        <!--             Archevêque de Rouen de 1550 à 1590, l'éminent prélat qui avait déjà fondé, en 1563, près de son château de Gaillon, la chartreuse de Notre-Dame de Bonne-Esperance (Bourbon-lès-Gaillon), voulut avoir également à portée de sa résidence princière le berceau du Roi des rois. -->
+        <!--             A cet effet, il envoya deux fois son architecte en Palestine pour lever les plans nécessaires et en 1582, l'édifice était achevé. Le pieux cardinal, qui le désigne lui-même dans ses actes sous le nom de Bethléem, en fit don aux Chartreux avec les terres qui l'environnaient. -->
+        <!--             Aujourd'hui, malheureusement, la chapelle tombe en ruines. Elle est régulièrement dégradée, pillée, vandalisée. -->
+        <!--             </p> -->
+        <!--         </div> -->
+        <!--         <div class="history-summary__image"> -->
+        <!--             {{ $image := resources.Get "images/cardinal_charles_de_bourbon.jpg" }} -->
+        <!--             <img src="{{ $image.RelPermalink }}" /> -->
+        <!--         </div> -->
+        <!--     </div> -->
+        <!-- </section> -->
+
+<!--         <section class="images-section"> -->
+<!--             <h2 class="page-container">Images</h2> -->
+<!--         </section> -->
 
         <section class="compare-section">
             <div class="page-container">
                 <h2>Un petit bout de palestine en Normandie...</h2>
-                <div class="compare-items">
-                    <div class="compare-item">
+                <div class="compare-items compare-items-dynamic">
+                    <div class="compare-item compare-east">
                         <figure>
-                            {{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }}
-                            <img class="compare-aubevoye" src="{{ $image.RelPermalink }}" />
-
+                            <div class="compare-duet">
+                                <div class="compare-hidden">
                                     {{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }}
-                            <img class="compare-judee" src="{{ $image.RelPermalink }}" />
+                                    <img class="" src="{{ $image.RelPermalink }}" />
+                                </div>
 
-                            <figcaption>Comparaison crypte vers l'est</figcaption>
+                                <div class="compare-shown">
+                                    {{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }}
+                                    <img class="" src="{{ $image.RelPermalink }}" />
+                                </div>
+                            </div>
+
+                            <figcaption>Comparaison de la crypte vers l'est</figcaption>
                         </figure>
                     </div>
-                    <div class="compare-item">
+                    <div class="compare-item compare-west">
                         <figure>
-                            {{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }}
-                            <img class="compare-aubevoye" src="{{ $image.RelPermalink }}" />
-
+                            <div class="compare-duet">
+                                <div class="compare-hidden">
                                     {{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }}
-                            <img class="compare-judee" src="{{ $image.RelPermalink }}" />
-                            <figcaption>Comparaison crypte vers l'ouest</figcaption>
+                                    <img class="" src="{{ $image.RelPermalink }}" />
+                                </div>
+
+                                <div class="compare-shown">
+                                    {{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }}
+                                    <img class="" src="{{ $image.RelPermalink }}" />
+                                </div>
+
+                            </div>
+                            <figcaption>Comparaison de la crypte vers l'ouest</figcaption>
                         </figure>
                         </figure>
                     </div>
@@ -135,7 +313,12 @@
 
         <section class="organization-section">
             <div class="page-container">
-                <h2>L'Étoile de Bethléem</h2>
+                <!-- <div class="organization__image"> -->
+                <!--     <!-1- {{ $image := resources.Get "images/assemblee_constitutive_ensemble.jpg" }} -1-> -->
+                <!--     <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>
@@ -143,6 +326,134 @@
                     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> -->
+
+                <div class="page-container">
+                    Others articles...
+                </div>
+            </div>
+        </section>
+
+
+
+        {{ $slides_count := len $.Site.Data.partners.people }}
+        <section class="partners-container">
+            <div class="page-container">
+                <h2>Ils nous soutiennent !</h2>
+            </div>
+            <div class="carousel" aria-label="Partners">
+                <ol class="carousel__viewport">
+                    {{ range $index, $comment := $.Site.Data.partners.people }}
+                    <li id="partners__slide{{ $index }}"
+                        tabindex="0"
+                        class="carousel__slide">
+                        <div class="slide-content partner-comment__container">
+                            <div class="slide-inner partner-comment">
+                                {{ $image := resources.Get (printf "images/partners/%s" $comment.image) }}
+                                <a class="partner-comment__author-link" href="{{ $comment.org.website }}">
+                                    <img class="partner-comment__author-picture" alt="Photo d'un de nos soutiens" src="{{ $image.RelPermalink }}" />
+                                </a>
+                                <div class="partner-comment__quote-container">
+                                    <div class="quote-decoration quote-before">
+                                        {{ partial "helpers/svg" (dict "path" "icons/quote") }}
+                                    </div>
+                                    <p>
+                                        {{ $comment.quote }}
+                                    </p>
+                                    <div class="quote-decoration quote-after">
+                                        {{ partial "helpers/svg" (dict "path" "icons/quote") }}
+                                    </div>
+                                </div>
+                                <div class="partner-comment__author">
+                                    <div class="partner-comment__author-name">
+                                        {{ with $comment.name }}{{ . }}{{ end }} {{ with $comment.org.intro }}{{ . }}{{ end }} {{ $comment.org.name }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel__snapper">
+                            <a href="#partners__slide{{ partial "fullmod" (slice (sub $index 1) $slides_count) }}"
+                               class="carousel__prev">Diapositive précédente</a>
+                            <a href="#partners__slide{{ partial "fullmod" (slice (add $index 1) $slides_count) }}"
+                               class="carousel__next">Diapositive suivante</a>
+                        </div>
+                    </li>
+                    {{ end }}
+                </ol>
+                <aside class="carousel__navigation">
+                    <ol class="carousel__navigation-list">
+                    {{ range $index, $s := seq $slides_count }}
+                        <li class="carousel__navigation-item {{ if eq $index 0 }}enabled{{- end -}}">
+                            <a href="#partners__slide{{ $index }}"
+                               class="carousel__navigation-button">{{ $index }}ème diapositive</a>
+                        </li>
+                    {{ end }}
+                    </ol>
+                </aside>
+            </div>
         </section>
 	</main>
 
@@ -154,4 +465,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 }}
+

layouts/landing-matthieu/list.html

@@ -1,170 +0,0 @@
-{{ 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')">
-        </div>
-        <div class="cover__overlay">
-        </div>
-        <div class="cover__content">
-            <div class="cover__title-container">
-                <div class="page-container">
-                    <h1 class="cover__title">
-                        Sauvons la chapelle
-                        de Bethléem !
-                    </h1>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="accent-separator">
-    </div>
-
-    <div class="page-container" style="margin-top: 2rem"> 
-        <a class="button">Adhérer !</a>
-    </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="history-section">
-            <div class="page-container history-summary">
-                <div class="history-summary__text">
-                    <h2>Bref historique</h2>
-                    <p>
-                    Aubevoye possède un souvenir de Terre Sainte unique en France et en Europe. Une reproduction exacte de le grotte de la nativité de Bethléem dans laquelle le Sauveur vint au monde.
-                    Ce monument est dû à la magnificence et à la piété du Cardinal de Bourbon, Charles Ier de Bourbon, oncle paternel de Henri IV, qui fut pendant quelques temps proclamé roi de France par les Ligueurs sous le nom de Charles X.
-                    Archevêque de Rouen de 1550 à 1590, l'éminent prélat qui avait déjà fondé, en 1563, près de son château de Gaillon, la chartreuse de Notre-Dame de Bonne-Esperance (Bourbon-lès-Gaillon), voulut avoir également à portée de sa résidence princière le berceau du Roi des rois.
-                    A cet effet, il envoya deux fois son architecte en Palestine pour lever les plans nécessaires et en 1582, l'édifice était achevé. Le pieux cardinal, qui le désigne lui-même dans ses actes sous le nom de Bethléem, en fit don aux Chartreux avec les terres qui l'environnaient.
-                    Aujourd'hui, malheureusement, la chapelle tombe en ruines. Elle est régulièrement dégradée, pillée, vandalisée.
-                    </p>
-                </div>
-                <div class="history-summary__image">
-                    {{ $image := resources.Get "images/cardinal_charles_de_bourbon.jpg" }}
-                    <img src="{{ $image.RelPermalink }}" />
-                </div>
-            </div>
-        </section>
-
-        <section class="images-section">
-            <h2 class="page-container">Images</h2>
-        </section>
-
-        <section class="compare-section">
-            <div class="page-container">
-                <h2>Un petit bout de palestine en Normandie...</h2>
-                <div class="compare-items compare-items-dynamic">
-                    <div class="compare-item compare-east">
-                        <figure>
-                            <div class="compare-duet">
-                                <div class="compare-hidden">
-                                    {{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }}
-                                    <img class="" src="{{ $image.RelPermalink }}" />
-                                </div>
-
-                                <div class="compare-shown">
-                                    {{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }}
-                                    <img class="" src="{{ $image.RelPermalink }}" />
-                                </div>
-                            </div>
-
-                            <figcaption>Comparaison crypte vers l'est</figcaption>
-                        </figure>
-                    </div>
-                    <div class="compare-item compare-west">
-                        <figure>
-                            <div class="compare-duet">
-                                <div class="compare-hidden">
-                                    {{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }}
-                                    <img class="" src="{{ $image.RelPermalink }}" />
-                                </div>
-
-                                <div class="compare-shown">
-                                    {{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }}
-                                    <img class="" src="{{ $image.RelPermalink }}" />
-                                </div>
-
-                            </div>
-                            <figcaption>Comparaison crypte vers l'ouest</figcaption>
-                        </figure>
-                        </figure>
-                    </div>
-                </div>
-            </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">
-            <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>
-        </section>
-	</main>
-
-    <div class="separation-section secondary-bg">
-        <div class="page-container">
-            <h2>Rejoignez nous dans notre aventure !</h2>
-            <a class="button">Adhérer !</a>
-        </div>
-    </div>
-	<div class="page-container">
-	</div>
-{{ end }}

layouts/partials/fullmod.html

@@ -0,0 +1,4 @@
+{{- $a := index . 0 -}}
+{{- $b := index . 1 -}}
+{{- $c := mod $a $b -}}
+{{- if lt $c 0 -}}{{- add $c $b -}}{{- else -}}{{- $c -}}{{- end -}}

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">

layouts/sandbox-1/list.html

@@ -0,0 +1,9 @@
+{{ define "main" }}
+<h1>Sandbox 1</h1>
+
+<pre>
+{{ mod -1 2 }}
+{{ partial "fullmod" (slice -1 5) }}
+</pre>
+
+{{ end }}

layouts/shortcodes/fullmod.html

@@ -0,0 +1,2 @@
+{{ $c := mod (.Get 0) (.Get 1) }}
+{{ if lt $c 0 }}{{ add (.Get 1) $c }}{{ else }}{{ $c }}{{ end }}