début du thème, footer et header en mobile

web/themes/erabletheme/css/styles.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* GLOBAL */
 /* Marianne */
 @font-face {
@@ -32,10 +33,15 @@
   font-style: normal;
 }
 /* SIZES */
+/* MIXINS */
 a {
   text-decoration: none;
 }
 
+#block-erabletheme-contenudelapageprincipale {
+  margin-top: 7vh;
+}
+
 /* PARTIALS */
 .layout-container {
   width: 100vw;
@@ -207,4 +213,214 @@ a {
   display: none;
 }
 
+.slick-container {
+  background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
+  width: 100vw;
+  border-bottom: solid 2px #038788;
+}
+.slick-container div.views-row article {
+  width: 100%;
+}
+.slick-container div.views-row article div:first-of-type {
+  width: 100%;
+  max-height: 40vh;
+  overflow-y: hidden;
+}
+.slick-container div.views-row article div:first-of-type > div {
+  width: 100%;
+}
+.slick-container div.views-row article div:first-of-type > div > a {
+  max-width: 100%;
+}
+.slick-container div.views-row article div:first-of-type > div > a img {
+  width: 100%;
+  height: auto;
+}
+.slick-container div.views-row article .preview_date, .slick-container div.views-row article .preview_type, .slick-container div.views-row article .preview_sous_titre {
+  font-family: "Marianne", sans-serif;
+  font-size: 0.9rem;
+  padding: 2px 3vw;
+}
+.slick-container div.views-row article .preview_date {
+  margin-top: 1.3rem;
+  font-weight: 800;
+}
+.slick-container div.views-row article h2 {
+  font-family: "Barlow", sans-serif;
+  font-size: 2.3rem;
+  padding: 0 3vw;
+  margin-top: 1rem;
+}
+.slick-container div.views-row article h2 a {
+  color: #038788;
+}
+.slick-container #carousel_dots {
+  position: relative;
+  margin-top: -15px;
+}
+.slick-container #carousel_dots ul {
+  position: relative;
+  bottom: 0;
+}
+.slick-container #carousel_dots ul li.slick-active button::before {
+  color: #00ff80;
+}
+.slick-container #carousel_dots ul li button::before {
+  color: rgb(1, 1, 1);
+}
+.slick-container footer {
+  text-align: center;
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+.slick-container footer a {
+  text-align: center;
+  color: black;
+  font-family: "Marianne", sans-serif;
+  font-weight: 800;
+  font-size: 0.9rem;
+  background-color: white;
+  border: solid 2px #00ff80;
+  padding: 9px 18px;
+}
+.slick-container footer a ::after {
+  content: "→";
+  padding-left: 10px;
+}
+
+.actu_full {
+  background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
+  font-family: "Marianne", sans-serif;
+  padding-top: 3vh;
+  width: 100vw;
+}
+.actu_full div {
+  font-family: "Marianne", sans-serif;
+  font-size: 1.1rem;
+  line-height: 1.2;
+}
+.actu_full .retour_actus {
+  font-size: 0.8rem;
+  font-weight: 800;
+  color: #038788;
+  padding-left: 3vw;
+}
+.actu_full .article_meta {
+  padding-left: 3vw;
+  margin: 20px 0;
+}
+.actu_full .article_meta div {
+  font-size: 0.8rem;
+  margin-bottom: 5px;
+}
+.actu_full h2 {
+  font-family: "Barlow", sans-serif;
+  font-size: 2.3rem;
+  padding: 0 3vw;
+  margin-top: 1rem;
+}
+.actu_full h2 a {
+  color: #038788;
+}
+.actu_full h2 + div {
+  padding: 3vw;
+}
+.actu_full h2 + div .visually-hidden {
+  width: 0% !important;
+}
+.actu_full h2 + div div:first-of-type {
+  margin-top: -10px;
+  margin-bottom: 30px;
+}
+.actu_full h2 + div div:nth-of-type(2) > div {
+  width: 100%;
+  margin-bottom: 40px;
+}
+.actu_full h2 + div div:nth-of-type(2) > div img {
+  width: 100%;
+  height: auto;
+}
+
+/* PAGES */
+.home_introduction {
+  border-bottom: solid 2px #038788;
+  width: 100%;
+  padding: 2rem 3vw;
+}
+.home_introduction h2 {
+  display: none;
+}
+.home_introduction article > div p {
+  font-family: "Marianne", sans-serif;
+  font-size: 1.1rem;
+  line-height: 1.2;
+}
+.home_introduction div.more-link {
+  margin-top: 3rem;
+  margin-bottom: 1.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.home_introduction div.more-link a {
+  text-align: center;
+  color: black;
+  font-family: "Marianne", sans-serif;
+  font-weight: 800;
+  font-size: 0.9rem;
+  background-color: white;
+  border: solid 2px #00ff80;
+  padding: 9px 18px;
+}
+.home_introduction div.more-link a ::after {
+  content: "→";
+  padding-left: 10px;
+}
+
+.home_consultation {
+  background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
+  width: 100%;
+  padding: 2rem 0;
+}
+.home_consultation h2 {
+  font-family: "Barlow", sans-serif;
+  font-size: 2.3rem;
+  padding: 0 3vw;
+  margin-top: 1rem;
+  margin-bottom: 1.2rem;
+}
+.home_consultation h2 a {
+  color: #038788;
+}
+.home_consultation article > div p {
+  padding: 0 3vw;
+  font-family: "Marianne", sans-serif;
+  font-size: 1.1rem;
+  line-height: 1.2;
+}
+.home_consultation div.more-link {
+  margin-top: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.home_consultation div.more-link a {
+  text-align: center;
+  color: black;
+  font-family: "Marianne", sans-serif;
+  font-weight: 800;
+  font-size: 0.9rem;
+  background-color: white;
+  border: solid 2px #00ff80;
+  padding: 9px 18px;
+}
+.home_consultation div.more-link a ::after {
+  content: "→";
+  padding-left: 10px;
+}
+
+.news_list:not(.slick-slider) {
+  background-color: red;
+}
+
 /*# sourceMappingURL=styles.css.map */

web/themes/erabletheme/css/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/styles.scss","../scss/global/_fonts.scss","../scss/global/variables/_typography.scss","../scss/global/_typography.scss","../scss/partials/_header.scss","../scss/global/variables/_layout.scss","../scss/global/variables/_colors.scss","../scss/partials/_footer.scss"],"names":[],"mappings":"AAAA;ACAA;AAEA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;AAEA;EACI;EACA;EAEA;EACA;;ACzCJ;ACAA;EACI;;;AHMJ;AINA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AACA;EACI,cCxBb;EDyBa;EACA;;AAIZ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAIZ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;EACA,kBErDP;EFsDO;EACA;EACA;;AACA;EACI,WFzDT;EE0DS;EACA;EACA;;AAGR;EACI;;AAEJ;EACI;EACA;EACA,kBEnEP;EFoEO;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA,OEtFf;;;ACHb;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,ODxCP;ECyCO,WL3CL;EK4CK;EACA;EACA;;AAKZ;EACI;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDjEjB;;ACmEa;EACI;EACA","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/styles.scss","../scss/global/_fonts.scss","../scss/global/variables/_typography.scss","../scss/global/_typography.scss","../scss/global/_global.scss","../scss/partials/_header.scss","../scss/global/variables/_layout.scss","../scss/global/variables/_colors.scss","../scss/partials/_footer.scss","../scss/partials/_carousel.scss","../scss/partials/_articles.scss","../scss/_home.scss","../scss/_newspage.scss"],"names":[],"mappings":";AAAA;ACAA;AAEA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;AAEA;EACI;EACA;EAEA;EACA;;ACzCJ;AAMA;ACNA;EACI;;;ACDJ;EACI;;;AJOJ;AKPA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AACA;EACI,cCxBb;EDyBa;EACA;;AAIZ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAIZ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;EACA,kBErDP;EFsDO;EACA;EACA;;AACA;EACI,WHzDT;EG0DS;EACA;EACA;;AAGR;EACI;;AAEJ;EACI;EACA;EACA,kBEnEP;EFoEO;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA,OEtFf;;;ACHb;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,ODxCP;ECyCO,WN3CL;EM4CK;EACA;EACA;;AAKZ;EACI;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDjEjB;;ACmEa;EACI;EACA;;;ACtExB;EFMI;EEJA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;;AACA;EACI;;AACA;EACI;;AACA;EACI;EACA;;AAMhB;EACI;EACA,WPtBE;EOuBF;;AAEJ;EACI;EACA;;AAEJ;EPtBJ;EACA,WANS;EAOT;EACA;;AACA;EACI,OKbD;;AEkCH;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,OF1CH;;AE4CD;EACI;;AAIZ;EAEI;EACA;EACA;;AP5BJ;EACI;EACA;EACA;EACA;EACA,WA5BM;EA6BN;EACA;EACA;;AACA;EACI;EACA;;;AQpCZ;EHMI;EGJA;EACA;EACA;;AACA;ERcA;EACA,WAjBa;EAkBb;;AQbA;EACI,WRRO;EQSP;EACA,OHVD;EGWC,cJZG;;AIcP;EACI,cJfG;EIgBH;;AACA;EACI,WRjBG;EQkBH;;AAGR;ERbA;EACA,WANS;EAOT;EACA;;AACA;EACI,OKbD;;AGwBH;EACI,SJ1BG;;AI2BH;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AACA;EACI;EACA;;;AV1BpB;AWdA;EACI;EACA;EACA;;AACA;EACI;;AAGA;ETWJ;EACA,WAjBa;EAkBb;;ASTA;EAEI;EACA;EACA;EACA;EACA;;ATOJ;EACI;EACA;EACA;EACA;EACA,WA5BM;EA6BN;EACA;EACA;;AACA;EACI;EACA;;;ASdZ;EJhBI;EIkBA;EACA;;AACA;ETjBA;EACA,WANS;EAOT;EACA;ESgBI;;ATfJ;EACI,OKbD;;AI8BC;EACE;ETbN;EACA,WAjBa;EAkBb;;ASeA;EAEI;EACA;EACA;EACA;;AThBJ;EACI;EACA;EACA;EACA;EACA,WA5BM;EA6BN;EACA;EACA;;AACA;EACI;EACA;;;AUpCZ;EACI","file":"styles.css"}

web/themes/erabletheme/erabletheme.libraries.yml

@@ -7,6 +7,8 @@ global:
     theme:
       css/reset.css: {}
       css/styles.css: {}
+      librairies/slick-1.8.1/slick/slick.css: {}
+      librairies/slick-1.8.1/slick/slick-theme.css: {}
 
   dependencies:
     - core/jquery

web/themes/erabletheme/js/erabletheme.js

@@ -9,6 +9,15 @@
   Drupal.behaviors.erabletheme = {
     attach: function (context, settings) {
 
+      (function($, window) {
+        let slickEl = $('.slick-container').children().first().children().first().children().first().children().first();
+        $(slickEl).slick({
+          arrows: false,
+          dots: true,
+          appendDots: $('#carousel_dots')
+        });
+      })(jQuery, window);
+
       const hamburgerBtn = document.getElementById("hamburger");
       const menu = hamburgerBtn.nextElementSibling;
     

web/themes/erabletheme/scss/_home.scss

@@ -0,0 +1,44 @@
+.home_introduction {
+    border-bottom: solid 2px $teal;
+    width: 100%;
+    padding: 2rem $x_margin;
+    h2 {
+        display: none;
+    }
+    article > div {
+        p {
+        @include main_text_content();
+        }
+    }
+    div.more-link {
+        @include fluo_button();
+        margin-top: 3rem;
+        margin-bottom: 1.5rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+.home_consultation {
+    @include beige_gradient();
+    width: 100%;
+    padding: 2rem 0;
+    h2 {
+        @include main_title();
+        margin-bottom: 1.2rem;
+    }
+    article > div {
+        p {
+          padding: 0 $x_margin;
+          @include main_text_content();
+        }
+    }
+    div.more-link {
+        @include fluo_button();
+        margin-top: 3rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

web/themes/erabletheme/scss/_newspage.scss

@@ -0,0 +1,3 @@
+.news_list:not(.slick-slider) {
+    background-color: red;
+}

web/themes/erabletheme/scss/global/_global.scss

@@ -0,0 +1,3 @@
+#block-erabletheme-contenudelapageprincipale {
+    margin-top: 7vh;
+}

web/themes/erabletheme/scss/global/variables/_colors.scss

@@ -2,3 +2,7 @@ $fluo_green: #00ff80;
 $teal: #038788;
 $beige: #fcf9ee;
 $dark_green: #314e41;
+
+@mixin beige_gradient() {
+    background: linear-gradient(to bottom, $beige 80%, white 100%);
+}

web/themes/erabletheme/scss/global/variables/_typography.scss

@@ -1,2 +1,40 @@
 /* SIZES */
 $sm_font_size: 0.8rem;
+$m_font_size: 0.9rem;
+$main_font_size: 1.1rem;
+$title_size: 2.3rem;
+
+/* MIXINS */
+
+@mixin main_title() {
+    font-family: "Barlow", sans-serif;
+    font-size: $title_size;
+    padding: 0 $x_margin;
+    margin-top: 1rem;
+    a {
+        color: $teal;
+    }
+}
+
+@mixin main_text_content() {
+    font-family: "Marianne", sans-serif;
+    font-size: $main_font_size;
+    line-height: 1.2;
+}
+
+@mixin fluo_button() {
+    a {
+        text-align: center;
+        color: black;
+        font-family: "Marianne", sans-serif;
+        font-weight: 800;
+        font-size: $m_font_size;
+        background-color: white;
+        border: solid 2px $fluo_green;
+        padding: 9px 18px;
+        ::after {
+            content: "→";
+            padding-left: 10px;
+        }
+    }
+}

web/themes/erabletheme/scss/partials/_articles.scss

@@ -0,0 +1,46 @@
+.actu_full {
+    @include beige_gradient();
+    font-family: "Marianne", sans-serif;
+    padding-top: 3vh;
+    width: 100vw;
+    div {
+        @include main_text_content();
+    }
+    .retour_actus {
+        font-size: $sm_font_size;
+        font-weight: 800;
+        color: $teal;
+        padding-left: $x_margin;
+    }
+    .article_meta {
+        padding-left: $x_margin;
+        margin: 20px 0;
+        div {
+            font-size: $sm_font_size;
+            margin-bottom: 5px;
+        }
+    }
+    h2 {
+        @include main_title();
+    }
+    h2 + div {
+        padding: $x_margin;
+        .visually-hidden {
+            width: 0% !important;
+        }
+        div:first-of-type {
+            margin-top: -10px;
+            margin-bottom: 30px;
+        }
+        div:nth-of-type(2) {
+            > div {
+                width: 100%;
+                margin-bottom: 40px;
+                img {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+}

web/themes/erabletheme/scss/partials/_carousel.scss

@@ -0,0 +1,56 @@
+.slick-container {
+    @include beige_gradient();
+    width: 100vw;
+    border-bottom: solid 2px $teal;
+    div.views-row article {
+        width: 100%;
+        div:first-of-type { // container du lien image
+            width: 100%;
+            max-height: 40vh;
+            overflow-y: hidden;
+            > div {
+                width: 100%;
+                > a {
+                    max-width: 100%;
+                    img {
+                        width: 100%;
+                        height: auto;
+                    }
+                }
+            }
+        }
+        
+        .preview_date, .preview_type, .preview_sous_titre {
+            font-family: "Marianne", sans-serif;
+            font-size: $m_font_size;
+            padding: 2px $x_margin;
+        }
+        .preview_date {
+            margin-top: 1.3rem;
+            font-weight: 800;
+        }
+        h2 {
+            @include main_title();
+        }
+    }
+    #carousel_dots {
+        position: relative;
+        margin-top: -15px;
+        ul {
+            position: relative;
+            bottom: 0;
+            li.slick-active button::before{
+                color: $fluo_green;
+            }
+            li button::before{
+                color: rgba(0.9, 0.9, 0.9, 1);
+            }
+        }
+    }
+    footer {
+        @include fluo_button();
+        text-align: center;
+        margin-top: 4rem;
+        margin-bottom: 4rem;
+    }
+}

web/themes/erabletheme/scss/styles.scss

@@ -4,7 +4,15 @@
 @import "global/variables/_layout";
 @import "global/variables/_typography";
 @import "global/_typography";
+@import "global/_global";
 
 /* PARTIALS */
 @import "partials/_header";
 @import "partials/_footer";
+@import "partials/_carousel";
+@import "partials/_articles";
+
+/* PAGES */
+
+@import "_home.scss";
+@import "_newspage.scss";

web/themes/erabletheme/templates/block--views-block--actus-block-1.html.twig

@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes.addClass('slick-container') }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>

web/themes/erabletheme/templates/block--views-block--home-blocks-block-1.html.twig

@@ -0,0 +1,37 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+    <div class="home_introduction">
+        {% block content %}
+            {{ content }}
+        {% endblock %}
+    </div>
+</div>

web/themes/erabletheme/templates/block--views-block--home-blocks-block-2.html.twig

@@ -0,0 +1,37 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+  <div class="home_consultation">
+    {% block content %}
+      {{ content }}
+    {% endblock %}
+  </div>
+</div>

web/themes/erabletheme/templates/node/node--actualite--full.html.twig

@@ -68,10 +68,17 @@
  * @ingroup themeable
  */
 #}
-<article{{ attributes }}>
+<article{{ attributes }} class="actu_full">
 
+  <div class="retour_actus">
+    ← Retour aux actualités
+  </div>
+
+  <div class="article_meta">
     {{ content.field_date }}
     {{ content.field_type_d_actualite }}
+  </div>
+
 
   <h2{{ title_attributes }}>
     <a href="{{ url }}" rel="bookmark">{{ label }}</a>

web/themes/erabletheme/templates/node/node--actualite--home.html.twig

@@ -70,11 +70,16 @@
 #}
 <article{{ attributes }}>
     {{ content.field_image }}
+    <div class="preview_date">
       {{ content.field_date }}
+    </div>
+    <div class="preview_type">
       {{ content.field_type_d_actualite }}
+    </div>
     <h2{{ title_attributes }}>
       <a href="{{ url }}" rel="bookmark">{{ label }}</a>
     </h2>
-
+    <div class="preview_sous_titre">
       {{ content.field_sous_titre }}
+    </div>
 </article>

web/themes/erabletheme/templates/views-view.html.twig

@@ -0,0 +1,77 @@
+{#
+/**
+ * @file
+ * Default theme implementation for main view template.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ * - css_name: A CSS-safe version of the view name.
+ * - css_class: The user-specified classes names, if any.
+ * - header: The optional header.
+ * - footer: The optional footer.
+ * - rows: The results of the view query, if any.
+ * - empty: The content to display if there are no rows.
+ * - pager: The optional pager next/prev links to display.
+ * - exposed: Exposed widget form/info to display.
+ * - feed_icons: Optional feed icons to display.
+ * - more: An optional link to the next page of results.
+ * - title: Title of the view, only used when displaying in the admin preview.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the view title.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the view title.
+ * - attachment_before: An optional attachment view to be displayed before the
+ *   view content.
+ * - attachment_after: An optional attachment view to be displayed after the
+ *   view content.
+ * - dom_id: Unique id for every view being printed to give unique class for
+ *   JavaScript.
+ *
+ * @see template_preprocess_views_view()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    dom_id ? 'js-view-dom-id-' ~ dom_id,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+ <div>
+    {{ title_prefix }}
+    {{ title }}
+    {{ title_suffix }}
+
+    {% if header %}
+      <header>
+        {{ header }}
+      </header>
+    {% endif %}
+
+    {{ exposed }}
+    {{ attachment_before }}
+
+    {% if rows -%}
+      <div class="news_list">
+        {{ rows }}
+      </div>
+    {% elseif empty -%}
+      {{ empty }}
+    {% endif %}
+    {{ pager }}
+
+    {{ attachment_after }}
+    {{ more }}
+  </div>
+
+
+  {% if footer %}
+    <div id="carousel_dots"></div>
+    <footer class="fluo_links">
+      {{ footer }}
+    </footer>
+  {% endif %}
+ 
+  {{ feed_icons }}
+</div>