This commit is contained in:
Julie Blanc
parent
a1554cfae0
commit
8a4f9d6b64
4 changed files with 217 additions and 11 deletions
|
|
@ -1951,11 +1951,36 @@ main .page__header .description-medium {
|
||||||
|
|
||||||
.section--home {
|
.section--home {
|
||||||
margin: calc(var(--spacing) * 3);
|
margin: calc(var(--spacing) * 3);
|
||||||
|
min-height: calc(100vh - var(--header-h) * 2);
|
||||||
|
border-bottom: var(--border-light);
|
||||||
|
}
|
||||||
|
.section--home .section--inner {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 50% 50%;
|
||||||
|
}
|
||||||
|
.section--home .col-left {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.section--home .col-right {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: yellow;
|
||||||
}
|
}
|
||||||
.section--home .title-section {
|
.section--home .title-section {
|
||||||
font-size: var(--fs-medium);
|
font-size: var(--fs-medium);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
font-size: var(--fs-big);
|
||||||
|
margin-bottom: calc(var(--spacing) * 1);
|
||||||
|
}
|
||||||
|
.section--home .description {
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
line-height: 1.1;
|
||||||
|
margin-bottom: calc(var(--spacing) * 1.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
#home__investigations .container-cards {
|
#home__investigations .container-cards {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -3,11 +3,44 @@
|
||||||
|
|
||||||
.section--home{
|
.section--home{
|
||||||
margin: calc(var(--spacing)*3);
|
margin: calc(var(--spacing)*3);
|
||||||
|
min-height: calc(100vh - var(--header-h)*2);
|
||||||
|
border-bottom: var(--border-light);
|
||||||
|
|
||||||
|
|
||||||
|
.section--inner{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 50% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.col-left{
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-right{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.title-section{
|
.title-section{
|
||||||
font-size: var(--fs-medium);
|
font-size: var(--fs-medium);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
font-size: var(--fs-big);
|
||||||
|
margin-bottom: calc(var(--spacing)*1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.description{
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
line-height: 1.1;
|
||||||
|
margin-bottom: calc(var(--spacing)*1.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,22 +6,170 @@
|
||||||
<p>Index est une ONG d’investigation numérique, au service du public, de la vérité et de la justice.</p>
|
<p>Index est une ONG d’investigation numérique, au service du public, de la vérité et de la justice.</p>
|
||||||
|
|
||||||
<button class="btn--bold-inline">
|
<button class="btn--bold-inline">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
|
<span class="text">En savoir plus</span>
|
||||||
<span class="text">En savoir plus</span>
|
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
|
||||||
</a>
|
</a>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="section--home" id="home__investigations">
|
<section class="section--home" id="home__investigations">
|
||||||
<div class="section--inner">
|
<div class="section--inner">
|
||||||
<h2 class="title-section">Dernières Enquêtes</h2>
|
|
||||||
|
|
||||||
<section class="container-cards">
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
<div class="col-left">
|
||||||
|
<h2 class="title-section">Enquêtes</h2>
|
||||||
|
<p class="description">
|
||||||
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum quasi cupiditate iste odio adipisci quae, doloribus quas facilis eaque id labore nam, illum animi. Eaque iusto beatae error consequatur totam.
|
||||||
|
</p>
|
||||||
|
<button class="btn--bold-inline">
|
||||||
|
<a href="/enquetes">
|
||||||
|
<span class="text">Voir les enquêtes</span>
|
||||||
|
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
|
||||||
|
</a>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-right">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<?php
|
||||||
|
$latestInvestigations = site()->find('enquetes')->children()->listed()->sortBy('created', 'desc')->limit(3);
|
||||||
|
foreach ($latestInvestigations as $investigation):
|
||||||
|
?>
|
||||||
|
<article class="card--article">
|
||||||
|
|
||||||
|
<?php if ($cover = $investigation->cover()->toFile()): ?>
|
||||||
|
<figure>
|
||||||
|
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
|
||||||
|
</figure>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?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> <!-- col-right-->
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="section--home" id="home__impacts">
|
||||||
|
<div class="section--inner">
|
||||||
|
|
||||||
|
<div class="col-left">
|
||||||
|
<h2 class="title-section">Impacts</h2>
|
||||||
|
<p class="description">
|
||||||
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum quasi cupiditate iste odio adipisci quae, doloribus quas facilis eaque id labore nam, illum animi. Eaque iusto beatae error consequatur totam.
|
||||||
|
</p>
|
||||||
|
<button class="btn--bold-inline">
|
||||||
|
<a href="#">
|
||||||
|
<span class="text">Voir les impacts</span>
|
||||||
|
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
|
||||||
|
</a>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-right">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section--home" id="home__folders">
|
||||||
|
<div class="section--inner">
|
||||||
|
|
||||||
|
<div class="col-left">
|
||||||
|
<h2 class="title-section">Dossiers</h2>
|
||||||
|
<p class="description">
|
||||||
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum quasi cupiditate iste odio adipisci quae, doloribus quas facilis eaque id labore nam, illum animi. Eaque iusto beatae error consequatur totam.
|
||||||
|
</p>
|
||||||
|
<button class="btn--bold-inline">
|
||||||
|
<a href="/dossiers">
|
||||||
|
<span class="text">Voir les dossiers</span>
|
||||||
|
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
|
||||||
|
</a>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-right">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue