feat(landing): add prominent article and carousel sections
This commit is contained in:
parent
654c2941af
commit
75b69b395f
8 changed files with 514 additions and 12 deletions
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 {
|
.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;
|
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
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 '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';
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
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__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 d’Aubevoye et de promouvoir ce monument ainsi que mieux le connaitre et l’animer.
|
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>
|
||||||
|
|
@ -156,6 +158,137 @@
|
||||||
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.
|
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>
|
</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 }}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue