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

Home, new version
All checks were successful
Deploy / Deploy to Production (push) Successful in 14s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-09 21:12:58 +01:00
parent 6d71b353f3
commit ace7dfaede
5 changed files with 343 additions and 388 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -170,58 +170,6 @@ button:disabled{
.btn--home{
background-color: var(--color-bg);
display: block;
height: calc(var(--h-block)*1);
border: 1px solid currentColor;
border-radius: var(--radius-btn);
font-size: var(--fs-xsmall);
font-weight: 500;
text-transform: uppercase;
line-height: 1;
overflow: hidden;
white-space: nowrap;
color: var(--color-accent);
transition: .3s ease-in;
@media #{$small} {
}
svg{
width: 14px;
height: 14px;
position: relative;
top: -1px;
fill: var(--color-accent);
transition: fill .3s ease-in;
}
a{
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
width: 100%;
height: 100%;
padding: 0 2ch;
padding-top: 4px;
}
&:hover{
border-color: var(--color-accent);
background-color: var(--color-accent);
color: var(--color-bg);
svg{
fill: var(--color-bg);
}
}
}
.btn--toc{ .btn--toc{
svg{ svg{

207
assets/css/style.css
View file

@ -414,48 +414,6 @@ button:disabled {
fill: var(--grey-100); fill: var(--grey-100);
} }
.btn--home {
background-color: var(--color-bg);
display: block;
height: calc(var(--h-block) * 1);
border: 1px solid currentColor;
border-radius: var(--radius-btn);
font-size: var(--fs-xsmall);
font-weight: 500;
text-transform: uppercase;
line-height: 1;
overflow: hidden;
white-space: nowrap;
color: var(--color-accent);
transition: 0.3s ease-in;
}
.btn--home svg {
width: 14px;
height: 14px;
position: relative;
top: -1px;
fill: var(--color-accent);
transition: fill 0.3s ease-in;
}
.btn--home a {
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
width: 100%;
height: 100%;
padding: 0 2ch;
padding-top: 4px;
}
.btn--home:hover {
border-color: var(--color-accent);
background-color: var(--color-accent);
color: var(--color-bg);
}
.btn--home:hover svg {
fill: var(--color-bg);
}
.btn--toc svg { .btn--toc svg {
width: 15px; width: 15px;
height: 15px; height: 15px;
@ -2484,103 +2442,116 @@ main .page__header .description-medium {
} }
} }
.section--home .title-section { @media screen and (min-width: 768px) {
font-weight: normal;
font-size: var(--fs-big);
margin-bottom: calc(var(--spacing) * 1);
}
.section--home .description-section {
max-width: 42ch;
font-size: var(--fs-normal);
line-height: 1.1;
}
.section--home .btn--home {
margin-top: calc(var(--spacing) * 2);
}
@media screen and (min-width: 1080px) {
.section--home { .section--home {
border-bottom: var(--border-light); border-bottom: var(--border-light);
} }
}
@media screen and (max-width: 1080px) {
.section--home {
padding-bottom: calc(var(--spacing) * 4);
margin-bottom: calc(var(--spacing) * 4);
}
.section--home:first-of-type {
padding-top: calc(var(--spacing) * 2);
}
.section--home .col-left {
margin-bottom: calc(var(--spacing) * 3);
}
}
.section--home .baseline-section {
max-width: 42ch;
font-size: var(--fs-medium);
line-height: 1.1;
margin-bottom: calc(var(--spacing) * 1);
}
.section--home .btn--bold-inline {
text-transform: none;
font-weight: 500;
font-size: var(--fs-small);
}
.section--home .btn--bold-inline .icon {
position: relative;
top: 2px;
}
.section--home .btn--bold-inline svg {
width: 13px;
height: 13px;
}
@media screen and (min-width: 1080px) {
.section--home .section--inner { .section--home .section--inner {
max-width: 1280px; max-width: 1600px;
margin: calc(var(--spacing) * 4) auto; margin-inline: auto;
margin-bottom: calc(var(--spacing) * 4);
padding-top: calc(var(--spacing) * 4);
display: grid; display: grid;
--gap: calc(var(--padding-body)*2); --gap: calc(var(--padding-body)*2);
grid-template-columns: 1fr 640px; grid-template-columns: 1fr 2fr;
grid-gap: var(--gap); grid-gap: var(--gap);
} }
.section--home .col-left { .section--home .col-left {
height: 100%; align-self: start;
display: flex; position: sticky;
flex-direction: column; top: calc(var(--header-h) + var(--spacing) * 4);
align-items: flex-start;
} }
.section--home .col-right { .section--home .col-right {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
#home__investigations .home-investigations-slider { @media screen and (max-width: 768px) {
max-width: 500px; .section--home .card--article,
height: auto; .section--home .card--impact {
} margin-bottom: calc(var(--spacing) * 1);
#home__investigations .card--article .time-alone {
display: block;
}
#home__investigations .card--article .dl,
#home__investigations .card--article .pin {
display: none;
}
#home__hero {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 3);
}
@media screen and (max-width: 560px) {
#home__hero {
margin-top: calc(var(--spacing) * 2.5);
padding-bottom: calc(var(--spacing) * 1.5);
margin-bottom: 0px;
} }
} .section--home .baseline-section {
#home__hero .section--inner {
display: block;
}
#home__hero .baseline {
font-size: var(--fs-big); font-size: var(--fs-big);
line-height: 1.1; }
max-width: 32ch;
}
#home__hero button {
margin-top: calc(var(--spacing) * 1);
} }
#home__folders .card--folder { @media screen and (min-width: 768px) {
margin-bottom: calc(var(--spacing) * 0.5); #home__investigations .col-right {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--padding-body);
}
#home__investigations .col-right .card--article:first-of-type {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
}
#home__investigations .col-right .card--article:first-of-type figure,
#home__investigations .col-right .card--article:first-of-type picture {
grid-column: span 2;
}
#home__investigations .col-right .card--article:first-of-type .title {
grid-column: span 2;
font-size: var(--fs-medium);
padding-right: 3ch;
margin-bottom: calc(var(--spacing) * 1);
}
#home__investigations .col-right .card--article:first-of-type .description {
grid-column: 1;
grid-row: 3;
padding-right: 3ch;
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
overflow: visible;
}
#home__investigations .col-right .card--article:first-of-type dl {
grid-column: 2;
grid-row: 3;
}
#home__investigations .col-right .card--article:first-of-type .keywords-wrapper {
grid-column: 2;
grid-row: 4;
}
#home__investigations .col-right .see-more {
grid-column: span 2;
}
} }
@media screen and (max-width: 1080px) {
.section--home:not(#home-hero) {
border-bottom: var(--border);
padding-bottom: calc(var(--spacing) * 4);
margin-bottom: calc(var(--spacing) * 4);
}
.section--home:not(#home-hero) .col-left {
margin-bottom: calc(var(--spacing) * 3);
}
#home__hero {
height: calc(100vh - var(--header-h));
margin: 0 !important;
border-bottom: none !important;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 25vh !important;
}
#home__investigations {
margin-top: 0px;
}
}
[data-template=investigation-summary] main { [data-template=investigation-summary] main {
position: relative; position: relative;
} }

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

File diff suppressed because one or more lines are too long

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

@ -1,41 +1,60 @@
.section--home { .section--home {
.title-section { @media #{$small-up} {
font-weight: normal; border-bottom: var(--border-light);
font-size: var(--fs-big); }
@media #{$medium} {
padding-bottom: calc(var(--spacing)*4);
margin-bottom: calc(var(--spacing)*4);
&:first-of-type{
padding-top: calc(var(--spacing)*2);
}
.col-left{
margin-bottom: calc(var(--spacing)*3);
}
}
.baseline-section {
max-width: 42ch;
font-size: var(--fs-medium);
line-height: 1.1;
margin-bottom: calc(var(--spacing)*1); margin-bottom: calc(var(--spacing)*1);
} }
.description-section { .btn--bold-inline{
max-width: 42ch; text-transform: none;
font-size: var(--fs-normal); font-weight: 500;
line-height: 1.1; font-size: var(--fs-small);
.icon{
position: relative;
top: 2px;
}
svg{
width: 13px;
height: 13px;
} }
.btn--home{
margin-top: calc(var(--spacing)*2);
} }
@media #{$medium-up} { @media #{$medium-up} {
border-bottom: var(--border-light);
.section--inner { .section--inner {
max-width: 1280px; max-width: 1600px;
margin: calc(var(--spacing)*4) auto; margin-inline: auto;
margin-bottom: calc(var(--spacing)*4);
padding-top: calc(var(--spacing)*4);
display: grid; display: grid;
--gap: calc(var(--padding-body)*2); --gap: calc(var(--padding-body)*2);
grid-template-columns: 1fr 640px; grid-template-columns: 1fr 2fr;
grid-gap: var(--gap); grid-gap: var(--gap);
} }
.col-left { .col-left {
height: 100%; align-self: start;
display: flex; position: sticky;
flex-direction: column; top: calc(var(--header-h) + var(--spacing)*4);
align-items: flex-start;
} }
@ -47,52 +66,18 @@
} }
@media #{$medium} {
// &#home__investigations, @media #{$small} {
// &#home__hero {
// border-bottom: var(--border-light);
// }
// .section--inner { .card--article,
// margin-top: calc(var(--spacing)*3); .card--impact{
// margin-bottom: calc(var(--spacing)*4); margin-bottom: calc(var(--spacing)*1);
// }
// .col-left {
// display: flex;
// flex-wrap: wrap;
// align-items: flex-end;
// justify-content: space-between;
// margin-bottom: calc(var(--spacing)*2);
// .title-section {
// width: 100%;
// }
// }
} }
@media #{$x-small} { .baseline-section{
// .section--inner { font-size: var(--fs-big);
// margin-top: calc(var(--spacing)*2);
// margin-bottom: calc(var(--spacing)*4);
// margin-bottom: 0px;
// }
// .col-left{ }
// margin-bottom: calc(var(--spacing)*1.5);
// }
// .title-section {
// margin-bottom: calc(var(--spacing)*0.25);
// }
// .description-section {
// max-width: 42ch;
// font-size: var(--fs-normal);
// }
} }
@ -111,51 +96,57 @@
#home__investigations { #home__investigations {
.home-investigations-slider { @media #{$small-up} {
max-width: 500px; .col-right{
height: auto; display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--padding-body);
.card--article:first-of-type{
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
figure,
picture{
grid-column: span 2;
} }
.card--article { .title{
grid-column: span 2;
font-size: var(--fs-medium);
padding-right: 3ch;
margin-bottom: calc(var(--spacing)*1);
}
.time-alone { .description{
grid-column: 1;
grid-row: 3;
padding-right: 3ch;
display: block; display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
overflow: visible;
} }
.dl, dl{
.pin { grid-column: 2;
display: none; grid-row: 3;
}
.keywords-wrapper{
grid-column: 2;
grid-row: 4;
} }
} }
.see-more{
} grid-column: span 2;
// margin-top: var(--padding-body);
}
#home__hero {
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*3);
@media #{$x-small} {
margin-top: calc(var(--spacing)*2.5);
padding-bottom: calc(var(--spacing)*1.5);
margin-bottom: 0px;
} }
.section--inner {
display: block;
}
.baseline {
font-size: var(--fs-big);
line-height: 1.1;
max-width: 32ch;
}
button {
margin-top: calc(var(--spacing)*1);
} }
@ -163,39 +154,9 @@
} }
#home__folders {
.card--folder {
margin-bottom: calc(var(--spacing)*0.5);
}
}
@media #{$medium} {
.section--home:not(#home-hero) {
border-bottom: var(--border);
padding-bottom: calc(var(--spacing)*4);
margin-bottom: calc(var(--spacing)*4);
.col-left{
margin-bottom: calc(var(--spacing)*3);
}
}
#home__hero{
height: calc(100vh - var(--header-h));
margin: 0!important;
border-bottom: none!important;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 25vh!important;
}
#home__investigations{
margin-top: 0px;
}
}

197
site/templates/home.php
View file

@ -1,54 +1,29 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main> <main>
<section class="section--home" id="home__hero">
<div class="section--inner">
<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--home">
<a href="#">
<span class="text">En savoir plus</span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
</a>
</button>
</div>
</section>
<section class="section--home" id="home__investigations"> <section class="section--home" id="home__investigations">
<div class="section--inner"> <div class="section--inner">
<div class="col-left"> <div class="col-left">
<?php $investigationsPage = site()->find('enquetes'); ?> <p class="baseline-section">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>
<h2 class="title-section"><?= $investigationsPage ? $investigationsPage->title() : 'Enquêtes' ?></h2> <button class="btn--bold-inline">
<?php if ($investigationsPage && $investigationsPage->chapo()->isNotEmpty()): ?> <a href="#">
<p class="description-section"> <span class="text">En savoir plus</span>
<?= $investigationsPage->chapo() ?>
</p>
<?php endif ?>
<button class="btn--home">
<a href="/enquetes">
<span class="text">Voir les enquêtes</span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span> <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
</a> </a>
</button> </button>
</div> </div>
<div class="col-right"> <div class="col-right">
<div class="home-investigations-slider swiper">
<div class="swiper-wrapper">
<?php
$latestInvestigations = site()->find('enquetes')->children()->listed()->sortBy('created', 'desc')->limit(3); <?php $latestInvestigations = site()->find('enquetes')->children()->listed()->sortBy('created', 'desc')->limit(3);
foreach ($latestInvestigations as $investigation): foreach ($latestInvestigations as $investigation):
?> ?>
<div class="swiper-slide">
<div class="swiper-slide__inner">
<article class="card--article"> <article class="card--article">
<?php if ($cover = $investigation->cover()->toFile()): ?> <?php if ($cover = $investigation->cover()->toFile()): ?>
@ -57,18 +32,46 @@
</figure> </figure>
<?php endif ?> <?php endif ?>
<div class="content">
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4> <h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
<time class="time-alone" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
<?php if ($investigation->chapo()->isNotEmpty()): ?> <?php if ($investigation->chapo()->isNotEmpty()): ?>
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p> <p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
<?php endif ?> <?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> </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 ?>
</dl>
<?php if ($keywords = $investigation->keywords()->split()): ?> <?php if ($keywords = $investigation->keywords()->split()): ?>
<div class="keywords-wrapper"> <div class="keywords-wrapper">
@ -86,21 +89,90 @@
<a class="link-block" href="<?= $investigation->url() ?>"></a> <a class="link-block" href="<?= $investigation->url() ?>"></a>
</article> </article>
</div>
</div>
<?php endforeach ?> <?php endforeach ?>
</div> <!-- swiper-wrapper --> <?php $latestInvestigations = site()->find('enquetes')->children()->listed()->sortBy('created', 'desc')->limit(3);
foreach ($latestInvestigations as $investigation):
?>
<!-- Navigation buttons --> <article class="card--article">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Pagination --> <?php if ($cover = $investigation->cover()->toFile()): ?>
<div class="swiper-pagination"></div> <figure>
</div> <!-- home-investigations-slider --> <img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
</figure>
<?php endif ?>
</div> <!-- col-right-->
<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 ?>
</dl>
<?php if ($keywords = $investigation->keywords()->split()): ?>
<div class="keywords-wrapper">
<ul class="keywords">
<?php foreach ($keywords as $keyword): ?>
<li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li>
<?php endforeach ?>
</ul>
</div>
<?php endif ?>
<?php if ($investigation->pinned()->toBool()): ?>
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<?php endif ?>
<a class="link-block" href="<?= $investigation->url() ?>"></a>
</article>
<?php endforeach ?>
<div class="see-more">
<button class="btn--bold-inline">
<a href="/enquetes">
<span class="text">Voir toutes les enquêtes</span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
</a>
</button>
</div>
</div> <!-- col-right-->
</div> </div>
</section> </section>
@ -113,22 +185,21 @@
<div class="section--inner"> <div class="section--inner">
<div class="col-left"> <div class="col-left">
<?php $impactsPage = site()->find('impacts'); ?>
<h2 class="title-section"><?= $impactsPage ? $impactsPage->title() : 'Impacts' ?></h2> <p class="baseline-section">Nos travaux sont régulièrement présentés dans les tribunaux, les médias et les espaces de discours public.</p>
<?php if ($impactsPage && $impactsPage->chapo()->isNotEmpty()): ?>
<p class="description-section">
<?= $impactsPage->chapo() ?> <button class="btn--bold-inline">
</p>
<?php endif ?>
<button class="btn--home">
<a href="/impacts"> <a href="/impacts">
<span class="text">Voir les impacts</span> <span class="text">En savoir plus</span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span> <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
</a> </a>
</button> </button>
</div> </div>
<div class="col-right grid-masonry"> <div class="col-right">
<div class="grid-masonry">
<div class="grid-sizer"></div> <div class="grid-sizer"></div>
@ -226,12 +297,16 @@
<a class="link-block" href="#" target="_blank"></a> <a class="link-block" href="#" target="_blank"></a>
</div> </div>
</div> <!-- end masonry -->
<div class="see-more">
<button class="btn--bold-inline">
<a href="/impacts">
<span class="text">Voir tout</span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
</a>
</button>
</div>
</div> </div>