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

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

Browse source
This commit is contained in:
Julie Blanc 2026-01-27 22:24:47 +01:00
parent 951de348b8
commit d3c5e5c39d
10 changed files with 166 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -48,7 +48,7 @@ img{
// }
}
.swiper-button-next, .swiper-button-prev,
body, #site-header, #site-footer{
transition: background-color 0.3s ease, color 0.3s ease;
}

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

@ -44,6 +44,7 @@
--grey-400: #969696;
--grey-600: #6d6d6d;
--grey-800: #383838;
--grey-950: #222222;
--color-bg: #161616;
--color-txt: #ffffff;
@ -99,12 +100,13 @@
:root[data-theme="light"] {
--grey-100: #1f1f1f;
--grey-100: #2f2f2f;
--grey-200: #2f2f2f;
--grey-300: #4a4a4a;
--grey-400: #6a6a6a;
--grey-600: #9a9a9a;
--grey-800: #cfcfcf;
--grey-950: #eaeaea;
--color-bg: #efefef;
--color-txt: #161616;

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

@ -79,7 +79,7 @@ button:disabled{
&:hover{
color: currentColor;
border-color: currentColor;
background-color: var(--grey-800);
background-color: var(--grey-950);
}
}
@ -153,12 +153,14 @@ button:disabled{
background-color: var(--color-bg);
svg{ fill: var(--color-txt); }
&:hover{
background-color: var(--grey-800);
color: var(--color-txt);
background-color: var(--grey-950);
color: var(--grey-100);
border-color: var(--grey-100);
a{
background-color: var(--grey-800);
color: var(--color-txt);
background-color: var(--grey-950);
color: var(--grey-100);
}
svg{ fill: var(--grey-100); }
}
}
@ -205,6 +207,7 @@ button:disabled{
}
}
@ -240,6 +243,17 @@ button:disabled{
height: 12px;
}
}
&:hover{
background-color: var(--grey-950);
color: var(--grey-100);
border-color: var(--grey-100);
a{
background-color: var(--grey-950);
color: var(--grey-100);
}
svg{ fill: var(--grey-100); }
}
}

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

@ -28,6 +28,7 @@
margin-bottom: 0.25em;
text-wrap: balance;
max-width: 42ch;
text-transform: uppercase;
a{ text-decoration: none;}
}

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

@ -6,7 +6,6 @@
padding: var(--padding-inner);
@include figure-16-9();
.content{
@ -32,6 +31,12 @@
}
}
.time-alone{
display: none;
margin-top: calc(var(--spacing)*0.25);
margin-bottom: calc(var(--spacing)*0.75);
}
.title{
margin-top: calc(var(--spacing)*0.5);
font-size: var(--fs-medium);
@ -90,6 +95,7 @@
&:hover{
border-color: var(--color-txt);
background-color: var(--grey-950);
}
.link-block{

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

@ -7,6 +7,8 @@
@include figure-16-9();
container-type: inline-size;
container-name: cardfolder;
.content{
display: flex;
@ -62,6 +64,7 @@
@include btn--go-to();
&:hover{
background-color: var(--grey-950);
border-color: var(--color-txt);
}
@ -89,3 +92,15 @@
@container cardfolder (width < 520px) {
figure{
aspect-ratio: inherit;
width: 100%;
height: 100%;
}
.short, ul{
font-size: var(--fs-small);
}
}

93
assets/css/style.css
View file

@ -25,6 +25,7 @@
--grey-400: #969696;
--grey-600: #6d6d6d;
--grey-800: #383838;
--grey-950: #222222;
--color-bg: #161616;
--color-txt: #ffffff;
--color-txt-light: var(--grey-400);
@ -68,12 +69,13 @@
}
}
:root[data-theme=light] {
--grey-100: #1f1f1f;
--grey-100: #2f2f2f;
--grey-200: #2f2f2f;
--grey-300: #4a4a4a;
--grey-400: #6a6a6a;
--grey-600: #9a9a9a;
--grey-800: #cfcfcf;
--grey-950: #eaeaea;
--color-bg: #efefef;
--color-txt: #161616;
--color-txt-light: var(--grey-400);
@ -131,6 +133,7 @@ img {
cursor: pointer;
}
.swiper-button-next, .swiper-button-prev,
body, #site-header, #site-footer {
transition: background-color 0.3s ease, color 0.3s ease;
}
@ -317,7 +320,7 @@ button:disabled {
.btn--small:hover {
color: currentColor;
border-color: currentColor;
background-color: var(--grey-800);
background-color: var(--grey-950);
}
.btn--small.is-selected {
@ -397,12 +400,16 @@ button:disabled {
fill: var(--color-txt);
}
.btn--bold-inline:hover {
background-color: var(--grey-800);
color: var(--color-txt);
background-color: var(--grey-950);
color: var(--grey-100);
border-color: var(--grey-100);
}
.btn--bold-inline:hover a {
background-color: var(--grey-800);
color: var(--color-txt);
background-color: var(--grey-950);
color: var(--grey-100);
}
.btn--bold-inline:hover svg {
fill: var(--grey-100);
}
.btn--toc svg {
@ -449,6 +456,18 @@ button:disabled {
width: 12px;
height: 12px;
}
.btn--back-to-top:hover {
background-color: var(--grey-950);
color: var(--grey-100);
border-color: var(--grey-100);
}
.btn--back-to-top:hover a {
background-color: var(--grey-950);
color: var(--grey-100);
}
.btn--back-to-top:hover svg {
fill: var(--grey-100);
}
.tag {
height: calc(var(--h-block) * 0.75);
@ -1165,6 +1184,11 @@ button.sort[data-sort-type=up] .arrow {
width: 16px;
fill: var(--color-txt);
}
.card--article .time-alone {
display: none;
margin-top: calc(var(--spacing) * 0.25);
margin-bottom: calc(var(--spacing) * 0.75);
}
.card--article .title {
margin-top: calc(var(--spacing) * 0.5);
font-size: var(--fs-medium);
@ -1213,6 +1237,7 @@ button.sort[data-sort-type=up] .arrow {
}
.card--article:hover {
border-color: var(--color-txt);
background-color: var(--grey-950);
}
.card--article .link-block {
z-index: 2000;
@ -1256,6 +1281,7 @@ button.sort[data-sort-type=up] .arrow {
margin-bottom: 0.25em;
text-wrap: balance;
max-width: 42ch;
text-transform: uppercase;
}
.card--article-small .title a {
text-decoration: none;
@ -1433,6 +1459,8 @@ button.sort[data-sort-type=up] .arrow {
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
container-type: inline-size;
container-name: cardfolder;
position: relative;
}
.card--folder figure {
@ -1526,6 +1554,7 @@ button.sort[data-sort-type=up] .arrow {
animation: wiggle-left 0.8s ease-in-out;
}
.card--folder:hover {
background-color: var(--grey-950);
border-color: var(--color-txt);
}
@media screen and (max-width: 560px) {
@ -1552,6 +1581,16 @@ button.sort[data-sort-type=up] .arrow {
}
}
@container cardfolder (width < 520px) {
figure {
aspect-ratio: inherit;
width: 100%;
height: 100%;
}
.short, ul {
font-size: var(--fs-small);
}
}
.card--open-graph {
display: grid;
grid-gap: var(--padding-inner);
@ -1994,11 +2033,19 @@ main .page__header .description-medium {
}
.section--home {
margin: calc(var(--spacing) * 3);
min-height: calc(100vh - var(--header-h) * 2);
border-bottom: var(--border-light);
}
.section--home .btn--bold-inline {
text-transform: none;
}
.section--home .btn--bold-inline svg {
width: 12px;
height: 12px;
top: 0px;
}
.section--home .section--inner {
max-width: 1300px;
margin: calc(var(--spacing) * 3) auto;
display: grid;
--gap: calc(var(--padding-body)*2);
grid-template-columns: repeat(2, calc((100% - var(--gap)) * 0.5));
@ -2035,22 +2082,32 @@ main .page__header .description-medium {
align-items: flex-start;
justify-content: flex-start;
}
#home__investigations .card--article .description, #home__investigations .card--article .dl {
font-size: var(--fs-small);
#home__investigations .card--article .time-alone {
display: block;
}
#home__investigations .card--article .description, #home__investigations .card--article .dl, #home__investigations .card--article .pin {
display: none;
}
#home__description .section--inner {
max-width: var(--max-w-container);
#home__hero {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 3);
}
#home__description p {
font-size: var(--fs-big);
max-width: var(--max-w-content);
#home__hero .section--inner {
display: block;
}
#home__description button {
#home__hero .baseline {
font-family: var(--title);
font-size: 45px;
line-height: 1.1;
max-width: 26ch;
}
#home__hero button {
margin-top: calc(var(--spacing) * 1);
}
#home__description button .icon svg {
width: 11px;
#home__folders .card--folder {
margin-bottom: calc(var(--spacing) * 0.5);
}
[data-template=investigation-summary] main {

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

File diff suppressed because one or more lines are too long

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

@ -1,10 +1,20 @@
.section--home{
margin: calc(var(--spacing)*3);
min-height: calc(100vh - var(--header-h)*2);
border-bottom: var(--border-light);
.btn--bold-inline{
text-transform: none;
svg{
width: 12px;
height: 12px;
top: 0px;
}
}
.section--inner{
max-width: 1300px;
margin: calc(var(--spacing)*3) auto;
display: grid;
--gap: calc(var(--padding-body)*2);
grid-template-columns: repeat(2, calc((100% - var(--gap))*0.5));
@ -54,32 +64,44 @@
.card--article{
align-items: flex-start;
justify-content: flex-start;
.description, .dl{
font-size: var(--fs-small);
.time-alone{ display: block; }
.description, .dl, .pin{
display: none;
}
}
}
#home__description{
#home__hero{
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*3);
.section--inner{
max-width: var(--max-w-container);
display: block;
}
p{
font-size: var(--fs-big);
max-width: var(--max-w-content);
.baseline{
font-family: var(--title);
font-size: 45px;
line-height: 1.1;
max-width: 26ch;
// max-width: var(--max-w-content);
}
button{
margin-top: calc(var(--spacing)*1);
}
}
button .icon svg{
width: 11px;
}
#home__folders{
.card--folder{
margin-bottom: calc(var(--spacing)*0.5);
}
}

41
site/templates/home.php
View file

@ -1,9 +1,10 @@
<?php snippet('header') ?>
<main>
<section class="section--home" id="home__description">
<section class="section--home" id="home__hero">
<div class="section--inner">
<p>Index est une ONG d’investigation numérique, au&nbsp;service du public, de la vérité et de la justice.</p>
<p class="baseline">Index est une ONG d’investigation numérique, au&nbsp;service du public, de&nbsp;la&nbsp;vérité et de&nbsp;la&nbsp;justice.</p>
<button class="btn--bold-inline">
<a href="#">
@ -11,6 +12,7 @@
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
</a>
</button>
</div>
</section>
@ -55,42 +57,9 @@ foreach ($latestInvestigations as $investigation):
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
<?php if ($investigation->chapo()->isNotEmpty()): ?>
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
<?php endif ?>
<dl class="dl">
<?php if ($investigation->incidentDate()->isNotEmpty()): ?>
<div class="dl__group">
<dt>Date de l'incident</dt>
<dd><time datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
</div>
<?php endif ?>
<?php if ($partners = $investigation->partners()->toStructure()): ?>
<?php if ($partners->isNotEmpty()): ?>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>
<?php $partnerNames = [] ?>
<?php foreach ($partners as $partner): ?>
<?php $partnerNames[] = $partner->name()->value() ?>
<?php endforeach ?>
<?= implode(', ', $partnerNames) ?>
</dd>
</div>
<?php endif ?>
<?php endif ?>
<?php if ($investigation->incidentLocation()->isNotEmpty()): ?>
<div class="dl__group">
<dt>Lieu de l'incident</dt>
<dd><?= $investigation->incidentLocation()->esc() ?></dd>
</div>
<?php endif ?>
<time class="time-alone" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
</dl>
</div>