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

fix: figcaption dans figure, loop swiper, max-height images investigation
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source 
- investigation.php : figcaption déplacé à l'intérieur des <figure>
  (correction HTML + meilleure capture par la lightbox)
- swipers.js : loop: true sur toutes les galeries
- _investigation_content.scss : max-height 75vh sur les images
- _figures.scss : reformatage indentation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-27 16:03:35 +01:00
parent 3d9a0421b3
commit 59c5396184
6 changed files with 125 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

43
assets/css/components/_figures.scss
View file

@ -1,26 +1,23 @@
@mixin figure-16-9{
& > figure{
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
img, picture{
width: 100%;
height: 100%;
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
@mixin figure-16-9 {
& > figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
img,
picture {
width: 100%;
height: 100%;
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
}
}
figcaption, .caption{
font-size: var(--fs-small);
color: var(--color-txt-light);
font-weight: 500;
line-height: 1.1;
margin: calc(var(--spacing) * 0.5) 0!important;
}
figcaption,
.caption {
font-size: var(--fs-small) !important;
color: var(--color-txt-light);
font-weight: 500;
line-height: 1.1;
margin: calc(var(--spacing) * 0.5) 0 !important;
}

96
assets/css/style.css
View file

@ -939,8 +939,9 @@ button.sort[data-sort-type=up] .arrow {
opacity: 0 !important;
}
}
figcaption, .caption {
font-size: var(--fs-small);
figcaption,
.caption {
font-size: var(--fs-small) !important;
color: var(--color-txt-light);
font-weight: 500;
line-height: 1.1;
@ -1651,7 +1652,8 @@ figcaption, .caption {
display: flex;
overflow: hidden;
}
.card--article > figure img, .card--article > figure picture {
.card--article > figure img,
.card--article > figure picture {
width: 100%;
height: 100%;
-o-object-fit: cover;
@ -1818,7 +1820,8 @@ figcaption, .caption {
display: flex;
overflow: hidden;
}
.card--package > figure img, .card--package > figure picture,
.card--package > figure img,
.card--package > figure picture,
.card--article-small > figure img,
.card--article-small > figure picture {
width: 100%;
@ -2032,7 +2035,8 @@ figcaption, .caption {
display: flex;
overflow: hidden;
}
.card--block > figure img, .card--block > figure picture {
.card--block > figure img,
.card--block > figure picture {
width: 100%;
height: 100%;
-o-object-fit: cover;
@ -2405,6 +2409,80 @@ figcaption, .caption {
justify-content: center;
}
#lightbox {
position: fixed;
inset: 0;
z-index: calc(var(--z-header) + 10);
background-color: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.lightbox-open #lightbox {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#lightbox-close {
position: absolute;
top: var(--padding-body);
right: var(--padding-body);
background: none;
border: none;
color: var(--color-txt);
cursor: pointer;
padding: 8px;
z-index: 1;
line-height: 0;
}
#lightbox-close svg {
width: 30px;
fill: var(--color-txt);
transition: fill 0.2s ease;
}
#lightbox-close:hover svg {
fill: var(--grey-400);
}
#lightbox-swiper {
width: 90vw;
}
#lightbox-swiper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
}
#lightbox-swiper .swiper-slide figure {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
}
#lightbox-swiper .swiper-slide figure img {
max-width: 90vw;
max-height: calc(90dvh - 100px);
width: auto;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
#lightbox-swiper .swiper-slide figure figcaption {
margin-top: calc(var(--spacing) * 0.5);
color: var(--color-txt-light);
font-size: var(--fs-small);
text-align: center;
}
@media (min-width: 1080px) {
figure[data-lightbox] {
cursor: zoom-in;
}
}
.slider-before-after {
width: 100%;
max-width: 700px;
@ -3434,7 +3512,8 @@ main .page__header ul.list-nav li:hover {
display: flex;
overflow: hidden;
}
.main__single .page__header > figure img, .main__single .page__header > figure picture {
.main__single .page__header > figure img,
.main__single .page__header > figure picture {
width: 100%;
height: 100%;
-o-object-fit: cover;
@ -3521,6 +3600,11 @@ main .page__header ul.list-nav li:hover {
#investigation__content .subsection-txt {
max-width: var(--max-w-content);
}
#investigation__content img {
max-height: 75vh;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 768px) {
#investigation__content .section-content {
margin-bottom: calc(var(--spacing) * 4);

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

File diff suppressed because one or more lines are too long

5
assets/css/template/_investigation_content.scss
View file

@ -20,6 +20,11 @@
max-width: var(--max-w-content);
}
img {
max-height: 75vh;
object-fit: cover;
}
@media #{$small-up} {
.section-content {
margin-bottom: calc(var(--spacing) * 4);