header css

web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css

@@ -162,8 +162,26 @@ header {
     header .header_left_container img {
       width: 150px;
       height: auto; }
-  header #block-quartiers-de-demain-entete h2 {
+  header .language-switcher-language-url ul {
+    display: flex;
+    flex-direction: row; }
+    header .language-switcher-language-url ul li:nth-child(1)::after {
+      content: "/"; }
+  header .header_nav_container {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-gap: 10px;
+    grid-row: 3;
+    grid-column: 1 /span 12;
+    background: #e8ebf4; }
+    header .header_nav_container #block-quartiers-de-demain-entete {
+      grid-column: 1 /span 11;
+      order: 2;
+      margin: auto; }
+      header .header_nav_container #block-quartiers-de-demain-entete h2 {
         display: none; }
+    header .header_nav_container .close-block {
+      order: 1; }
   header .close-block, header .open-block {
     cursor: pointer; }
     header .close-block span, header .open-block span {
@@ -175,8 +193,10 @@ header {
       border-radius: 3px;
       z-index: 1; }
   header .close-block {
-    padding-top: 1.2rem;
+    order: 1;
-    padding-left: 2rem; }
+    grid-column: 12;
+    display: grid;
+    margin: auto; }
     header .close-block span {
       transform-origin: center; }
     header .close-block > div > span:first-child {
@@ -186,9 +206,44 @@ header {
   header .open-block {
     height: 100%;
     display: grid;
-    align-items: center; }
+    align-items: center;
+    margin: auto; }
     header .open-block span {
       margin-bottom: 5px;
       transform-origin: 4px 0px; }
 
+.footer {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-gap: 10px;
+  background-color: white;
+  padding-top: 3rem;
+  font-family: "Marianne";
+  font-weight: 800;
+  font-size: 1.1rem;
+  text-transform: lowercase; }
+  .footer #footer-left {
+    grid-column: 1 /span 3; }
+    .footer #footer-left #block-quartiers-de-demain-logoepau {
+      height: 150px; }
+    .footer #footer-left img {
+      width: 150px;
+      height: auto; }
+  .footer #footer-middle {
+    grid-column: 6 /span 7; }
+  .footer #footer-right {
+    grid-column: 9 /span 12; }
+  @media (max-width: 891px) {
+    .footer div {
+      flex-wrap: wrap; } }
+  @media (max-width: 520px) {
+    .footer div {
+      flex-direction: column; } }
+
+#block-quartiers-de-demain-pieddepage-2-menu {
+  display: none; }
+
+#block-quartiers-de-demain-socialmedialinks {
+  flex-direction: column; }
+
 /*pages*/

web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js

@@ -20,6 +20,21 @@
   jQuery(document).ready(function($){
  
 
+
+
+    $('.close-block').click(function(){
+      $(this).parent().fadeOut();
+      if(mobile == true){
+        $("body").css("overflow","auto");
+      }
+    });
+    $('.open-block').click(function(){
+      $(this).prev().css("display","grid");
+      if(mobile == true){
+        $("body").css("overflow","hidden");
+      }
+    });
+  
   });
   
   

web/themes/custom/quartiers_de_demain/scss/global/variables/_colors.scss

@@ -7,6 +7,7 @@ $background-home: rgba(153, 147, 174, 0.1);
 $white-button: rgb(255, 255, 255);
 $white-header:rgb(255, 255, 255);
 $yellow-puca: #fdc300;
+$bleu_fond_header: rgb(232, 235, 244);
 
 
 

web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss

@@ -0,0 +1,55 @@
+.footer{
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-gap: 10px;
+    background-color: $white-header;
+    padding-top: 3rem;
+    font-family: "Marianne";
+    font-weight: 800;
+    font-size: 1.1rem;
+    text-transform: lowercase;
+    #footer-left{
+        grid-column: 1 /span 3;
+        #block-quartiers-de-demain-logorepu{
+
+        }
+        #block-quartiers-de-demain-logoepau{
+           height: $header-height;
+           
+        }
+        img{
+            width: $header-height;
+            height: auto;
+        }
+    }
+    #footer-middle{
+        grid-column: 6 /span 7;
+
+    }
+    #footer-right{
+        grid-column: 9 /span 12;
+
+    }
+
+    div{
+
+        // display: flex;
+        // flex-direction: row;
+        @media(max-width: 891px){
+            // // flex-direction: row;
+            flex-wrap: wrap;
+        }
+        @media(max-width: 520px){
+            flex-direction: column;
+        }
+    }
+
+}
+
+#block-quartiers-de-demain-pieddepage-2-menu{
+    display: none;
+}
+
+#block-quartiers-de-demain-socialmedialinks{
+    flex-direction: column;
+}

web/themes/custom/quartiers_de_demain/scss/partials/_header.scss

@@ -45,15 +45,40 @@ header{
      }
 
     .language-switcher-language-url{
-        
+        ul{
+            display: flex;
+            flex-direction: row;   
+            li:nth-child(1){
+                &::after{
+                    content: "/";
                 }
+            }
+        }
+    }
+
+    .header_nav_container{
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        grid-gap: 10px;
+        // grid-template-rows: repeat(3, 1fr);
+        grid-row: 3;
+        grid-column: 1 /span 12;
+        background: $bleu_fond_header;
         #block-quartiers-de-demain-entete{
+            grid-column: 1 /span 11;
+            order: 2;
+            margin: auto;
             h2{
                 display: none;
             }
         }
+        .close-block{
+            order: 1;
+        }
+
+    }
+    
     .close-block, .open-block{
-        // background: red;
         cursor:pointer;
         span{
             display: block;
@@ -66,8 +91,10 @@ header{
         }
     }
     .close-block{
-        padding-top: 1.2rem;
+        order: 1;
-        padding-left: 2rem;
+        grid-column: 12;
+        display: grid;
+        margin: auto;
         span{
             transform-origin: center;
         }
@@ -89,6 +116,7 @@ header{
         height: 100%;
         display: grid;
         align-items: center;
+        margin: auto;
         span{
             margin-bottom: 5px;	
             transform-origin: 4px 0px;

web/themes/custom/quartiers_de_demain/templates/html.html.twig

@@ -25,14 +25,6 @@
  * @ingroup themeable
  */
 #}
-{%
-  set body_classes = [
-    logged_in ? 'user-logged-in',
-    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
-    node_type ? 'page-node-type-' ~ node_type|clean_class,
-    db_offline ? 'db-offline',
-  ]
-%}
 <!DOCTYPE html>
 <html{{ html_attributes }}>
   <head>

web/themes/custom/quartiers_de_demain/templates/page.html.twig

@@ -79,13 +79,13 @@
 
   {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
     <footer role="contentinfo">
-      <section id="footer-top">{{ page.footer_top }}</section> 
+      {# <section id="footer-top">{{ page.footer_top }}</section>  #}
-      <div>
+      <div class="footer">
         <section id="footer-left">{{ page.footer_left }}</section> 
         <section id="footer-middle">{{ page.footer_middle }}</section> 
         <section id="footer-right">{{ page.footer_right }}</section> 
       </div> 
-      <section id="footer-bottom">{{ page.footer_bottom }}</section> 
+      {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
     </footer>
   {# {% endif %} #}