studio-variable/index-main
4
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

create template packages
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m17s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-25 18:22:13 +01:00
parent f73b8cb90b
commit aba8b4f37e
20 changed files with 414 additions and 526 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/css/components/_card-article-small.scss
View file

@ -84,8 +84,8 @@
.description { .description {
font-size: var(--fs-small); font-size: var(--fs-small);
@include clamp(2); @include clamp(2);
margin-top: calc(var(--spacing)*0.25); // margin-top: calc(var(--spacing)*-0.5);
display: none; // display: none;
} }

6
assets/css/components/_card-article.scss
View file

@ -29,7 +29,6 @@
} }
.content{ .content{
// padding: var(--padding-inner);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -120,9 +119,6 @@
@media #{$small-up} {
[data-template="home"] .pinned-home{ [data-template="home"] .pinned-home{
grid-column: span 2; grid-column: span 2;
@ -178,5 +174,3 @@
} }
}

2
assets/css/components/_text.scss
View file

@ -1,3 +1,5 @@
[data-template="package"] .page__content,
.main__single .page__content, .main__single .page__content,
#investigation__content{ #investigation__content{
font-size: var(--fs-text); font-size: var(--fs-text);

2
assets/css/partials/_page-aside.scss
View file

@ -1,3 +1,4 @@
.package__section,
.page__aside{ .page__aside{
max-width: var(--max-w-cards); max-width: var(--max-w-cards);
margin-inline: auto; margin-inline: auto;
@ -6,6 +7,7 @@
padding-top: calc(var(--spacing)*3); padding-top: calc(var(--spacing)*3);
} }
.section__title,
.aside__title{ .aside__title{
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;

20
assets/css/partials/_page-header.scss
View file

@ -53,4 +53,24 @@ margin-bottom: calc(var(--spacing) * 1);
max-width: var(--max-w-content); max-width: var(--max-w-content);
} }
ul.details{
display: flex;
gap: 3ch;
list-style: none;
margin-top: calc(var(--spacing) * -1.5);
color: var(--color-txt-light);
a{
text-decoration: none;
text-transform: lowercase;
&::after{
content: " ↓";
}
}
li:hover{
color: var(--color-txt)
}
}
} }

166
assets/css/style.css
View file

@ -1388,17 +1388,24 @@ button.sort[data-sort-type=up] .arrow {
transform: translateX(0); transform: translateX(0);
} }
[data-template=package] .page__content,
.main__single .page__content, .main__single .page__content,
#investigation__content { #investigation__content {
font-size: var(--fs-text); font-size: var(--fs-text);
} }
.main__single .page__content p, .main__single .page__content li, .main__single .page__content ul, [data-template=package] .page__content p, [data-template=package] .page__content li, [data-template=package] .page__content ul,
.main__single .page__content p,
.main__single .page__content li,
.main__single .page__content ul,
#investigation__content p, #investigation__content p,
#investigation__content li, #investigation__content li,
#investigation__content ul { #investigation__content ul {
font-size: var(--fs-text); font-size: var(--fs-text);
} }
.main__single .page__content h3, .main__single .page__content h4, .main__single .page__content h5, [data-template=package] .page__content h3, [data-template=package] .page__content h4, [data-template=package] .page__content h5,
.main__single .page__content h3,
.main__single .page__content h4,
.main__single .page__content h5,
#investigation__content h3, #investigation__content h3,
#investigation__content h4, #investigation__content h4,
#investigation__content h5 { #investigation__content h5 {
@ -1406,6 +1413,7 @@ button.sort[data-sort-type=up] .arrow {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin-inline: auto; margin-inline: auto;
} }
[data-template=package] .page__content h3,
.main__single .page__content h3, .main__single .page__content h3,
#investigation__content h3 { #investigation__content h3 {
margin-top: calc(var(--spacing) * 4); margin-top: calc(var(--spacing) * 4);
@ -1413,6 +1421,7 @@ button.sort[data-sort-type=up] .arrow {
font-size: 1.45em; font-size: 1.45em;
text-transform: uppercase; text-transform: uppercase;
} }
[data-template=package] .page__content h4,
.main__single .page__content h4, .main__single .page__content h4,
#investigation__content h4 { #investigation__content h4 {
margin-top: calc(var(--spacing) * 3); margin-top: calc(var(--spacing) * 3);
@ -1420,6 +1429,7 @@ button.sort[data-sort-type=up] .arrow {
font-size: 1.2em; font-size: 1.2em;
text-transform: uppercase; text-transform: uppercase;
} }
[data-template=package] .page__content h5,
.main__single .page__content h5, .main__single .page__content h5,
#investigation__content h5 { #investigation__content h5 {
margin-top: calc(var(--spacing) * 1.5); margin-top: calc(var(--spacing) * 1.5);
@ -1429,19 +1439,24 @@ button.sort[data-sort-type=up] .arrow {
text-decoration: 1px underline var(--grey-600); text-decoration: 1px underline var(--grey-600);
text-underline-offset: 5px; text-underline-offset: 5px;
} }
[data-template=package] .page__content p,
.main__single .page__content p, .main__single .page__content p,
#investigation__content p { #investigation__content p {
margin: calc(var(--spacing) * 0.75) 0; margin: calc(var(--spacing) * 0.75) 0;
} }
[data-template=package] .page__content ul,
.main__single .page__content ul, .main__single .page__content ul,
#investigation__content ul { #investigation__content ul {
padding-left: 3ch; padding-left: 3ch;
} }
[data-template=package] .page__content ul li,
.main__single .page__content ul li, .main__single .page__content ul li,
#investigation__content ul li { #investigation__content ul li {
margin: calc(var(--spacing) * 0.5) 0; margin: calc(var(--spacing) * 0.5) 0;
} }
.main__single .page__content figcaption, .main__single .page__content .caption, [data-template=package] .page__content figcaption, [data-template=package] .page__content .caption,
.main__single .page__content figcaption,
.main__single .page__content .caption,
#investigation__content figcaption, #investigation__content figcaption,
#investigation__content .caption { #investigation__content .caption {
font-size: var(--fs-small); font-size: var(--fs-small);
@ -1450,13 +1465,18 @@ button.sort[data-sort-type=up] .arrow {
line-height: 1.1; line-height: 1.1;
margin: calc(var(--spacing) * 0.5) 0 !important; margin: calc(var(--spacing) * 0.5) 0 !important;
} }
.main__single .page__content video, .main__single .page__content figure, .main__single .page__content img, .main__single .page__content picture, [data-template=package] .page__content video, [data-template=package] .page__content figure, [data-template=package] .page__content img, [data-template=package] .page__content picture,
.main__single .page__content video,
.main__single .page__content figure,
.main__single .page__content img,
.main__single .page__content picture,
#investigation__content video, #investigation__content video,
#investigation__content figure, #investigation__content figure,
#investigation__content img, #investigation__content img,
#investigation__content picture { #investigation__content picture {
width: 100%; width: 100%;
} }
[data-template=package] .page__content .insert,
.main__single .page__content .insert, .main__single .page__content .insert,
#investigation__content .insert { #investigation__content .insert {
max-width: var(--max-w-cards); max-width: var(--max-w-cards);
@ -1465,28 +1485,37 @@ button.sort[data-sort-type=up] .arrow {
padding: calc(var(--padding-inner) * 3); padding: calc(var(--padding-inner) * 3);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
[data-template=package] .page__content .insert,
.main__single .page__content .insert, .main__single .page__content .insert,
#investigation__content .insert { #investigation__content .insert {
padding: calc(var(--padding-inner) * 1); padding: calc(var(--padding-inner) * 1);
} }
} }
[data-template=package] .page__content .insert,
.main__single .page__content .insert, .main__single .page__content .insert,
#investigation__content .insert { #investigation__content .insert {
background-color: var(--grey-800); background-color: var(--grey-800);
} }
[data-template=package] .page__content .insert .insert--inner,
.main__single .page__content .insert .insert--inner, .main__single .page__content .insert .insert--inner,
#investigation__content .insert .insert--inner { #investigation__content .insert .insert--inner {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin-inline: auto; margin-inline: auto;
} }
.main__single .page__content .insert h3, .main__single .page__content .insert h4, .main__single .page__content .insert h5, [data-template=package] .page__content .insert h3, [data-template=package] .page__content .insert h4, [data-template=package] .page__content .insert h5,
.main__single .page__content .insert h3,
.main__single .page__content .insert h4,
.main__single .page__content .insert h5,
#investigation__content .insert h3, #investigation__content .insert h3,
#investigation__content .insert h4, #investigation__content .insert h4,
#investigation__content .insert h5 { #investigation__content .insert h5 {
margin-top: 0; margin-top: 0;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.main__single .page__content .insert h3, .main__single .page__content .insert h4, .main__single .page__content .insert h5, [data-template=package] .page__content .insert h3, [data-template=package] .page__content .insert h4, [data-template=package] .page__content .insert h5,
.main__single .page__content .insert h3,
.main__single .page__content .insert h4,
.main__single .page__content .insert h5,
#investigation__content .insert h3, #investigation__content .insert h3,
#investigation__content .insert h4, #investigation__content .insert h4,
#investigation__content .insert h5 { #investigation__content .insert h5 {
@ -1494,7 +1523,11 @@ button.sort[data-sort-type=up] .arrow {
margin-bottom: calc(var(--spacing) * 0.75); margin-bottom: calc(var(--spacing) * 0.75);
} }
} }
.main__single .page__content > .insert, .main__single .page__content > .swiper, .main__single .page__content > .slider-before-after, .main__single .page__content > figure, [data-template=package] .page__content > .insert, [data-template=package] .page__content > .swiper, [data-template=package] .page__content > .slider-before-after, [data-template=package] .page__content > figure,
.main__single .page__content > .insert,
.main__single .page__content > .swiper,
.main__single .page__content > .slider-before-after,
.main__single .page__content > figure,
#investigation__content > .insert, #investigation__content > .insert,
#investigation__content > .swiper, #investigation__content > .swiper,
#investigation__content > .slider-before-after, #investigation__content > .slider-before-after,
@ -1502,7 +1535,11 @@ button.sort[data-sort-type=up] .arrow {
margin-top: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 2);
margin-bottom: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2);
} }
.main__single .page__content > .insert + .caption, .main__single .page__content > .swiper + .caption, .main__single .page__content > .slider-before-after + .caption, .main__single .page__content > figure + .caption, [data-template=package] .page__content > .insert + .caption, [data-template=package] .page__content > .swiper + .caption, [data-template=package] .page__content > .slider-before-after + .caption, [data-template=package] .page__content > figure + .caption,
.main__single .page__content > .insert + .caption,
.main__single .page__content > .swiper + .caption,
.main__single .page__content > .slider-before-after + .caption,
.main__single .page__content > figure + .caption,
#investigation__content > .insert + .caption, #investigation__content > .insert + .caption,
#investigation__content > .swiper + .caption, #investigation__content > .swiper + .caption,
#investigation__content > .slider-before-after + .caption, #investigation__content > .slider-before-after + .caption,
@ -1626,7 +1663,6 @@ button.sort[data-sort-type=up] .arrow {
font-size: var(--fs-xsmall); font-size: var(--fs-xsmall);
} }
@media screen and (min-width: 768px) {
[data-template=home] .pinned-home { [data-template=home] .pinned-home {
grid-column: span 2; grid-column: span 2;
display: grid; display: grid;
@ -1670,7 +1706,7 @@ button.sort[data-sort-type=up] .arrow {
grid-column: span 2; grid-column: span 2;
grid-row: 4; grid-row: 4;
} }
}
.card--package, .card--package,
.card--article-small { .card--article-small {
display: grid; display: grid;
@ -1768,8 +1804,6 @@ button.sort[data-sort-type=up] .arrow {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
margin-top: calc(var(--spacing) * 0.25);
display: none;
} }
.card--package, .card--package,
.card--article-small { .card--article-small {
@ -2964,17 +2998,39 @@ main .page__header .page__description {
main .page__header .page__description { main .page__header .page__description {
max-width: var(--max-w-content); max-width: var(--max-w-content);
} }
main .page__header ul.details {
display: flex;
gap: 3ch;
list-style: none;
margin-top: calc(var(--spacing) * -1.5);
color: var(--color-txt-light);
}
main .page__header ul.details a {
text-decoration: none;
text-transform: lowercase;
}
main .page__header ul.details a::after {
content: " ↓";
}
main .page__header ul.details li:hover {
color: var(--color-txt);
}
.package__section,
.page__aside { .page__aside {
max-width: var(--max-w-cards); max-width: var(--max-w-cards);
margin-inline: auto; margin-inline: auto;
padding-top: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 4);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.package__section,
.page__aside { .page__aside {
padding-top: calc(var(--spacing) * 3); padding-top: calc(var(--spacing) * 3);
} }
} }
.package__section .section__title,
.package__section .aside__title,
.page__aside .section__title,
.page__aside .aside__title { .page__aside .aside__title {
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
@ -2982,6 +3038,9 @@ main .page__header .page__description {
font-size: 1.2em; font-size: 1.2em;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.package__section .section__title,
.package__section .aside__title,
.page__aside .section__title,
.page__aside .aside__title { .page__aside .aside__title {
font-size: var(--fs-normal); font-size: var(--fs-normal);
} }
@ -3318,87 +3377,4 @@ main .page__header .page__description {
} }
.media figure { .media figure {
height: auto; height: auto;
}
.content-package {
max-width: var(--max-w-cards);
margin: 0 auto;
display: grid;
grid-gap: calc(var(--padding-body) * 1.5);
position: relative;
}
.content-package .container-cards {
display: block;
align-self: start;
}
.content-package #section__investigations article {
margin-bottom: calc(var(--spacing) * 1);
}
.content-package .container__title {
font-weight: normal;
font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 0.75);
}
@media screen and (max-width: 1080px) {
.content-package #section__investigations {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-inner) * 1.5) !important;
margin-bottom: calc(var(--spacing) * 3);
}
.content-package #section__investigations article {
margin-bottom: 0px;
}
.content-package #section__investigations .container__title {
grid-column: span 2;
margin-bottom: 0px;
}
.content-package section:target {
padding-top: calc(var(--header-h) + var(--spacing));
}
}
@media screen and (min-width: 1080px) {
.content-package #nav-package {
display: none;
}
.content-package {
grid-template-columns: 1fr 1fr;
}
.content-package #section__investigations {
display: block;
margin-bottom: 0px;
}
.content-package #section__investigations article {
margin-bottom: calc(var(--spacing) * 1);
}
}
@media screen and (max-width: 768px) {
.content-package {
display: block;
}
.content-package #section__investigations {
display: block;
}
.content-package .container__title {
margin-bottom: calc(var(--spacing) * 0.5) !important;
}
}
#nav-package {
display: flex;
margin-top: calc(var(--spacing) * -1);
margin-bottom: calc(var(--spacing) * 2);
}
#nav-package svg {
width: 10px;
height: 10px;
transform: rotate(90deg);
}
@media screen and (min-width: 1080px) {
#nav-package {
display: none;
}
}/*# sourceMappingURL=style.css.map */ }/*# sourceMappingURL=style.css.map */

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

156
assets/css/template/_package.scss
View file

@ -1,88 +1,88 @@
.content-package { // .content-package {
// max-width: 1300px; // // max-width: 1300px;
max-width: var(--max-w-cards); // max-width: var(--max-w-cards);
margin: 0 auto; // margin: 0 auto;
display: grid; // display: grid;
grid-gap: calc(var(--padding-body) * 1.5); // grid-gap: calc(var(--padding-body) * 1.5);
// grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5); // // grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
position: relative; // position: relative;
.container-cards { // .container-cards {
display: block; // display: block;
align-self: start; // align-self: start;
} // }
#section__investigations article { // #section__investigations article {
margin-bottom: calc(var(--spacing) * 1); // margin-bottom: calc(var(--spacing) * 1);
} // }
.container__title { // .container__title {
font-weight: normal; // font-weight: normal;
font-size: var(--fs-small); // font-size: var(--fs-small);
font-weight: 500; // font-weight: 500;
text-transform: uppercase; // text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 0.75); // margin-bottom: calc(var(--spacing) * 0.75);
} // }
@media #{$medium} { // @media #{$medium} {
#section__investigations { // #section__investigations {
display: grid; // display: grid;
grid-template-columns: 1fr 1fr; // grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-inner) * 1.5) !important; // grid-gap: calc(var(--padding-inner) * 1.5) !important;
margin-bottom: calc(var(--spacing) * 3); // margin-bottom: calc(var(--spacing) * 3);
article { // article {
margin-bottom: 0px; // margin-bottom: 0px;
} // }
.container__title { // .container__title {
grid-column: span 2; // grid-column: span 2;
margin-bottom: 0px; // margin-bottom: 0px;
} // }
} // }
section:target { // section:target {
padding-top: calc(var(--header-h) + var(--spacing)); // padding-top: calc(var(--header-h) + var(--spacing));
} // }
} // }
@media #{$medium-up} { // @media #{$medium-up} {
#nav-package { // #nav-package {
display: none; // display: none;
} // }
grid-template-columns: 1fr 1fr; // grid-template-columns: 1fr 1fr;
#section__investigations { // #section__investigations {
display: block; // display: block;
margin-bottom: 0px; // margin-bottom: 0px;
article { // article {
margin-bottom: calc(var(--spacing) * 1); // margin-bottom: calc(var(--spacing) * 1);
} // }
} // }
} // }
@media #{$small} { // @media #{$small} {
display: block; // display: block;
#section__investigations { // #section__investigations {
display: block; // display: block;
} // }
.container__title { // .container__title {
margin-bottom: calc(var(--spacing) * 0.5) !important; // margin-bottom: calc(var(--spacing) * 0.5) !important;
} // }
} // }
} // }
#nav-package { // #nav-package {
display: flex; // display: flex;
margin-top: calc(var(--spacing) * -1); // margin-top: calc(var(--spacing) * -1);
margin-bottom: calc(var(--spacing) * 2); // margin-bottom: calc(var(--spacing) * 2);
svg { // svg {
width: 10px; // width: 10px;
height: 10px; // height: 10px;
transform: rotate(90deg); // transform: rotate(90deg);
} // }
} // }
@media #{$medium-up} { // @media #{$medium-up} {
#nav-package { // #nav-package {
display: none; // display: none;
} // }
} // }

59
assets/js/bottom-bar.js Normal file
View file

@ -0,0 +1,59 @@
export function progressBar(){
const bar = document.getElementById('progressBar');
if (!bar) return;
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
bar.style.width = `${progress}vw`;
}, { passive: true });
}
export function scrollBack(){
const bottomBar = document.getElementById('bottom-bar');
const navInvestigation = document.getElementById('nav-investigation');
const header = document.getElementById('site-header');
const footerEl = document.getElementById('support-bar') || document.getElementById('site-footer');
let lastY = window.scrollY;
let peakY = window.scrollY;
let visible = false;
window.addEventListener('scroll', () => {
const currentY = window.scrollY;
// header : basé uniquement sur la position absolue
if (navInvestigation && header) {
header.classList.toggle('has-nav-investigation', currentY >= 160);
}
// zone footer : bottom-bar masquée et verrouillée
const inFooterZone = footerEl && (currentY + window.innerHeight >= footerEl.offsetTop);
if (inFooterZone) {
if (visible) {
visible = false;
if (bottomBar) bottomBar.classList.remove('is-visible');
}
} else if (currentY > lastY) {
// scroll bas
peakY = currentY;
if (!visible && currentY > 280) {
visible = true;
if (bottomBar) bottomBar.classList.add('is-visible');
}
} else {
// scroll haut : hide après 200px remontés
if (visible && peakY - currentY >= 200) {
visible = false;
if (bottomBar) bottomBar.classList.remove('is-visible');
}
}
lastY = currentY;
}, { passive: true });
}

72
assets/js/investigation.js
View file

@ -1,16 +1,3 @@
export function initSliderBeforeAfter(container = document){
const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
slidersBeforeAfter.forEach(function (sliderContainer, index) {
const sliderInput = sliderContainer.querySelector('.slider');
if (sliderInput) {
sliderInput.addEventListener('input', (e) => {
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
});
}
});
}
export function navInvestigation(){ export function navInvestigation(){
const nav = document.getElementById('nav-investigation'); const nav = document.getElementById('nav-investigation');
if (!nav) return; if (!nav) return;
@ -43,62 +30,3 @@ export function navInvestigation(){
} }
export function progressBar(){
const bar = document.getElementById('progressBar');
if (!bar) return;
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = docHeight > 0 ? (scrollTop / docHeight) * 160 : 0;
bar.style.width = `${progress}%`;
}, { passive: true });
}
export function scrollBack(){
const bottomBar = document.getElementById('bottom-bar');
const navInvestigation = document.getElementById('nav-investigation');
const header = document.getElementById('site-header');
const footerEl = document.getElementById('support-bar') || document.getElementById('site-footer');
let lastY = window.scrollY;
let peakY = window.scrollY;
let visible = false;
window.addEventListener('scroll', () => {
const currentY = window.scrollY;
// header : basé uniquement sur la position absolue
if (navInvestigation && header) {
header.classList.toggle('has-nav-investigation', currentY >= 160);
}
// zone footer : bottom-bar masquée et verrouillée
const inFooterZone = footerEl && (currentY + window.innerHeight >= footerEl.offsetTop);
if (inFooterZone) {
if (visible) {
visible = false;
if (bottomBar) bottomBar.classList.remove('is-visible');
}
} else if (currentY > lastY) {
// scroll bas
peakY = currentY;
if (!visible && currentY > 280) {
visible = true;
if (bottomBar) bottomBar.classList.add('is-visible');
}
} else {
// scroll haut : hide après 200px remontés
if (visible && peakY - currentY >= 200) {
visible = false;
if (bottomBar) bottomBar.classList.remove('is-visible');
}
}
lastY = currentY;
}, { passive: true });
}

8
assets/js/script.js
View file

@ -5,7 +5,9 @@ import { themeToggle } from './themeToggle.js';
import { playVideo } from './hero-video.js'; import { playVideo } from './hero-video.js';
import { initDropdowns } from './dropdown.js'; import { initDropdowns } from './dropdown.js';
import { initSwipers } from './swipers.js'; import { initSwipers } from './swipers.js';
import { initSliderBeforeAfter, progressBar, scrollBack, navInvestigation } from './investigation.js'; import { initSliderBeforeAfter} from './sliderBeforeAfter.js';
import { navInvestigation } from './investigation.js';
import { progressBar, scrollBack} from './bottom-bar.js';
import { initSort } from './sort.js'; import { initSort } from './sort.js';
const responsiveMedium = 1080; const responsiveMedium = 1080;
@ -19,6 +21,8 @@ window.onload = async function () {
themeToggle(); themeToggle();
backToTop(); backToTop();
initSliderBeforeAfter();
copyLink(); copyLink();
playVideo(); playVideo();
initDropdowns(responsiveSmall, responsiveSmallX); initDropdowns(responsiveSmall, responsiveSmallX);
@ -26,7 +30,7 @@ window.onload = async function () {
progressBar(); progressBar();
initSliderBeforeAfter();
scrollBack(); scrollBack();
navInvestigation(); navInvestigation();

11
assets/js/sliderBeforeAfter.js Normal file
View file

@ -0,0 +1,11 @@
export function initSliderBeforeAfter(container = document){
const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
slidersBeforeAfter.forEach(function (sliderContainer, index) {
const sliderInput = sliderContainer.querySelector('.slider');
if (sliderInput) {
sliderInput.addEventListener('input', (e) => {
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
});
}
});
}

7
site/blueprints/pages/package.yml
View file

@ -9,6 +9,7 @@ tabs:
label: Visuel de couverture label: Visuel de couverture
type: files type: files
multiple: false multiple: false
required: true
layout: cards layout: cards
width: 1/3 width: 1/3
image: image:
@ -20,7 +21,11 @@ tabs:
type: writer type: writer
width: 2/3 width: 2/3
linkedContent: linkedContent:
label: Contenu label: Enquêtes
type: pages type: pages
query: site.find('enquetes').children query: site.find('enquetes').children
linkedImpacts:
label: Impacts
type: pages
query: site.find('impacts').children
seo: seo/page seo: seo/page

6
site/config/menu.php
View file

@ -47,13 +47,13 @@ return [
return Str::contains($path, 'pages/news'); return Str::contains($path, 'pages/news');
} }
], ],
'dossiers' => [ 'packages' => [
'label' => 'Dossiers', 'label' => 'Dossiers',
'icon' => 'folder', 'icon' => 'folder',
'link' => 'pages/dossiers', 'link' => 'pages/packages',
'current' => function (string $current): bool { 'current' => function (string $current): bool {
$path = Kirby\Cms\App::instance()->path(); $path = Kirby\Cms\App::instance()->path();
return Str::contains($path, 'pages/dossiers'); return Str::contains($path, 'pages/packages');
} }
], ],
'laboratoire' => [ 'laboratoire' => [

5
site/languages/en.php
View file

@ -8,13 +8,18 @@ return [
'url' => '/en', 'url' => '/en',
'translations' => [ 'translations' => [
'impact.type' => 'Impact', 'impact.type' => 'Impact',
'impact.type.plural' => 'Impacts',
'impacts.title' => 'Impacts', 'impacts.title' => 'Impacts',
'news.type' => 'News', 'news.type' => 'News',
'news.title' => 'News', 'news.title' => 'News',
'investigation.type' => 'Investigation', 'investigation.type' => 'Investigation',
'investigation.type.plural' => 'Investigations',
'investigations.title' => 'Investigations',
'investigations.related' => 'Related investigations', 'investigations.related' => 'Related investigations',
'investigations.see_all' => 'See all investigations', 'investigations.see_all' => 'See all investigations',
'filter.all' => 'All', 'filter.all' => 'All',
'filter.all.m' => 'All', 'filter.all.m' => 'All',
'package.type' => 'Folder',
'packages.title' => 'Folders',
], ],
]; ];

5
site/languages/fr.php
View file

@ -9,13 +9,18 @@ return [
'url' => '/', 'url' => '/',
'translations' => [ 'translations' => [
'impact.type' => 'Impact', 'impact.type' => 'Impact',
'impact.type.plural' => 'Impacts',
'impacts.title' => 'Impacts', 'impacts.title' => 'Impacts',
'news.type' => 'Brève', 'news.type' => 'Brève',
'news.title' => 'Brèves', 'news.title' => 'Brèves',
'investigation.type' => 'Enquête', 'investigation.type' => 'Enquête',
'investigation.type.plural' => 'Enquêtes',
'investigations.title' => 'Enquêtes',
'investigations.related' => 'Enquêtes liées', 'investigations.related' => 'Enquêtes liées',
'investigations.see_all' => 'Voir toutes les enquêtes', 'investigations.see_all' => 'Voir toutes les enquêtes',
'filter.all' => 'Toutes', 'filter.all' => 'Toutes',
'filter.all.m' => 'Tous', 'filter.all.m' => 'Tous',
'package.type' => 'Dossier',
'packages.title' => 'Dossiers',
], ],
]; ];

2
site/snippets/nav.php
View file

@ -20,7 +20,7 @@ de la vérité et de la justice.</p>
<li><a href="#">À propos</a></li> <!-- page à créer --> <li><a href="#">À propos</a></li> <!-- page à créer -->
<li><a href="/enquêtes">Equêtes</a></li> <li><a href="/enquêtes">Equêtes</a></li>
<li><a href="/dossiers">Dossiers</a></li> <li><a href="/packages">Dossiers</a></li>
<li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li>
<li><a href="#">À propos</a></li> <li><a href="#">À propos</a></li>
<li><a href="#">Ressources</a></li> <li><a href="#">Ressources</a></li>

32
site/templates/investigation.php
View file

@ -350,17 +350,17 @@ if ($relatedInvestigations->isEmpty()) {
<?php <?php
// Récupérer le dossier associé à cette investigation // Récupérer le dossier associé à cette investigation (reverse lookup via linkedContent)
$packageSlug = $page->package()->value(); $packagesParent = site()->find('packages');
$package = null; $package = $packagesParent
if (!empty($packageSlug) && site()->find('dossiers')) { ? $packagesParent->children()->listed()->filter(fn($p) => $p->linkedContent()->toPages()->has($page))->first()
$package = site()->find('dossiers')->children()->filterBy('slug', $packageSlug)->first(); : null;
}
if ($package): if ($package):
$investigationsCount = $package->linkedContent()->toPages()->count();
?> ?>
<aside class="page__aside" id="package"> <aside class="page__aside" id="package">
<h3 class="aside__title">Dans le dossier</h3> <h3 class="aside__title"><?= t('packages.title') ?></h3>
<article class="card--package"> <article class="card--package">
<?php if ($cover = $package->cover()->toFile()): ?> <?php if ($cover = $package->cover()->toFile()): ?>
@ -369,26 +369,17 @@ if ($package):
</figure> </figure>
<?php endif ?> <?php endif ?>
<div class="content"> <div class="content">
<p class="type">Dossier</p> <p class="type"><?= t('package.type') ?></p>
<h4 class="title"><a href="<?= $package->url() ?>"><span class="icon"><?= svg('assets/icons/package.svg') ?></span><?= $package->title()->esc() ?></a></h4> <h4 class="title"><a href="<?= $package->url() ?>"><span class="icon"><?= svg('assets/icons/package.svg') ?></span><?= $package->title()->esc() ?></a></h4>
<?php
// Compter les enquêtes associées à ce dossier
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($package) {
return $investigation->package()->value() === $package->slug();
})->count();
?>
<ul class="details">
<?php if ($investigationsCount > 0): ?> <?php if ($investigationsCount > 0): ?>
<ul class="details">
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li> <li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
<?php endif ?>
<li>8 impacts</li>
</ul> </ul>
<?php endif ?>
</div> </div>
<button class="btn--go-to"><a href="<?= $package->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button> <button class="btn--go-to"><a href="<?= $package->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $package->url() ?>" target="_blank" aria-hidden="true"></a> <a class="link-block" href="<?= $package->url() ?>" target="_blank" aria-hidden="true"></a>
</article> </article>
</aside> </aside>
@ -443,10 +434,7 @@ if ($package):
</main> </main>
<?php snippet('bottom-bar') ?> <?php snippet('bottom-bar') ?>
<?php snippet('footer') ?> <?php snippet('footer') ?>

225
site/templates/package.php
View file

@ -2,212 +2,99 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main> <main>
<?php
$lang = kirby()->language();
$locale = $lang ? $lang->locale(LC_ALL) : 'fr_FR.UTF-8';
$dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
$investigations = $page->linkedContent()->toPages();
$impacts = $page->linkedImpacts()->toPages();
?>
<header class="page__header"> <header class="page__header">
<p class="page__type">Dossier</p> <p class="page__type"><?= t('package.type') ?></p>
<h2 class="page__title"><?= $page->title() ?></h2> <h2 class="page__title"><?= $page->title() ?></h2>
<?php if ($page->description()->isNotEmpty()): ?> <?php if ($investigations->isNotEmpty() || $impacts->isNotEmpty()): ?>
<div class="description"> <ul class="details">
<p><?= $page->description() ?></p> <?php if ($investigations->isNotEmpty()): ?>
</div> <li><a href="#investigations"><?= $investigations->count() ?> <?= $investigations->count() > 1 ? t('investigation.type.plural') : t('investigation.type') ?></a></li>
<?php endif ?>
<?php if ($impacts->isNotEmpty()): ?>
<li><a href="#impacts"><?= $impacts->count() ?> <?= $impacts->count() > 1 ? t('impact.type.plural') : t('impact.type') ?></a></li>
<?php endif ?>
</ul>
<?php endif ?> <?php endif ?>
</header> </header>
<?php <?php if ($page->description()->isNotEmpty()): ?>
// Récupérer les enquêtes associées à ce dossier <div class="page__content">
$investigations = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($page) { <p><?= $page->description() ?></p>
return $investigation->package()->value() === $page->slug();
});
?>
<div class="btn--group" id="nav-package">
<button class="btn--small"><a href="#section__investigations">Enquêtes <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
<button class="btn--small"><a href="#section__impacts">Impacts <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
</div> </div>
<?php endif ?>
<div class="content-package">
<?php if ($investigations->isNotEmpty()): ?> <?php if ($investigations->isNotEmpty()): ?>
<section class="container-cards" id="section__investigations"> <div class="package__section" id="investigations">
<h3 class="section__title"><?= t('investigations.title') ?> (<?= $investigations->count() ?>)</h3>
<h3 class="container__title">2 enquêtes</h3>
<?php foreach ($investigations as $investigation): ?> <?php foreach ($investigations as $investigation): ?>
<article class="card--article"> <article class="card--article-small">
<?php if ($cover = $investigation->cover()->toFile()): ?> <?php if ($cover = $investigation->cover()->toFile()): ?>
<figure> <figure>
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>"> <img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
</figure> </figure>
<?php endif ?> <?php endif ?>
<div class="content"> <div class="content">
<p class="type"><?= t('investigation.type') ?></p>
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4> <h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
<?php if ($investigation->incidentDate()->isNotEmpty()): ?>
<time class="date" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', $dateLocale) ?></time>
<?php endif ?>
<?php if ($investigation->chapo()->isNotEmpty()): ?> <?php if ($investigation->chapo()->isNotEmpty()): ?>
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p> <p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
<?php endif ?> <?php endif ?>
<dl class="dl">
<?php if ($investigation->incidentDate()->isNotEmpty()): ?>
<div class="dl__group">
<dt>Date de l'incident</dt>
<dd><time datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
</div> </div>
<?php endif ?> <button class="btn--go-to"><a href="<?= $investigation->url() ?>"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $investigation->url() ?>" aria-hidden="true"></a>
<?php if ($partners = $investigation->partners()->toStructure()): ?>
<?php if ($partners->isNotEmpty()): ?>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>
<?php $partnerNames = [] ?>
<?php foreach ($partners as $partner): ?>
<?php $partnerNames[] = $partner->name()->value() ?>
<?php endforeach ?>
<?= implode(', ', $partnerNames) ?>
</dd>
</div>
<?php endif ?>
<?php endif ?>
<?php if ($investigation->incidentLocation()->isNotEmpty()): ?>
<div class="dl__group">
<dt>Lieu de l'incident</dt>
<dd><?= $investigation->incidentLocation()->esc() ?></dd>
</div>
<?php endif ?>
</dl>
</div>
<?php if ($keywords = $investigation->keywords()->split()): ?>
<div class="keywords-wrapper">
<ul class="keywords">
<?php foreach ($keywords as $keyword): ?>
<li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li>
<?php endforeach ?>
</ul>
</div>
<?php endif ?>
<a class="link-block" href="<?= $investigation->url() ?>"></a>
</article> </article>
<?php endforeach ?> <?php endforeach ?>
</section> </div>
<?php else: ?>
<p>Aucune enquête associée à ce dossier pour le moment.</p>
<?php endif ?> <?php endif ?>
<?php if ($impacts->isNotEmpty()): ?>
<div class="package__section" id="impacts">
<h3 class="section__title"><?= t('impacts.title') ?> (<?= $impacts->count() ?>)</h3>
<section id="section__impacts"> <?php foreach ($impacts as $impact): ?>
<div class="card--block-small has-link">
<div class="group-top">
<p class="type"><?= t('impact.type') ?></p>
<?php if ($impact->category()->isNotEmpty()): ?>
<p class="category"><?= $impact->category()->esc() ?></p>
<?php endif ?>
</div>
<h4 class="title"><?= $impact->title()->esc() ?></h4>
<h3 class="container__title">4 impacts</h3> <?php if ($impact->created()->isNotEmpty()): ?>
<p class="date">
<!-- Contenu statique temporaire --> <time datetime="<?= $impact->created()->toDate('yyyy-MM-dd') ?>"><?= $impact->created()->toDate('d MMMM yyyy', $dateLocale) ?></time>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p>
<div class="content">
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
</p> </p>
<?php endif ?>
<button class="btn--go-to">
<a href="<?= $impact->url() ?>"><?= svg('assets/icons/arrow-left.svg') ?></a>
</button>
<a class="link-block" href="<?= $impact->url() ?>" aria-hidden="true"></a>
</div> </div>
<?php endforeach ?>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
</ul>
</div>
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="#" target="_blank"></a>
</div>
</div>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p>
<div class="content">
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
</p>
</div>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</div>
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="#" target="_blank"></a>
</div>
</div>
<div class="card--impact" data-impact-type="media">
<div class="card--impact__inner">
<p class="tag">Médiatique</p>
<?php snippet('card-open-graph') ?>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</div>
</div>
</div>
<div class="card--impact" data-impact-type="public">
<div class="card--impact__inner">
<p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p>
<div class="content">
<p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.
</p>
</div> </div>
<?php endif ?>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Evènement</a></li>
<li><a href="#keyword" target="_blank">Actualité d’Index</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
</main> </main>

36
site/templates/packages.php
View file

@ -17,41 +17,43 @@
<?php foreach ($page->children()->listed() as $package): ?> <?php foreach ($page->children()->listed() as $package): ?>
<article class="card--package">
<article class="card--package">
<?php if ($cover = $package->cover()->toFile()): ?> <?php if ($cover = $package->cover()->toFile()): ?>
<figure> <figure>
<img src="<?= $cover->url() ?>" alt="<?= $package->title()->esc() ?>"> <img src="<?= $cover->url() ?>" alt="<?= $package->title()->esc() ?>">
</figure> </figure>
<?php endif ?> <?php endif ?>
<div class="content"> <div class="content">
<p class="type"><?= t('package.type') ?></p>
<h4 class="title"><a href="<?= $package->url() ?>"><span class="icon"><?= svg('assets/icons/package.svg') ?></span><?= $package->title()->esc() ?></a></h4> <h4 class="title"><a href="<?= $package->url() ?>"><span class="icon"><?= svg('assets/icons/package.svg') ?></span><?= $package->title()->esc() ?></a></h4>
<?php if ($package->description()->isNotEmpty()): ?> <!-- <?php if ($package->description()->isNotEmpty()): ?>
<p class="short"><?= $package->description()->excerpt(200) ?></p> <p class="description"><?= $package->description()->excerpt(100) ?></p>
<?php endif ?> <?php endif ?> -->
<?php <?php
// Compter les enquêtes associées à ce dossier $investigationsCount = $package->linkedContent()->toPages()->count();
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($package) { $impactsCount = $package->linkedImpacts()->toPages()->count();
return $investigation->package()->value() === $package->slug();
})->count();
?> ?>
<?php if ($investigationsCount > 0 || $impactsCount > 0): ?>
<ul> <ul class="details">
<?php if ($investigationsCount > 0): ?> <?php if ($investigationsCount > 0): ?>
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li> <li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
<?php endif ?> <?php endif ?>
<li>8 impacts</li> <?php if ($impactsCount > 0): ?>
<li><?= $impactsCount ?> impact<?= $impactsCount > 1 ? 's' : '' ?></li>
<?php endif ?>
</ul> </ul>
<?php endif ?>
</div> </div>
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button> <button class="btn--go-to"><a href="<?= $package->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $package->url() ?>"></a> <a class="link-block" href="<?= $package->url() ?>" target="_blank" aria-hidden="true"></a>
</article> </article>
<?php endforeach ?> <?php endforeach ?>
</section> </section>