feat(landing): add history slides

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

@@ -77,3 +77,7 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
+
+.right-floating-image {
+    float: right;
+}

assets/sass/carousel.scss

@@ -88,6 +88,7 @@ $height: 30rem;
 
 .carousel__viewport {
     position: absolute;
+    z-index: 2;
     top: 0;
     right: 0;
     bottom: 0;
@@ -106,6 +107,25 @@ $height: 30rem;
     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;
 // }
@@ -126,6 +146,7 @@ $height: 30rem;
     width: 100%;
     height: 100%;
     scroll-snap-align: center;
+    z-index: 1;
 }
 
 // @media (hover: hover) {
@@ -154,6 +175,7 @@ $height: 30rem;
 
 .carousel__navigation {
     position: absolute;
+    z-index: 2;
     right: 0;
     bottom: 1rem;
     left: 0;
@@ -170,8 +192,9 @@ $height: 30rem;
     display: inline-block;
     width: 1.5rem;
     height: 1.5rem;
-    background-color: rgba(51, 51, 51, 0.7);
     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;
@@ -190,39 +213,45 @@ $height: 30rem;
     border-radius: 50%;
     font-size: 0;
     outline: 0;
+    z-index: 4;
 }
 
 .carousel::before,
 .carousel__prev {
-    left: .5rem;
+    left: -0.5rem;
 }
 
 .carousel::after,
 .carousel__next {
-    right: .5rem;
+    right: -0.5rem;
 }
 
+// the big circle navigation button left and right
 .carousel::before,
 .carousel::after {
     content: '';
     z-index: 1;
-    background-color: #333;
+    background-color: transparent;
+    opacity: 0.65;
     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: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' fill='%23fff'/%3E%3C/svg%3E");
+    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' fill='%23fff'/%3E%3C/svg%3E");
+    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 {
@@ -233,7 +262,75 @@ $height: 30rem;
 .carousel__navigation-item.enabled {
     .carousel__navigation-button {
         opacity: 0.5;
-        background-color: #eeeeee;
+        background-color: lighten($accent, 0%);
-        box-shadow: inset 0 0 2px black;
+    }
+}
+
+@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/general.scss

@@ -1,8 +1,8 @@
- @import url('https://fonts.googleapis.com/css2?family=Bona+Nova:wght@400;700&family=Roboto:wght:300;400;500&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 {
@@ -63,28 +63,28 @@ 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 {
+img {
     max-width: 100%;
- }
+}
 
- .grid {
+.grid {
     display: grid;
- }
+}
- .grid-2 {
+.grid-2 {
     grid-template-columns: 1fr 1fr;
- }
+}

assets/sass/landing.scss

@@ -162,12 +162,19 @@
 }
 
 .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;
@@ -182,41 +189,96 @@
         flex-direction: column;
         align-items: center;
     }
-    .partner-comment__quote {
+
-        width: 75%;
+    .partner-comment__quote-container {
+        display: flex;
+        width: 80%;
+        margin: 0 auto;
+        p {
             text-align: center;
-        margin: 3rem auto 0 auto;
+            margin: 2.5rem auto;
             position: relative;
             display: block;
             font-style: italic;
             font-weight: 300;
-        &::before, &::after {
-            font-size: 8rem;
-            color: rgba(0, 0, 0, 0.2);
-            position: absolute;
         }
-        &::before {
+        .quote-decoration {
-            content: "“";
+            display: flex;
-            top: -6rem;
+            flex-direction: column;
+
+            svg {
+                fill: rgba(0, 0, 0, 0.2);
+                width:  3rem;
+                height: 3rem;
             }
-        &::after {
+
-            content: "”";
+        }
-            right: -1rem;
+        .quote-before {
-            bottom: -9rem;
+            justify-content: flex-start;
+        }
+        .quote-after {
+            justify-content: flex-end;
+            svg {
+                transform: rotate(180deg)
             }
         }
+    }
+
     .partner-comment__author {
-        margin-top: 1rem;
+        margin-top: .5rem;
         display: flex;
         flex-direction: column;
         align-items: center;
     }
     .partner-comment__author-picture {
-        width: 9rem;
+        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 {
+
+        .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

@@ -7,7 +7,7 @@
         <div class="cover__content">
             <div class="cover__title-container">
                 <div class="page-container">
-                    <h1 class="cover__title">Relevons notre Bethléem Normand !</h1>
+                    <h1 class="cover__title">Relevons notre Bethléem Normand !</h1>
                 </div>
             </div>
         </div>
@@ -32,28 +32,193 @@
 		{{ partial "pagination.html" . }}
         */}}
 
-        <section class="history-section">
+        {{ $slides_count := 4 }}
-            <div class="page-container history-summary">
+        <section class="history-container">
-                <div class="history-summary__text">
+            <div class="page-container">
-                    <h2>Bref historique</h2>
+                <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.
+                                            Il est le fondateur de la chapelle..
-                    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.
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    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">
+                                    <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 class="history-section"> -->
-        </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">
@@ -228,48 +393,11 @@
         </section>
 
 
-        {{ $slides_count := 6 }}
-        <section class="carousel-container">
-            <div class="carousel" aria-label="Gallery">
-                <ol class="carousel__viewport">
-                    {{ range $index, $s := seq (sub $slides_count 0) }}
-                    <li id="carousel__slide{{ $index }}"
-                        tabindex="0"
-                        class="carousel__slide">
-                        <div class="carousel__snapper">
-                            <a href="#carousel__slide{{ partial "fullmod" (slice (sub $index 1) $slides_count) }}"
-                               class="carousel__prev">Diapositive précédente</a>
-                            <a href="#carousel__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 (sub $slides_count 0) }}
-                        <li class="carousel__navigation-item {{ if eq $index 0 }}enabled{{- end -}}">
-                            <a href="#carousel__slide{{ $index }}"
-                               class="carousel__navigation-button">{{ $index }}ème diapositive</a>
-                        </li>
-                    {{ end }}
-                    </ol>
-                </aside>
-            </div>
-        </section>
-
-        <!-- {{ range $.Site.Data.partners.people }} -->
-        <!--     <li class="move-item"> -->
-        <!--         {{ .org }} -->
-        <!--         {{ .name }} {{ .quote }} --> 
-        <!--     </li> -->
-        <!-- {{ end }} -->
-
 
         {{ $slides_count := len $.Site.Data.partners.people }}
         <section class="partners-container">
             <div class="page-container">
-                <h2>Ils nous soutiennent</h2>
+                <h2>Ils nous soutiennent !</h2>
             </div>
             <div class="carousel" aria-label="Partners">
                 <ol class="carousel__viewport">
@@ -278,14 +406,22 @@
                         tabindex="0"
                         class="carousel__slide">
                         <div class="slide-content partner-comment__container">
-                            <div class="partner-comment">
+                            <div class="slide-inner partner-comment">
                                 {{ $image := resources.Get (printf "images/partners/%s" $comment.image) }}
-                                <a href="{{ $comment.org.website }}">
+                                <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>
-                                <p class="partner-comment__quote">
+                                <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 }}