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 @@
- 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. -
-
- {{ $comment.quote }} -
++ {{ $comment.quote }} +
+