page-article > page-enquete

assets/css/components/_keywords.scss

@@ -0,0 +1,34 @@
+.keywords{
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1ch;
+
+    li{
+        height: var(--h-block);
+        border-radius: calc(var(--h-block)*0.5);
+        border: var(--border-light);
+        font-size: var(--fs-normal);
+        overflow: hidden;
+    
+        a{
+            text-decoration: none;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            padding: 0 1.5ch;
+            line-height: 1;
+            padding-top: 2px;
+
+        }
+        
+        &:hover{
+            border-color: var(--color-txt);
+            a{
+                color: currentColor;
+            }
+        }
+        
+    }
+}

assets/css/style.css

@@ -237,6 +237,36 @@ button:disabled {
   width: 100%;
 }
 
+.keywords {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1ch;
+}
+.keywords li {
+  height: var(--h-block);
+  border-radius: calc(var(--h-block) * 0.5);
+  border: var(--border-light);
+  font-size: var(--fs-normal);
+  overflow: hidden;
+}
+.keywords li a {
+  text-decoration: none;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 1.5ch;
+  line-height: 1;
+  padding-top: 2px;
+}
+.keywords li:hover {
+  border-color: var(--color-txt);
+}
+.keywords li:hover a {
+  color: currentColor;
+}
+
 .form__newsletter {
   --size: 24px;
   position: relative;
@@ -695,85 +725,114 @@ body main {
   padding: 0 var(--padding-body);
 }
 
-.page-article header {
+.page-enquete header {
   max-width: var(--max-w-content);
   margin: calc(var(--spacing) * 2) auto;
 }
-.page-article header .page-type {
+.page-enquete header .page-type {
   text-transform: uppercase;
   color: var(--color-txt-light);
   margin-bottom: calc(var(--spacing) * 0.5);
 }
-.page-article header h2 {
+.page-enquete header h2 {
   font-size: var(--fs-xbig);
 }
-
+.page-enquete .section__article {
-.page-article .section__article {
   max-width: var(--max-w-content);
   margin: calc(var(--spacing) * 3) auto;
 }
-.page-article .section__article a:hover {
+.page-enquete .section__article a:hover {
   color: var(--grey-200);
 }
-.page-article .section__article .section__title {
+.page-enquete .section__article .section__title {
   font-weight: normal;
   text-transform: uppercase;
   font-size: var(--fs-medium);
   margin-bottom: calc(var(--spacing) * 1);
 }
-
+.page-enquete .hero {
-.page-article .hero {
   width: 100vw;
   position: relative;
   left: calc(var(--padding-body) * -1);
   margin: calc(var(--spacing) * 3) 0;
 }
-.page-article .hero figcaption {
+.page-enquete .hero figcaption {
   color: var(--color-txt-light);
   font-size: var(--fs-small);
   max-width: var(--max-w-content);
   margin: 0 auto;
   padding-top: calc(var(--spacing) * 0.5);
 }
-.page-article .hero.hero-video figure {
+.page-enquete .hero.hero-video figure {
   width: 100%;
 }
-.page-article .hero.hero-video figure img {
+.page-enquete .hero.hero-video figure img {
   width: 100%;
   aspect-ratio: 16/9;
   -o-object-fit: cover;
      object-fit: cover;
 }
-
+.page-enquete .short {
-.page-article .short {
   font-size: var(--fs-medium);
+  margin: auto;
   max-width: var(--max-w-content);
 }
-
+.page-enquete #section__synthese {
-.page-article #section__synthese {
   font-size: var(--fs-medium);
 }
-
+.page-enquete #section__synthese p + p {
-.page-article #banner--page {
+  margin-top: 0.5em;
-  height: calc(100dvh - var(--header-h));
+}
+.page-enquete #section__synthese h4 {
+  margin-top: 2em;
+  margin-bottom: 1em;
+  font-size: var(--fs-normal);
+  font-weight: normal;
+  -webkit-text-decoration: 1px underline var(--color-txt-light);
+          text-decoration: 1px underline var(--color-txt-light);
+  text-underline-offset: 3px;
+}
+.page-enquete #banner--page {
+  height: calc(100vh - var(--header-h));
   height: calc(100dvh - var(--header-h));
+  margin-bottom: calc((100vh - var(--header-h)) * -1);
   margin-bottom: calc((100dvh - var(--header-h)) * -1);
-  background-color: red;
+  padding-bottom: var(--padding-body);
   position: sticky;
   top: var(--header-h);
   width: 240px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
-
+.page-enquete #section__dl {
-.page-article #section__dl {
+  margin-top: calc(var(--spacing) * 1.5);
-  margin-top: 0px;
   border-bottom: var(--border-light);
 }
-.page-article #section__dl .dl__group {
+.page-enquete #section__dl .dl__group {
   display: grid;
   grid-template-columns: 40% 1fr;
   border-top: var(--border-light);
   padding: calc(var(--spacing) * 0.5) 0;
 }
-.page-article #section__dl dt {
+.page-enquete #section__dl dt {
   color: var(--color-txt-light);
+}
+.page-enquete #section__dl ul:not(.keywords) {
+  list-style: none;
+}
+.page-enquete #section__dl ul:not(.keywords) li {
+  padding-bottom: 0.2em;
+}
+.page-enquete #nav--page ul {
+  list-style: none;
+}
+.page-enquete #nav--page ul li {
+  text-align: center;
+  color: var(--color-txt-light);
+}
+.page-enquete #nav--page ul li a {
+  display: block;
+  padding: 0.3em 0;
+  text-decoration: none;
 }/*# sourceMappingURL=style.css.map */

assets/css/style.scss

@@ -8,6 +8,7 @@
 // @import 'components/nav-tabs';
 // @import 'components/btn--default';
 @import 'components/buttons';
+@import 'components/keywords';
 @import 'components/form-newsletter';
 @import 'components/list-socials';
 @import 'components/text';
@@ -19,6 +20,6 @@
 @import 'partials/main-layout';
 
 
-@import 'template/page-article';
+@import 'template/page-enquete';
 
 

assets/css/template/_page-article.scss

@@ -1,99 +0,0 @@
-.page-article header{
-    max-width: var(--max-w-content);
-    margin: calc(var(--spacing)*2) auto;
-    .page-type{
-        text-transform: uppercase;
-        color: var(--color-txt-light);
-        margin-bottom: calc(var(--spacing)*0.5);
-    }
-    h2{
-        font-size: var(--fs-xbig);
-    } 
-}
-
-.page-article .section__article{
-    max-width: var(--max-w-content);
-    margin: calc(var(--spacing)*3) auto;
-    a:hover{
-        color: var(--grey-200);
-    }
-
-
-    .section__title{
-        font-weight: normal;
-        text-transform: uppercase;
-        font-size: var(--fs-medium);
-        margin-bottom: calc(var(--spacing)*1)
-    }
-}
-
-.page-article .hero{
-    width: 100vw;
-    position: relative;
-    left: calc(var(--padding-body)*-1);
-
-    margin: calc(var(--spacing)*3) 0;
-
-    figcaption{
-        color: var(--color-txt-light);
-        font-size: var(--fs-small);
-        max-width: var(--max-w-content);
-        margin: 0 auto;
-        padding-top: calc(var(--spacing)*0.5);
-    }
-
-    &.hero-video{
-        figure{
-            width: 100%;
-
-            img{
-                width: 100%;
-                aspect-ratio: 16/9;
-                object-fit: cover;
-            }
-
-            
-        }
-    }
-}
-
-
-.page-article .short{
-    font-size: var(--fs-medium);
-    // margin: calc(var(--spacing)*3) auto;
-    max-width: var(--max-w-content);
-}
-
-.page-article #section__synthese{
-    font-size: var(--fs-medium);
-    
-}
-
-.page-article #banner--page{
-    height: calc(100dvh - var(--header-h));
-    height: calc(100dvh - var(--header-h));
-    margin-bottom: calc((100dvh - var(--header-h))*-1);
-    background-color: red;
-    position: sticky;
-    top: var(--header-h);
-    width: 240px;
-
-  
-
-}
-
-.page-article #section__dl{
-    margin-top: 0px;
-    border-bottom: var(--border-light);
-
-    .dl__group{
-        display: grid;
-        grid-template-columns: 40% 1fr;
-        border-top: var(--border-light);
-        padding: calc(var(--spacing)*0.5) 0;
-    }
-
-    dt{
-        color: var(--color-txt-light);
-    }
-}

assets/css/template/_page-enquete.scss

@@ -0,0 +1,145 @@
+.page-enquete{
+
+    header{
+        max-width: var(--max-w-content);
+        margin: calc(var(--spacing)*2) auto;
+        .page-type{
+            text-transform: uppercase;
+            color: var(--color-txt-light);
+            margin-bottom: calc(var(--spacing)*0.5);
+        }
+        h2{
+            font-size: var(--fs-xbig);
+        } 
+    }
+
+    .section__article{
+        max-width: var(--max-w-content);
+        margin: calc(var(--spacing)*3) auto;
+        a:hover{
+            color: var(--grey-200);
+        }
+
+
+        .section__title{
+            font-weight: normal;
+            text-transform: uppercase;
+            font-size: var(--fs-medium);
+            margin-bottom: calc(var(--spacing)*1)
+        }
+    }
+
+    .hero{
+        width: 100vw;
+        position: relative;
+        left: calc(var(--padding-body)*-1);
+
+        margin: calc(var(--spacing)*3) 0;
+
+        figcaption{
+            color: var(--color-txt-light);
+            font-size: var(--fs-small);
+            max-width: var(--max-w-content);
+            margin: 0 auto;
+            padding-top: calc(var(--spacing)*0.5);
+        }
+
+        &.hero-video{
+            figure{
+                width: 100%;
+
+                img{
+                    width: 100%;
+                    aspect-ratio: 16/9;
+                    object-fit: cover;
+                }
+
+                
+            }
+        }
+    }
+
+
+    .short{
+        font-size: var(--fs-medium);
+        margin: auto;
+        max-width: var(--max-w-content);
+    }
+
+    #section__synthese{
+        font-size: var(--fs-medium);
+
+        p + p{
+            margin-top: 0.5em;
+        }
+
+        h4{
+            margin-top: 2em;
+            margin-bottom: 1em;
+            font-size: var(--fs-normal);
+            font-weight: normal;
+            text-decoration: 1px underline var(--color-txt-light);
+            text-underline-offset: 3px;
+            
+        }
+        
+    }
+
+    #banner--page{
+        height: calc(100vh - var(--header-h));
+        height: calc(100dvh - var(--header-h));
+        margin-bottom: calc((100vh - var(--header-h))*-1);
+        margin-bottom: calc((100dvh - var(--header-h))*-1);
+        padding-bottom: var(--padding-body);
+        position: sticky;
+        top: var(--header-h);
+        width: 240px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    #section__dl{
+        margin-top: calc(var(--spacing)*1.5);
+        border-bottom: var(--border-light);
+
+        .dl__group{
+            display: grid;
+            grid-template-columns: 40% 1fr;
+            border-top: var(--border-light);
+            padding: calc(var(--spacing)*0.5) 0;
+        }
+
+        dt{
+            color: var(--color-txt-light);
+        }
+
+        ul:not(.keywords){
+            list-style: none;
+            li{
+                padding-bottom: 0.2em;
+            }
+            
+        }
+    }
+
+
+    #nav--page{
+        ul{
+            list-style: none;
+            
+            li{
+                text-align: center;
+                color: var(--color-txt-light);
+                // text-transform: uppercase;
+                
+                a{
+                    display: block;
+                    padding: 0.3em 0;
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+}

page-enquete/index.html

@@ -16,7 +16,7 @@
     <div id="site-menu" w3-include-html="/components/site-menu.html"></div>
 
 
-    <main class="page-article">
+    <main class="page-enquete">
         <header>
             <p class="page-type">Enquête</p>
             <h2>L’exécution de Nidal et Khaled ‘Amirah</h2>
@@ -67,10 +67,13 @@
                 <div class="dl__group">
                     <dt>Mots-clés</dt>
                     <dd>
-                        <ul>
+                        <ul class="keywords">
-                            <li>Occupation</li>
+                            <li><a href="#" target="_blank">Occupation</a></li>
-                            <li>Colonialité</li>
+                            <li><a href="#" target="_blank">Colonialité</a></li>
-                            <li>Forces armées</li>
+                            <li><a href="#" target="_blank">Forces armées</a></li>
+                            <li><a href="#" target="_blank">Mot-clé</a></li>
+                            <li><a href="#" target="_blank">Colonialité</a></li>
+
                         </ul>
                     </dd>
                 </div>
@@ -86,7 +89,7 @@
                 </div>
                 <div class="dl__group">
                     <dt>Équipe</dt>
-                    <dd>Nadav Joffe, Basile Trouillet, Francesco Sebregondi</dd>
+                    <dd>Nadav Joffe, Basile Trouillet, Francesco Sebregondi, Basile Trouillet, Francesco Sebregondi</dd>
                 </div>
                 <div class="dl__group">
                     <dt>Partenaire(s)</dt>