studio-variable/index-main
4
0
Fork 0
Code Issues 15 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-name: impact;
@ -17,18 +17,49 @@
@include figure-16-9();
@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{
font-size: var(--fs-normal);
font-weight: 500;
text-transform: uppercase;
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;
}
.date{
font-size: var(--fs-small);
margin-top: calc(var(--spacing)*1.5);
// margin-top: calc(var(--spacing)*1.5);
}
.investigations{
@ -76,7 +107,7 @@
@media #{$small-up}{
.card--impact,
.card--block,
.grid-sizer{
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-name: impact;
border: var(--border-light);
@ -1692,13 +1692,13 @@ button.sort[data-sort-type=up] .arrow {
gap: calc(var(--spacing) * 0.25);
border-bottom: var(--border-light);
}
.card--impact:first-of-type {
.card--block:first-of-type {
border-top: var(--border-light);
}
.card--impact {
.card--block {
position: relative;
}
.card--impact::before {
.card--block::before {
content: "";
width: 100%;
border-top: 1px solid transparent;
@ -1706,85 +1706,105 @@ button.sort[data-sort-type=up] .arrow {
top: -1px;
left: 0;
}
.card--impact:hover {
.card--block:hover {
background-color: var(--grey-950);
border-color: var(--color-txt);
}
.card--impact:hover::before {
.card--block:hover::before {
border-color: var(--color-txt);
}
.card--impact > picture, .card--impact > figure {
.card--block > picture, .card--block > figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
}
.card--impact > picture img, .card--impact > figure img {
.card--block > picture img, .card--block > 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;
}
.card--impact .pin {
.card--block .pin {
z-index: 90;
width: 18px;
height: 18px;
transform: rotate(45deg);
transform-origin: center;
}
.card--impact .pin svg {
.card--block .pin svg {
width: 100%;
height: 100%;
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-weight: 500;
text-transform: uppercase;
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;
}
.card--impact .date {
.card--block .date {
font-size: var(--fs-small);
margin-top: calc(var(--spacing) * 1.5);
}
.card--impact .investigations {
.card--block .investigations {
text-decoration: none;
list-style: none;
}
.card--impact .investigations li {
.card--block .investigations li {
font-size: var(--fs-small);
color: var(--color-txt-light);
}
.card--impact .investigations li a {
.card--block .investigations li a {
text-decoration: none;
}
.card--impact .investigations li a::before {
.card--block .investigations li a::before {
content: "↪ ";
}
.card--impact .card--open-graph {
.card--block .card--open-graph {
width: 100%;
margin: calc(var(--spacing) * 0.5) 0;
}
.card--impact .pin {
.card--block .pin {
position: absolute;
top: var(--padding-inner);
right: var(--padding-inner);
}
.card--impact > figure {
.card--block > figure {
width: calc(100% + var(--padding-inner) * 2);
position: relative;
left: calc(var(--padding-inner) * -1);
top: calc(var(--padding-inner) * -1);
}
.card--impact .tag {
.card--block .tag {
position: relative;
top: 3px;
}
@media screen and (min-width: 768px) {
.card--impact,
.card--block,
.grid-sizer {
width: calc(50% - 13px);
}
@ -2823,7 +2843,7 @@ main .page__header .description {
}
@media screen and (max-width: 768px) {
.section--home .card--article,
.section--home .card--impact {
.section--home .card--block {
margin-bottom: calc(var(--spacing) * 1);
}
.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/btn--default';
@import "components/buttons";
@import "components/tags";
@import "components/category";
@import "components/keywords";
@import "components/sort";
@import "components/btn-group-mobile";
@ -23,7 +23,7 @@
@import "components/text";
@import "components/card-article";
@import "components/card-article-small";
@import "components/card-impact";
@import "components/card-block";
@import "components/card-impact-small";
// @import "components/card-package";
@import "components/card-open-graph";

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

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

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

@ -2,8 +2,6 @@
position: relative;
.page__header {
margin-inline: auto;
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 (!msnry) {
msnry = new Masonry(elem, {
itemSelector: '.card--impact',
itemSelector: '.card--block',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 26

14
site/templates/home.php
View file

@ -165,7 +165,7 @@
<!-- 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>
<h3 class="title">L’analyse d’INdex fait l’objet d’un reportage par CNN</h3>
<ul class="keywords">
@ -180,7 +180,7 @@
<a class="link-block" href="#" target="_blank"></a>
</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>
<h3 class="title">Ouverture d’une information judiciaire</h3>
@ -197,7 +197,7 @@
<a class="link-block" href="#" target="_blank"></a>
</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>
<h3 class="title">LA RECONSTITUTION D’INDEX PROJETÉE EN AUDIENCE AU TRIBUNAL DE BOBIGNY</h3>
@ -213,7 +213,7 @@
</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>
<ul class="keywords">
<li class="tag">Médiathique</li>
@ -228,7 +228,7 @@
<a class="link-block" href="#" target="_blank"></a>
</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>
<ul class="keywords">
<li class="tag">Public</li>
@ -237,7 +237,7 @@
<a class="link-block" href="#" target="_blank"></a>
</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>
<p class="tag">Médiatique</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>
<h3 class="title">“CONTRE-ENQUÊTES NUMÉRIQUES” : CONFÉRENCE À L’ENSAD (PARIS)</h3>
<ul class="keywords">

59
site/templates/impacts.php
View file

@ -34,22 +34,30 @@
<!-- 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="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>
<p class="tag">Judiciaire</p>
<p class="date">24 janvier 2026</p>
<ul class="investigations">
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">L'homicide de Renée Goof</a></li>
</ul>
<a class="link-block" href="#" target="_blank"></a>
</div>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<div class="card--block has-link" data-impact-type="judiciaire">
<div class="group-top">
<p class="type">Impact</p>
<p class="category">Judiciaire</p>
</div>
<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>
</div>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<div class="card--block has-link" data-impact-type="judiciaire">
<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>
<p class="tag">Judiciaire</p>
<p class="date">24 janvier 2026</p>
<ul class="investigations">
<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 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>
<p class="tag">Mediathique</p>
<p class="date">24 janvier 2026</p>
@ -86,28 +102,19 @@
<a class="link-block" href="#" target="_blank"></a>
</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>
<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>
<p class="tag">Judiciaire</p>
<p class="date">24 janvier 2026</p>
<a class="link-block" href="#" target="_blank"></a>