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

add figcaption
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-18 17:51:48 +01:00
parent ecedeaa484
commit 70bd4f2f2c
7 changed files with 71 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

41
assets/css/components/_card-impact-small.scss
View file

@ -72,7 +72,46 @@
.open-graph__details { .open-graph__details {
grid-column: 2; grid-column: 2;
@include details-summary();
summary,
.summary-inner{
display: flex;
align-items: center;
cursor: pointer;
gap: 0.5ch;
}
.arrow-details{
line-height: 0;
--size: 11px;
height: var(--size);
width: var(--size);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
top: -2px;
svg{
transition: transform 0.2s ease-in;
width: 100%;
fill: var(--color-txt);
}
}
summary:hover{
color: var(--color-txt);
.arrow-details svg{
fill: var(--color-txt);
}
}
&[open]{
.arrow-details svg{
transform: rotate(90deg);
}
}
summary { summary {
color: var(--color-txt-light); color: var(--color-txt-light);

42
assets/css/components/_details-summary.scss
View file

@ -1,46 +1,8 @@
@mixin details-summary(){ // @mixin details-summary(){
summary,
.summary-inner{
display: flex;
align-items: center;
cursor: pointer;
gap: 0.5ch;
}
.arrow-details{ // }
line-height: 0;
--size: 11px;
height: var(--size);
width: var(--size);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
top: -2px;
svg{
transition: transform 0.2s ease-in;
width: 100%;
fill: var(--color-txt);
}
}
summary:hover{
color: var(--color-txt);
.arrow-details svg{
fill: var(--color-txt);
}
}
&[open]{
.arrow-details svg{
transform: rotate(90deg);
}
}
}

7
assets/css/components/_summary-hero.scss
View file

@ -1,7 +1,8 @@
#summary__hero{ #summary__hero{
width: 100%; width: 100%;
position: relative; position: relative;
left: 0; left: 0;
margin-bottom: calc(var(--spacing)*3);
figcaption{ figcaption{
@ -10,7 +11,9 @@
@media #{$x-small}{ font-size: var(--fs-xsmall); } @media #{$x-small}{ font-size: var(--fs-xsmall); }
padding: calc(var(--spacing)*0.5) var(--padding-body); padding: calc(var(--spacing)*0.5) var(--padding-body);
padding-bottom: 0; padding-bottom: 0;
text-align: center;
width: var(--max-w-content);
margin-inline: auto;
} }

4
assets/css/style.css
View file

@ -611,6 +611,7 @@ button.sort[data-sort-type=up] .arrow {
width: 100%; width: 100%;
position: relative; position: relative;
left: 0; left: 0;
margin-bottom: calc(var(--spacing) * 3);
} }
#summary__hero figcaption { #summary__hero figcaption {
color: var(--color-txt-light); color: var(--color-txt-light);
@ -624,6 +625,9 @@ button.sort[data-sort-type=up] .arrow {
#summary__hero figcaption { #summary__hero figcaption {
padding: calc(var(--spacing) * 0.5) var(--padding-body); padding: calc(var(--spacing) * 0.5) var(--padding-body);
padding-bottom: 0; padding-bottom: 0;
text-align: center;
width: var(--max-w-content);
margin-inline: auto;
} }
#summary__hero figure { #summary__hero figure {
width: 100%; width: 100%;

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

File diff suppressed because one or more lines are too long

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

@ -63,6 +63,13 @@ tabs:
width: 1/3 width: 1/3
when: when:
heroType: video heroType: video
heroCaption:
label: Légende du hero
type: writer
nodes: false
marks:
- italic
help: "Recommandé : 140 caractères max"
body: body:
label: Corps label: Corps
type: layout type: layout

19
site/templates/investigation.php
View file

@ -17,9 +17,6 @@
<main> <main>
<header class="page__header"> <header class="page__header">
<p class="page__type">Enquête</p> <p class="page__type">Enquête</p>
<h2 class="page__title"><?= $page->title()->esc() ?></h2> <h2 class="page__title"><?= $page->title()->esc() ?></h2>
@ -39,7 +36,9 @@
<figure> <figure>
<img src="<?= $heroImage->url() ?>" alt="<?= $page->title()->esc() ?>"> <img src="<?= $heroImage->url() ?>" alt="<?= $page->title()->esc() ?>">
</figure> </figure>
<?php if ($heroImage->caption()->isNotEmpty()): ?> <?php if ($page->heroCaption()->isNotEmpty()): ?>
<figcaption><?= $page->heroCaption()->inline() ?></figcaption>
<?php elseif ($heroImage->caption()->isNotEmpty()): ?>
<figcaption><?= $heroImage->caption() ?></figcaption> <figcaption><?= $heroImage->caption() ?></figcaption>
<?php endif ?> <?php endif ?>
</div> </div>
@ -50,19 +49,23 @@
<div id="summary__hero" class="hero-video"> <div id="summary__hero" class="hero-video">
<div class="player-container"> <div class="player-container">
<?php if ($page->videoExtractUrl()->isNotEmpty()): ?> <?php if ($videoPreview = $page->videoPreview()->toFile()): ?>
<div class="extract"> <div class="extract">
<video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="<?= $page->videoExtractUrl() ?>"></video> <video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="<?= $videoPreview->url() ?>"></video>
<button id="hero-play-video"><span class="btn--bold"><?= svg('assets/icons/play.svg') ?> <span class="text">play video</span></button> <button id="hero-play-video"><span class="btn--bold"><?= svg('assets/icons/play.svg') ?> <span class="text">play video</span></button>
</div> </div>
<?php endif ?> <?php endif ?>
<?php if ($page->videoFullUrl()->isNotEmpty()): ?> <?php if ($page->videoUrl()->isNotEmpty()): ?>
<div class="video-full"> <div class="video-full">
<iframe rel="0" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="<?= $page->title()->esc() ?>" width="480" height="320" src="<?= $page->videoFullUrl() ?>"></iframe> <iframe rel="0" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="<?= $page->title()->esc() ?>" width="480" height="320" src="<?= $page->videoUrl() ?>"></iframe>
</div> </div>
<?php endif ?> <?php endif ?>
</div> </div>
<?php if ($page->heroCaption()->isNotEmpty()): ?>
<figcaption><?= $page->heroCaption()->inline() ?></figcaption>
<?php endif ?>
</div> </div>
<?php endif ?> <?php endif ?>