arrow go-to

assets/css/base/_body.scss

@@ -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{

assets/css/base/_responsive.scss

@@ -11,3 +11,8 @@ $paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
 @media #{$medium}{
 
 }
+
+
+@media #{$x-small}{
+
+}

assets/css/components/_buttons.scss

@@ -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{

assets/css/components/_card-article-small.scss

@@ -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);

assets/css/components/_card-folder.scss

@@ -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; }
+    }
+
+
+ 
+}
+

assets/css/partials/_site-header.scss

@@ -91,6 +91,7 @@
     cursor: pointer;
     svg{
       width: 30px;
+      fill: var(--color-txt);
     }
     .close{ display: none; }
   

assets/css/style.css

@@ -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);
 }

assets/css/style.scss

@@ -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";
 
 

assets/css/template/_investigation-summary.scss

@@ -4,9 +4,9 @@
   max-width: var(--max-w-cards);
   margin-inline: auto;
 
-    .panel-left{
+  .panel-left{
-        width: calc((100vw - var(--max-w-cards) - var(--padding-body)*2)*0.5);
+      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);

assets/icons/close.svg

@@ -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>

site/snippets/nav.php

@@ -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>

site/templates/folders.php

@@ -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') ?>

site/templates/investigation-summary.php

@@ -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 «&nbsp;<span>Refus d’optempérer</span>&nbsp;»</h3>
+    <h3 class="section__title">Dans le dossier</h3>
 
-    <?php foreach ($relatedInvestigations as $related): ?>
+    <article class="card--folder">
-    <article class="card--article-small">
+         <figure>
-        <?php if ($cover = $related->cover()->toFile()): ?>
+            <img src="/media/pages/enquetes/l-homicide-de-nahel-merzouk/fe521629d6-1768297341/nahel-visuel1.png">
-        <figure>
-            <img src="<?= $cover->url() ?>" alt="<?= $related->title()->esc() ?>">
         </figure>
-        <?php endif ?>
         <div class="content">
-            <h4 class="title"><a href="<?= $related->url() ?>"><?= $related->title()->esc() ?></a></h4>
+                 <h4 class="title"><a href="#">Refus d’optempérer</a></h4>
-            <?php if ($related->incidentDate()->isNotEmpty()): ?>
+
-            <time datetime="<?= $related->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $related->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
+                 <p class="short">
-            <?php endif ?>
+                    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.
-            <?php if ($relatedKeywords = $related->keywords()->split()): ?>
+                 </p>
-            <?php if (count($relatedKeywords) > 0): ?>
+
-            <ul class="keywords--small">
+                 <ul>
-                <?php foreach ($relatedKeywords as $keyword): ?>
+                    <li>4 enquêtes</li>
-                <li><a href="#"><?= esc($keyword) ?></a></li>
+                    <li>8 impacts</li>
-                <?php endforeach ?>
+                </ul>
-            </ul>
+                
-            <?php endif ?>
-            <?php endif ?>
         </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 ?>