This commit is contained in:
Julie Blanc
parent
6d71b353f3
commit
ace7dfaede
5 changed files with 343 additions and 388 deletions
|
|
@ -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{
|
||||
svg{
|
||||
|
|
|
|||
|
|
@ -414,48 +414,6 @@ button:disabled {
|
|||
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 {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
|
@ -2484,103 +2442,116 @@ main .page__header .description-medium {
|
|||
}
|
||||
}
|
||||
|
||||
.section--home .title-section {
|
||||
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) {
|
||||
@media screen and (min-width: 768px) {
|
||||
.section--home {
|
||||
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 {
|
||||
max-width: 1280px;
|
||||
margin: calc(var(--spacing) * 4) auto;
|
||||
max-width: 1600px;
|
||||
margin-inline: auto;
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
display: grid;
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: 1fr 640px;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-gap: var(--gap);
|
||||
}
|
||||
.section--home .col-left {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-self: start;
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--spacing) * 4);
|
||||
}
|
||||
.section--home .col-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
#home__investigations .home-investigations-slider {
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
}
|
||||
#home__investigations .card--article .time-alone {
|
||||
display: block;
|
||||
}
|
||||
#home__investigations .card--article .dl,
|
||||
#home__investigations .card--article .pin {
|
||||
display: none;
|
||||
@media screen and (max-width: 768px) {
|
||||
.section--home .card--article,
|
||||
.section--home .card--impact {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.section--home .baseline-section {
|
||||
font-size: var(--fs-big);
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
@media screen and (min-width: 768px) {
|
||||
#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;
|
||||
}
|
||||
}
|
||||
#home__hero .section--inner {
|
||||
display: block;
|
||||
}
|
||||
#home__hero .baseline {
|
||||
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 {
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
@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 {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,41 +1,60 @@
|
|||
.section--home {
|
||||
|
||||
.title-section {
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
@media #{$small-up} {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
.description-section {
|
||||
max-width: 42ch;
|
||||
font-size: var(--fs-normal);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.btn--home{
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
.btn--bold-inline{
|
||||
text-transform: none;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-small);
|
||||
.icon{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
svg{
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media #{$medium-up} {
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
.section--inner {
|
||||
max-width: 1280px;
|
||||
margin: calc(var(--spacing)*4) auto;
|
||||
max-width: 1600px;
|
||||
margin-inline: auto;
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
padding-top: calc(var(--spacing)*4);
|
||||
display: grid;
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: 1fr 640px;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-gap: var(--gap);
|
||||
}
|
||||
|
||||
|
||||
.col-left {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-self: start;
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--spacing)*4);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -47,55 +66,21 @@
|
|||
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
|
||||
// &#home__investigations,
|
||||
// &#home__hero {
|
||||
// border-bottom: var(--border-light);
|
||||
// }
|
||||
|
||||
// .section--inner {
|
||||
// margin-top: calc(var(--spacing)*3);
|
||||
// margin-bottom: calc(var(--spacing)*4);
|
||||
// }
|
||||
|
||||
// .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} {
|
||||
// .section--inner {
|
||||
// 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);
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
@media #{$small} {
|
||||
|
||||
.card--article,
|
||||
.card--impact{
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.baseline-section{
|
||||
font-size: var(--fs-big);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -111,91 +96,67 @@
|
|||
|
||||
#home__investigations {
|
||||
|
||||
.home-investigations-slider {
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
}
|
||||
@media #{$small-up} {
|
||||
.col-right{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--padding-body);
|
||||
|
||||
.card--article {
|
||||
.card--article:first-of-type{
|
||||
grid-column: span 2;
|
||||
|
||||
.time-alone {
|
||||
display: block;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
figure,
|
||||
picture{
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.title{
|
||||
grid-column: span 2;
|
||||
font-size: var(--fs-medium);
|
||||
padding-right: 3ch;
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.description{
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
padding-right: 3ch;
|
||||
display: block;
|
||||
-webkit-line-clamp: unset;
|
||||
-webkit-box-orient: unset;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
dl{
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.keywords-wrapper{
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.see-more{
|
||||
grid-column: span 2;
|
||||
// margin-top: var(--padding-body);
|
||||
}
|
||||
}
|
||||
|
||||
.dl,
|
||||
.pin {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,54 +1,29 @@
|
|||
<?php snippet('header') ?>
|
||||
<main>
|
||||
|
||||
<section class="section--home" id="home__hero">
|
||||
|
||||
<div class="section--inner">
|
||||
<p class="baseline">Index est une ONG d’investigation numérique, au service du public, de la vérité et de la 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">
|
||||
<div class="section--inner">
|
||||
|
||||
<div class="col-left">
|
||||
<?php $investigationsPage = site()->find('enquetes'); ?>
|
||||
<h2 class="title-section"><?= $investigationsPage ? $investigationsPage->title() : 'Enquêtes' ?></h2>
|
||||
<?php if ($investigationsPage && $investigationsPage->chapo()->isNotEmpty()): ?>
|
||||
<p class="description-section">
|
||||
<?= $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>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<p class="baseline-section">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">
|
||||
<a href="#">
|
||||
<span class="text">En savoir plus</span>
|
||||
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
|
||||
</a>
|
||||
</button>
|
||||
</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);
|
||||
foreach ($latestInvestigations as $investigation):
|
||||
?>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-slide__inner">
|
||||
<?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()): ?>
|
||||
|
|
@ -57,18 +32,46 @@
|
|||
</figure>
|
||||
<?php endif ?>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<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()): ?>
|
||||
<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 ?>
|
||||
|
||||
</div>
|
||||
<?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">
|
||||
|
|
@ -86,21 +89,90 @@
|
|||
|
||||
<a class="link-block" href="<?= $investigation->url() ?>"></a>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
|
||||
<?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 ?>
|
||||
|
||||
|
||||
<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>
|
||||
</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> <!-- swiper-wrapper -->
|
||||
|
||||
<!-- Navigation buttons -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<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>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div> <!-- home-investigations-slider -->
|
||||
|
||||
</div> <!-- col-right-->
|
||||
</div> <!-- col-right-->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -113,22 +185,21 @@
|
|||
<div class="section--inner">
|
||||
|
||||
<div class="col-left">
|
||||
<?php $impactsPage = site()->find('impacts'); ?>
|
||||
<h2 class="title-section"><?= $impactsPage ? $impactsPage->title() : 'Impacts' ?></h2>
|
||||
<?php if ($impactsPage && $impactsPage->chapo()->isNotEmpty()): ?>
|
||||
<p class="description-section">
|
||||
<?= $impactsPage->chapo() ?>
|
||||
</p>
|
||||
<?php endif ?>
|
||||
<button class="btn--home">
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<button class="btn--bold-inline">
|
||||
<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>
|
||||
</a>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col-right grid-masonry">
|
||||
<div class="col-right">
|
||||
|
||||
<div class="grid-masonry">
|
||||
|
||||
<div class="grid-sizer"></div>
|
||||
|
||||
|
|
@ -226,12 +297,16 @@
|
|||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue