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 {
font-size: var(--fs-small);
@include clamp(2);
margin-top: calc(var(--spacing)*0.25);
display: none;
// margin-top: calc(var(--spacing)*-0.5);
// display: none;
}

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

@ -29,7 +29,6 @@
}
.content{
// padding: var(--padding-inner);
display: flex;
flex-direction: column;
}
@ -119,9 +118,6 @@
}
@media #{$small-up} {
[data-template="home"] .pinned-home{
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,
#investigation__content{
font-size: var(--fs-text);

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

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

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

@ -52,5 +52,25 @@ margin-bottom: calc(var(--spacing) * 1);
}
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)
}
}
}

250
assets/css/style.css
View file

@ -1388,17 +1388,24 @@ button.sort[data-sort-type=up] .arrow {
transform: translateX(0);
}
[data-template=package] .page__content,
.main__single .page__content,
#investigation__content {
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 li,
#investigation__content ul {
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 h4,
#investigation__content h5 {
@ -1406,6 +1413,7 @@ button.sort[data-sort-type=up] .arrow {
max-width: var(--max-w-content);
margin-inline: auto;
}
[data-template=package] .page__content h3,
.main__single .page__content h3,
#investigation__content h3 {
margin-top: calc(var(--spacing) * 4);
@ -1413,6 +1421,7 @@ button.sort[data-sort-type=up] .arrow {
font-size: 1.45em;
text-transform: uppercase;
}
[data-template=package] .page__content h4,
.main__single .page__content h4,
#investigation__content h4 {
margin-top: calc(var(--spacing) * 3);
@ -1420,6 +1429,7 @@ button.sort[data-sort-type=up] .arrow {
font-size: 1.2em;
text-transform: uppercase;
}
[data-template=package] .page__content h5,
.main__single .page__content h5,
#investigation__content h5 {
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-underline-offset: 5px;
}
[data-template=package] .page__content p,
.main__single .page__content p,
#investigation__content p {
margin: calc(var(--spacing) * 0.75) 0;
}
[data-template=package] .page__content ul,
.main__single .page__content ul,
#investigation__content ul {
padding-left: 3ch;
}
[data-template=package] .page__content ul li,
.main__single .page__content ul li,
#investigation__content ul li {
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 .caption {
font-size: var(--fs-small);
@ -1450,13 +1465,18 @@ button.sort[data-sort-type=up] .arrow {
line-height: 1.1;
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 figure,
#investigation__content img,
#investigation__content picture {
width: 100%;
}
[data-template=package] .page__content .insert,
.main__single .page__content .insert,
#investigation__content .insert {
max-width: var(--max-w-cards);
@ -1465,28 +1485,37 @@ button.sort[data-sort-type=up] .arrow {
padding: calc(var(--padding-inner) * 3);
}
@media screen and (max-width: 768px) {
[data-template=package] .page__content .insert,
.main__single .page__content .insert,
#investigation__content .insert {
padding: calc(var(--padding-inner) * 1);
}
}
[data-template=package] .page__content .insert,
.main__single .page__content .insert,
#investigation__content .insert {
background-color: var(--grey-800);
}
[data-template=package] .page__content .insert .insert--inner,
.main__single .page__content .insert .insert--inner,
#investigation__content .insert .insert--inner {
max-width: var(--max-w-content);
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 h4,
#investigation__content .insert h5 {
margin-top: 0;
}
@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 h4,
#investigation__content .insert h5 {
@ -1494,7 +1523,11 @@ button.sort[data-sort-type=up] .arrow {
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 > .swiper,
#investigation__content > .slider-before-after,
@ -1502,7 +1535,11 @@ button.sort[data-sort-type=up] .arrow {
margin-top: 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 > .swiper + .caption,
#investigation__content > .slider-before-after + .caption,
@ -1626,51 +1663,50 @@ button.sort[data-sort-type=up] .arrow {
font-size: var(--fs-xsmall);
}
@media screen and (min-width: 768px) {
[data-template=home] .pinned-home {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
padding: calc(var(--padding-inner) * 2);
}
[data-template=home] .pinned-home figure,
[data-template=home] .pinned-home picture,
[data-template=home] .pinned-home .video-extract {
grid-column: span 2;
display: flex;
width: calc(100% + var(--padding-inner) * 4);
position: relative;
left: calc(var(--padding-inner) * -2);
top: calc(var(--padding-inner) * -2);
}
[data-template=home] .pinned-home .title {
grid-column: span 2;
font-size: var(--fs-text);
padding-right: 3ch;
margin-bottom: calc(var(--spacing) * 1);
margin-top: calc(var(--spacing) * 0.5);
}
[data-template=home] .pinned-home .description {
grid-column: 1;
grid-row: 3;
padding-right: 3ch;
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
overflow: visible;
font-size: var(--fs-normal);
margin-top: 0px;
}
[data-template=home] .pinned-home dl {
margin-top: 0px;
grid-column: 2;
grid-row: 3;
}
[data-template=home] .pinned-home .keywords-wrapper {
grid-column: span 2;
grid-row: 4;
}
[data-template=home] .pinned-home {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
padding: calc(var(--padding-inner) * 2);
}
[data-template=home] .pinned-home figure,
[data-template=home] .pinned-home picture,
[data-template=home] .pinned-home .video-extract {
grid-column: span 2;
display: flex;
width: calc(100% + var(--padding-inner) * 4);
position: relative;
left: calc(var(--padding-inner) * -2);
top: calc(var(--padding-inner) * -2);
}
[data-template=home] .pinned-home .title {
grid-column: span 2;
font-size: var(--fs-text);
padding-right: 3ch;
margin-bottom: calc(var(--spacing) * 1);
margin-top: calc(var(--spacing) * 0.5);
}
[data-template=home] .pinned-home .description {
grid-column: 1;
grid-row: 3;
padding-right: 3ch;
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
overflow: visible;
font-size: var(--fs-normal);
margin-top: 0px;
}
[data-template=home] .pinned-home dl {
margin-top: 0px;
grid-column: 2;
grid-row: 3;
}
[data-template=home] .pinned-home .keywords-wrapper {
grid-column: span 2;
grid-row: 4;
}
.card--package,
.card--article-small {
display: grid;
@ -1768,8 +1804,6 @@ button.sort[data-sort-type=up] .arrow {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: calc(var(--spacing) * 0.25);
display: none;
}
.card--package,
.card--article-small {
@ -2964,17 +2998,39 @@ main .page__header .page__description {
main .page__header .page__description {
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 {
max-width: var(--max-w-cards);
margin-inline: auto;
padding-top: calc(var(--spacing) * 4);
}
@media screen and (max-width: 768px) {
.package__section,
.page__aside {
padding-top: calc(var(--spacing) * 3);
}
}
.package__section .section__title,
.package__section .aside__title,
.page__aside .section__title,
.page__aside .aside__title {
font-weight: 500;
text-transform: uppercase;
@ -2982,6 +3038,9 @@ main .page__header .page__description {
font-size: 1.2em;
}
@media screen and (max-width: 768px) {
.package__section .section__title,
.package__section .aside__title,
.page__aside .section__title,
.page__aside .aside__title {
font-size: var(--fs-normal);
}
@ -3318,87 +3377,4 @@ main .page__header .page__description {
}
.media figure {
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 */

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 {
// max-width: 1300px;
max-width: var(--max-w-cards);
margin: 0 auto;
display: grid;
grid-gap: calc(var(--padding-body) * 1.5);
// grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
// .content-package {
// // max-width: 1300px;
// max-width: var(--max-w-cards);
// margin: 0 auto;
// display: grid;
// grid-gap: calc(var(--padding-body) * 1.5);
// // grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
position: relative;
// position: relative;
.container-cards {
display: block;
align-self: start;
}
// .container-cards {
// display: block;
// align-self: start;
// }
#section__investigations article {
margin-bottom: calc(var(--spacing) * 1);
}
// #section__investigations article {
// margin-bottom: calc(var(--spacing) * 1);
// }
.container__title {
font-weight: normal;
font-size: var(--fs-small);
font-weight: 500;
// .container__title {
// font-weight: normal;
// font-size: var(--fs-small);
// font-weight: 500;
text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 0.75);
}
// text-transform: uppercase;
// margin-bottom: calc(var(--spacing) * 0.75);
// }
@media #{$medium} {
#section__investigations {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-inner) * 1.5) !important;
margin-bottom: calc(var(--spacing) * 3);
article {
margin-bottom: 0px;
}
.container__title {
grid-column: span 2;
margin-bottom: 0px;
}
}
section:target {
padding-top: calc(var(--header-h) + var(--spacing));
}
}
// @media #{$medium} {
// #section__investigations {
// display: grid;
// grid-template-columns: 1fr 1fr;
// grid-gap: calc(var(--padding-inner) * 1.5) !important;
// margin-bottom: calc(var(--spacing) * 3);
// article {
// margin-bottom: 0px;
// }
// .container__title {
// grid-column: span 2;
// margin-bottom: 0px;
// }
// }
// section:target {
// padding-top: calc(var(--header-h) + var(--spacing));
// }
// }
@media #{$medium-up} {
#nav-package {
display: none;
}
grid-template-columns: 1fr 1fr;
#section__investigations {
display: block;
margin-bottom: 0px;
article {
margin-bottom: calc(var(--spacing) * 1);
}
}
}
// @media #{$medium-up} {
// #nav-package {
// display: none;
// }
// grid-template-columns: 1fr 1fr;
// #section__investigations {
// display: block;
// margin-bottom: 0px;
// article {
// margin-bottom: calc(var(--spacing) * 1);
// }
// }
// }
@media #{$small} {
display: block;
#section__investigations {
display: block;
}
.container__title {
margin-bottom: calc(var(--spacing) * 0.5) !important;
}
}
}
// @media #{$small} {
// display: block;
// #section__investigations {
// display: block;
// }
// .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 {
// display: flex;
// margin-top: calc(var(--spacing) * -1);
// margin-bottom: calc(var(--spacing) * 2);
svg {
width: 10px;
height: 10px;
transform: rotate(90deg);
}
}
@media #{$medium-up} {
#nav-package {
display: none;
}
}
// svg {
// width: 10px;
// height: 10px;
// transform: rotate(90deg);
// }
// }
// @media #{$medium-up} {
// #nav-package {
// 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(){
const nav = document.getElementById('nav-investigation');
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 { initDropdowns } from './dropdown.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';
const responsiveMedium = 1080;
@ -19,6 +21,8 @@ window.onload = async function () {
themeToggle();
backToTop();
initSliderBeforeAfter();
copyLink();
playVideo();
initDropdowns(responsiveSmall, responsiveSmallX);
@ -26,7 +30,7 @@ window.onload = async function () {
progressBar();
initSliderBeforeAfter();
scrollBack();
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}%`);
});
}
});
}