Home, new version

assets/css/components/_buttons.scss

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

assets/css/style.css

@@ -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 {
+@media screen and (min-width: 768px) {
-  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) {
   .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;
+    max-width: 1600px;
-    margin: calc(var(--spacing) * 4) auto;
+    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%;
+    align-self: start;
-    display: flex;
+    position: sticky;
-    flex-direction: column;
+    top: calc(var(--header-h) + var(--spacing) * 4);
-    align-items: flex-start;
   }
   .section--home .col-right {
     width: 100%;
     height: 100%;
   }
 }
-#home__investigations .home-investigations-slider {
+@media screen and (max-width: 768px) {
-  max-width: 500px;
+  .section--home .card--article,
-  height: auto;
+  .section--home .card--impact {
-}
+    margin-bottom: calc(var(--spacing) * 1);
-#home__investigations .card--article .time-alone {
+  }
-  display: block;
+  .section--home .baseline-section {
-}
+    font-size: var(--fs-big);
-#home__investigations .card--article .dl,
+  }
-#home__investigations .card--article .pin {
-  display: none;
 }
 
-#home__hero {
+@media screen and (min-width: 768px) {
-  margin-top: calc(var(--spacing) * 3);
+  #home__investigations .col-right {
-  margin-bottom: calc(var(--spacing) * 3);
+    display: grid;
-}
+    grid-template-columns: 1fr 1fr;
-@media screen and (max-width: 560px) {
+    gap: var(--padding-body);
-  #home__hero {
+  }
-    margin-top: calc(var(--spacing) * 2.5);
+  #home__investigations .col-right .card--article:first-of-type {
-    padding-bottom: calc(var(--spacing) * 1.5);
+    grid-column: span 2;
-    margin-bottom: 0px;
+    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;
 }

assets/css/template/_home.scss

@@ -1,41 +1,60 @@
 .section--home {
 
-    .title-section {
+    @media #{$small-up} {
-        font-weight: normal;
+        border-bottom: var(--border-light);
-        font-size: var(--fs-big);
+    }
+
+    @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 {
+    .btn--bold-inline{
-        max-width: 42ch;
+        text-transform: none;
-        font-size: var(--fs-normal);
+        font-weight: 500;
-        line-height: 1.1;
+        font-size: var(--fs-small);
-    }
+        .icon{
-
+            position: relative;
-    .btn--home{
+            top: 2px;
-        margin-top: calc(var(--spacing)*2);
+        }
+        svg{
+            width: 13px;
+            height: 13px;
+        }
     }
 
 
     @media #{$medium-up} {
 
-        border-bottom: var(--border-light);
-
         .section--inner {
-            max-width: 1280px;
+            max-width: 1600px;
-            margin: calc(var(--spacing)*4) auto;
+            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%;
+            align-self: start;
-            display: flex;
+            position: sticky;
-            flex-direction: column;
+            top: calc(var(--header-h) + var(--spacing)*4);
-            align-items: flex-start;
 
         }
 
@@ -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 {
+     @media #{$small-up} {
-        max-width: 500px;
+        .col-right{
-        height: auto;
+            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: grid;
-            display: block;
+                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;
+
-    }
+}
+
+
+
+
+
+
+
 
-}

site/templates/home.php

@@ -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&nbsp;service du public, de&nbsp;la&nbsp;vérité et de&nbsp;la&nbsp;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'); ?>
+    <p class="baseline-section">Index est une ONG d’investigation numérique, au&nbsp;service du public, de&nbsp;la&nbsp;vérité et de&nbsp;la&nbsp;justice.</p>
-    <h2 class="title-section"><?= $investigationsPage ? $investigationsPage->title() : 'Enquêtes' ?></h2>
+    <button class="btn--bold-inline">
-    <?php if ($investigationsPage && $investigationsPage->chapo()->isNotEmpty()): ?>
+        <a href="#">
-    <p class="description-section">
+        <span class="text">En savoir plus</span>
-      <?= $investigationsPage->chapo() ?>
+        <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
-    </p>
+        </a>
-    <?php endif ?>
+    </button>
-    <button class="btn--home">
+  </div>
-      <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">
+    <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">
+    <?php $latestInvestigations = site()->find('enquetes')->children()->listed()->sortBy('created', 'desc')->limit(3);
-        <div class="swiper-slide__inner">
+        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="see-more">
-  <div class="swiper-button-prev"></div>
+        <button class="btn--bold-inline">
-  <div class="swiper-button-next"></div>
+          <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> <!-- col-right-->
-  <div class="swiper-pagination"></div>
-</div> <!-- home-investigations-slider -->
-
-</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>
+  <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>
-    <?php if ($impactsPage && $impactsPage->chapo()->isNotEmpty()): ?>
+
-    <p class="description-section">
+
-      <?= $impactsPage->chapo() ?>
+    <button class="btn--bold-inline">
-    </p>
-    <?php endif ?>
-    <button class="btn--home">
       <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>