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

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

Browse source
This commit is contained in:
Julie Blanc 2026-01-23 14:21:26 +01:00
parent 05e49af352
commit bee25e5922
11 changed files with 102 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/components/_card-article-small.scss
View file

@ -13,7 +13,7 @@
border-top: var(--border-light);
}
@include figure-16-9();
@include figure-16-9-hover();
.content{
display: flex;

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

@ -5,7 +5,7 @@
flex-direction: column;
@include figure-16-9();
@include figure-16-9-hover();
.content{
padding: var(--padding-inner);
@ -13,6 +13,23 @@
flex-direction: column;
flex-grow: 2;
}
.pin{
position: absolute;
top: var(--padding-inner);
left: var(--padding-inner);
z-index: 200;
width: 24px;
height: 24px;
border-radius: var(--radius-small);
background-color: rgba(255, 255, 255, 0.27);
display: flex;
align-items: center;
justify-content: center;
svg{
width: 16px;
fill: var(--color-txt);
}
}
.title{
margin-top: calc(var(--spacing)*0.5);

2
assets/css/components/_card-open-graph.scss
View file

@ -13,7 +13,7 @@
}
@include figure-16-9();
@include figure-16-9-hover();
@media #{$x-small}{

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

@ -12,6 +12,23 @@
}
}
}
@mixin figure-16-9-hover{
figure{
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
}
&:hover{
figure img{ transform: scale(1.05); }
}

61
assets/css/style.css
View file

@ -1065,6 +1065,23 @@ button.sort[data-sort-type=up] .arrow {
flex-direction: column;
flex-grow: 2;
}
.card--article .pin {
position: absolute;
top: var(--padding-inner);
left: var(--padding-inner);
z-index: 200;
width: 24px;
height: 24px;
border-radius: var(--radius-small);
background-color: rgba(255, 255, 255, 0.27);
display: flex;
align-items: center;
justify-content: center;
}
.card--article .pin svg {
width: 16px;
fill: var(--color-txt);
}
.card--article .title {
margin-top: calc(var(--spacing) * 0.5);
font-size: var(--fs-medium);
@ -1847,7 +1864,7 @@ body main {
-moz-column-gap: var(--padding-inner);
column-gap: var(--padding-inner);
row-gap: calc(var(--spacing) * 1);
grid-template-columns: 30% 70%;
grid-template-columns: 65% 35%;
grid-template-rows: auto auto 1fr;
position: relative;
}
@ -1862,28 +1879,34 @@ body main {
line-height: var(--leading-tight);
font-weight: normal;
margin-top: calc(var(--spacing) * 1);
text-wrap: balance;
}
#rapport .rapport__header .rapport__title-group .subtitle {
font-size: var(--fs-big);
line-height: var(--leading-tight);
font-weight: normal;
text-wrap: balance;
}
#rapport .rapport__header .rapport__figure {
width: 100%;
aspect-ratio: 4/5;
grid-row: span 2;
grid-column: 1;
#rapport .rapport__header figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
}
#rapport .rapport__header .rapport__figure img {
#rapport .rapport__header figure img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
#rapport .rapport__header figure {
grid-row: 2;
grid-column: 2;
}
#rapport .rapport__header .rapport__dl {
grid-row: 2;
grid-column: 2;
align-self: start;
grid-column: 1;
align-self: end;
font-size: var(--fs-small);
border-bottom: var(--border-light);
align-items: flex-start;
@ -1901,22 +1924,16 @@ body main {
padding-right: 1ch;
}
#rapport .rapport__header .btn--group {
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: calc(var(--spacing) * 0.25);
position: relative;
grid-row: 3;
grid-column: 2;
}
#rapport .rapport__header .btn--group button, #rapport .rapport__header .btn--group label {
min-width: 28ch;
justify-content: flex-start;
}
#rapport .rapport__header .btn--group button a, #rapport .rapport__header .btn--group label a {
justify-content: flex-start;
grid-column: 1/3;
display: flex;
justify-content: start;
flex-wrap: wrap;
align-items: start;
gap: calc(var(--spacing) * 0.25);
}
#rapport .rapport__content {
max-width: var(--max-w-content);
}

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

File diff suppressed because one or more lines are too long

90
assets/css/template/_investigation-summary.scss
View file

@ -182,93 +182,3 @@
}
}
}
// DESKTOP ----------------------------------------------------------
// ----------------------------------------------------------------
// @media #{$small-up} {
// [data-template="investigation-summary"] main {
// #banner--page {
// height: calc(100vh - var(--header-h));
// height: calc(100dvh - var(--header-h));
// margin-bottom: calc((100vh - var(--header-h)) * -1);
// margin-bottom: calc((100dvh - var(--header-h)) * -1);
// padding: var(--padding-body);
// padding-left: 0px;
// padding-bottom: calc(var(--padding-body) * 2);
// position: sticky;
// top: var(--header-h);
// width: var(--banner-medium);
// display: flex;
// flex-direction: column;
// justify-content: space-between;
// }
// #banner--page .btn--group {
// display: flex;
// flex-direction: column;
// align-items: center;
// gap: calc(var(--spacing) * 0.25);
// > button,
// > label {
// width: 100%;
// max-width: 160px;
// cursor: pointer;
// }
// }
// #hero {
// margin-top: calc(var(--spacing) * 1);
// margin-bottom: calc(var(--spacing) * 3);
// }
// .section__article {
// margin-left: var(--banner-medium);
// margin-top: calc(var(--spacing) * 3);
// margin-bottom: calc(var(--spacing) * 3);
// }
// #section__short {
// margin-top: var(--padding-body);
// }
// header {
// margin-top: calc(var(--spacing) * 1.5);
// margin-bottom: calc(var(--spacing) * 0.5);
// }
// .section__article {
// .section__title {
// font-size: var(--fs-medium);
// margin-bottom: var(--spacing);
// }
// }
// #section__synthese {
// font-size: var(--fs-medium);
// }
// }
// }
// @media #{$medium-up} {
// [data-template="investigation-summary"] main {
// #banner--page {
// width: calc((100% - var(--max-w-content)) / 2);
// }
// #hero {
// margin-top: 0;
// margin-bottom: calc(var(--spacing) * 3);
// figcaption {
// max-width: var(--max-w-content);
// margin: 0 auto;
// }
// }
// .section__article {
// margin: calc(var(--spacing) * 3) auto;
// }
// }
// }

71
assets/css/template/_rapport.scss
View file

@ -20,7 +20,7 @@
display: grid;
column-gap: var(--padding-inner);
row-gap: calc(var(--spacing)*1);
grid-template-columns: 30% 70%;
grid-template-columns: 65% 35%;
grid-template-rows: auto auto 1fr;
position: relative;
@ -37,6 +37,7 @@
line-height: var(--leading-tight);
font-weight: normal;
margin-top: calc(var(--spacing)*1);
text-wrap: balance;
}
.subtitle{
@ -44,37 +45,28 @@
line-height: var(--leading-tight);
// margin-top: calc(var(--spacing)*0.25);
font-weight: normal;
text-wrap: balance;
}
}
.rapport__figure{
width: 100%;
aspect-ratio: 4/5;
grid-row: span 2;
grid-column: 1;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
@include figure-16-9();
figure{
grid-row: 2;
grid-column: 2;
}
.rapport__dl{
grid-row: 2;
grid-column: 2;
align-self: start;
// align-self: start;
grid-column: 1;
align-self: end;
font-size: var(--fs-small);
border-bottom: var(--border-light);
// flex-grow: 2;
align-items: flex-start;
// margin-top: calc(var(--spacing)*1);
.dl__group{
@include grid-content();
border-top: var(--border-light);
@ -91,47 +83,17 @@
.btn--group{
position: relative;
grid-row: 3;
grid-column: 1/3;
display: flex;
flex-direction: column;
justify-content: start;
flex-wrap: wrap;
align-items: start;
gap: calc(var(--spacing)*0.25);
position: relative;
grid-row: 3;
grid-column: 2;
button, label{
min-width: 28ch;
justify-content: flex-start;
a{
justify-content: flex-start;
}
}
}
label{
// position: relative;
}
// .modal--share{
// max-width: 240px;
// position: absolute;
// height: 250px;
// top: calc(var(--h-block) * 1.5);
// left: 260px;
// &::before{
// content: "◀";
// transform: rotate(90deg);
// font-size: 10px;
// position: absolute;
// top: -10px;
// right: calc(var(--h-block) * 1.5);
// }
// }
}
}
@ -140,7 +102,6 @@
.rapport__content{
max-width: var(--max-w-content);
// margin-top: calc(var(--spacing)*0.5);
.section-content{

1
assets/icons/pin.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M160 96C160 78.3 174.3 64 192 64L448 64C465.7 64 480 78.3 480 96C480 113.7 465.7 128 448 128L418.5 128L428.8 262.1C465.9 283.3 494.6 318.5 507 361.8L510.8 375.2C513.6 384.9 511.6 395.2 505.6 403.3C499.6 411.4 490 416 480 416L160 416C150 416 140.5 411.3 134.5 403.3C128.5 395.3 126.5 384.9 129.3 375.2L133 361.8C145.4 318.5 174 283.3 211.2 262.1L221.5 128L192 128C174.3 128 160 113.7 160 96zM288 464L352 464L352 576C352 593.7 337.7 608 320 608C302.3 608 288 593.7 288 576L288 464z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 711 B

7
site/templates/investigations.php
View file

@ -32,6 +32,9 @@
<?php foreach ($page->children()->listed() as $investigation): ?>
<article class="card--article">
<?php if ($cover = $investigation->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
@ -99,6 +102,10 @@
</ul>
</div>
<?php if ($investigation->pinned()->toBool()): ?>
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<?php endif ?>
<a class="link-block" href="<?= $investigation->url() ?>"></a>
</article>
<?php endforeach ?>

2
site/templates/report.php
View file

@ -92,7 +92,7 @@
<div class="btn--group">
<button class="btn--bold-inline">
<button class="btn--bold">
<a href="#">
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
<span class="text">Télégarcher le&nbsp;PDF</span>