harmonize header page

assets/css/base/_body.scss

@@ -29,9 +29,6 @@ body{
 
     color: var(--color-txt);
     background-color: var(--color-bg);
-    width: 100vw;
-    overflow-x: hidden;
-      
 }
 
 img{

assets/css/components/_card-article.scss

@@ -17,7 +17,7 @@
         position: absolute;
         top: var(--padding-inner);
         left: var(--padding-inner);
-        z-index: 200;
+        z-index: 10;
         width: 24px;
         height: 24px;
         border-radius: var(--radius-small);

assets/css/components/_card-folder.scss

@@ -1,5 +1,6 @@
 .card--folder{
     position: relative;
+    max-width: var(--max-w-cards);
 
     border: var(--border-light);
     padding: var(--padding-inner);
@@ -21,6 +22,8 @@
         margin-bottom: 0.25em;  
          text-wrap: balance;
         max-width: 42ch;
+        text-transform: uppercase;
+        padding-top: calc(var(--spacing)*0.25);
         a{ text-decoration: none;}
        
          @media #{$small}{
@@ -30,7 +33,7 @@
     }
 
     .short{
-          @include clamp(2);
+          @include clamp(3);
     }
 
     ul{
@@ -64,9 +67,20 @@
     }
 
 
+
+
     @media #{$x-small}{
+        display: flex;
+        flex-direction: column;
         padding: calc(var(--padding-inner)*0.5);
-        .short{ display: none; }
+        // .short{ display: none; }
+
+        .content{ display: contents;}
+
+        .title{ order: 1; }
+        figure{ order: 2; }
+        .short{ order: 3; }
+        ul{ order: 4; }
     }
 
 

assets/css/components/_dropdown.scss

@@ -152,3 +152,19 @@
 }
 
 
+
+@media screen and (max-width: 1280px){
+
+    [data-template="investigations"]{
+        .dropdown .dropdown__content {
+            left: auto;
+            right: 0;
+            &::before{
+                left: auto;
+                right: 16px;
+        
+            }
+        }
+    }
+
+}

assets/css/components/_page-header.scss

@@ -1,21 +0,0 @@
-.page__header{
-      max-width: var(--max-w-cards);
-        margin: calc(var(--spacing)*1.5) auto;
-
-
-    .page__title{
-        font-size: var(--fs-big);
-        font-weight: normal;
-        text-transform: uppercase;
-    }
-
-    .page__description{
-        margin-top: calc(var(--spacing)*1);
-        p{
-            font-size: var(--fs-medium);
-            max-width: 54ch;
-        
-        }
-    }
-
-}

assets/css/components/_sort.scss

@@ -1,6 +1,4 @@
 button.sort{
-
-
     .arrow{
         line-height: 0;
         --size:  12px;
@@ -29,3 +27,16 @@ button.sort{
     }
 
 }
+
+
+.page__sort {
+    margin-bottom: calc(var(--spacing) * 1);
+    display: flex;
+    justify-content: right;
+    grid-gap: var(--padding-inner);
+    width: 100%;
+    max-width: var(--max-w-cards);
+    margin-inline: auto;
+    // z-index: calc(var(--z-header) - 100);
+
+}

assets/css/components/_tags.scss

@@ -21,27 +21,4 @@
 }
 
 
-.tag-inline{
 
-    height: calc(var(--h-block)*0.75);
-    // border-radius: calc(var(--h-block)*0.75/2);
-    border-radius: var(--radius-small);
-    border: var(--border-medium);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 1.5ch;
-    padding-top: 3px;
-
-    font-size: var(--fs-small);
-    line-height: 1;
-
-    background-color: var(--color-bg);
-    color: var(--color-txt-light);
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-transform: uppercase;
-
-}

assets/css/partials/_container-cards.scss

@@ -0,0 +1,23 @@
+.container-cards{
+    max-width: var(--max-w-cards);
+    margin: 0 auto;
+    display: grid;
+    grid-gap: calc(var(--spacing)*1);
+}
+
+.container-cards__investigations {
+  
+    @media #{$x-small-up} {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+      grid-auto-rows: minmax(100px, auto);
+      grid-gap: calc(var(--padding-body) * 1.5);
+      margin-bottom: 10vh;
+    }
+    @media #{$x-small} {
+      margin-bottom: 10vh;
+      .card--article {
+        // margin-bottom: calc(var(--spacing) * 1.5);
+      }
+    }
+  }

assets/css/partials/_main-layout.scss

@@ -1,6 +1,8 @@
 body{
     min-height: 100dvh;
     min-height: 100vh;
+    width: 100vw;
+    overflow-x: hidden;
 
     display: flex;
     flex-direction: column;
@@ -11,6 +13,11 @@ body{
         padding: 0 var(--padding-body);
         padding-top: var(--header-h);
         padding-bottom: calc(var(--spacing)*2);
+
+        min-height: 100dvh;
+        min-height: 100vh;
     }
 
+   
+    
 }

assets/css/partials/_page-header.scss

@@ -0,0 +1,76 @@
+// .page__header{
+//       max-width: var(--max-w-cards);
+//       margin: calc(var(--spacing)*1.5) auto;
+
+
+//     .page__title{
+//         font-size: var(--fs-big);
+//         font-weight: normal;
+//         text-transform: uppercase;
+//     }
+
+//     .page__description{
+//         margin-top: calc(var(--spacing)*1);
+//         p{
+//             font-size: var(--fs-medium);
+//             max-width: 54ch;
+        
+//         }
+//     }
+
+// }
+
+
+
+.page__type{
+    
+    height: calc(var(--h-block)*0.75);
+    border-radius: var(--radius-small);
+    border: var(--border-medium);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1.5ch;
+    padding-top: 3px;
+
+    font-size: var(--fs-small);
+    line-height: 1;
+
+    background-color: var(--color-bg);
+    color: var(--color-txt-light);
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-transform: uppercase;
+
+}
+
+main .page__header {
+    max-width: var(--max-w-cards);
+    margin-inline: auto;
+    margin-top: calc(var(--spacing) * 1);
+    margin-bottom: calc(var(--spacing) * 2);
+ 
+
+    .page__title {
+      max-width: var(--max-w-content);
+      text-transform: uppercase;
+      font-weight: normal;
+      font-size: var(--fs-big);
+      line-height: var(--leading-tight);
+      margin-top: calc(var(--spacing) * 1);
+      margin-bottom: calc(var(--spacing) * 0.5);
+      text-wrap: balance;
+    }
+
+    .description {
+      max-width: 68ch;
+    }
+
+    .description-medium{
+      font-size: var(--fs-medium);
+       max-width: 58ch;
+       line-height: 1.1;
+    }
+}

assets/css/partials/_site-header.scss

@@ -37,6 +37,7 @@
 
   #site-title {
     flex-grow: 2;
+    opacity: 0;
     svg{
       width: 100px;
       @media #{$small}{

assets/css/style.css

@@ -115,8 +115,6 @@ body {
   font-size: var(--fs-normal);
   color: var(--color-txt);
   background-color: var(--color-bg);
-  width: 100vw;
-  overflow-x: hidden;
 }
 
 img {
@@ -180,6 +178,7 @@ body.is-hidden .btn--back-to-top {
 }
 #site-header #site-title {
   flex-grow: 2;
+  opacity: 0;
 }
 #site-header #site-title svg {
   width: 100px;
@@ -465,24 +464,6 @@ button:disabled {
   white-space: nowrap;
 }
 
-.tag-inline {
-  height: calc(var(--h-block) * 0.75);
-  border-radius: var(--radius-small);
-  border: var(--border-medium);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1.5ch;
-  padding-top: 3px;
-  font-size: var(--fs-small);
-  line-height: 1;
-  background-color: var(--color-bg);
-  color: var(--color-txt-light);
-  overflow: hidden;
-  white-space: nowrap;
-  text-transform: uppercase;
-}
-
 .keywords {
   list-style: none;
   display: flex;
@@ -550,6 +531,16 @@ button.sort[data-sort-type=up] .arrow {
   transform: rotate(-90deg);
 }
 
+.page__sort {
+  margin-bottom: calc(var(--spacing) * 1);
+  display: flex;
+  justify-content: right;
+  grid-gap: var(--padding-inner);
+  width: 100%;
+  max-width: var(--max-w-cards);
+  margin-inline: auto;
+}
+
 .btn--group__mobile {
   z-index: calc(var(--z-header) - 10);
   opacity: 0;
@@ -1122,23 +1113,16 @@ button.sort[data-sort-type=up] .arrow {
   }
 }
 
-.page__header {
+@media screen and (max-width: 1280px) {
-  max-width: var(--max-w-cards);
+  [data-template=investigations] .dropdown .dropdown__content {
-  margin: calc(var(--spacing) * 1.5) auto;
+    left: auto;
+    right: 0;
+  }
+  [data-template=investigations] .dropdown .dropdown__content::before {
+    left: auto;
+    right: 16px;
+  }
 }
-.page__header .page__title {
-  font-size: var(--fs-big);
-  font-weight: normal;
-  text-transform: uppercase;
-}
-.page__header .page__description {
-  margin-top: calc(var(--spacing) * 1);
-}
-.page__header .page__description p {
-  font-size: var(--fs-medium);
-  max-width: 54ch;
-}
-
 .card--article {
   border: var(--border-light);
   position: relative;
@@ -1170,7 +1154,7 @@ button.sort[data-sort-type=up] .arrow {
   position: absolute;
   top: var(--padding-inner);
   left: var(--padding-inner);
-  z-index: 200;
+  z-index: 10;
   width: 24px;
   height: 24px;
   border-radius: var(--radius-small);
@@ -1446,6 +1430,7 @@ button.sort[data-sort-type=up] .arrow {
 
 .card--folder {
   position: relative;
+  max-width: var(--max-w-cards);
   border: var(--border-light);
   padding: var(--padding-inner);
   display: grid;
@@ -1477,6 +1462,8 @@ button.sort[data-sort-type=up] .arrow {
   margin-bottom: 0.25em;
   text-wrap: balance;
   max-width: 42ch;
+  text-transform: uppercase;
+  padding-top: calc(var(--spacing) * 0.25);
 }
 .card--folder .title a {
   text-decoration: none;
@@ -1488,7 +1475,7 @@ button.sort[data-sort-type=up] .arrow {
 }
 .card--folder .short {
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -1547,10 +1534,24 @@ button.sort[data-sort-type=up] .arrow {
 }
 @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 {
-    display: none;
+    order: 3;
+  }
+  .card--folder ul {
+    order: 4;
   }
 }
 
@@ -1651,6 +1652,7 @@ button.sort[data-sort-type=up] .arrow {
 }
 #site-header #site-title {
   flex-grow: 2;
+  opacity: 0;
 }
 #site-header #site-title svg {
   width: 100px;
@@ -1855,6 +1857,8 @@ body.menu-open #menu-toggle .close {
 body {
   min-height: 100dvh;
   min-height: 100vh;
+  width: 100vw;
+  overflow-x: hidden;
   display: flex;
   flex-direction: column;
 }
@@ -1863,6 +1867,73 @@ body main {
   padding: 0 var(--padding-body);
   padding-top: var(--header-h);
   padding-bottom: calc(var(--spacing) * 2);
+  min-height: 100dvh;
+  min-height: 100vh;
+}
+
+.page__type {
+  height: calc(var(--h-block) * 0.75);
+  border-radius: var(--radius-small);
+  border: var(--border-medium);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1.5ch;
+  padding-top: 3px;
+  font-size: var(--fs-small);
+  line-height: 1;
+  background-color: var(--color-bg);
+  color: var(--color-txt-light);
+  overflow: hidden;
+  white-space: nowrap;
+  text-transform: uppercase;
+}
+
+main .page__header {
+  max-width: var(--max-w-cards);
+  margin-inline: auto;
+  margin-top: calc(var(--spacing) * 1);
+  margin-bottom: calc(var(--spacing) * 2);
+}
+main .page__header .page__title {
+  max-width: var(--max-w-content);
+  text-transform: uppercase;
+  font-weight: normal;
+  font-size: var(--fs-big);
+  line-height: var(--leading-tight);
+  margin-top: calc(var(--spacing) * 1);
+  margin-bottom: calc(var(--spacing) * 0.5);
+  text-wrap: balance;
+}
+main .page__header .description {
+  max-width: 68ch;
+}
+main .page__header .description-medium {
+  font-size: var(--fs-medium);
+  max-width: 58ch;
+  line-height: 1.1;
+}
+
+.container-cards {
+  max-width: var(--max-w-cards);
+  margin: 0 auto;
+  display: grid;
+  grid-gap: calc(var(--spacing) * 1);
+}
+
+@media screen and (min-width: 560px) {
+  .container-cards__investigations {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: calc(var(--padding-body) * 1.5);
+    margin-bottom: 10vh;
+  }
+}
+@media screen and (max-width: 560px) {
+  .container-cards__investigations {
+    margin-bottom: 10vh;
+  }
 }
 
 .section--home {
@@ -1898,43 +1969,6 @@ body main {
   width: 11px;
 }
 
-[data-template=investigations] main {
-  max-width: var(--max-w-cards);
-  margin-inline: auto;
-}
-@media screen and (min-width: 560px) {
-  [data-template=investigations] main #container-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-    grid-auto-rows: minmax(100px, auto);
-    grid-gap: calc(var(--padding-body) * 1.5);
-    margin-bottom: 10vh;
-  }
-}
-@media screen and (max-width: 560px) {
-  [data-template=investigations] main #container-cards {
-    margin-bottom: 10vh;
-  }
-  [data-template=investigations] main #container-cards .card--article {
-    margin-bottom: calc(var(--spacing) * 1.5);
-  }
-}
-@media screen and (max-width: 560px) {
-  [data-template=investigations] main {
-    margin-bottom: 10vh;
-  }
-  [data-template=investigations] main .card--article {
-    margin-bottom: calc(var(--spacing) * 1.5);
-  }
-}
-
-.page__sort {
-  display: flex;
-  justify-content: right;
-  grid-gap: var(--padding-inner);
-  margin-bottom: calc(var(--spacing) * 1);
-}
-
 [data-template=investigation-summary] main {
   position: relative;
   max-width: var(--max-w-cards);
@@ -1962,23 +1996,6 @@ body main {
     width: calc(var(--panel-w) * 0.5);
   }
 }
-[data-template=investigation-summary] main header {
-  margin-top: calc(var(--spacing) * 1);
-  margin-bottom: calc(var(--spacing) * 2);
-}
-[data-template=investigation-summary] main header .page-title {
-  max-width: var(--max-w-content);
-  text-transform: uppercase;
-  font-weight: normal;
-  font-size: var(--fs-big);
-  line-height: var(--leading-tight);
-  margin-top: calc(var(--spacing) * 1);
-  margin-bottom: calc(var(--spacing) * 0.5);
-  text-wrap: balance;
-}
-[data-template=investigation-summary] main header .description {
-  max-width: 62ch;
-}
 [data-template=investigation-summary] main .section__article {
   margin-top: calc(var(--spacing) * 3);
   margin-bottom: calc(var(--spacing) * 3);

assets/css/style.scss

@@ -14,6 +14,9 @@
 @import "components/sort";
 @import "components/btn-group-mobile";
 
+
+
+
 @import "components/figures";
 @import "components/hero";
 @import "components/form-newsletter";
@@ -21,7 +24,6 @@
 @import "components/list-socials";
 @import "components/modal-share";
 @import "components/dropdown";
-@import "components/page-header";
 @import "components/text";
 @import "components/card-article";
 @import "components/card-article-small";
@@ -34,8 +36,9 @@
 @import "partials/site-menu";
 @import "partials/site-footer";
 @import "partials/main-layout";
+@import "partials/page-header";
+@import "partials/container-cards";
 
 @import "template/home";
-@import "template/investigations";
 @import "template/investigation-summary";
 @import "template/report";

assets/css/template/_investigation-summary.scss

@@ -27,26 +27,6 @@
      }
   }
 
-  header {
-    margin-top: calc(var(--spacing) * 1);
-    margin-bottom: calc(var(--spacing) * 2);
-
-    .page-title {
-      max-width: var(--max-w-content);
-      text-transform: uppercase;
-      font-weight: normal;
-      font-size: var(--fs-big);
-      line-height: var(--leading-tight);
-      margin-top: calc(var(--spacing) * 1);
-      margin-bottom: calc(var(--spacing) * 0.5);
-      text-wrap: balance;
-
-    }
-
-    .description {
-      max-width: 62ch;
-    }
-  }
 
   .section__article {
     margin-top: calc(var(--spacing) * 3);

assets/css/template/_investigations.scss

@@ -1,34 +0,0 @@
-[data-template="investigations"] main {
-  max-width: var(--max-w-cards);
-  margin-inline: auto;
-  #container-cards {
-    @media #{$x-small-up} {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-      grid-auto-rows: minmax(100px, auto);
-      grid-gap: calc(var(--padding-body) * 1.5);
-      margin-bottom: 10vh;
-    }
-    @media #{$x-small} {
-      margin-bottom: 10vh;
-      .card--article {
-        margin-bottom: calc(var(--spacing) * 1.5);
-      }
-    }
-  }
-  @media #{$x-small} {
-    margin-bottom: 10vh;
-    .card--article {
-      margin-bottom: calc(var(--spacing) * 1.5);
-    }
-  }
-}
-
-
-
-.page__sort {
-  display: flex;
-  justify-content: right;
-  grid-gap: var(--padding-inner);
-  margin-bottom: calc(var(--spacing) * 1);
-}

assets/js/dropdown.js

@@ -1,8 +1,9 @@
 export function initDropdowns(responsiveSmall) {
   const dropdowns = document.querySelectorAll('.dropdown');
 
-  function updateBodyOverflow(isOpen) {
+  function updateBodyOverflow(isOpen, dropdownElement = null) {
-    if (isOpen && window.innerWidth < responsiveSmall) {
+    const isInMobileGroup = dropdownElement?.closest('.btn--group__mobile');
+    if (isOpen && window.innerWidth < responsiveSmall && isInMobileGroup) {
       document.body.classList.add('is-hidden');
     } else {
       document.body.classList.remove('is-hidden');
@@ -15,6 +16,8 @@ export function initDropdowns(responsiveSmall) {
 
     if (!trigger) return;
 
+
+    
     // Empêche la fermeture au clic dans le contenu des dropdowns contenant .modal--share
     if (dropdown.querySelector('.modal--share') && content) {
       content.addEventListener('click', (e) => {
@@ -54,7 +57,7 @@ export function initDropdowns(responsiveSmall) {
       trigger.classList.toggle('is-selected');
 
       // Gère l'overflow du body sur mobile
-      updateBodyOverflow(dropdown.classList.contains('is-open'));
+      updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown);
     });
   });
 

site/templates/folder.php

@@ -1,12 +1,13 @@
+
 <?php snippet('header') ?>
 <main>
 
 <header class="page__header">
-    <p class="tag-inline">Dossier</p>
+    <p class="page__type">Dossier</p>
     <h2 class="page__title"><?= $page->title() ?></h2>
 
     <?php if ($page->description()->isNotEmpty()): ?>
-    <div class="page__description">
+    <div class="description">
         <p><?= $page->description() ?></p>
     </div>
     <?php endif ?>
@@ -20,7 +21,7 @@ $investigations = site()->find('enquetes')->children()->listed()->filter(functio
 ?>
 
 <?php if ($investigations->isNotEmpty()): ?>
-<section id="container-cards">
+<section class="container-cards">
 
 <?php foreach ($investigations as $investigation): ?>
 <article class="card--article">

site/templates/folders.php

@@ -2,19 +2,22 @@
 <main>
 
 <header class="page__header">
+
     <h2 class="page__title"><?= $page->title() ?></h2>
 
     <?php if ($page->chapo()->isNotEmpty()): ?>
-    <div class="page__description">
+    <div class="description-medium">
         <p><?= $page->chapo() ?></p>
     </div>
     <?php endif ?>
 </header>
 
-<section id="container-cards">
+<section class="container-cards">
+
+
 
 <?php foreach ($page->children()->listed() as $folder): ?>
-<article class="card--article">
+<article class="card--folder">
 
     <?php if ($cover = $folder->cover()->toFile()): ?>
     <figure>
@@ -22,11 +25,13 @@
     </figure>
     <?php endif ?>
 
+    
+
     <div class="content">
         <h4 class="title"><a href="<?= $folder->url() ?>"><?= $folder->title()->esc() ?></a></h4>
 
         <?php if ($folder->description()->isNotEmpty()): ?>
-        <p class="description"><?= $folder->description()->excerpt(200) ?></p>
+        <p class="short"><?= $folder->description()->excerpt(200) ?></p>
         <?php endif ?>
 
         <?php
@@ -36,16 +41,15 @@
         })->count();
         ?>
 
-        <?php if ($investigationsCount > 0): ?>
+            <ul>
-        <dl class="dl">
+                <?php if ($investigationsCount > 0): ?>
-            <div class="dl__group">
+                    <li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
-                <dt>Enquêtes</dt>
+                <?php endif ?>
-                <dd><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></dd>
+                    <li>8 impacts</li>
-            </div>
+                </ul>
-        </dl>
-        <?php endif ?>
-    </div>
 
+    </div>
+    <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
     <a class="link-block" href="<?= $folder->url() ?>"></a>
 </article>
 <?php endforeach ?>

site/templates/investigation-summary.php

@@ -59,11 +59,9 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
 
 
 
-<header>
+<header class="page__header">
-    <p class="tag-inline">Enquête</p>
+    <p class="page__type">Enquête</p>
-    <h2 class="page-title"><?= $page->title()->esc() ?></h2>
+    <h2 class="page__title"><?= $page->title()->esc() ?></h2>
-    <p class="date-publish"></p>
-
     <?php if ($page->chapo()->isNotEmpty()): ?>
     <p class="description"><?= $page->chapo()->inline() ?></p>
     <?php endif ?>

site/templates/investigations.php

@@ -4,7 +4,7 @@
 <header class="page__header">
     <h2 class="page__title"><?= $page->title() ?></h2>
 
-    <div class="page__description">
+    <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.
@@ -28,7 +28,7 @@
     </div>
 </div>
 
-<section id="container-cards">
+<section class="container-cards container-cards__investigations">
 
 <?php foreach ($page->children()->listed() as $investigation): ?>
 <article class="card--article">

site/templates/report.php

@@ -79,7 +79,7 @@
 <article id="report">
     <header class="report__header">
         <div class="report__title-group">
-            <p class="tag-inline">Rapport</p>
+            <p class="page__type">Rapport</p>
             <h1 class="title">Rapport de contre-expertise</h1>
             <h2 class="subtitle">sur les circonstances de la mort d'Adam B. et de Raihane S. le 19 août 2022 à Vénissieux</h2>
         </div>