Landing page + countdown #11

Merged
mbess merged 11 commits from fb_initial_landing_page into master 2023-07-06 20:36:36 +00:00
8 changed files with 514 additions and 12 deletions
Showing only changes of commit 2feeb04a14 - Show all commits

Binary file not shown.

After

Width:  |  Height:  |  Size: 642 KiB

View file

@ -12,3 +12,68 @@
.article { .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;
}

View file

@ -4,8 +4,8 @@
background-color: $accent; background-color: $accent;
color: white; color: white;
padding: 1rem 2.5rem; padding: 1rem 2.5rem;
font-weight: lighter;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none;
user-select: none; user-select: none;
min-width: 10rem; min-width: 10rem;
font-size: 1.2rem; 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
View 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;
}
}

View file

@ -32,6 +32,7 @@ $accent: #F2A71B;
@import 'single_image.scss'; @import 'single_image.scss';
@import 'footer.scss'; @import 'footer.scss';
@import 'sections.scss'; @import 'sections.scss';
@import 'carousel.scss';
// components // components
@import 'tags.scss'; @import 'tags.scss';

View file

@ -2,6 +2,12 @@
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
} }
.page-container-large {
width: 75%;
margin: 0 auto;
}
.page-full { .page-full {
padding: 0 2rem; padding: 0 2rem;
} }

View 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")
}
})
}
})

View file

@ -7,10 +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"> <h1 class="cover__title">Relevons notre Bethléem Normand</h1>
Sauvons la chapelle
de Bethléem !
</h1>
</div> </div>
</div> </div>
</div> </div>
@ -148,7 +145,12 @@
<section class="organization-section"> <section class="organization-section">
<div class="page-container"> <div class="page-container">
<h2>L'Étoile de Bethléem</h2> <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> <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 dAubevoye et de promouvoir ce monument ainsi que mieux le connaitre et lanimer. 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 dAubevoye et de promouvoir ce monument ainsi que mieux le connaitre et lanimer.
</p> </p>
@ -156,6 +158,137 @@
Lassociation “LÉtoile de Bethléem - Association des amis de la chapelle de bethléem dAubevoye” est immatriculé au près de la préfecture de lEure sous le numéro RNA W271006556. Lassociation “LÉtoile de Bethléem - Association des amis de la chapelle de bethléem dAubevoye” est immatriculé au près de la préfecture de lEure sous le numéro RNA W271006556.
</p> </p>
</div> </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> </section>
</main> </main>
@ -167,4 +300,9 @@
</div> </div>
<div class="page-container"> <div class="page-container">
</div> </div>
{{ $js := resources.Get "scripts/carousel.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
<script defer src="{{ $js.Permalink }}"></script>
{{ end }} {{ end }}