diff --git a/assets/images/assemblee_constitutive_ensemble.jpg b/assets/images/assemblee_constitutive_ensemble.jpg new file mode 100644 index 0000000..69acad2 Binary files /dev/null and b/assets/images/assemblee_constitutive_ensemble.jpg differ diff --git a/assets/sass/article.scss b/assets/sass/article.scss index 6c05318..589b954 100644 --- a/assets/sass/article.scss +++ b/assets/sass/article.scss @@ -12,3 +12,68 @@ .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; +} diff --git a/assets/sass/button.scss b/assets/sass/button.scss index 1518c0a..869c7b5 100644 --- a/assets/sass/button.scss +++ b/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; + } +} diff --git a/assets/sass/carousel.scss b/assets/sass/carousel.scss new file mode 100644 index 0000000..327f4fa --- /dev/null +++ b/assets/sass/carousel.scss @@ -0,0 +1,241 @@ +// 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; + 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%; + background-color: #f99; + counter-increment: item; +} + +.carousel__slide:nth-child(even) { + background-color: #99f; +} + +.carousel__slide:before { + content: counter(item); + 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; +} + +// @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; + right: 0; + bottom: 0; + left: 0; + text-align: center; + padding-bottom: 1rem; +} + +.carousel__navigation-list, +.carousel__navigation-item { + display: flex; + justify-content: center; +} + +.carousel__navigation-button { + display: inline-block; + width: 1.5rem; + height: 1.5rem; + background-color: #333; + background-clip: content-box; + 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; +} + +.carousel::before, +.carousel__prev { + left: .5rem; +} + +.carousel::after, +.carousel__next { + right: .5rem; +} + +.carousel::before, +.carousel::after { + content: ''; + z-index: 1; + background-color: #333; + 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 { + 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 { + 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 { + display: flex; + align-items: center; +} + +.carousel__navigation-item.enabled { + .carousel__navigation-button { + opacity: 0.5; + background-color: white; + } +} diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 469103a..0059907 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -32,6 +32,7 @@ $accent: #F2A71B; @import 'single_image.scss'; @import 'footer.scss'; @import 'sections.scss'; +@import 'carousel.scss'; // components @import 'tags.scss'; diff --git a/assets/sass/page_container.scss b/assets/sass/page_container.scss index ef446b0..a34ffe7 100644 --- a/assets/sass/page_container.scss +++ b/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; } diff --git a/assets/scripts/carousel.js b/assets/scripts/carousel.js new file mode 100644 index 0000000..028425f --- /dev/null +++ b/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") + } + }) + } +}) + diff --git a/layouts/landing-matthieu/list.html b/layouts/landing-matthieu/list.html index 02ec4b7..8c7365a 100644 --- a/layouts/landing-matthieu/list.html +++ b/layouts/landing-matthieu/list.html @@ -7,10 +7,7 @@
-

- Sauvons la chapelle - de Bethléem ! -

+

Relevons notre Bethléem Normand

@@ -148,13 +145,149 @@
-

L'Étoile de Bethléem

-

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

-

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

+
+ + Assemblée générale constitutive +
+
+

L'association : L'Étoile de Bethléem

+

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

+

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

+
+
+
+ +
+
+ {{ $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" }} +
+
+
+
+
+
+
+ Dernières nouvelles... +
+

+ {{ .Title }} +

+
+ Le {{ .Date.Format "Monday 2 January 2006" }} +
+
+ {{ .Summary }} +
+
+ + Lire plus + +
+
+
+ {{ end }} + {{ end }} + + + + + + + + + + + + + + Others articles... +
+
+ +
+
+
    +
  1. +
    + Diapositive précédente + Diapositive suivante +
    +
    2. +
  2. +
    + Diapositive précédente + Diapositive suivante +
    3. +
  3. +
    + Diapositive précédente + Diapositive suivante +
    4. +
  4. +
    + Diapositive précédente + Diapositive suivante +
    5. +
+
@@ -167,4 +300,9 @@
+ + + {{ $js := resources.Get "scripts/carousel.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }} + {{ end }} +