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

generic card-block
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-24 15:23:52 +01:00
parent c59f4d93dd
commit fab10a38d8
10 changed files with 125 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

39
assets/css/components/_card-impact.scss → assets/css/components/_card-block.scss
View file

@ -1,4 +1,4 @@
.card--impact { .card--block {
container-type: inline-size; container-type: inline-size;
container-name: impact; container-name: impact;
@ -17,18 +17,49 @@
@include figure-16-9(); @include figure-16-9();
@include pin(); @include pin();
.group-top{
display: flex;
gap: calc(var(--padding-inner)*0.5);
}
.type{
height: calc(var(--h-block)*0.75);
border-radius: var(--radius-small);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1ch;
padding-top: 3px;
font-size: var(--fs-xsmall);
line-height: 1;
font-weight: 500;
color: var(--color-txt-light);
border: 1px solid var(--color-txt-light);
overflow: hidden;
white-space: nowrap;
}
.title{ .title{
font-size: var(--fs-normal); font-size: var(--fs-normal);
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
line-height: var(--leading-title); line-height: var(--leading-title);
padding-top: calc(var(--spacing)*0.5); padding-top: calc(var(--spacing)*0.75);
padding-bottom: calc(var(--spacing)*1);
margin-right: 2ch; margin-right: 2ch;
} }
.date{ .date{
font-size: var(--fs-small); font-size: var(--fs-small);
margin-top: calc(var(--spacing)*1.5); // margin-top: calc(var(--spacing)*1.5);
} }
.investigations{ .investigations{
@ -76,7 +107,7 @@
@media #{$small-up}{ @media #{$small-up}{
.card--impact, .card--block,
.grid-sizer{ .grid-sizer{
width: calc(50% - 13px); width: calc(50% - 13px);
} }

0
assets/css/components/_tags.scss → assets/css/components/_category.scss
View file

68
assets/css/style.css
View file

@ -1679,7 +1679,7 @@ button.sort[data-sort-type=up] .arrow {
} }
} }
.card--impact { .card--block {
container-type: inline-size; container-type: inline-size;
container-name: impact; container-name: impact;
border: var(--border-light); border: var(--border-light);
@ -1692,13 +1692,13 @@ button.sort[data-sort-type=up] .arrow {
gap: calc(var(--spacing) * 0.25); gap: calc(var(--spacing) * 0.25);
border-bottom: var(--border-light); border-bottom: var(--border-light);
} }
.card--impact:first-of-type { .card--block:first-of-type {
border-top: var(--border-light); border-top: var(--border-light);
} }
.card--impact { .card--block {
position: relative; position: relative;
} }
.card--impact::before { .card--block::before {
content: ""; content: "";
width: 100%; width: 100%;
border-top: 1px solid transparent; border-top: 1px solid transparent;
@ -1706,85 +1706,105 @@ button.sort[data-sort-type=up] .arrow {
top: -1px; top: -1px;
left: 0; left: 0;
} }
.card--impact:hover { .card--block:hover {
background-color: var(--grey-950); background-color: var(--grey-950);
border-color: var(--color-txt); border-color: var(--color-txt);
} }
.card--impact:hover::before { .card--block:hover::before {
border-color: var(--color-txt); border-color: var(--color-txt);
} }
.card--impact > picture, .card--impact > figure { .card--block > picture, .card--block > figure {
aspect-ratio: 16/9; aspect-ratio: 16/9;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
} }
.card--impact > picture img, .card--impact > figure img { .card--block > picture img, .card--block > figure img {
width: 100%; width: 100%;
height: 100%; height: 100%;
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
} }
.card--impact .pin { .card--block .pin {
z-index: 90; z-index: 90;
width: 18px; width: 18px;
height: 18px; height: 18px;
transform: rotate(45deg); transform: rotate(45deg);
transform-origin: center; transform-origin: center;
} }
.card--impact .pin svg { .card--block .pin svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
fill: var(--color-txt); fill: var(--color-txt);
} }
.card--impact .title { .card--block .group-top {
display: flex;
gap: calc(var(--padding-inner) * 0.5);
}
.card--block .type {
height: calc(var(--h-block) * 0.75);
border-radius: var(--radius-small);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1ch;
padding-top: 3px;
font-size: var(--fs-xsmall);
line-height: 1;
font-weight: 500;
color: var(--color-txt-light);
border: 1px solid var(--color-txt-light);
overflow: hidden;
white-space: nowrap;
}
.card--block .title {
font-size: var(--fs-normal); font-size: var(--fs-normal);
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
line-height: var(--leading-title); line-height: var(--leading-title);
padding-top: calc(var(--spacing) * 0.5); padding-top: calc(var(--spacing) * 0.75);
padding-bottom: calc(var(--spacing) * 1);
margin-right: 2ch; margin-right: 2ch;
} }
.card--impact .date { .card--block .date {
font-size: var(--fs-small); font-size: var(--fs-small);
margin-top: calc(var(--spacing) * 1.5);
} }
.card--impact .investigations { .card--block .investigations {
text-decoration: none; text-decoration: none;
list-style: none; list-style: none;
} }
.card--impact .investigations li { .card--block .investigations li {
font-size: var(--fs-small); font-size: var(--fs-small);
color: var(--color-txt-light); color: var(--color-txt-light);
} }
.card--impact .investigations li a { .card--block .investigations li a {
text-decoration: none; text-decoration: none;
} }
.card--impact .investigations li a::before { .card--block .investigations li a::before {
content: "↪ "; content: "↪ ";
} }
.card--impact .card--open-graph { .card--block .card--open-graph {
width: 100%; width: 100%;
margin: calc(var(--spacing) * 0.5) 0; margin: calc(var(--spacing) * 0.5) 0;
} }
.card--impact .pin { .card--block .pin {
position: absolute; position: absolute;
top: var(--padding-inner); top: var(--padding-inner);
right: var(--padding-inner); right: var(--padding-inner);
} }
.card--impact > figure { .card--block > figure {
width: calc(100% + var(--padding-inner) * 2); width: calc(100% + var(--padding-inner) * 2);
position: relative; position: relative;
left: calc(var(--padding-inner) * -1); left: calc(var(--padding-inner) * -1);
top: calc(var(--padding-inner) * -1); top: calc(var(--padding-inner) * -1);
} }
.card--impact .tag { .card--block .tag {
position: relative; position: relative;
top: 3px; top: 3px;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.card--impact, .card--block,
.grid-sizer { .grid-sizer {
width: calc(50% - 13px); width: calc(50% - 13px);
} }
@ -2823,7 +2843,7 @@ main .page__header .description {
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.section--home .card--article, .section--home .card--article,
.section--home .card--impact { .section--home .card--block {
margin-bottom: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1);
} }
.section--home .baseline-section { .section--home .baseline-section {

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

File diff suppressed because one or more lines are too long

4
assets/css/style.scss
View file

@ -8,7 +8,7 @@
// @import 'components/nav-tabs'; // @import 'components/nav-tabs';
// @import 'components/btn--default'; // @import 'components/btn--default';
@import "components/buttons"; @import "components/buttons";
@import "components/tags"; @import "components/category";
@import "components/keywords"; @import "components/keywords";
@import "components/sort"; @import "components/sort";
@import "components/btn-group-mobile"; @import "components/btn-group-mobile";
@ -23,7 +23,7 @@
@import "components/text"; @import "components/text";
@import "components/card-article"; @import "components/card-article";
@import "components/card-article-small"; @import "components/card-article-small";
@import "components/card-impact"; @import "components/card-block";
@import "components/card-impact-small"; @import "components/card-impact-small";
// @import "components/card-package"; // @import "components/card-package";
@import "components/card-open-graph"; @import "components/card-open-graph";

2
assets/css/template/_home.scss
View file

@ -79,7 +79,7 @@
@media #{$small} { @media #{$small} {
.card--article, .card--article,
.card--impact{ .card--block{
margin-bottom: calc(var(--spacing)*1); margin-bottom: calc(var(--spacing)*1);
} }

2
assets/css/template/_investigation.scss
View file

@ -2,8 +2,6 @@
position: relative; position: relative;
.page__header { .page__header {
margin-inline: auto; margin-inline: auto;
max-width: var(--max-w-content); max-width: var(--max-w-content);

2
assets/js/script.js
View file

@ -36,7 +36,7 @@ window.onload = async function () {
if (window.innerWidth >= responsiveSmall) { if (window.innerWidth >= responsiveSmall) {
if (!msnry) { if (!msnry) {
msnry = new Masonry(elem, { msnry = new Masonry(elem, {
itemSelector: '.card--impact', itemSelector: '.card--block',
columnWidth: '.grid-sizer', columnWidth: '.grid-sizer',
percentPosition: true, percentPosition: true,
gutter: 26 gutter: 26

14
site/templates/home.php
View file

@ -165,7 +165,7 @@
<!-- Contenu statique temporaire --> <!-- Contenu statique temporaire -->
<div class="card--impact has-link" data-impact-type="judiciaire"> <div class="card--block has-link" data-impact-type="judiciaire">
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div> <div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<h3 class="title">L’analyse d’INdex fait l’objet d’un reportage par CNN</h3> <h3 class="title">L’analyse d’INdex fait l’objet d’un reportage par CNN</h3>
<ul class="keywords"> <ul class="keywords">
@ -180,7 +180,7 @@
<a class="link-block" href="#" target="_blank"></a> <a class="link-block" href="#" target="_blank"></a>
</div> </div>
<div class="card--impact has-link" data-impact-type="judiciaire"> <div class="card--block has-link" data-impact-type="judiciaire">
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div> <div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<h3 class="title">Ouverture d’une information judiciaire</h3> <h3 class="title">Ouverture d’une information judiciaire</h3>
@ -197,7 +197,7 @@
<a class="link-block" href="#" target="_blank"></a> <a class="link-block" href="#" target="_blank"></a>
</div> </div>
<div class="card--impact has-link" data-impact-type="judiciaire"> <div class="card--block has-link" data-impact-type="judiciaire">
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div> <div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<figure><img src="/assets/images/SequenceOrbit_Finale_1245.png"></figure> <figure><img src="/assets/images/SequenceOrbit_Finale_1245.png"></figure>
<h3 class="title">LA RECONSTITUTION D’INDEX PROJETÉE EN AUDIENCE AU TRIBUNAL DE BOBIGNY</h3> <h3 class="title">LA RECONSTITUTION D’INDEX PROJETÉE EN AUDIENCE AU TRIBUNAL DE BOBIGNY</h3>
@ -213,7 +213,7 @@
</div> </div>
<div class="card--impact has-link" data-impact-type="judiciaire"> <div class="card--block has-link" data-impact-type="judiciaire">
<h3 class="title">INDEX DANS L’ÉMISSION “LE DESSOUS DES IMAGES” (ARTE)</h3> <h3 class="title">INDEX DANS L’ÉMISSION “LE DESSOUS DES IMAGES” (ARTE)</h3>
<ul class="keywords"> <ul class="keywords">
<li class="tag">Médiathique</li> <li class="tag">Médiathique</li>
@ -228,7 +228,7 @@
<a class="link-block" href="#" target="_blank"></a> <a class="link-block" href="#" target="_blank"></a>
</div> </div>
<div class="card--impact has-link" data-impact-type="judiciaire"> <div class="card--block has-link" data-impact-type="judiciaire">
<h3 class="title">“CONTRE-ENQUÊTES NUMÉRIQUES” : CONFÉRENCE À L’ENSAD (PARIS)</h3> <h3 class="title">“CONTRE-ENQUÊTES NUMÉRIQUES” : CONFÉRENCE À L’ENSAD (PARIS)</h3>
<ul class="keywords"> <ul class="keywords">
<li class="tag">Public</li> <li class="tag">Public</li>
@ -237,7 +237,7 @@
<a class="link-block" href="#" target="_blank"></a> <a class="link-block" href="#" target="_blank"></a>
</div> </div>
<div class="card--impact" data-impact-type="media"> <div class="card--block" data-impact-type="media">
<h3 class="title">Index dans le Monde</h3> <h3 class="title">Index dans le Monde</h3>
<p class="tag">Médiatique</p> <p class="tag">Médiatique</p>
<p class="date">24 janvier 2026</p> <p class="date">24 janvier 2026</p>
@ -247,7 +247,7 @@
<div class="card--impact has-link" data-impact-type="judiciaire"> <div class="card--block has-link" data-impact-type="judiciaire">
<figure><img src="/assets/images/eclairages.png"></figure> <figure><img src="/assets/images/eclairages.png"></figure>
<h3 class="title">“CONTRE-ENQUÊTES NUMÉRIQUES” : CONFÉRENCE À L’ENSAD (PARIS)</h3> <h3 class="title">“CONTRE-ENQUÊTES NUMÉRIQUES” : CONFÉRENCE À L’ENSAD (PARIS)</h3>
<ul class="keywords"> <ul class="keywords">

59
site/templates/impacts.php
View file

@ -34,22 +34,30 @@
<!-- Contenu statique temporaire --> <!-- Contenu statique temporaire -->
<div class="card--impact has-link" data-impact-type="judiciaire"> <div class="card--block has-link" data-impact-type="judiciaire">
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div> <div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<div class="group-top">
<p class="type">Impact</p>
<p class="category">Judiciaire</p>
</div>
<h3 class="title">L’analyse d’INdex fait l’objet d’un reportage par CNN</h3> <h3 class="title">L’analyse d’INdex fait l’objet d’un reportage par CNN</h3>
<p class="tag">Judiciaire</p>
<p class="date">24 janvier 2026</p> <p class="date">24 janvier 2026</p>
<ul class="investigations"> <ul class="investigations">
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">L'homicide de Renée Goof</a></li> <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">L'homicide de Renée Goof</a></li>
</ul> </ul>
<a class="link-block" href="#" target="_blank"></a> <a class="link-block" href="#" target="_blank"></a>
</div> </div>
<div class="card--impact has-link" data-impact-type="judiciaire"> <div class="card--block has-link" data-impact-type="judiciaire">
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div> <div class="group-top">
<p class="type">Impact</p>
<p class="category">Judiciaire</p>
</div>
<h3 class="title">Ouverture d’une information judiciaire</h3> <h3 class="title">Ouverture d’une information judiciaire</h3>
<p class="tag">Judiciaire</p>
@ -61,11 +69,15 @@
<a class="link-block" href="#" target="_blank"></a> <a class="link-block" href="#" target="_blank"></a>
</div> </div>
<div class="card--impact has-link" data-impact-type="judiciaire"> <div class="card--block has-link" data-impact-type="judiciaire">
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<figure><img src="/assets/images/SequenceOrbit_Finale_1245.png"></figure> <figure><img src="/assets/images/SequenceOrbit_Finale_1245.png"></figure>
<div class="group-top">
<p class="type">Impact</p>
<p class="category">Judiciaire</p>
</div>
<h3 class="title">LA RECONSTITUTION D’INDEX PROJETÉE EN AUDIENCE AU TRIBUNAL DE BOBIGNY</h3> <h3 class="title">LA RECONSTITUTION D’INDEX PROJETÉE EN AUDIENCE AU TRIBUNAL DE BOBIGNY</h3>
<p class="tag">Judiciaire</p>
<p class="date">24 janvier 2026</p> <p class="date">24 janvier 2026</p>
<ul class="investigations"> <ul class="investigations">
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">L'homicide de Renée Goof</a></li> <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">L'homicide de Renée Goof</a></li>
@ -74,9 +86,13 @@
</div> </div>
<div class="card--impact has-link" data-impact-type="judiciaire"> <div class="card--block has-link" data-impact-type="judiciaire">
<div class="group-top">
<p class="type">Impact</p>
<p class="category">Médiathique</p>
</div>
<h3 class="title">INDEX DANS L’ÉMISSION “LE DESSOUS DES IMAGES” (ARTE)</h3> <h3 class="title">INDEX DANS L’ÉMISSION “LE DESSOUS DES IMAGES” (ARTE)</h3>
<p class="tag">Mediathique</p>
<p class="date">24 janvier 2026</p> <p class="date">24 janvier 2026</p>
@ -86,28 +102,19 @@
<a class="link-block" href="#" target="_blank"></a> <a class="link-block" href="#" target="_blank"></a>
</div> </div>
<div class="card--impact has-link" data-impact-type="judiciaire">
<h3 class="title">“CONTRE-ENQUÊTES NUMÉRIQUES” : CONFÉRENCE À L’ENSAD (PARIS)</h3>
<p class="tag">Judiciaire</p>
<p class="date">24 janvier 2026</p>
<a class="link-block" href="#" target="_blank"></a>
</div>
<div class="card--impact" data-impact-type="media">
<h3 class="title">Index dans le Monde</h3>
<p class="tag">Médiatique</p>
<p class="date">24 janvier 2026</p>
<?php snippet('card-open-graph') ?>
</div>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--block has-link" data-impact-type="judiciaire">
<figure><img src="/assets/images/eclairages.png"></figure> <figure><img src="/assets/images/eclairages.png"></figure>
<div class="group-top">
<p class="type">Impact</p>
<p class="category">Public</p>
</div>
<h3 class="title">“CONTRE-ENQUÊTES NUMÉRIQUES” : CONFÉRENCE À L’ENSAD (PARIS)</h3> <h3 class="title">“CONTRE-ENQUÊTES NUMÉRIQUES” : CONFÉRENCE À L’ENSAD (PARIS)</h3>
<p class="tag">Judiciaire</p>
<p class="date">24 janvier 2026</p> <p class="date">24 janvier 2026</p>
<a class="link-block" href="#" target="_blank"></a> <a class="link-block" href="#" target="_blank"></a>