header

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

@@ -1,137 +0,0 @@
-footer{
-    background-color: $white-header;
-    padding-top: 3rem;
-    font-family: "Marianne";
-    font-weight: 800;
-    font-size: 1.1rem;
-    text-transform: lowercase;
-    div{
-        display: flex;
-        flex-direction: row;
-        @media(max-width: 891px){
-            // // flex-direction: row;
-            flex-wrap: wrap;
-        }
-        @media(max-width: 520px){
-            flex-direction: column;
-        }
-    }
-
-    h2{font-size: 1.1rem;}
-
-
-    section:not(:first-of-type){
-        border-left: $yellow-puca solid 2px;
-        padding-left: 2rem;
-        @media(max-width: 891px){
-            margin-left: 1rem;
-            margin-right: 1rem;
-            border-left: $yellow-puca solid 2px;
-
-            // border-left: none;
-            // border-top: $yellow-puca solid 2px;
-        }
-        @media(max-width: 520px){
-            margin-left: 1rem;
-            margin-right: 1rem;
-            border-left: none;
-            border-top: $yellow-puca solid 2px;
-        }
-    }
-    section:not(:last-of-type){
-        padding-right: 5rem;
-        @media(max-width: 891px){
-            padding-right: 0;
-        }
-        @media(max-width: 520px){
-            padding-right: 0;
-            
-        }
-
-    }
-    section:last-of-type{
-        padding-right: 5rem;
-        @media(max-width: 891px){
-            border-top: $yellow-puca solid 2px;
-            border-left: none;
-        }
-
-
-    }
-}
-
-#footer-left {
-margin-left: 10%;
-@media(max-width: 891px){
-    margin-left: 1rem;
-    padding-left: 2rem;
-    width: 40%;
-}
-@media(max-width: 520px){
-    width: 100%;
-    margin-left: 1rem;
-    padding-left: 2rem;
-}
-    div{
-    display: flex;
-    flex-direction: column;
-
-        #block-reha-pieddepage {
-            ul{
-                padding-left: 0;
-            }
-        }
-        #block-reha-logoreha-3{
-            display: none;
-        }
-        .social-media-links--platforms{
-            display: flex;
-            flex-direction: row;
-            svg.ext{
-                display: none;
-            }
-        }
-    }
-}
-
-#footer-middle{
-    @media(max-width: 891px){
-        width: 40%;
-    }
-    @media(max-width: 520px){
-        width: 100%;
-        margin-right: 1rem;
-    }
-    #block-reha-operateurduprogramme{
-        display: flex;
-        flex-direction: column;
-        img{
-            max-width: 150px;
-            height: fit-content;
-            max-height: 100px;
-            object-fit: contain;
-            padding: 1rem;
-        }
-    }
-}
-
-#footer-right{
-    #block-reha-config-pages-2{
-        display: flex;
-        flex-direction: column;
-        .field--name-field-partenaires{
-            .field__items{
-                display: flex;
-                flex-direction: row;
-                flex-wrap: wrap;
-                img{
-                    max-width: 120px;
-                    height: fit-content;
-                    max-height: 115px;
-                    object-fit: contain;
-                    // padding: 1rem;
-                }
-            }
-        }
-    }
-}

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

@@ -1,14 +1,97 @@
 header{
-
-    display:grid;
-    grid-template-rows:"logo logo logo logo logo nav"
-                        "nav nav nav nav nav nav"
-                        "logo logo nav rs" ;
-    #block-quartiers-de-demain-logorepu-2{
-        grid-row: logo;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-gap: 10px;
+    grid-template-rows: repeat(3, 1fr);
+    height: 150px;
+    background-color: $white-header;
+    z-index: 99;
+    width: 100vw;
+    max-width: 100vw;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+    @media (max-width:800px) {
+            // height: 100px;
+            width: 800px;
     }
-    #block-quartiers-de-demain-logoepau-2{
-        grid-area: logo;
+    .contextual-region{
+        width: max-content;
     }
+    
 
+     .header_left_container{
+         grid-column: 1 /span 11;
+         grid-row: 1 /span 2;
+         display: flex;
+         flex-direction: row;
+        //  width: ;
+         #block-quartiers-de-demain-logorepu-2{
+            // max-height: 90%;
+            // height: $header-height;
+         }
+         #block-quartiers-de-demain-logoepau-2{
+            // max-height: 50px;
+            height: $header-height;
+            
+         }
+         img{
+            //  width: auto;
+            //  height: $header-height;
+             width: $header-height;
+             height: auto;
+         }
+     }
+
+    .language-switcher-language-url{
+        
+    }
+    #block-quartiers-de-demain-entete{
+        h2{
+            display: none;
+        }
+    }
+    .close-block, .open-block{
+        // background: red;
+        cursor:pointer;
+        span{
+            display: block;
+            width: 33px;
+            height: 2px;
+            position: relative;
+            background: black;
+            border-radius: 3px;
+            z-index: 1;
+        }
+    }
+    .close-block{
+        padding-top: 1.2rem;
+        padding-left: 2rem;
+        span{
+            transform-origin: center;
+        }
+        &>div>span:first-child{
+            
+            transform: translateY(57%)rotate(45deg);
+        }
+        &>div>span:nth-child(2){
+            transform: rotate(-45deg);
+        }
+        // @include breakpoint(small down) {
+        //     position: absolute;
+        //     top: 1rem;
+        //     right: 1rem;
+        // }
+    
+    }
+    .open-block{
+        height: 100%;
+        display: grid;
+        align-items: center;
+        span{
+            margin-bottom: 5px;	
+            transform-origin: 4px 0px;
+        }
+    }
 }