Compare commits

..

No commits in common. "1cdbe6ad131873713e30e2817f0ef9a5ed17bdb0" and "c4937bd0d10ea8fc420f500c415f2dd358b65ddb" have entirely different histories.

14 changed files with 132 additions and 435 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 284 KiB

View file

@ -1,4 +0,0 @@
<?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>

Before

Width:  |  Height:  |  Size: 784 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 MiB

View file

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

View file

@ -88,7 +88,6 @@ $height: 30rem;
.carousel__viewport { .carousel__viewport {
position: absolute; position: absolute;
z-index: 2;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -107,25 +106,6 @@ $height: 30rem;
counter-increment: item; 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) { // .carousel__slide:nth-child(even) {
// background-color: #99f; // background-color: #99f;
// } // }
@ -146,7 +126,6 @@ $height: 30rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
scroll-snap-align: center; scroll-snap-align: center;
z-index: 1;
} }
// @media (hover: hover) { // @media (hover: hover) {
@ -175,7 +154,6 @@ $height: 30rem;
.carousel__navigation { .carousel__navigation {
position: absolute; position: absolute;
z-index: 2;
right: 0; right: 0;
bottom: 1rem; bottom: 1rem;
left: 0; left: 0;
@ -192,9 +170,8 @@ $height: 30rem;
display: inline-block; display: inline-block;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
background-color: rgba(51, 51, 51, 0.7);
background-clip: content-box; background-clip: content-box;
background-color: #eeeeee;
box-shadow: inset 0 0 2px black;
border: 0.25rem solid transparent; border: 0.25rem solid transparent;
border-radius: 50%; border-radius: 50%;
font-size: 0; font-size: 0;
@ -213,45 +190,39 @@ $height: 30rem;
border-radius: 50%; border-radius: 50%;
font-size: 0; font-size: 0;
outline: 0; outline: 0;
z-index: 4;
} }
.carousel::before, .carousel::before,
.carousel__prev { .carousel__prev {
left: -0.5rem; left: .5rem;
} }
.carousel::after, .carousel::after,
.carousel__next { .carousel__next {
right: -0.5rem; right: .5rem;
} }
// the big circle navigation button left and right
.carousel::before, .carousel::before,
.carousel::after { .carousel::after {
content: ''; content: '';
z-index: 1; z-index: 1;
background-color: transparent; background-color: #333;
opacity: 0.65;
background-size: 1.5rem 1.5rem; background-size: 1.5rem 1.5rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
color: #fff;
font-size: 2.5rem; font-size: 2.5rem;
line-height: 4rem; line-height: 4rem;
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;
} }
.carousel::before:hover, .carousel::after:hover {
opacity: 1 !important;
}
.carousel::before { .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"); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
} }
.carousel::after { .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"); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
} }
.carousel__navigation-item { .carousel__navigation-item {
@ -262,75 +233,7 @@ $height: 30rem;
.carousel__navigation-item.enabled { .carousel__navigation-item.enabled {
.carousel__navigation-button { .carousel__navigation-button {
opacity: 0.5; opacity: 0.5;
background-color: lighten($accent, 0%); background-color: #eeeeee;
} 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%;
}
}
} }
} }

View file

@ -162,19 +162,12 @@
} }
.landing-main { .landing-main {
section:first-of-type {
border-top: 1px solid rgba(1, 1, 1, 0.2);
}
section { section {
border-bottom: 1px solid rgba(1, 1, 1, 0.2); border-bottom: 1px solid rgba(1, 1, 1, 0.2);
} }
} }
.partners-container .carousel {
border-top: 1px solid #eee;
}
.partner-comment__container { .partner-comment__container {
height: 100%; height: 100%;
display: flex; display: flex;
@ -189,96 +182,41 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.partner-comment__quote {
.partner-comment__quote-container { width: 75%;
display: flex;
width: 80%;
margin: 0 auto;
p {
text-align: center; text-align: center;
margin: 2.5rem auto; margin: 3rem auto 0 auto;
position: relative; position: relative;
display: block; display: block;
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
&::before, &::after {
font-size: 8rem;
color: rgba(0, 0, 0, 0.2);
position: absolute;
} }
.quote-decoration { &::before {
display: flex; content: "";
flex-direction: column; top: -6rem;
svg {
fill: rgba(0, 0, 0, 0.2);
width: 3rem;
height: 3rem;
} }
&::after {
} content: "";
.quote-before { right: -1rem;
justify-content: flex-start; bottom: -9rem;
}
.quote-after {
justify-content: flex-end;
svg {
transform: rotate(180deg)
} }
} }
}
.partner-comment__author { .partner-comment__author {
margin-top: .5rem; margin-top: 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.partner-comment__author-picture { .partner-comment__author-picture {
width: 10rem; width: 9rem;
aspect-ratio: 1; aspect-ratio: 1;
// border-radius: 50%; // border-radius: 50%;
} }
.partner-comment__author-name { .partner-comment__author-name {
margin-top: .5rem; 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%;
}
}
}
}

View file

@ -3,7 +3,7 @@ people:
org: org:
name: T'es pas cap name: T'es pas cap
intro: de intro: de
website: https://tes-pas-cap-a-gaillon.fr/ website:
image: tespascap.svg image: tespascap.svg
quote: | quote: |
Soutenons l'association qui sauvegarde la chapelle de Bethléem à Aubevoye, témoignage précieux de notre histoire. Soutenons l'association qui sauvegarde la chapelle de Bethléem à Aubevoye, témoignage précieux de notre histoire.
@ -32,5 +32,5 @@ people:
website: https://www.amse.asso.fr/ website: https://www.amse.asso.fr/
image: amse.svg image: amse.svg
quote: | 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

View file

@ -7,7 +7,7 @@
<div class="cover__content"> <div class="cover__content">
<div class="cover__title-container"> <div class="cover__title-container">
<div class="page-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> </div>
</div> </div>
@ -32,193 +32,28 @@
{{ partial "pagination.html" . }} {{ partial "pagination.html" . }}
*/}} */}}
{{ $slides_count := 4 }} <section class="history-section">
<section class="history-container"> <div class="page-container history-summary">
<div class="page-container"> <div class="history-summary__text">
<h2>Une histoire mouvementée...</h2> <h2>Bref historique</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> <p>
Il est le fondateur de la chapelle.. 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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> </p>
</div> </div>
<div class="image-container"> <div class="history-summary__image">
{{ $image := resources.Get "images/cardinal_charles_de_bourbon.jpg" }} {{ $image := resources.Get "images/cardinal_charles_de_bourbon.jpg" }}
<figure class="slide-image image-with-caption"> <img src="{{ $image.RelPermalink }}" />
<img
alt="Portrait de Charles de Bourbon"
src="{{ $image.RelPermalink }}"
/>
<figcaption>Portrait de Charles de Bourbon</figcaption>
</figure>
</div> </div>
</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>
<section class="images-section">
<!-- <section class="history-section"> --> <h2 class="page-container">Images</h2>
<!-- <div class="page-container history-summary"> --> </section>
<!-- <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"> <section class="compare-section">
<div class="page-container"> <div class="page-container">
@ -393,11 +228,48 @@
</section> </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 }} {{ $slides_count := len $.Site.Data.partners.people }}
<section class="partners-container"> <section class="partners-container">
<div class="page-container"> <div class="page-container">
<h2>Ils nous soutiennent !</h2> <h2>Ils nous soutiennent</h2>
</div> </div>
<div class="carousel" aria-label="Partners"> <div class="carousel" aria-label="Partners">
<ol class="carousel__viewport"> <ol class="carousel__viewport">
@ -406,22 +278,14 @@
tabindex="0" tabindex="0"
class="carousel__slide"> class="carousel__slide">
<div class="slide-content partner-comment__container"> <div class="slide-content partner-comment__container">
<div class="slide-inner partner-comment"> <div class="partner-comment">
{{ $image := resources.Get (printf "images/partners/%s" $comment.image) }} {{ $image := resources.Get (printf "images/partners/%s" $comment.image) }}
<a class="partner-comment__author-link" href="{{ $comment.org.website }}"> <a href="{{ $comment.org.website }}">
<img class="partner-comment__author-picture" alt="Photo d'un de nos soutiens" src="{{ $image.RelPermalink }}" /> <img class="partner-comment__author-picture" alt="Photo d'un de nos soutiens" src="{{ $image.RelPermalink }}" />
</a> </a>
<div class="partner-comment__quote-container"> <p class="partner-comment__quote">
<div class="quote-decoration quote-before">
{{ partial "helpers/svg" (dict "path" "icons/quote") }}
</div>
<p>
{{ $comment.quote }} {{ $comment.quote }}
</p> </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">
<div class="partner-comment__author-name"> <div class="partner-comment__author-name">
{{ with $comment.name }}{{ . }}{{ end }} {{ with $comment.org.intro }}{{ . }}{{ end }} {{ $comment.org.name }} {{ with $comment.name }}{{ . }}{{ end }} {{ with $comment.org.intro }}{{ . }}{{ end }} {{ $comment.org.name }}