home responsive

assets/css/components/_card-folder.scss

@@ -80,19 +80,18 @@
 
 
 
-    @media #{$x-small}{
+    // @media #{$x-small}{
-        display: flex;
+    //     display: flex;
-        flex-direction: column;
+    //     flex-direction: column;
-        padding: calc(var(--padding-inner)*0.5);
+    //     padding: calc(var(--padding-inner)*0.5);
-        // .short{ display: none; }
 
-        .content{ display: contents;}
+    //     .content{ display: contents;}
 
-        .title{ order: 1; }
+    //     .title{ order: 1; }
-        figure{ order: 2; }
+    //     figure{ order: 2; }
-        .short{ order: 3; }
+    //     .short{ order: 3; }
-        ul{ order: 4; }
+    //     ul{ order: 4; }
-    }
+    // }
 
 
  

assets/css/components/_swipper.scss

@@ -1,53 +1,71 @@
-#home__investigations{
+#home__investigations {
-  
+    --slide-padding: 30px;
+
 
     .swiper-button-prev,
-    .swiper-button-next{
+    .swiper-button-next {
         --swiper-navigation-size: 32px;
         color: var(--color-txt);
         background-color: var(--color-bg);
         height: 100%;
-        width: 60px;
+        width: var(--slide-padding);
+        // background-color: red;
 
-        svg{
+        svg {
             width: 14px;
         }
 
         &.swiper-button-disabled {
             opacity: 1;
-            svg{
+
+            svg {
                 opacity: 0.05;
             }
         }
     }
 
-    .swiper-button-prev{
+    .swiper-button-prev {
         left: 0px;
         top: 0px;
+        justify-content: flex-start;
     }
 
-    .swiper-button-next{
+    .swiper-button-next {
         right: 0px;
         top: 0px;
+        justify-content: flex-end;
     }
 
-    .swiper-slide{
+    .swiper-slide {
-        padding-left: 60px;
+        padding-left: var(--slide-padding);
-        padding-right: 60px;
+        padding-right: var(--slide-padding);
     }
-    .swiper-pagination{
+
+    .swiper-pagination {
         position: relative;
         margin-top: calc(var(--spacing)*1);
 
-        .swiper-pagination-bullet{
+        .swiper-pagination-bullet {
             width: 15px;
             height: 4px;
             border-radius: 2px;
             background: var(--color-txt-light);
         }
 
-        .swiper-pagination-bullet-active{
+        .swiper-pagination-bullet-active {
             background: var(--color-txt);
         }
     }
+
+    @media #{$x-small} {
+
+        .swiper-button-prev,
+        .swiper-button-next {
+            display: none;
+        }
+
+        .swiper-slide {
+            padding: 0px;
+        }
+    }
 }

assets/css/partials/_page-header.scss

@@ -25,9 +25,13 @@
 main .page__header {
     max-width: var(--max-w-cards);
     margin-inline: auto;
-    margin-top: calc(var(--spacing) * 1);
+    margin-top: calc(var(--spacing) * 3);
     margin-bottom: calc(var(--spacing) * 2);
  
+    @media #{$x-small} {
+      margin-top: calc(var(--spacing) * 2);
+
+    }
 
     .page__title {
       max-width: var(--max-w-content);

assets/css/style.css

@@ -1565,28 +1565,6 @@ button.sort[data-sort-type=up] .arrow {
   background-color: var(--grey-950);
   border-color: var(--color-txt);
 }
-@media screen and (max-width: 560px) {
-  .card--folder {
-    display: flex;
-    flex-direction: column;
-    padding: calc(var(--padding-inner) * 0.5);
-  }
-  .card--folder .content {
-    display: contents;
-  }
-  .card--folder .title {
-    order: 1;
-  }
-  .card--folder figure {
-    order: 2;
-  }
-  .card--folder .short {
-    order: 3;
-  }
-  .card--folder ul {
-    order: 4;
-  }
-}
 
 @container cardfolder (width < 680px) {
   figure {
@@ -1688,13 +1666,16 @@ button.sort[data-sort-type=up] .arrow {
     aspect-ratio: inherit;
   }
 }
+#home__investigations {
+  --slide-padding: 30px;
+}
 #home__investigations .swiper-button-prev,
 #home__investigations .swiper-button-next {
   --swiper-navigation-size: 32px;
   color: var(--color-txt);
   background-color: var(--color-bg);
   height: 100%;
-  width: 60px;
+  width: var(--slide-padding);
 }
 #home__investigations .swiper-button-prev svg,
 #home__investigations .swiper-button-next svg {
@@ -1711,14 +1692,16 @@ button.sort[data-sort-type=up] .arrow {
 #home__investigations .swiper-button-prev {
   left: 0px;
   top: 0px;
+  justify-content: flex-start;
 }
 #home__investigations .swiper-button-next {
   right: 0px;
   top: 0px;
+  justify-content: flex-end;
 }
 #home__investigations .swiper-slide {
-  padding-left: 60px;
+  padding-left: var(--slide-padding);
-  padding-right: 60px;
+  padding-right: var(--slide-padding);
 }
 #home__investigations .swiper-pagination {
   position: relative;
@@ -1733,6 +1716,15 @@ button.sort[data-sort-type=up] .arrow {
 #home__investigations .swiper-pagination .swiper-pagination-bullet-active {
   background: var(--color-txt);
 }
+@media screen and (max-width: 560px) {
+  #home__investigations .swiper-button-prev,
+  #home__investigations .swiper-button-next {
+    display: none;
+  }
+  #home__investigations .swiper-slide {
+    padding: 0px;
+  }
+}
 
 #site-header {
   z-index: var(--z-header);
@@ -2003,9 +1995,14 @@ body main {
 main .page__header {
   max-width: var(--max-w-cards);
   margin-inline: auto;
-  margin-top: calc(var(--spacing) * 1);
+  margin-top: calc(var(--spacing) * 3);
   margin-bottom: calc(var(--spacing) * 2);
 }
+@media screen and (max-width: 560px) {
+  main .page__header {
+    margin-top: calc(var(--spacing) * 2);
+  }
+}
 main .page__header .page__title {
   max-width: var(--max-w-content);
   text-transform: uppercase;
@@ -2049,35 +2046,15 @@ main .page__header .description-medium {
   }
 }
 
-.section--home {
-  border-bottom: var(--border-light);
-}
 .section--home .btn--bold-inline {
   text-transform: none;
+  margin-top: calc(var(--spacing) * 1.5);
 }
 .section--home .btn--bold-inline svg {
   width: 12px;
   height: 12px;
   top: 0px;
 }
-.section--home .section--inner {
-  max-width: 1300px;
-  margin: calc(var(--spacing) * 3) auto;
-  display: grid;
-  --gap: calc(var(--padding-body)*2);
-  grid-template-columns: repeat(2, calc((100% - var(--gap)) * 0.5));
-  grid-gap: var(--gap);
-}
-.section--home .col-left {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-.section--home .col-right {
-  width: 100%;
-  height: 100%;
-}
 .section--home .title-section {
   font-size: var(--fs-medium);
   font-weight: normal;
@@ -2086,23 +2063,93 @@ main .page__header .description-medium {
   margin-bottom: calc(var(--spacing) * 1);
 }
 .section--home .description-section {
+  max-width: 42ch;
   font-size: var(--fs-medium);
   line-height: 1.1;
-  margin-bottom: calc(var(--spacing) * 1.5);
+}
+@media screen and (min-width: 1080px) {
+  .section--home {
+    border-bottom: var(--border-light);
+  }
+  .section--home .section--inner {
+    max-width: 1280px;
+    margin: calc(var(--spacing) * 3) auto;
+    display: grid;
+    --gap: calc(var(--padding-body)*2);
+    grid-template-columns: 1fr 640px;
+    grid-gap: var(--gap);
+  }
+  .section--home .col-left {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .section--home .col-right {
+    width: 100%;
+    height: 100%;
+  }
+}
+@media screen and (max-width: 1080px) {
+  .section--home#home__investigations, .section--home#home__hero {
+    border-bottom: var(--border-light);
+  }
+  .section--home .section--inner {
+    margin-top: calc(var(--spacing) * 3);
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .section--home .col-left {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .section--home .col-left .title-section {
+    width: 100%;
+  }
+}
+@media screen and (max-width: 560px) {
+  .section--home .section--inner {
+    margin-top: calc(var(--spacing) * 2);
+    margin-bottom: calc(var(--spacing) * 4);
+    margin-bottom: 0px;
+  }
+  .section--home .col-left {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+  .section--home .title-section {
+    margin-bottom: calc(var(--spacing) * 0.25);
+  }
+  .section--home .description-section {
+    max-width: 42ch;
+    font-size: var(--fs-normal);
+  }
+  .section--home .btn--bold-inline {
+    color: var(--color-txt-light);
+    border-color: var(--color-txt-light);
+    height: calc(var(--h-block) * 0.75);
+    margin-top: calc(var(--spacing) * 0.75);
+  }
+  .section--home .btn--bold-inline a {
+    padding: 0 1ch;
+    padding-top: 2px;
+  }
+  .section--home .btn--bold-inline svg {
+    fill: var(--color-txt-light);
+  }
 }
 
 #home__investigations .home-investigations-slider {
   max-width: 500px;
   height: auto;
 }
-#home__investigations .card--article {
-  align-items: flex-start;
-  justify-content: flex-start;
-}
 #home__investigations .card--article .time-alone {
   display: block;
 }
-#home__investigations .card--article .description, #home__investigations .card--article .dl, #home__investigations .card--article .pin {
+#home__investigations .card--article .description,
+#home__investigations .card--article .dl,
+#home__investigations .card--article .pin {
   display: none;
 }
 
@@ -2110,6 +2157,13 @@ main .page__header .description-medium {
   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;
+  }
+}
 #home__hero .section--inner {
   display: block;
 }
@@ -2119,6 +2173,11 @@ main .page__header .description-medium {
   line-height: 1.1;
   max-width: 26ch;
 }
+@media screen and (max-width: 560px) {
+  #home__hero .baseline {
+    font-size: 34px;
+  }
+}
 #home__hero button {
   margin-top: calc(var(--spacing) * 1);
 }

assets/css/template/_home.scss

@@ -1,9 +1,10 @@
-.section--home{
+.section--home {
-    border-bottom: var(--border-light);
 
-    .btn--bold-inline{
+    .btn--bold-inline {
         text-transform: none;
-        svg{
+        margin-top: calc(var(--spacing)*1.5);
+
+        svg {
             width: 12px;
             height: 12px;
             top: 0px;
@@ -12,31 +13,8 @@
     }
 
 
-    .section--inner{
-        max-width: 1300px;
-        margin: calc(var(--spacing)*3) auto;
-        display: grid;
-        --gap: calc(var(--padding-body)*2);
-        grid-template-columns: repeat(2, calc((100% - var(--gap))*0.5));
-        grid-gap: var(--gap);
-    }
 
-
+    .title-section {
-    .col-left{
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .col-right{
-        width: 100%;
-        height: 100%;
-    }
-
-    
-
-    .title-section{
         font-size: var(--fs-medium);
         font-weight: normal;
         text-transform: uppercase;
@@ -44,28 +22,138 @@
         margin-bottom: calc(var(--spacing)*1);
     }
 
-    .description-section{
+    .description-section {
+        max-width: 42ch;
         font-size: var(--fs-medium);
         line-height: 1.1;
-        margin-bottom: calc(var(--spacing)*1.5);
     }
+
+
+    @media #{$medium-up} {
+
+        border-bottom: var(--border-light);
+
+        .section--inner {
+            max-width: 1280px;
+            margin: calc(var(--spacing)*3) auto;
+            display: grid;
+            --gap: calc(var(--padding-body)*2);
+            grid-template-columns: 1fr 640px;
+            grid-gap: var(--gap);
+        }
+
+
+        .col-left {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+
+        }
+
+        .col-right {
+            width: 100%;
+            height: 100%;
+        }
+
+
+    }
+
+    @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);
+        }
+
+        .btn--bold-inline {
+            color: var(--color-txt-light);
+            border-color: var(--color-txt-light);
+            height: calc(var(--h-block) * 0.75);
+            // margin: 0 auto;
+            margin-top: calc(var(--spacing)*0.75);
+
+            a {
+                padding: 0 1ch;
+                padding-top: 2px;
+            }
+
+            svg {
+                fill: var(--color-txt-light);
+            }
+        }
+    }
+
+
+
+
+
+
+
+
 }
 
 
 
 
-#home__investigations{
+#home__investigations {
 
-    .home-investigations-slider{
+    .home-investigations-slider {
         max-width: 500px;
         height: auto;
     }
 
-    .card--article{
+    .card--article {
-        align-items: flex-start;
+        // align-items: flex-start;
-        justify-content: flex-start;
+        // justify-content: flex-start;
-        .time-alone{ display: block; }
+
-        .description, .dl, .pin{
+        .time-alone {
+            display: block;
+        }
+
+        .description,
+        .dl,
+        .pin {
             display: none;
         }
     }
@@ -74,34 +162,44 @@
 }
 
 
-#home__hero{
+#home__hero {
     margin-top: calc(var(--spacing)*3);
     margin-bottom: calc(var(--spacing)*3);
 
- 
+    @media #{$x-small} {
-    .section--inner{
+        margin-top: calc(var(--spacing)*2.5);
+        padding-bottom: calc(var(--spacing)*1.5);
+        margin-bottom: 0px;
+
+    }
+
+
+    .section--inner {
         display: block;
     }
-    
+
-    .baseline{
+    .baseline {
         font-family: var(--title);
         font-size: 45px;
         line-height: 1.1;
         max-width: 26ch;
-        // max-width: var(--max-w-content);
+
+        @media #{$x-small} {
+            font-size: 34px;
+        }
     }
 
-    button{
+    button {
         margin-top: calc(var(--spacing)*1);
     }
 
-       
+
-    
+
 }
 
 
-#home__folders{
+#home__folders {
-    .card--folder{
+    .card--folder {
         margin-bottom: calc(var(--spacing)*0.5);
     }
 }

site/snippets/header.php

@@ -40,7 +40,7 @@
     <nav id="nav-highlight">
         <ul>
             <li><a href="/enquetes">Enquêtes</a></li>
-            <li><a href="#">Impact</a></li>
+            <li><a href="/impacts">Impact</a></li>
             <li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
         </ul>
     </nav>

site/snippets/nav.php

@@ -12,7 +12,7 @@ de la vérité et de la justice.</p>
     <ul>
         <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 class="highlight"><a href="/impacts">Impact</a></li>
         <li><a href="/dossiers">Dossiers</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">À propos</a></li>

site/templates/investigation-summary.php

@@ -287,32 +287,54 @@ if ($relatedInvestigations->isEmpty()) {
 // KIRBY TO DO : récupérer s’il y a un dossier mr
 ?>
 
+<?php
+// Récupérer le dossier associé à cette investigation
+$folderSlug = $page->folder()->value();
+$folder = null;
+if (!empty($folderSlug) && site()->find('dossiers')) {
+    $folder = site()->find('dossiers')->children()->filterBy('slug', $folderSlug)->first();
+}
+
+if ($folder):
+?>
 <aside class="section__article" id="section__folder">
     <h3 class="section__title">Dans le dossier</h3>
 
     <article class="card--folder">
-         <figure>
+        <?php if ($cover = $folder->cover()->toFile()): ?>
-            <img src="/media/pages/enquetes/l-homicide-de-nahel-merzouk/fe521629d6-1768297341/nahel-visuel1.png">
+        <figure>
+            <img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
         </figure>
+        <?php endif ?>
         <div class="content">
-                 <h4 class="title"><a href="#"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span>Refus d’optempérer</a></h4>
+            <h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
 
-                 <p class="short">
+            <?php if ($folder->description()->isNotEmpty()): ?>
-                    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 class="short"><?= $folder->description()->excerpt(200) ?></p>
-                 </p>
+            <?php endif ?>
 
-                 <ul>
+            <?php
-                    <li>4 enquêtes</li>
+            // Compter les enquêtes associées à ce dossier
-                    <li>8 impacts</li>
+            $investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($folder) {
-                </ul>
+                return $investigation->folder()->value() === $folder->slug();
+            })->count();
+            ?>
+
+            <ul>
+                <?php if ($investigationsCount > 0): ?>
+                    <li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
+                <?php endif ?>
+                <li>8 impacts</li>
+            </ul>
                 
         </div>
-        <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
+        <button class="btn--go-to"><a href="<?= $folder->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
-        <a class="link-block" href="#" target="_blank" aria-hidden="true"></a>
+        <a class="link-block" href="<?= $folder->url() ?>" target="_blank" aria-hidden="true"></a>
 
     </article>
 
 </aside>
+<?php endif ?>
 
 
 

site/templates/investigations.php

@@ -7,7 +7,6 @@
     <div class="description-medium">
     <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>