add icon folder

assets/css/components/_card-folder.scss

@@ -31,6 +31,15 @@
              font-size: var(--fs-normal);
             }
 
+            .icon{
+                padding-right: 1ch;
+                svg{
+                    height: 15px;
+                    width: 15px;
+                    fill: var(--color-txt);
+                }
+            }
+
     }
 
     .short{
@@ -75,7 +84,6 @@
         display: flex;
         flex-direction: column;
         padding: calc(var(--padding-inner)*0.5);
-        background-color: yellow;
         // .short{ display: none; }
 
         .content{ display: contents;}
@@ -93,6 +101,19 @@
 
 
 
+
+
+@container cardfolder (width < 680px) {
+    figure{
+        aspect-ratio: inherit;
+        width: 100%;
+        height: 100%;
+    }
+    .short{
+        margin-top: calc(var(--spacing)*0.5);
+    }
+}
+
 @container cardfolder (width < 520px) {
     figure{
         aspect-ratio: inherit;
@@ -103,4 +124,5 @@
         font-size: var(--fs-small);
         
     }
+   
 }

assets/css/style.css

@@ -1497,6 +1497,14 @@ button.sort[data-sort-type=up] .arrow {
     font-size: var(--fs-normal);
   }
 }
+.card--folder .title .icon {
+  padding-right: 1ch;
+}
+.card--folder .title .icon svg {
+  height: 15px;
+  width: 15px;
+  fill: var(--color-txt);
+}
 .card--folder .short {
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -1562,7 +1570,6 @@ button.sort[data-sort-type=up] .arrow {
     display: flex;
     flex-direction: column;
     padding: calc(var(--padding-inner) * 0.5);
-    background-color: yellow;
   }
   .card--folder .content {
     display: contents;
@@ -1581,6 +1588,16 @@ button.sort[data-sort-type=up] .arrow {
   }
 }
 
+@container cardfolder (width < 680px) {
+  figure {
+    aspect-ratio: inherit;
+    width: 100%;
+    height: 100%;
+  }
+  .short {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
+}
 @container cardfolder (width < 520px) {
   figure {
     aspect-ratio: inherit;

assets/icons/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.083 4c1.38 1.612 2.578 3 4.917 3h11v13h-20v-16h4.083zm.917-2h-7v20h24v-17h-13c-1.629 0-2.305-1.058-4-3z"/></svg>

site/templates/folders.php

@@ -28,7 +28,7 @@
     
 
     <div class="content">
-        <h4 class="title"><a href="<?= $folder->url() ?>"><?= $folder->title()->esc() ?></a></h4>
+        <h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
 
         <?php if ($folder->description()->isNotEmpty()): ?>
         <p class="short"><?= $folder->description()->excerpt(200) ?></p>

site/templates/home.php

@@ -22,10 +22,13 @@
   <div class="section--inner">
 
   <div class="col-left">
-    <h2 class="title-section">Enquêtes</h2>
+    <?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">
-      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum quasi cupiditate iste odio adipisci quae, doloribus quas facilis eaque id labore nam, illum animi. Eaque iusto beatae error consequatur totam.
+      <?= $investigationsPage->chapo() ?>
     </p>
+    <?php endif ?>
     <button class="btn--bold-inline">
       <a href="/enquetes">
       <span class="text">Voir les enquêtes</span>
@@ -57,10 +60,12 @@ foreach ($latestInvestigations as $investigation):
 
     <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 ?>
+
     <time class="time-alone" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
 
-   
-
     </div>
 
     <?php if ($keywords = $investigation->keywords()->split()): ?>
@@ -110,12 +115,15 @@ foreach ($latestInvestigations as $investigation):
   <div class="section--inner">
 
   <div class="col-left">
-    <h2 class="title-section">Impacts</h2>
+    <?php $impactsPage = site()->find('impacts'); ?>
+    <h2 class="title-section"><?= $impactsPage ? $impactsPage->title() : 'Impacts' ?></h2>
+    <?php if ($impactsPage && $impactsPage->chapo()->isNotEmpty()): ?>
     <p class="description-section">
-      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum quasi cupiditate iste odio adipisci quae, doloribus quas facilis eaque id labore nam, illum animi. Eaque iusto beatae error consequatur totam.
+      <?= $impactsPage->chapo() ?>
     </p>
+    <?php endif ?>
     <button class="btn--bold-inline">
-      <a href="#">
+      <a href="/impacts">
       <span class="text">Voir les impacts</span>
       <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
       </a>
@@ -176,10 +184,13 @@ foreach ($latestInvestigations as $investigation):
   <div class="section--inner">
 
   <div class="col-left">
-    <h2 class="title-section">Dossiers</h2>
+    <?php $foldersPage = site()->find('dossiers'); ?>
+    <h2 class="title-section"><?= $foldersPage ? $foldersPage->title() : 'Dossiers' ?></h2>
+    <?php if ($foldersPage && $foldersPage->chapo()->isNotEmpty()): ?>
     <p class="description-section">
-      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum quasi cupiditate iste odio adipisci quae, doloribus quas facilis eaque id labore nam, illum animi. Eaque iusto beatae error consequatur totam.
+      <?= $foldersPage->chapo() ?>
     </p>
+    <?php endif ?>
     <button class="btn--bold-inline">
       <a href="/dossiers">
       <span class="text">Voir les dossiers</span>
@@ -204,7 +215,7 @@ foreach ($latestFolders as $folder):
     <?php endif ?>
 
     <div class="content">
-        <h4 class="title"><a href="<?= $folder->url() ?>"><?= $folder->title()->esc() ?></a></h4>
+        <h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
 
         <?php if ($folder->description()->isNotEmpty()): ?>
         <p class="short"><?= $folder->description()->excerpt(200) ?></p>

site/templates/investigation-summary.php

@@ -295,7 +295,7 @@ if ($relatedInvestigations->isEmpty()) {
             <img src="/media/pages/enquetes/l-homicide-de-nahel-merzouk/fe521629d6-1768297341/nahel-visuel1.png">
         </figure>
         <div class="content">
-                 <h4 class="title"><a href="#">Refus d’optempérer</a></h4>
+                 <h4 class="title"><a href="#"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span>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.