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 {
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 {
color: var(--color-txt-light);

44
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{
width: 100%;
position: relative;
left: 0;
left: 0;
margin-bottom: calc(var(--spacing)*3);
figcaption{
@ -10,7 +11,9 @@
@media #{$x-small}{ font-size: var(--fs-xsmall); }
padding: calc(var(--spacing)*0.5) var(--padding-body);
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%;
position: relative;
left: 0;
margin-bottom: calc(var(--spacing) * 3);
}
#summary__hero figcaption {
color: var(--color-txt-light);
@ -624,6 +625,9 @@ button.sort[data-sort-type=up] .arrow {
#summary__hero figcaption {
padding: calc(var(--spacing) * 0.5) var(--padding-body);
padding-bottom: 0;
text-align: center;
width: var(--max-w-content);
margin-inline: auto;
}
#summary__hero figure {
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
when:
heroType: video
heroCaption:
label: Légende du hero
type: writer
nodes: false
marks:
- italic
help: "Recommandé : 140 caractères max"
body:
label: Corps
type: layout

19
site/templates/investigation.php
View file

@ -17,9 +17,6 @@
<main>
<header class="page__header">
<p class="page__type">Enquête</p>
<h2 class="page__title"><?= $page->title()->esc() ?></h2>
@ -39,7 +36,9 @@
<figure>
<img src="<?= $heroImage->url() ?>" alt="<?= $page->title()->esc() ?>">
</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>
<?php endif ?>
</div>
@ -50,19 +49,23 @@
<div id="summary__hero" class="hero-video">
<div class="player-container">
<?php if ($page->videoExtractUrl()->isNotEmpty()): ?>
<?php if ($videoPreview = $page->videoPreview()->toFile()): ?>
<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>
</div>
<?php endif ?>
<?php if ($page->videoFullUrl()->isNotEmpty()): ?>
<?php if ($page->videoUrl()->isNotEmpty()): ?>
<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>
<?php endif ?>
</div>
<?php if ($page->heroCaption()->isNotEmpty()): ?>
<figcaption><?= $page->heroCaption()->inline() ?></figcaption>
<?php endif ?>
</div>
<?php endif ?>