diff --git a/assets/images/chapelle_1959.jpg b/assets/images/chapelle_1959.jpg new file mode 100644 index 0000000..42ef39c Binary files /dev/null and b/assets/images/chapelle_1959.jpg differ diff --git a/assets/images/chapelle_carte_postale_1.jpg b/assets/images/chapelle_carte_postale_1.jpg new file mode 100644 index 0000000..372c70a Binary files /dev/null and b/assets/images/chapelle_carte_postale_1.jpg differ diff --git a/assets/images/chapelle_vue_du_ciel_1.jpg b/assets/images/chapelle_vue_du_ciel_1.jpg new file mode 100644 index 0000000..6ba7da8 Binary files /dev/null and b/assets/images/chapelle_vue_du_ciel_1.jpg differ diff --git a/assets/images/chapelle_vue_du_ciel_2.jpg b/assets/images/chapelle_vue_du_ciel_2.jpg new file mode 100644 index 0000000..a356b3a Binary files /dev/null and b/assets/images/chapelle_vue_du_ciel_2.jpg differ diff --git a/assets/images/crypte_anges_1.jpg b/assets/images/crypte_anges_1.jpg new file mode 100644 index 0000000..c1abe11 Binary files /dev/null and b/assets/images/crypte_anges_1.jpg differ diff --git a/assets/images/crypte_entree_1.jpg b/assets/images/crypte_entree_1.jpg new file mode 100644 index 0000000..4731ec7 Binary files /dev/null and b/assets/images/crypte_entree_1.jpg differ diff --git a/assets/images/icons/quote.svg b/assets/images/icons/quote.svg new file mode 100644 index 0000000..a68a32b --- /dev/null +++ b/assets/images/icons/quote.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/la_chartreuse_1.jpg b/assets/images/la_chartreuse_1.jpg new file mode 100644 index 0000000..9981a2e Binary files /dev/null and b/assets/images/la_chartreuse_1.jpg differ diff --git a/assets/sass/article.scss b/assets/sass/article.scss index 589b954..d8ad60e 100644 --- a/assets/sass/article.scss +++ b/assets/sass/article.scss @@ -77,3 +77,7 @@ display: grid; grid-template-columns: 1fr 1fr; } + +.right-floating-image { + float: right; +} diff --git a/assets/sass/carousel.scss b/assets/sass/carousel.scss index 1c35214..ac8e62d 100644 --- a/assets/sass/carousel.scss +++ b/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; - box-shadow: inset 0 0 2px black; + 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%; + } + } } } diff --git a/assets/sass/general.scss b/assets/sass/general.scss index 7d77b5e..5c5444b 100644 --- a/assets/sass/general.scss +++ b/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; - } + font-family: 'Bona Nova', serif; +} body { @@ -46,45 +46,45 @@ a:hover { .secondary-bg { - h2 { - color: white; - } - a { - color: white; - } - color: white; + h2 { + color: white; + } + a { + color: white; + } + color: white; - .button { - background-color: $background-secondary; - color: white; - &:hover { - background-color: lighten($background-secondary, 14%); - } - } + .button { + background-color: $background-secondary; + color: white; + &:hover { + background-color: lighten($background-secondary, 14%); + } + } - background-color: darken($background-secondary, 15%); - } + background-color: darken($background-secondary, 15%); +} .separation-section { - margin-top: 3rem; - padding: 1.2rem 0; - } + margin-top: 3rem; + padding: 1.2rem 0; +} - .w-100 { - width: 100px; - } +.w-100 { + width: 100px; +} - .w-200 { - width: 200px; - } +.w-200 { + width: 200px; +} - img { - max-width: 100%; - } +img { + max-width: 100%; +} - .grid { - display: grid; - } - .grid-2 { - grid-template-columns: 1fr 1fr; - } +.grid { + display: grid; +} +.grid-2 { + grid-template-columns: 1fr 1fr; +} diff --git a/assets/sass/landing.scss b/assets/sass/landing.scss index 164f320..1e3bd4d 100644 --- a/assets/sass/landing.scss +++ b/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%; - text-align: center; - margin: 3rem auto 0 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; + + .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; } - &::before { - content: "“"; - top: -6rem; + .quote-decoration { + display: flex; + flex-direction: column; + + svg { + fill: rgba(0, 0, 0, 0.2); + width: 3rem; + height: 3rem; + } + } - &::after { - content: "”"; - right: -1rem; - bottom: -9rem; + .quote-before { + 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%; + } + } + } +} + diff --git a/layouts/index.html b/layouts/index.html index 4d8cc10..17eddfe 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -7,7 +7,7 @@
-

Relevons notre Bethléem Normand !

+

Relevons notre Bethléem Normand !

@@ -32,28 +32,193 @@ {{ partial "pagination.html" . }} */}} -
-
-
-

Bref historique

-

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

-
-
- {{ $image := resources.Get "images/cardinal_charles_de_bourbon.jpg" }} - -
+ {{ $slides_count := 4 }} +
+
+

Une histoire mouvementée...

+
+
+
    + + + +
  1. +
    +
    +
    +
    +

    Charles de Bourbon, un esprit fondateur

    +

    + 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. +

    +
    +
    + {{ $image := resources.Get "images/cardinal_charles_de_bourbon.jpg" }} +
    + Portrait de Charles de Bourbon +
    Portrait de Charles de Bourbon
    +
    +
    +
    +
    +
    +
    + Diapositive précédente + Diapositive suivante +
    +
    2. + +
  2. +
    +
    +
    +

    Une crypte particulière

    +

    + La crypte de la chapelle est un lieu unique : c'est une copie presque parfaite de la crypte de la nativité en Judée. + +

    + +
    +
    +
    + {{ $image := resources.Get "images/crypte_entree_1.jpg" }} + {{ $caption := "L'entrée de la crypte" }} + {{ $caption }} +
    {{ $caption }}
    +
    +
    + {{ $image := resources.Get "images/crypte_anges_1.jpg" }} + {{ $caption := "Les anges de la crypte" }} + {{ $caption }} +
    {{ $caption }}
    +
    + +
    +
    +
    +
    + Diapositive précédente + Diapositive suivante +
    +
    3. + +
  3. +
    +
    +
    +
    +

    Les Chartreux

    +

    + 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. +

    +

    + 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. +

    +
    +
    + {{ $image := resources.Get "images/la_chartreuse_1.jpg" }} +
    + Église de la chartreuse Bourbons-lez-Gaillon +
    Église de la chartreuse Bourbons-lez-Gaillon
    +
    +
    +
    +
    +
    +
    + Diapositive précédente + Diapositive suivante +
    +
    4. + + +
  4. +
    +
    +
    +
    +

    Restauration Mignot et Villain

    +

    + 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. +

    +

    +
    + {{ $image := resources.Get "images/chapelle_carte_postale_1.jpg" }} +
    + Portrait de Charles de Bourbon +
    La chapelle en 1912
    +
    +
    +
    +
    +
    +
    + Diapositive précédente + Diapositive suivante +
    +
    5. +
+
-
-

Images

-
+ + + + + + + + + + + + + + + + + + + + + + +
@@ -228,48 +393,11 @@
- {{ $slides_count := 6 }} -
-
-
    - {{ range $index, $s := seq (sub $slides_count 0) }} -
  1. -
    - Diapositive précédente - Diapositive suivante -
    -
    2. - {{ end }} -
- -
-
- - - - - - - - {{ $slides_count := len $.Site.Data.partners.people }}
-

Ils nous soutiennent

+

Ils nous soutiennent !

    @@ -278,14 +406,22 @@ tabindex="0" class="carousel__slide">
    -
    +
    {{ $image := resources.Get (printf "images/partners/%s" $comment.image) }} - + Photo d'un de nos soutiens -

    - {{ $comment.quote }} -

    +
    +
    + {{ partial "helpers/svg" (dict "path" "icons/quote") }} +
    +

    + {{ $comment.quote }} +

    +
    + {{ partial "helpers/svg" (dict "path" "icons/quote") }} +
    +
    {{ with $comment.name }}{{ . }}{{ end }} {{ with $comment.org.intro }}{{ . }}{{ end }} {{ $comment.org.name }}