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

report
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m16s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-07 18:09:13 +01:00
parent 563e9b9fd4
commit cce1ee0596
7 changed files with 86 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/base/_var.scss
View file

@ -6,7 +6,7 @@
--fs-xsmall: 12px;
--fs-small: 16px;
--fs-normal: 20px;
--fs-medium: 24px;
--fs-medium: 30px;
--fs-big: 45px;
--fs-button-bold: 22px;

2
assets/css/partials/_main-layout.scss
View file

@ -2,7 +2,7 @@ body{
min-height: 100dvh;
min-height: 100vh;
width: 100vw;
// overflow-x: hidden;
overflow-x: hidden;
display: flex;
flex-direction: column;

9
assets/css/style.css
View file

@ -5,7 +5,7 @@
--fs-xsmall: 12px;
--fs-small: 16px;
--fs-normal: 20px;
--fs-medium: 24px;
--fs-medium: 30px;
--fs-big: 45px;
--fs-button-bold: 22px;
--max-w-content: 640px;
@ -2542,6 +2542,7 @@ body {
min-height: 100dvh;
min-height: 100vh;
width: 100vw;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
@ -3047,7 +3048,6 @@ main .page__header .description-medium {
margin-bottom: calc(var(--spacing) * 2);
font-size: var(--fs-medium);
font-weight: 500;
text-transform: uppercase;
text-wrap: balance;
max-width: var(--max-w-content);
color: var(--color-accent);
@ -3115,11 +3115,14 @@ main .page__header .description-medium {
z-index: 10;
}
.report__content p {
margin: calc(var(--spacing) * 0.5) 0;
margin: calc(var(--spacing) * 0.75) 0;
}
.report__content ul {
padding-left: 3ch;
}
.report__content ul li {
margin: calc(var(--spacing) * 0.5) 0;
}
.report__content:target {
padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important;

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

File diff suppressed because one or more lines are too long

10
assets/css/template/_report.scss
View file

@ -252,9 +252,9 @@
font-size: var(--fs-medium);
font-weight: 500;
text-transform: uppercase;
// text-transform: uppercase;
text-wrap: balance;
max-width: var(--max-w-content);
max-width: var(--max-w-content);
color: var(--color-accent);
}
@ -339,11 +339,15 @@
p {
margin: calc(var(--spacing)*0.5) 0;
margin: calc(var(--spacing)*0.75) 0;
}
ul {
padding-left: 3ch;
li{
margin: calc(var(--spacing)*0.5) 0;
}
}
}

113
assets/js/report.js
View file

@ -39,58 +39,82 @@ function initHorizontalScroll(){
const sections = document.querySelectorAll('.subsection-w-hscroll');
sections.forEach(function (section) {
const wrapper = section.querySelector('.horizontal-scroll-wrapper');
const container = section.querySelector('.horizontal-scroll');
if (!container) return;
const wrapper = container.querySelector('.horizontal-scroll-wrapper');
if (!wrapper) return;
// Calculer la largeur totale du contenu horizontal
const slides = wrapper.querySelectorAll('.horizontal-scroll-slide');
const totalSlidesWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
const endMargin = window.innerWidth * 0.3; // 30vw de marge à la fin
const scrollableWidth = totalSlidesWidth - window.innerWidth + endMargin;
// Définir la hauteur de la section pour créer l'espace de scroll virtuel
// La hauteur = viewport + largeur scrollable (pour un ratio 1:1 entre scroll Y et X)
const sectionHeight = window.innerHeight + scrollableWidth;
section.style.height = `${sectionHeight}px`;
// Calculer la distance totale à scroller horizontalement
function calculateScrollDistance() {
const totalSlidesWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
const endMargin = window.innerWidth * 0.3; // 30vw de marge à la fin
return totalSlidesWidth - window.innerWidth + endMargin;
}
let scrollDistance = calculateScrollDistance();
// Créer un spacer invisible qui crée l'espace de scroll
// Hauteur = scrollDistance + hauteur du viewport pour maintenir le texte en dessous
const spacer = document.createElement('div');
spacer.className = 'horizontal-scroll-spacer';
spacer.style.height = `${scrollDistance + window.innerHeight}px`;
spacer.style.width = '100%';
spacer.style.pointerEvents = 'none';
// Insérer le spacer AVANT .horizontal-scroll
section.insertBefore(spacer, container);
// Calculer la position absolue du spacer une seule fois
function getSpacerTopPosition() {
let element = spacer;
let top = 0;
while (element) {
top += element.offsetTop;
element = element.offsetParent;
}
return top;
}
let spacerTopPosition = getSpacerTopPosition();
// Fonction de mise à jour du scroll horizontal
function updateHorizontalScroll() {
const rect = section.getBoundingClientRect();
const stickyContainer = section.querySelector('.horizontal-scroll');
const scrollY = window.pageYOffset || document.documentElement.scrollTop;
// Quand le haut de la section atteint le haut du viewport
if (rect.top <= 0 && rect.bottom >= window.innerHeight) {
// Calculer la progression (0 à 1)
const progress = Math.abs(rect.top) / scrollableWidth;
const clampedProgress = Math.max(0, Math.min(1, progress));
// Début et fin du scroll basé sur le spacer
const scrollStart = spacerTopPosition;
const scrollEnd = spacerTopPosition + scrollDistance;
console.log('scrollY:', scrollY, 'scrollStart:', scrollStart, 'scrollEnd:', scrollEnd);
if (scrollY >= scrollStart && scrollY <= scrollEnd) {
// Phase de scroll horizontal : fixer le container
const progress = (scrollY - scrollStart) / scrollDistance;
const translateX = progress * scrollDistance;
console.log('Horizontal scroll active - progress:', progress);
// Appliquer le scroll horizontal
const translateX = clampedProgress * scrollableWidth;
wrapper.style.transform = `translateX(-${translateX}px)`;
// Fixer le conteneur
if (stickyContainer) {
stickyContainer.style.position = 'fixed';
stickyContainer.style.top = '0';
stickyContainer.style.left = '0';
stickyContainer.style.width = '100vw';
}
} else if (rect.top > 0) {
// Avant la section : reset
container.style.position = 'fixed';
container.style.top = '0';
container.style.left = '0';
} else if (scrollY < scrollStart) {
// Avant le spacer : reset
console.log('Before spacer');
wrapper.style.transform = 'translateX(0)';
if (stickyContainer) {
stickyContainer.style.position = 'relative';
}
container.style.position = '';
container.style.top = '';
container.style.left = '';
} else {
// Après la section : garder à la fin
wrapper.style.transform = `translateX(-${scrollableWidth}px)`;
if (stickyContainer) {
stickyContainer.style.position = 'absolute';
stickyContainer.style.top = 'auto';
stickyContainer.style.bottom = '0';
stickyContainer.style.left = '0';
stickyContainer.style.width = '100vw';
}
// Après le spacer : garder le translate final et défixer
console.log('After spacer');
wrapper.style.transform = `translateX(-${scrollDistance}px)`;
container.style.position = '';
container.style.top = '';
container.style.left = '';
}
}
@ -99,11 +123,10 @@ function initHorizontalScroll(){
// Recalculer au resize
window.addEventListener('resize', function() {
const newTotalWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
const newEndMargin = window.innerWidth * 0.3;
const newScrollableWidth = newTotalWidth - window.innerWidth + newEndMargin;
const newSectionHeight = window.innerHeight + newScrollableWidth;
section.style.height = `${newSectionHeight}px`;
scrollDistance = calculateScrollDistance();
spacer.style.height = `${scrollDistance + window.innerHeight}px`;
spacerTopPosition = getSpacerTopPosition();
updateHorizontalScroll();
});
// Initial call