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

ajustements style
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-06 15:10:27 +01:00
parent 193577b145
commit b9cefffdfa
17 changed files with 174 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,7 @@
// --fs-medium: 22px;
// --fs-big: 38px;
--fs-xsmall: 10px;
--fs-xsmall: 12px;
--fs-small: 16px;
--fs-normal: 20px;
--fs-medium: 24px;

2
assets/css/components/_buttons.scss
View file

@ -99,7 +99,7 @@ button:disabled{
height: calc(var(--h-block)*1);
border: var(--border);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
font-weight: 500;
text-transform: uppercase;
line-height: 1;

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

@ -36,7 +36,7 @@
}
.title{
font-weight: 400;
font-weight: 500;
font-size: var(--fs-small);
margin-bottom: 0.25em;
text-wrap: balance;

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

@ -6,6 +6,8 @@
padding: var(--padding-inner);
@include figure-16-9();
.content{
@ -38,9 +40,10 @@
}
.title{
margin-top: calc(var(--spacing)*0.5);
font-size: var(--fs-medium);
font-weight: normal;
margin-top: calc(var(--spacing)*0.75);
font-size: var(--fs-normal);
line-height: 1.1;
font-weight: 500;
text-transform: uppercase;
text-wrap: balance;
// flex-grow: 2;
@ -55,12 +58,15 @@
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--fs-small);
}
.dl{
margin-top: calc(var(--spacing)*0.5);
// font-size: var(--fs-small);
border-bottom: var(--border-light);
font-size: var(--fs-small);
.dl__group{
@include grid-content();
border-top: var(--border-light);

25
assets/css/components/_card-folder.scss
View file

@ -10,18 +10,31 @@
container-type: inline-size;
container-name: cardfolder;
figure{
background-color: var(--color-accent);
// border: 1px solid var(--color-accent);
// opacity: 0.9;
img{
mix-blend-mode: multiply;
filter: grayscale(1) brightness(1.2);
}
}
.content{
display: flex;
flex-direction: column;
font-size: var(--fs-small);
}
.title{
flex-grow: 1;
font-weight: 500;
font-size: var(--fs-small);
font-size: var(--fs-normal);
margin-bottom: 0.25em;
margin-bottom: 0.75em;
text-wrap: balance;
max-width: 42ch;
text-transform: uppercase;
@ -47,6 +60,8 @@
.short{
@include clamp(3);
flex-grow: 1;
padding-right: calc(var(--padding-inner)*2);
}
ul{
@ -104,7 +119,9 @@
}
.title{
font-size: var(--fs-small);
}
}

12
assets/css/components/_card-impact-small.scss
View file

@ -98,13 +98,13 @@
}
.open-graph__inner {
margin-top: calc(var(--spacing)*0.5);
.card--open-graph {
margin-bottom: calc(var(--spacing)*0.5);
}
// .open-graph__inner {
// margin-top: calc(var(--spacing)*0.5);
// .card--open-graph {
// margin-bottom: calc(var(--spacing)*0.5);
// }
}
// }
}

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

@ -15,6 +15,7 @@
padding: calc(var(--padding-inner)*1.5) var(--padding-inner);
font-size: var(--fs-small);
// border-bottom: var(--border-light);
// padding: calc(var(--spacing)*0.5) 0;
@ -23,11 +24,6 @@
// }
@include btn--go-to();
.btn--go-to {
@ -83,7 +79,7 @@
z-index: 10;
grid-column: 2;
list-style: none;
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
a {
@ -151,15 +147,15 @@
.open-graph__inner {
margin-top: calc(var(--spacing)*0.5);
// margin-bottom: calc(var(--spacing)*1);
// .open-graph__inner {
// margin-top: calc(var(--spacing)*0.5);
// // margin-bottom: calc(var(--spacing)*1);
.card--open-graph {
margin-bottom: calc(var(--spacing)*0.5);
}
// .card--open-graph {
// margin-bottom: calc(var(--spacing)*0.5);
// }
}
// }
}
}
@ -178,7 +174,7 @@
top: 0px!important;
}
.content{
.card--impact__inner > .content{
margin-top: calc(var(--spacing)*0.75);
margin-bottom: calc(var(--spacing)*0.25);
padding-right: 0!important;
@ -198,12 +194,15 @@
margin-top: calc(var(--spacing)*1);
}
.date,
.content,
details {
font-size: 14px !important;
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;

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

@ -1,6 +1,16 @@
.card--open-graph{
@include grid-content();
container-type: inline-size;
container-name: opengraph;
.open-graph__inner{
@include grid-content();
}
// border: var(--border-light);
border: 1px solid var(--grey-600);
@ -31,21 +41,23 @@
}
.content{
padding: var(--padding-inner);
padding-left: 0;
padding-top: calc(var(--padding-inner)*0.75);
padding-bottom: calc(var(--padding-inner)*0.75);
padding-right: var(--padding-inner);
grid-column: 2;
grid-row: 1;
}
.site-name{
color: var(--color-txt-light);
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
margin-bottom: 3px;
}
.title{
font-size: var(--fs-normal);
font-weight: normal;
font-size: var(--fs-small);
font-weight: 500;
line-height: 1.1;
padding-top: 2px;
display: -webkit-box;
@ -59,7 +71,7 @@
}
.description{
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
@ -73,20 +85,17 @@
}
.open-graph__inner{
container-type: inline-size;
container-name: opengraph;
}
@container opengraph (width < 500px) {
.card--open-graph{
// .card--open-graph{
// background-color: red!important;
.content{
padding: calc(var(--padding-inner)*0.5);
}
// .content{
// padding: calc(var(--padding-inner)*0.5);
// }
figure{
aspect-ratio: inherit;
}
}
// figure{
// aspect-ratio: inherit;
// }
// }
}

2
assets/css/components/_keywords.scss
View file

@ -13,7 +13,7 @@
padding-top: 2px;
border: var(--border-light);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
line-height: 1;
white-space: nowrap;
text-decoration: none;

5
assets/css/components/_tags.scss
View file

@ -6,11 +6,12 @@
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding: 0 1ch;
padding-top: 3px;
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
line-height: 1;
font-weight: 500;
background-color: var(--color-txt);
color: var(--color-bg);

7
assets/css/partials/_page-header.scss
View file

@ -10,11 +10,12 @@
padding: 0 1.5ch;
padding-top: 3px;
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
line-height: 1;
background-color: var(--color-bg);
color: var(--color-txt-light);
font-weight: 500;
overflow: hidden;
white-space: nowrap;
@ -37,11 +38,13 @@ main .page__header {
max-width: var(--max-w-content);
text-transform: uppercase;
font-weight: normal;
font-size: var(--fs-big);
font-size: var(--fs-medium);
font-weight: 500;
line-height: var(--leading-tight);
margin-top: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 0.5);
text-wrap: balance;
}
.description {

109
assets/css/style.css
View file

@ -2,7 +2,7 @@
:root {
--font: "Executive", Arial, sans-serif;
--title: "System", Arial, sans-serif;
--fs-xsmall: 10px;
--fs-xsmall: 12px;
--fs-small: 16px;
--fs-normal: 20px;
--fs-medium: 24px;
@ -343,7 +343,7 @@ button:disabled {
height: calc(var(--h-block) * 1);
border: var(--border);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
font-weight: 500;
text-transform: uppercase;
line-height: 1;
@ -478,10 +478,11 @@ button:disabled {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding: 0 1ch;
padding-top: 3px;
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
line-height: 1;
font-weight: 500;
background-color: var(--color-txt);
color: var(--color-bg);
overflow: hidden;
@ -503,7 +504,7 @@ button:disabled {
padding-top: 2px;
border: var(--border-light);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
line-height: 1;
white-space: nowrap;
text-decoration: none;
@ -1193,9 +1194,10 @@ button.sort[data-sort-type=up] .arrow {
margin-bottom: calc(var(--spacing) * 0.75);
}
.card--article .title {
margin-top: calc(var(--spacing) * 0.5);
font-size: var(--fs-medium);
font-weight: normal;
margin-top: calc(var(--spacing) * 0.75);
font-size: var(--fs-normal);
line-height: 1.1;
font-weight: 500;
text-transform: uppercase;
text-wrap: balance;
}
@ -1208,10 +1210,12 @@ button.sort[data-sort-type=up] .arrow {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--fs-small);
}
.card--article .dl {
margin-top: calc(var(--spacing) * 0.5);
border-bottom: var(--border-light);
font-size: var(--fs-small);
}
.card--article .dl .dl__group {
display: grid;
@ -1307,7 +1311,7 @@ button.sort[data-sort-type=up] .arrow {
padding-right: calc(var(--padding-inner) * 3);
}
.card--article-small .title {
font-weight: 400;
font-weight: 500;
font-size: var(--fs-small);
margin-bottom: 0.25em;
text-wrap: balance;
@ -1451,6 +1455,7 @@ button.sort[data-sort-type=up] .arrow {
grid-template-columns: 2fr 3fr;
position: relative;
padding: calc(var(--padding-inner) * 1.5) var(--padding-inner);
font-size: var(--fs-small);
position: relative;
}
.card--impact .card--impact__inner .btn--go-to {
@ -1518,7 +1523,7 @@ button.sort[data-sort-type=up] .arrow {
z-index: 10;
grid-column: 2;
list-style: none;
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
}
.card--impact .card--impact__inner .investigations a {
text-decoration: none;
@ -1595,12 +1600,6 @@ button.sort[data-sort-type=up] .arrow {
grid-column: 2;
}
}
.card--impact .card--impact__inner .open-graph__inner {
margin-top: calc(var(--spacing) * 0.5);
}
.card--impact .card--impact__inner .open-graph__inner .card--open-graph {
margin-bottom: calc(var(--spacing) * 0.5);
}
@container impact (width < 460px) {
.card--impact__inner {
@ -1613,7 +1612,7 @@ button.sort[data-sort-type=up] .arrow {
margin-right: 2ch;
top: 0px !important;
}
.card--impact__inner .content {
.card--impact__inner .card--impact__inner > .content {
margin-top: calc(var(--spacing) * 0.75);
margin-bottom: calc(var(--spacing) * 0.25);
padding-right: 0 !important;
@ -1629,10 +1628,12 @@ button.sort[data-sort-type=up] .arrow {
.card--impact__inner .keywords-wrapper {
margin-top: calc(var(--spacing) * 1);
}
.card--impact__inner .date,
.card--impact__inner .content,
.card--impact__inner details {
font-size: 14px !important;
font-size: var(--fs-small) !important;
}
.card--impact__inner .date {
font-size: var(--fs-xsmall) !important;
}
.card--impact__inner .btn--go-to {
top: calc(var(--padding-inner) * 1.25) !important;
@ -1844,12 +1845,6 @@ button.sort[data-sort-type=up] .arrow {
grid-column: 2;
}
}
.card--impact-small .open-graph__inner {
margin-top: calc(var(--spacing) * 0.5);
}
.card--impact-small .open-graph__inner .card--open-graph {
margin-bottom: calc(var(--spacing) * 0.5);
}
.card--folder {
position: relative;
@ -1876,15 +1871,22 @@ button.sort[data-sort-type=up] .arrow {
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
.card--folder figure {
background-color: var(--color-accent);
}
.card--folder figure img {
mix-blend-mode: multiply;
filter: grayscale(1) brightness(1.2);
}
.card--folder .content {
display: flex;
flex-direction: column;
font-size: var(--fs-small);
}
.card--folder .title {
flex-grow: 1;
font-weight: 500;
font-size: var(--fs-small);
margin-bottom: 0.25em;
font-size: var(--fs-normal);
margin-bottom: 0.75em;
text-wrap: balance;
max-width: 42ch;
text-transform: uppercase;
@ -1913,6 +1915,8 @@ button.sort[data-sort-type=up] .arrow {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex-grow: 1;
padding-right: calc(var(--padding-inner) * 2);
}
.card--folder ul {
display: flex;
@ -2005,6 +2009,9 @@ button.sort[data-sort-type=up] .arrow {
margin-left: 0px;
}
}
[data-template=investigation-summary] .card--folder .title {
font-size: var(--fs-small);
}
@container cardfolder (width < 680px) {
figure {
@ -2027,13 +2034,17 @@ button.sort[data-sort-type=up] .arrow {
}
}
.card--open-graph {
container-type: inline-size;
container-name: opengraph;
border: 1px solid var(--grey-600);
border-radius: var(--radius-small);
position: relative;
}
.card--open-graph .open-graph__inner {
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
border: 1px solid var(--grey-600);
border-radius: var(--radius-small);
position: relative;
}
.card--open-graph figure {
grid-column: 1;
@ -2054,19 +2065,20 @@ button.sort[data-sort-type=up] .arrow {
}
}
.card--open-graph .content {
padding: var(--padding-inner);
padding-left: 0;
padding-top: calc(var(--padding-inner) * 0.75);
padding-bottom: calc(var(--padding-inner) * 0.75);
padding-right: var(--padding-inner);
grid-column: 2;
grid-row: 1;
}
.card--open-graph .site-name {
color: var(--color-txt-light);
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
margin-bottom: 3px;
}
.card--open-graph .title {
font-size: var(--fs-normal);
font-weight: normal;
font-size: var(--fs-small);
font-weight: 500;
line-height: 1.1;
padding-top: 2px;
display: -webkit-box;
@ -2079,7 +2091,7 @@ button.sort[data-sort-type=up] .arrow {
text-decoration: none;
}
.card--open-graph .description {
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
@ -2090,19 +2102,7 @@ button.sort[data-sort-type=up] .arrow {
background-color: var(--grey-950);
}
.open-graph__inner {
container-type: inline-size;
container-name: opengraph;
}
@container opengraph (width < 500px) {
.card--open-graph .content {
padding: calc(var(--padding-inner) * 0.5);
}
.card--open-graph figure {
aspect-ratio: inherit;
}
}
@container opengraph (width < 500px) {}
.swiper {
--slide-padding: 30px;
}
@ -2501,10 +2501,11 @@ body main .page__content {
justify-content: center;
padding: 0 1.5ch;
padding-top: 3px;
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
line-height: 1;
background-color: var(--color-bg);
color: var(--color-txt-light);
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
@ -2523,7 +2524,8 @@ main .page__header .page__title {
max-width: var(--max-w-content);
text-transform: uppercase;
font-weight: normal;
font-size: var(--fs-big);
font-size: var(--fs-medium);
font-weight: 500;
line-height: var(--leading-tight);
margin-top: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 0.5);
@ -3215,7 +3217,8 @@ main .page__header .description-medium {
}
.content-folder .container__title {
font-weight: normal;
font-size: var(--fs-normal);
font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 0.75);
}

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

File diff suppressed because one or more lines are too long

4
assets/css/template/_folder.scss
View file

@ -20,7 +20,9 @@
.container__title{
font-weight: normal;
font-size: var(--fs-normal);
font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase;
margin-bottom: calc(var(--spacing)*0.75);

3
site/snippets/card-open-graph.php
View file

@ -80,6 +80,8 @@
?>
<div class="card--open-graph">
<div class="open-graph__inner">
<?php if (!empty($ogData['image'])): ?>
<figure>
<img src="<?= $ogData['image'] ?>" alt="<?= $ogData['title'] ?>">
@ -105,4 +107,5 @@
<?php endif; ?>
</div>
<a class="link-block" href="<?= $ogData['url'] ?>" target="_blank"></a>
</div>
</div>

46
site/templates/folder.php
View file

@ -120,26 +120,7 @@ $investigations = site()->find('enquetes')->children()->listed()->filter(functio
<h3 class="container__title">4 impacts</h3>
<!-- Contenu statique temporaire -->
<div class="card--impact" data-impact-type="media">
<div class="card--impact__inner">
<p class="tag">Médiatique</p>
<?php snippet('card-open-graph') ?>
<ul class="investigations">
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
<li><a href="/enquetes/l-homicide-de-nahel-merzouk"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L’homicide de Nahel Merzouk</a></li>
</ul>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</div>
</div>
</div>
<div class="card--impact has-link" data-impact-type="judiciaire">
@ -151,9 +132,6 @@ $investigations = site()->find('enquetes')->children()->listed()->filter(functio
</p>
</div>
<ul class="investigations">
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
</ul>
<div class="keywords-wrapper">
<ul class="keywords">
@ -167,7 +145,7 @@ $investigations = site()->find('enquetes')->children()->listed()->filter(functio
</div>
</div>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p>
@ -175,9 +153,6 @@ $investigations = site()->find('enquetes')->children()->listed()->filter(functio
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
</p>
</div>
<ul class="investigations">
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
</ul>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
@ -191,6 +166,25 @@ $investigations = site()->find('enquetes')->children()->listed()->filter(functio
</div>
</div>
<div class="card--impact" data-impact-type="media">
<div class="card--impact__inner">
<p class="tag">Médiatique</p>
<?php snippet('card-open-graph') ?>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</div>
</div>
</div>
<div class="card--impact" data-impact-type="public">
<div class="card--impact__inner">
<p class="tag">Judiciaire</p>

2
site/templates/investigation-summary.php
View file

@ -238,9 +238,7 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
</div>
<details class="open-graph__details">
<summary><p class="summary-inner">Détails <span class="arrow-details"><?= svg('assets/icons/arrow-details.svg') ?></span><p></summary>
<div class="open-graph__inner">
<?php snippet('card-open-graph') ?>
</div>
</details>
</div>