fix: figcaption dans figure, loop swiper, max-height images investigation
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
- 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
parent
3d9a0421b3
commit
59c5396184
6 changed files with 125 additions and 38 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ export function initSwipers(container = document) {
|
|||
slidesPerView: 1,
|
||||
spaceBetween: 20,
|
||||
speed: 600,
|
||||
loop: true,
|
||||
|
||||
// Touch/Swipe settings
|
||||
touchRatio: 1,
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
|
|||
</div>
|
||||
|
||||
<?php if ($page->heroCaption()->isNotEmpty()): ?>
|
||||
<figcaption><?= $page->heroCaption()->inline() ?></figcaption>
|
||||
<figcaption><?= $page->heroCaption()->inline() ?></figcaption>
|
||||
<?php endif ?>
|
||||
|
||||
</div>
|
||||
|
|
@ -56,12 +56,12 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
|
|||
'srcsetName' => 'cover-hero',
|
||||
'lazy' => false,
|
||||
]) ?>
|
||||
</figure>
|
||||
<?php if ($page->heroCaption()->isNotEmpty()): ?>
|
||||
<figcaption><?= $page->heroCaption()->inline() ?></figcaption>
|
||||
<figcaption><?= $page->heroCaption()->inline() ?></figcaption>
|
||||
<?php elseif ($cover->caption()->isNotEmpty()): ?>
|
||||
<figcaption><?= $cover->caption() ?></figcaption>
|
||||
<figcaption><?= $cover->caption() ?></figcaption>
|
||||
<?php endif ?>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<?php endif ?>
|
||||
|
|
@ -212,10 +212,10 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
|
|||
'srcsetName' => 'body-full',
|
||||
'lazy' => true,
|
||||
]) ?>
|
||||
</figure>
|
||||
<?php if ($image->caption()->isNotEmpty()): ?>
|
||||
<p class="caption"><?= $image->caption()->html() ?></p>
|
||||
<figcaption><?= $image->caption()->html() ?></p>
|
||||
<?php endif ?>
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
|
||||
|
|
@ -261,10 +261,10 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
|
|||
'srcsetName' => 'body-half',
|
||||
'lazy' => true,
|
||||
]) ?>
|
||||
</figure>
|
||||
<?php if ($image->caption()->isNotEmpty()): ?>
|
||||
<p class="caption"><?= $image->caption()->html() ?></p>
|
||||
<figcaption><?= $image->caption()->html() ?></figcaption>
|
||||
<?php endif ?>
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue