feat(landing): add prominent article and carousel sections
This commit is contained in:
parent
abfd55d14e
commit
2feeb04a14
BIN
assets/images/assemblee_constitutive_ensemble.jpg
Normal file
BIN
assets/images/assemblee_constitutive_ensemble.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 642 KiB |
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
241
assets/sass/carousel.scss
Normal file
241
assets/sass/carousel.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -32,6 +32,7 @@ $accent: #F2A71B;
|
|||
@import 'single_image.scss';
|
||||
@import 'footer.scss';
|
||||
@import 'sections.scss';
|
||||
@import 'carousel.scss';
|
||||
|
||||
// components
|
||||
@import 'tags.scss';
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-container-large {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-full {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
|
|
|||
43
assets/scripts/carousel.js
Normal file
43
assets/scripts/carousel.js
Normal file
|
|
@ -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")
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -7,10 +7,7 @@
|
|||
<div class="cover__content">
|
||||
<div class="cover__title-container">
|
||||
<div class="page-container">
|
||||
<h1 class="cover__title">
|
||||
Sauvons la chapelle
|
||||
de Bethléem !
|
||||
</h1>
|
||||
<h1 class="cover__title">Relevons notre Bethléem Normand</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -148,13 +145,149 @@
|
|||
|
||||
<section class="organization-section">
|
||||
<div class="page-container">
|
||||
<h2>L'Étoile de Bethléem</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="organization__image">
|
||||
<!-- {{ $image := resources.Get "images/assemblee_constitutive_ensemble.jpg" }} -->
|
||||
<img src="https://picsum.photos/300/300" alt="Assemblée générale constitutive" />
|
||||
</div>
|
||||
<div class="organization__explain">
|
||||
<h2>L'association : L'Étoile de Bethléem</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="news-section">
|
||||
<div class="news-presentation">
|
||||
{{ $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" }}
|
||||
<div
|
||||
class="prominent-article article-card"
|
||||
>
|
||||
<div
|
||||
class="article__background"
|
||||
style="background-image: url('{{ $featuredImage.RelPermalink }}')"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="article__background-overlay"
|
||||
>
|
||||
</div>
|
||||
<div class="article__content page-container">
|
||||
<div class="article__pre">
|
||||
Dernières nouvelles...
|
||||
</div>
|
||||
<h2 class="article__title">
|
||||
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
|
||||
</h2>
|
||||
<div class="article__meta">
|
||||
Le {{ .Date.Format "Monday 2 January 2006" }}
|
||||
</div>
|
||||
<div class="article__summary">
|
||||
{{ .Summary }}
|
||||
</div>
|
||||
<div class="article__bottom">
|
||||
<a
|
||||
href="{{ .RelPermalink }}"
|
||||
class="article__readmore button button-transparent"
|
||||
>
|
||||
Lire plus
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- <div class="prominent-article"> -->
|
||||
<!-- <div class="prominent-article__image"> -->
|
||||
<!-- </div> -->
|
||||
<!-- <div class="prominent-article__content"> -->
|
||||
<!-- <div class="prominent-article__title"> -->
|
||||
<!-- </div> -->
|
||||
<!-- <div class="prominent-article__summary"> -->
|
||||
<!-- </div> -->
|
||||
<!-- <div class="prominent-article__meta"> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
|
||||
Others articles...
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="carousel-container">
|
||||
<div class="carousel" aria-label="Gallery">
|
||||
<ol class="carousel__viewport">
|
||||
<li id="carousel__slide1"
|
||||
tabindex="0"
|
||||
class="carousel__slide">
|
||||
<div class="carousel__snapper">
|
||||
<a href="#carousel__slide4"
|
||||
class="carousel__prev">Diapositive précédente</a>
|
||||
<a href="#carousel__slide2"
|
||||
class="carousel__next">Diapositive suivante</a>
|
||||
</div>
|
||||
</li>
|
||||
<li id="carousel__slide2"
|
||||
tabindex="0"
|
||||
class="carousel__slide">
|
||||
<div class="carousel__snapper"></div>
|
||||
<a href="#carousel__slide1"
|
||||
class="carousel__prev">Diapositive précédente</a>
|
||||
<a href="#carousel__slide3"
|
||||
class="carousel__next">Diapositive suivante</a>
|
||||
</li>
|
||||
<li id="carousel__slide3"
|
||||
tabindex="0"
|
||||
class="carousel__slide">
|
||||
<div class="carousel__snapper"></div>
|
||||
<a href="#carousel__slide2"
|
||||
class="carousel__prev">Diapositive précédente</a>
|
||||
<a href="#carousel__slide4"
|
||||
class="carousel__next">Diapositive suivante</a>
|
||||
</li>
|
||||
<li id="carousel__slide4"
|
||||
tabindex="0"
|
||||
class="carousel__slide">
|
||||
<div class="carousel__snapper"></div>
|
||||
<a href="#carousel__slide3"
|
||||
class="carousel__prev">Diapositive précédente</a>
|
||||
<a href="#carousel__slide1"
|
||||
class="carousel__next">Diapositive suivante</a>
|
||||
</li>
|
||||
</ol>
|
||||
<aside class="carousel__navigation">
|
||||
<ol class="carousel__navigation-list">
|
||||
<li class="carousel__navigation-item enabled">
|
||||
<a href="#carousel__slide1"
|
||||
class="carousel__navigation-button">1ère diapositive</a>
|
||||
</li>
|
||||
<li class="carousel__navigation-item">
|
||||
<a href="#carousel__slide2"
|
||||
class="carousel__navigation-button">2ème diapositive</a>
|
||||
</li>
|
||||
<li class="carousel__navigation-item">
|
||||
<a href="#carousel__slide3"
|
||||
class="carousel__navigation-button">3ème diapositive</a>
|
||||
</li>
|
||||
<li class="carousel__navigation-item">
|
||||
<a href="#carousel__slide4"
|
||||
class="carousel__navigation-button">4ème diapositive</a>
|
||||
</li>
|
||||
</ol>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -167,4 +300,9 @@
|
|||
</div>
|
||||
<div class="page-container">
|
||||
</div>
|
||||
|
||||
|
||||
{{ $js := resources.Get "scripts/carousel.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
|
||||
<script defer src="{{ $js.Permalink }}"></script>
|
||||
{{ end }}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue