This commit is contained in:
Julie Blanc
parent
f28680f77e
commit
50f4836be1
14 changed files with 371 additions and 42 deletions
|
|
@ -64,8 +64,6 @@ body, #site-header, #site-footer{
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@mixin hide-scroll(){
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
|
@ -74,6 +72,13 @@ body, #site-header, #site-footer{
|
|||
}
|
||||
}
|
||||
|
||||
@mixin clamp($lines) {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
body.menu-open,
|
||||
body.is-hidden{
|
||||
|
|
|
|||
|
|
@ -11,3 +11,8 @@ $paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
|
|||
@media #{$medium}{
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -169,6 +169,51 @@ button:disabled{
|
|||
}
|
||||
|
||||
|
||||
@mixin btn--go-to(){
|
||||
position: relative;
|
||||
.btn--go-to{
|
||||
position: absolute;
|
||||
right: var(--padding-inner);
|
||||
bottom: calc(var(--padding-inner) - 3px);
|
||||
svg{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
@media #{$small}{
|
||||
svg{
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
@media #{$x-small}{
|
||||
right: calc(var(--padding-inner)*0.5);
|
||||
bottom: calc(var(--padding-inner)*0.25);
|
||||
svg{
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
.btn--go-to{
|
||||
animation: wiggle-left 0.8s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@keyframes wiggle-left {
|
||||
0% { transform: translateX(0); }
|
||||
40% { transform: translateX(-10px); }
|
||||
80% { transform: translateX(0); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn--back-to-top{
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
@include figure-16-9-hover();
|
||||
@include figure-16-9();
|
||||
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
|
||||
padding-right: calc(var(--padding-inner)*3);
|
||||
}
|
||||
|
||||
.title{
|
||||
|
|
@ -48,6 +48,9 @@
|
|||
.title{ text-decoration: underline;}
|
||||
}
|
||||
|
||||
@include btn--go-to();
|
||||
|
||||
|
||||
@media #{$medium}{
|
||||
.title{
|
||||
font-size: var(--fs-normal);
|
||||
|
|
|
|||
75
assets/css/components/_card-folder.scss
Normal file
75
assets/css/components/_card-folder.scss
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
.card--folder{
|
||||
position: relative;
|
||||
|
||||
border: var(--border-light);
|
||||
padding: var(--padding-inner);
|
||||
|
||||
|
||||
@include grid-content();
|
||||
@include figure-16-9();
|
||||
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.title{
|
||||
flex-grow: 1;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
a{ text-decoration: none;}
|
||||
|
||||
@media #{$small}{
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.short{
|
||||
@include clamp(2);
|
||||
}
|
||||
|
||||
ul{
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1ch;
|
||||
color: var(--color-txt-light);
|
||||
padding-top: calc(var(--spacing)*0.5);
|
||||
|
||||
li + li{
|
||||
&::before{
|
||||
content: "|";
|
||||
padding-right: 1ch;
|
||||
}
|
||||
}
|
||||
@media #{$small}{
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
|
||||
.btn--go-to{
|
||||
position: absolute;
|
||||
right: calc(var(--padding-inner)*1);
|
||||
bottom: var(--padding-inner);
|
||||
}
|
||||
|
||||
@include btn--go-to();
|
||||
|
||||
&:hover{
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
padding: calc(var(--padding-inner)*0.5);
|
||||
.short{ display: none; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -91,6 +91,7 @@
|
|||
cursor: pointer;
|
||||
svg{
|
||||
width: 30px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.close{ display: none; }
|
||||
|
||||
|
|
|
|||
|
|
@ -231,6 +231,7 @@ body.is-hidden .btn--back-to-top {
|
|||
}
|
||||
#site-header #menu-toggle svg {
|
||||
width: 30px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
#site-header #menu-toggle .close {
|
||||
display: none;
|
||||
|
|
@ -409,6 +410,20 @@ button:disabled {
|
|||
top: 0px;
|
||||
}
|
||||
|
||||
@keyframes wiggle-left {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.btn--back-to-top {
|
||||
display: flex;
|
||||
border-color: var(--color-txt);
|
||||
|
|
@ -1238,6 +1253,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: calc(var(--spacing) * 0.5);
|
||||
border-bottom: var(--border-light);
|
||||
position: relative;
|
||||
}
|
||||
.card--article-small:first-of-type {
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
|
|
@ -1255,13 +1271,11 @@ button.sort[data-sort-type=up] .arrow {
|
|||
object-fit: cover;
|
||||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||||
}
|
||||
.card--article-small:hover figure img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.card--article-small .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: calc(var(--spacing) * 0.25);
|
||||
padding-right: calc(var(--padding-inner) * 3);
|
||||
}
|
||||
.card--article-small .title {
|
||||
font-weight: normal;
|
||||
|
|
@ -1287,6 +1301,35 @@ button.sort[data-sort-type=up] .arrow {
|
|||
.card--article-small:hover .title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.card--article-small .btn--go-to {
|
||||
position: absolute;
|
||||
right: var(--padding-inner);
|
||||
bottom: calc(var(--padding-inner) - 3px);
|
||||
}
|
||||
.card--article-small .btn--go-to svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.card--article-small .btn--go-to svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--article-small .btn--go-to {
|
||||
right: calc(var(--padding-inner) * 0.5);
|
||||
bottom: calc(var(--padding-inner) * 0.25);
|
||||
}
|
||||
.card--article-small .btn--go-to svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
.card--article-small:hover .btn--go-to {
|
||||
animation: wiggle-left 0.8s ease-in-out;
|
||||
}
|
||||
@media screen and (max-width: 1080px) {
|
||||
.card--article-small .title {
|
||||
font-size: var(--fs-normal);
|
||||
|
|
@ -1401,6 +1444,116 @@ button.sort[data-sort-type=up] .arrow {
|
|||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
.card--folder {
|
||||
position: relative;
|
||||
border: var(--border-light);
|
||||
padding: var(--padding-inner);
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
.card--folder figure {
|
||||
aspect-ratio: 16/9;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card--folder figure img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||||
}
|
||||
.card--folder .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.card--folder .title {
|
||||
flex-grow: 1;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
}
|
||||
.card--folder .title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.card--folder .title {
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
}
|
||||
.card--folder .short {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card--folder ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1ch;
|
||||
color: var(--color-txt-light);
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.card--folder ul li + li::before {
|
||||
content: "|";
|
||||
padding-right: 1ch;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.card--folder ul {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
.card--folder .btn--go-to {
|
||||
position: absolute;
|
||||
right: calc(var(--padding-inner) * 1);
|
||||
bottom: var(--padding-inner);
|
||||
}
|
||||
.card--folder .btn--go-to {
|
||||
position: absolute;
|
||||
right: var(--padding-inner);
|
||||
bottom: calc(var(--padding-inner) - 3px);
|
||||
}
|
||||
.card--folder .btn--go-to svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.card--folder .btn--go-to svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--folder .btn--go-to {
|
||||
right: calc(var(--padding-inner) * 0.5);
|
||||
bottom: calc(var(--padding-inner) * 0.25);
|
||||
}
|
||||
.card--folder .btn--go-to svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
.card--folder:hover .btn--go-to {
|
||||
animation: wiggle-left 0.8s ease-in-out;
|
||||
}
|
||||
.card--folder:hover {
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--folder {
|
||||
padding: calc(var(--padding-inner) * 0.5);
|
||||
}
|
||||
.card--folder .short {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.card--open-graph {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
|
|
@ -1549,6 +1702,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
#site-header #menu-toggle svg {
|
||||
width: 30px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
#site-header #menu-toggle .close {
|
||||
display: none;
|
||||
|
|
@ -1829,6 +1983,9 @@ body main {
|
|||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article:target {
|
||||
padding-top: calc(var(--header-h) + var(--spacing) * 1);
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article a:hover {
|
||||
color: var(--grey-200);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -26,6 +26,7 @@
|
|||
@import "components/card-article";
|
||||
@import "components/card-article-small";
|
||||
@import "components/card-impact";
|
||||
@import "components/card-folder";
|
||||
@import "components/card-open-graph";
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
|
||||
.panel-left{
|
||||
width: calc((100vw - var(--max-w-cards) - var(--padding-body)*2)*0.5);
|
||||
}
|
||||
.panel-left{
|
||||
width: calc((100vw - var(--max-w-cards) - var(--padding-body)*2)*0.5);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1380px){
|
||||
margin-left: auto;
|
||||
|
|
@ -27,11 +27,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// padding-left: calc(var(--panel-w)*0.5);
|
||||
// max-width: calc(var(--max-w-cards) + calc(var(--panel-w)*0.5));
|
||||
|
||||
|
||||
|
||||
header {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
|
|
@ -57,6 +52,10 @@
|
|||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
|
||||
&:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing)*1);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--grey-200);
|
||||
}
|
||||
|
|
@ -96,6 +95,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#section__synthese {
|
||||
|
||||
max-width: var(--max-w-content);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="22.3249" width="31.1111" height="2.22222" transform="rotate(-45 0 22.3249)" />
|
||||
<rect x="1.80078" width="31.1111" height="2.22222" transform="rotate(45 1.80078 0)" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 278 B After Width: | Height: | Size: 266 B |
|
|
@ -13,6 +13,7 @@ de la vérité et de la justice.</p>
|
|||
<li class="soutenir highlight"><a href="#">Soutenez-nous</a></li>
|
||||
<li class="highlight"><a href="/enquetes">Enquêtes</a></li>
|
||||
<li class="highlight"><a href="#">Impact</a></li>
|
||||
<li><a href="/dossiers">Dossiers</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">À propos</a></li>
|
||||
<li><a href="#">Ressources</a></li>
|
||||
|
|
|
|||
37
site/templates/folders.php
Normal file
37
site/templates/folders.php
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<?php snippet('header') ?>
|
||||
<main>
|
||||
|
||||
<header class="page__header">
|
||||
<h2 class="page__title"><?= $page->title() ?></h2>
|
||||
|
||||
<div class="page__description">
|
||||
<p>
|
||||
<?= $page->chapo() ?>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto dignissimos, sit dolorum minima vel illo aliquam veniam eos assumenda cum quaerat error consequuntur laborum ipsum.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="page__sort">
|
||||
<button class="sort btn--small no-link" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
|
||||
<div class="dropdown">
|
||||
<button class="dropdown__trigger sort btn--small no-link"><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Lieux</p></button>
|
||||
<div class="dropdown__content">
|
||||
<ul>
|
||||
<li><button type="button" data-filter="france">France</button></li>
|
||||
<li><button type="button" data-filter="cisjordanie">Cisjordanie</button></li>
|
||||
<li><button type="button" data-filter="etats-unis">États-Unis</button></li>
|
||||
<li><button type="button" data-filter="gaza">Gaza</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="container-cards">
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -31,9 +31,10 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
<div class="panel-left" id="banner--page">
|
||||
<nav id="nav--page">
|
||||
<ul>
|
||||
<li><a href="#section__short">Vidéo</a></li>
|
||||
<li><a href="#">Vidéo</a></li>
|
||||
<li><a href="#section__synthese">Synthèse</a></li>
|
||||
<li><a href="#section__impacts">Impacts</a></li>
|
||||
<li><a href="#section__folder">Dossier</a></li>
|
||||
<li><a href="#section__related-articles">En lien</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -285,37 +286,33 @@ if ($relatedInvestigations->isEmpty()) {
|
|||
|
||||
|
||||
<?php
|
||||
// KIRBY TO DO : récupérer s’il y a un dossier mettre les articles en lien dans ce dossier
|
||||
// KIRBY TO DO : récupérer s’il y a un dossier mr
|
||||
?>
|
||||
|
||||
<aside class="section__article" id="section__folder">
|
||||
<h3 class="section__title">Dans le dossier « <span>Refus d’optempérer</span> »</h3>
|
||||
<h3 class="section__title">Dans le dossier</h3>
|
||||
|
||||
<?php foreach ($relatedInvestigations as $related): ?>
|
||||
<article class="card--article-small">
|
||||
<?php if ($cover = $related->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $related->title()->esc() ?>">
|
||||
<article class="card--folder">
|
||||
<figure>
|
||||
<img src="/media/pages/enquetes/l-homicide-de-nahel-merzouk/fe521629d6-1768297341/nahel-visuel1.png">
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
<div class="content">
|
||||
<h4 class="title"><a href="<?= $related->url() ?>"><?= $related->title()->esc() ?></a></h4>
|
||||
<?php if ($related->incidentDate()->isNotEmpty()): ?>
|
||||
<time datetime="<?= $related->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $related->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
|
||||
<?php endif ?>
|
||||
<?php if ($relatedKeywords = $related->keywords()->split()): ?>
|
||||
<?php if (count($relatedKeywords) > 0): ?>
|
||||
<ul class="keywords--small">
|
||||
<?php foreach ($relatedKeywords as $keyword): ?>
|
||||
<li><a href="#"><?= esc($keyword) ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
<h4 class="title"><a href="#">Refus d’optempérer</a></h4>
|
||||
|
||||
<p class="short">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam dolorum inventore itaque excepturi veritatis asperiores? Aliquid officiis reprehenderit sunt fugit dicta repudiandae dolores natus, doloremque illum, nesciunt, exercitationem vitae labore.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>4 enquêtes</li>
|
||||
<li>8 impacts</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<a class="link-block" href="<?= $related->url() ?>"></a>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank" aria-hidden="true"></a>
|
||||
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
|
||||
</aside>
|
||||
|
||||
|
|
@ -349,7 +346,8 @@ if ($relatedInvestigations->isEmpty()) {
|
|||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<a class="link-block" href="<?= $related->url() ?>"></a>
|
||||
<button class="btn--go-to"><a href="<?= $related->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="<?= $related->url() ?>" target="_blank" aria-hidden="true"></a>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue