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

impacts with keywords
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-09 14:45:33 +01:00
parent 0727519a5e
commit 1cc63b0725
9 changed files with 131 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/css/base/_body.scss
View file

@ -104,6 +104,7 @@ body, #site-header, #site-footer{
@mixin pin(){
.pin{
z-index: 90;
width: 18px;
height: 18px;
transform: rotate(45deg);

2
assets/css/base/_var.scss
View file

@ -53,7 +53,7 @@
--border: 1px solid var(--color-txt);
--border-medium: 1px solid var(--grey-600);
--border-light: 1px solid var(--grey-800);
--border-light: 1px solid #414141;
--header-h: 80px;

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

@ -9,6 +9,14 @@
@include figure-16-9();
@include pin();
& > figure{
width: calc(100% + var(--padding-inner)*2);
position: relative;
left: calc(var(--padding-inner)*-1);
top: calc(var(--padding-inner)*-1);
}
.content{
// padding: var(--padding-inner);
@ -17,20 +25,8 @@
}
.pin{
position: absolute;
top: calc(var(--padding-inner)*1.5);
left: calc(var(--padding-inner)*1.5);
z-index: 10;
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);
}
top: var(--padding-inner);
right: var(--padding-inner);
}
.time-alone{

125
assets/css/components/_card-impact.scss
View file

@ -3,7 +3,7 @@
container-type: inline-size;
container-name: impact;
border: var(--border-light);
margin-bottom: calc(var(--spacing)*1);
margin-bottom: calc(var(--padding-body)*1);
padding: var(--padding-inner);
display: flex;
@ -13,7 +13,6 @@
gap: calc(var(--spacing)*0.25);
@include hover-card-line();
@include figure-3-1();
@include pin();
@ -56,129 +55,31 @@
position: absolute;
top: var(--padding-inner);
right: var(--padding-inner);
}
figure{
& > figure{
width: calc(100% + var(--padding-inner)*2);
position: relative;
left: calc(var(--padding-inner)*-1);
top: calc(var(--padding-inner)*-1);
}
.tag{
position: relative;
top: 3px;
}
}
@media #{$small-up}{
.card--impact,
.grid-sizer{
width: calc(50% - 13px);
}
// @container impact (width < 460px) {
// .card--impact__inner{
// display: block!important;
// padding-top: var(--padding-inner)!important;
// padding-bottom: calc(var(--padding-inner)*0.75)!important;
}
// .tag, .date{
// display: inline-flex;
// margin-right: 2ch;
// top: 0px!important;
// }
// .card--impact__inner > .content{
// margin-top: calc(var(--spacing)*0.75);
// margin-bottom: calc(var(--spacing)*0.25);
// padding-right: 0!important;
// }
// .card--open-graph{
// margin-top: calc(var(--spacing)*0.75);
// margin-bottom: calc(var(--spacing)*0.25);
// }
// .investigations{
// margin-top: calc(var(--spacing)*0.25);
// margin-bottom: calc(var(--spacing)*0.25);
// }
// .keywords-wrapper {
// margin-top: calc(var(--spacing)*1);
// }
// .content,
// details {
// font-size: var(--fs-small) !important;
// }
// .date{
// font-size: var(--fs-xsmall) !important;
// }
// .btn--go-to {
// top: calc(var(--padding-inner)*1.25)!important;
// bottom: auto;
// right: calc(var(--padding-inner)*1.25)!important;
// }
// }
// }
// @media #{$x-small}{
// .card--impact__inner{
// display: block!important;
// padding-top: var(--padding-inner)!important;
// padding-bottom: calc(var(--padding-inner)*0.75)!important;
// .tag, .date{
// display: inline-flex;
// margin-right: 2ch;
// top: 0px!important;
// }
// .content{
// margin-top: calc(var(--spacing)*0.75);
// margin-bottom: calc(var(--spacing)*0.25);
// padding-right: 0!important;
// }
// .card--open-graph{
// margin-top: calc(var(--spacing)*0.75);
// margin-bottom: calc(var(--spacing)*0.25);
// }
// .investigations{
// margin-top: calc(var(--spacing)*0.25);
// margin-bottom: calc(var(--spacing)*0.25);
// }
// .keywords-wrapper {
// margin-top: calc(var(--spacing)*1);
// }
// .date,
// .content,
// details {
// font-size: 14px !important;
// }
// .btn--go-to {
// top: calc(var(--padding-inner)*1.25)!important;
// bottom: auto;
// right: calc(var(--padding-inner)*1.25)!important;
// }
// }
// }
[data-template="impacts"] .page__content{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--padding-inner);
}

55
assets/css/style.css
View file

@ -35,7 +35,7 @@
--color-form: white;
--border: 1px solid var(--color-txt);
--border-medium: 1px solid var(--grey-600);
--border-light: 1px solid var(--grey-800);
--border-light: 1px solid #414141;
--header-h: 80px;
--header-h-shrinked: 50px;
--menu-w: 420px;
@ -1235,26 +1235,32 @@ button.sort[data-sort-type=up] .arrow {
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
.card--article .pin {
z-index: 90;
width: 18px;
height: 18px;
transform: rotate(45deg);
transform-origin: center;
}
.card--article .pin svg {
width: 100%;
height: 100%;
fill: var(--color-txt);
}
.card--article > figure {
width: calc(100% + var(--padding-inner) * 2);
position: relative;
left: calc(var(--padding-inner) * -1);
top: calc(var(--padding-inner) * -1);
}
.card--article .content {
display: flex;
flex-direction: column;
}
.card--article .pin {
position: absolute;
top: calc(var(--padding-inner) * 1.5);
left: calc(var(--padding-inner) * 1.5);
z-index: 10;
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);
top: var(--padding-inner);
right: var(--padding-inner);
}
.card--article .time-alone {
display: none;
@ -1478,7 +1484,7 @@ button.sort[data-sort-type=up] .arrow {
container-type: inline-size;
container-name: impact;
border: var(--border-light);
margin-bottom: calc(var(--spacing) * 1);
margin-bottom: calc(var(--padding-body) * 1);
padding: var(--padding-inner);
display: flex;
flex-direction: column;
@ -1517,6 +1523,7 @@ button.sort[data-sort-type=up] .arrow {
object-fit: cover;
}
.card--impact .pin {
z-index: 90;
width: 18px;
height: 18px;
transform: rotate(45deg);
@ -1562,19 +1569,23 @@ button.sort[data-sort-type=up] .arrow {
top: var(--padding-inner);
right: var(--padding-inner);
}
.card--impact figure {
.card--impact > figure {
width: calc(100% + var(--padding-inner) * 2);
position: relative;
left: calc(var(--padding-inner) * -1);
top: calc(var(--padding-inner) * -1);
}
[data-template=impacts] .page__content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--padding-inner);
.card--impact .tag {
position: relative;
top: 3px;
}
@media screen and (min-width: 768px) {
.card--impact,
.grid-sizer {
width: calc(50% - 13px);
}
}
.card--impact-small {
border-bottom: var(--border-light);
display: grid;

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

File diff suppressed because one or more lines are too long

29
assets/js/script.js
View file

@ -31,4 +31,33 @@ window.onload = async function () {
playVideo();
initDropdowns(responsiveSmall);
initSwipers();
var elem = document.querySelector('.grid-masonry');
var msnry = null;
function initMasonry() {
if (!elem) return;
if (window.innerWidth >= responsiveSmall) {
if (!msnry) {
msnry = new Masonry(elem, {
itemSelector: '.card--impact',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 26
});
}
} else {
if (msnry) {
msnry.destroy();
msnry = null;
}
}
}
initMasonry();
window.addEventListener('resize', initMasonry);
}

1
site/snippets/header.php
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?= url('assets/css/style.css') ?>?version-cache-prevent<?= rand(0, 1000) ?>">
<link rel="stylesheet" type="text/css" href="<?= url('assets/fonts/stylesheet.css') ?>">
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<meta name="robots" content="noindex,nofollow">
<title>
<?php if ($page->isHomePage() == false): ?>

58
site/templates/impacts.php
View file

@ -28,21 +28,20 @@
</div>
</div>
<div class="page__content">
<div class="page__content grid-masonry">
<div class="grid-sizer"></div>
<!-- Contenu statique temporaire -->
<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="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>
<p class="tag">Judiciaire</p>
<ul class="keywords">
<li class="tag">Judiciaire</li>
<li><a href="#keyword" target="_blank">Reportage</a></li>
<li><a href="#keyword" target="_blank">Monde</a></li>
</ul>
<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>
@ -52,8 +51,14 @@
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<h3 class="title">Ouverture d’une imformation judiciaire</h3>
<p class="tag">Judiciaire</p>
<h3 class="title">Ouverture d’une information judiciaire</h3>
<ul class="keywords">
<li class="tag">Judiciaire</li>
<li><a href="#keyword" target="_blank">Refus d’obtempérer</a></li>
<li><a href="#keyword" target="_blank">Homicide</a></li>
</ul>
<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>
@ -62,9 +67,13 @@
</div>
<div class="card--impact 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>
<p class="tag">Judiciaire</p>
<ul class="keywords">
<li class="tag">Judiciaire</li>
<li><a href="#keyword" target="_blank">restitution</a></li>
</ul>
<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>
@ -75,7 +84,11 @@
<div class="card--impact has-link" data-impact-type="judiciaire">
<h3 class="title">INDEX DANS L’ÉMISSION “LE DESSOUS DES IMAGES” (ARTE)</h3>
<p class="tag">Médiathique</p>
<ul class="keywords">
<li class="tag">Médiathique</li>
<li><a href="#keyword" target="_blank">Reportage</a></li>
<li><a href="#keyword" target="_blank">Arte</a></li>
</ul>
<p class="date">24 janvier 2026</p>
<ul class="investigations">
@ -86,16 +99,29 @@
<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">Public</p>
<ul class="keywords">
<li class="tag">Public</li>
</ul>
<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">
<figure><img src="/assets/images/eclairages.png"></figure>
<h3 class="title">“CONTRE-ENQUÊTES NUMÉRIQUES” : CONFÉRENCE À L’ENSAD (PARIS)</h3>
<p class="tag">Public</p>
<ul class="keywords">
<li class="tag">Public</li>
</ul>
<p class="date">24 janvier 2026</p>
<a class="link-block" href="#" target="_blank"></a>
</div>