style page-simple + asides

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

@@ -32,7 +32,6 @@
         align-items: center;
         padding: 5px 1ch 0 1ch;
 
-
         font-size: var(--fs-xsmall);
         text-transform: uppercase;
         font-weight: 500;

assets/css/components/_text.scss

@@ -91,6 +91,4 @@
 
 
 
-    
-
 }

assets/css/partials/_page-aside.scss

@@ -0,0 +1,13 @@
+    .page__aside,
+    .investigation__aside{
+    max-width: var(--max-w-cards);
+    margin-inline: auto;
+    padding-top: calc(var(--spacing)*4);
+
+    .aside__title{
+      font-weight: 500;
+      text-transform: uppercase;
+      margin-bottom: calc(var(--spacing)*1)
+      
+    }
+  }

assets/css/style.css

@@ -2910,6 +2910,19 @@ main .page__header .page__description {
   max-width: var(--max-w-content);
 }
 
+.page__aside,
+.investigation__aside {
+  max-width: var(--max-w-cards);
+  margin-inline: auto;
+  padding-top: calc(var(--spacing) * 4);
+}
+.page__aside .aside__title,
+.investigation__aside .aside__title {
+  font-weight: 500;
+  text-transform: uppercase;
+  margin-bottom: calc(var(--spacing) * 1);
+}
+
 .container-cards {
   max-width: var(--max-w-cards);
   margin: 0 auto;
@@ -3101,16 +3114,6 @@ main .page__header .page__description {
 [data-template=investigation] main #investigation__dl ul:not(.keywords) li {
   padding-bottom: 0.2em;
 }
-[data-template=investigation] main .investigation__aside {
-  max-width: var(--max-w-cards);
-  margin-inline: auto;
-  padding-top: calc(var(--spacing) * 4);
-}
-[data-template=investigation] main .investigation__aside .aside__title {
-  font-weight: 500;
-  text-transform: uppercase;
-  margin-bottom: calc(var(--spacing) * 1);
-}
 
 #investigation__content {
   padding-top: calc(var(--spacing) * 4);

assets/css/style.scss

@@ -37,6 +37,7 @@
 @import "partials/site-footer";
 @import "partials/main-layout";
 @import "partials/page-header";
+@import "partials/page-aside";
 @import "partials/container-cards";
 
 @import "template/home";

assets/css/template/_investigation.scss

@@ -66,18 +66,7 @@
   }
 
 
-  .investigation__aside{
-    max-width: var(--max-w-cards);
-    margin-inline: auto;
-    padding-top: calc(var(--spacing)*4);
 
-    .aside__title{
-      font-weight: 500;
-      text-transform: uppercase;
-      margin-bottom: calc(var(--spacing)*1)
-      
-    }
-  }
 
 
 

site/templates/impact.php

@@ -36,19 +36,47 @@
         <?= $page->body()->toBlocks() ?>
     <?php endif ?>
 
+    </div>
+
     <?php $investigations = $page->linkedInvestigations()->toPages() ?>
     <?php if ($investigations->isNotEmpty()): ?>
-    <aside class="impact__investigations">
+    <aside class="investigation__aside" id="related-investigations">
-        <h3>Enquêtes liées</h3>
+        <h3 class="aside__title">Enquêtes liées</h3>
-        <ul class="investigations">
+
-            <?php foreach ($investigations as $investigation): ?>
+        <?php foreach ($investigations as $investigation): ?>
-            <li><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></li>
+        <article class="card--article-small">
-            <?php endforeach ?>
+            <?php if ($cover = $investigation->cover()->toFile()): ?>
-        </ul>
+            <figure>
+                <img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
+            </figure>
+            <?php endif ?>
+            <div class="content">
+                <p class="type">Enquête</p>
+                <h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
+                <?php if ($investigation->incidentDate()->isNotEmpty()): ?>
+                <time class="date" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
+                <?php endif ?>
+                <?php if ($investigation->chapo()->isNotEmpty()): ?>
+                <p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
+                <?php endif ?>
+            </div>
+            <button class="btn--go-to"><a href="<?= $investigation->url() ?>"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
+            <a class="link-block" href="<?= $investigation->url() ?>" aria-hidden="true"></a>
+        </article>
+        <?php endforeach ?>
+
+        <div class="see-more">
+            <button class="btn--bold-inline">
+                <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>
     </aside>
     <?php endif ?>
 
-</div>
+
 
 </main>
 <?php snippet('footer') ?>

site/templates/investigation.php

@@ -279,7 +279,9 @@ $hasVideo = $videoPreview || $page->videoUrl()->isNotEmpty();
         <?php endforeach ?>
     </div>
 
-<div class="investigation__aside" id="impacts">
+</div>
+
+<aside class="investigation__aside" id="impacts">
     <h3 class="aside__title">Impacts</h3>
 
     <!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées -->
@@ -321,7 +323,7 @@ $hasVideo = $videoPreview || $page->videoUrl()->isNotEmpty();
     </div>
 
 
-</div>
+</aside>
 
 
 <?php
@@ -461,7 +463,7 @@ if ($package):
 
 </aside>
 
-</div>
+
 <?php endif ?>
 
 </main>