new header css

web/autoload.php

@@ -10,7 +10,6 @@
  * @see index.php
  * @see core/install.php
  * @see core/rebuild.php
- * @see core/modules/statistics/statistics.php
  */
 
 return require __DIR__ . '/../vendor/autoload.php';

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -6285,20 +6285,16 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
   box-shadow: 1px 0px 8px rgb(0, 0, 0);
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   color: rgb(0, 0, 0);
   top: 0%;
   scroll-margin: 8rem;
 }
 #header-top .region-header-top-left {
-  width: 80vw;
   display: flex;
   flex-direction: row;
-  padding: 1rem;
   padding-left: 4%;
   align-items: center;
   color: rgb(0, 0, 0);
-  font-weight: 800;
   flex: 1;
 }
 #header-top .region-header-top-left #block-logogouv {
@@ -6307,7 +6303,7 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
   align-items: center;
 }
 #header-top .region-header-top-left #block-logogouv img {
-  width: 80%;
+  width: 100%;
   height: auto;
 }
 #header-top .region-header-top-left #block-logoeql {
@@ -6316,73 +6312,93 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
   align-items: center;
 }
 #header-top .region-header-top-left #block-logoeql img {
-  width: 80%;
+  width: 100%;
   height: auto;
 }
-#header-top .region-header-top-left #block-headermenu {
-  align-self: baseline;
-  width: 70%;
-  margin-left: 3rem;
-  margin-right: 3rem;
-}
-#header-top .region-header-top-left ul {
-  font-size: 1rem;
-  list-style: none;
+#header-top .region-header-top-rigth {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-  padding-inline-start: 0px;
-  padding: 1rem;
+  width: 40%;
+  align-items: center;
 }
-#header-top .region-header-top-left ul .is-active {
-  color: rgb(0, 158, 227);
+#header-top .region-header-top-rigth #block-eql-identitedusite {
+  text-transform: uppercase;
+  font-family: "Source Code Pro";
+  color: rgb(9, 57, 139) !important;
+  font-size: 1.2rem;
 }
-#header-top .region-header-top-left ul ul {
-  position: absolute;
-  left: -28%;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  min-width: 210px;
-  width: fit-content;
-  justify-content: space-between;
-  padding-inline-start: 0px;
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-10px);
-  transition: opacity 0.3s ease, transform 0.3s ease;
+#header-top .region-header-top-rigth #block-eql-identitedusite :visited {
+  color: rgb(9, 57, 139) !important;
 }
-#header-top .region-header-top-left ul ul .is-active {
-  color: rgb(0, 158, 227);
+#header-top .region-header-top-rigth #block-eql-identitedusite :link {
+  color: rgb(9, 57, 139) !important;
 }
-#header-top .region-header-top-left ul li {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: rgb(255, 255, 255);
-  padding-bottom: 0.8rem;
-  max-width: inherit;
+#header-top .region-header-top-rigth #block-logoeql {
   padding-left: 1rem;
-  padding-right: 0.5rem;
-  height: fit-content;
+  padding-right: 2.5rem;
 }
-#header-top .region-header-top-left ul li a {
-  color: rgb(0, 0, 0);
+#header-top .region-header-top-rigth #block-logoeql img {
+  width: 80px;
+  height: auto;
 }
-#header-top .region-header-top-left ul li .is-active {
-  color: rgb(0, 158, 227);
+#header-top .region-header-top-rigth #block-burger {
+  z-index: 1;
+  background-color: rgb(0, 158, 227);
+  font-size: 0.7rem;
+  color: black;
+  display: block;
+  width: 7rem;
+  height: 100%;
+  margin-top: 0;
+  aspect-ratio: 1;
+}
+#header-top .region-header-top-rigth #block-burger :hover {
+  cursor: pointer;
 }
-#header-top .region-header-top-left ul li :hover {
+#header-top .region-header-top-rigth #block-burger h2 {
+  padding-top: 1rem;
+  font-size: 1em;
+  font-weight: light;
   color: rgb(0, 158, 227);
 }
-#header-top .region-header-top-left ul li:hover ul {
+#header-top .region-header-top-rigth #block-burger h2:after {
+  display: block;
+  margin: auto;
+  height: 70px;
+  content: url('data:image/svg+xml,<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 5,13 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/><path id="path930-3" d="M 5,25 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/><path id="path930-6" d="M 5,37 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/></svg>');
+}
+#header-top .region-header-top-rigth #block-burger #block-burger-menu {
+  display: block;
+  margin: 0;
+  align-self: center;
+  text-align: center;
+}
+#header-top .region-header-top-rigth #block-burger .ul1:not(.sous-liste) {
+  width: 300%;
+  position: relative;
+  right: 260px;
+  margin: 0;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  z-index: 99;
+}
+#header-top .region-header-top-rigth #block-burger ul {
+  display: none;
+  background-color: rgb(0, 158, 227);
+  line-height: 2rem;
+  list-style: none;
+}
+#header-top .region-header-top-rigth #block-burger ul .ul1 .sous-liste a {
   opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
 }
-#header-top .region-header-top-left ul .ul1.sous-liste.ul2 {
-  padding-left: 1rem;
+#header-top .region-header-top-rigth #block-burger ul a {
+  opacity: 1;
+  color: rgb(255, 255, 255);
+  font-weight: 800;
+  font-size: 1rem;
+}
+#header-top .region-header-top-rigth #block-burger.opened ul {
+  display: block;
 }
 #header-top #block-socialnetwork-2 {
   display: none;
@@ -6445,60 +6461,77 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
   min-width: 35px;
   padding-bottom: 0.2rem;
 }
-#header-top #block-burger {
-  z-index: 1;
-  background-color: rgb(0, 158, 227);
-  font-size: 0.7rem;
-  color: rgb(255, 255, 255);
-  display: block;
-  width: 7rem;
-  height: 100%;
-  margin-top: 0;
+
+.region-header-bottom {
+  box-shadow: 0 4px 4px 3px rgba(0, 0, 0, 0.1);
 }
-#header-top #block-burger :hover {
-  cursor: pointer;
+.region-header-bottom #block-headermenu {
+  align-self: baseline;
+  width: 100%;
+  background-color: white;
+  border-top: solid rgb(0, 158, 227) 1px;
 }
-#header-top #block-burger h2 {
-  padding-top: 1rem;
+.region-header-bottom ul {
+  font-size: 1rem;
+  font-weight: 900;
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  width: 100%;
+  padding-inline-start: 0px;
+  padding: 1rem;
+  margin-top: 0 !important;
+  padding-bottom: 0.5rem;
 }
-#header-top #block-burger h2:after {
-  display: block;
-  margin: auto;
-  height: 70px;
-  content: url('data:image/svg+xml,<svg width="70" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 5,13 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-3" d="M 5,25 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-6" d="M 5,37 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/></svg>');
+.region-header-bottom ul .is-active {
+  color: rgb(0, 158, 227);
 }
-#header-top #block-burger #block-burger-menu {
-  display: block;
-  margin: 0;
-  align-self: center;
-  text-align: center;
+.region-header-bottom ul ul {
+  position: absolute;
+  left: -28%;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  min-width: 210px;
+  width: fit-content;
+  justify-content: space-between;
+  padding-inline-start: 0px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
 }
-#header-top #block-burger .ul1:not(.sous-liste) {
-  width: 300%;
+.region-header-bottom ul ul .is-active {
+  color: rgb(0, 158, 227);
+}
+.region-header-bottom ul li {
   position: relative;
-  right: 260px;
-  margin: 0;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  z-index: 99;
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(255, 255, 255);
+  padding-bottom: 0.8rem;
+  max-width: inherit;
+  padding-left: 1rem;
+  padding-right: 0.5rem;
+  height: fit-content;
 }
-#header-top #block-burger ul {
-  display: none;
-  background-color: rgb(0, 158, 227);
-  line-height: 2rem;
-  list-style: none;
+.region-header-bottom ul li a {
+  color: rgb(0, 0, 0);
 }
-#header-top #block-burger ul .ul1 .sous-liste a {
-  opacity: 1;
+.region-header-bottom ul li .is-active {
+  color: rgb(0, 158, 227);
+}
+.region-header-bottom ul li :hover {
+  color: rgb(0, 158, 227);
 }
-#header-top #block-burger ul a {
+.region-header-bottom ul li:hover ul {
   opacity: 1;
-  color: rgb(255, 255, 255);
-  font-weight: 800;
-  font-size: 1rem;
+  visibility: visible;
+  transform: translateY(0);
 }
-#header-top #block-burger.opened ul {
-  display: block;
+.region-header-bottom ul .ul1.sous-liste.ul2 {
+  padding-left: 1rem;
 }
 
 #fotter-bottom {

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

@@ -16,33 +16,29 @@
     box-shadow: 1px 0px 8px $black;
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    // justify-content: space-between;
     color: $black;
     top:0%;
 
     scroll-margin: 8rem {};
    
-   
-
- // logo + menu déroulant
+ // logo
     .region-header-top-left {  
-        width: 80vw;   
+        // width: 80vw;   
         display:flex;
         flex-direction: row;
-        padding: 1rem;
+        // padding: 1rem;
         padding-left: 4%;
         align-items:center;  
         color: $black;  
-        font-weight: 800;
+        // font-weight: 800;
         flex: 1;
-        
-
         #block-logogouv{
             display: flex;
             height: 100%;
             align-items: center;
             img{
-                width: 80%;
+                width: 100%;
                 height: auto;
             }
         }
@@ -53,83 +49,118 @@
 
             img{
                 // min-width: 80px;
-                width: 80%;
+                width: 100%;
                 height: auto;
             }
         }
+    } 
+    .region-header-top-rigth{
+        display: flex;
+        flex-direction: row;
+        width: 40%;
+        align-items: center;
 
-        #block-headermenu{
-            align-self: baseline;
-            width: 70%;
-            margin-left: 3rem;
-            margin-right: 3rem;
+            
+        #block-eql-identitedusite{
+            text-transform: uppercase;
+            font-family: "Source Code Pro";
+            color: $blue-dark !important;
+            font-size: 1.2rem;
+            :visited {
+                color: $blue-dark !important;
+            }
+            :link{
+                color: $blue-dark !important;
+            }
+            
+        }  
+        #block-logoeql{
+            padding-left: 1rem;
+            padding-right: 2.5rem;
+            img{
+                width: 80px;
+                height: auto;
+            }
+          
         }
+        
+        // menu burger à droite
 
-        ul{
-            font-size: 1rem;
-            list-style: none;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            width: 100%;
-            padding-inline-start: 0px;
-            padding: 1rem;
-            .is-active{
-                color:$blue-light;
+        #block-burger {              
+            z-index: 1;
+            background-color: $blue-light;
+            font-size: 0.7rem;
+            color: black;
+            display: block;
+            width: 7rem;
+            height: 100%;
+            margin-top: 0;
+            aspect-ratio: 1;
+            :hover{
+                cursor: pointer;
             }
-            ul{
-                position: absolute;
-                left: -28%;
-                z-index: 1000;
-                // display: none;
-                display: flex;
-                flex-direction: column;
-                min-width: 210px;
-                width: fit-content;
-                justify-content: space-between;
-                padding-inline-start: 0px;
-                .is-active{
-                    color:$blue-light;
-                }
-                opacity: 0;
-                visibility: hidden;
-                transform: translateY(-10px);
-                transition: opacity 0.3s ease, transform 0.3s ease;
+            h2{
+                padding-top: 1rem;
+                font-size: 1em;
+                font-weight: light;
+                color: $blue-light;
             }
+            h2:after{
+                display: block;
+                margin:auto;
+                height: 70px;
+                content:url('data:image/svg+xml,<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 5,13 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/><path id="path930-3" d="M 5,25 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/><path id="path930-6" d="M 5,37 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/></svg>'); 
+            }        
 
-            li{
+            #block-burger-menu{
+                display: block;
+                margin: 0;
+                align-self: center;
+                text-align: center;
+                // height:7rem;
+            }
+
+
+    // block menu open fond bleu
+
+            .ul1:not(.sous-liste){    
+                width: 300%;
                 position: relative;
-                display: flex;
-                flex-direction: column;
-                background-color: $white;
-                padding-bottom: 0.8rem;
-                max-width: inherit;
-                padding-left: 1rem;
-                padding-right: 0.5rem;
-                height: fit-content;
-                a {
-                    color: $black;
-                }
-                .is-active{
-                    color:$blue-light;
+                right: 260px;
+                margin: 0;
+                padding-top: 2rem;
+                padding-bottom: 2rem;
+                z-index: 99;
+
+            }
+            ul  {
+                display: none;
+                background-color: $blue-light;
+                line-height: 2rem;
+                list-style: none;
+            
+                .ul1 .sous-liste{
+                    a{
+                        opacity: 1;
+                    }
                 }
-                :hover{
-                    color: $blue-light;
+                a{
+                    opacity: 1;
+                    color: $white;
+                    font-weight: 800;
+                    font-size: 1rem;
                 }
             }
+            &.opened ul {
+            display: block;
 
-            li:hover ul {
-                opacity: 1;
-                visibility: visible;
-                transform: translateY(0);
-            }
-        
-            .ul1.sous-liste.ul2{
-                padding-left: 1rem;
             }
-        }
+        }  
+    }
+
+
+
 
-    } 
 
     // reseaux sociaux
 
@@ -200,74 +231,87 @@
         
     }
 
-// menu burger à droite
-    #block-burger {              
-        z-index: 1;
-        background-color: $blue-light;
-        font-size: 0.7rem;
-        color: $white;
-        display: block;
-        width: 7rem;
-        height: 100%;
-        margin-top: 0;
-        :hover{
-            cursor: pointer;
-        }
-        h2{
-            padding-top: 1rem;
-        }
-        h2:after{
-            display: block;
-            margin:auto;
-            height: 70px;
-            content:url('data:image/svg+xml,<svg width="70" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 5,13 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-3" d="M 5,25 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-6" d="M 5,37 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/></svg>'); 
-        }        
-
-        #block-burger-menu{
-            display: block;
-            margin: 0;
-            align-self: center;
-            text-align: center;
-            // height:7rem;
-        }
 
+}
+.region-header-bottom{
+    box-shadow: 0 4px 4px 3px rgba(0, 0, 0, 0.1);
+    #block-headermenu{
+        align-self: baseline;
+        width: 100%;
+        // margin-left: 3rem;
+        // margin-right: 3rem;
+        background-color: white;
+        border-top: solid $blue-light 1px;
+    }
 
-  // block menu open fond bleu
+    ul{
+        font-size: 1rem;
+        font-weight: 900;
+        list-style: none;
+        display: flex;
+        flex-direction: row;
+        // justify-content: space-between;
+        justify-content: space-evenly;
+        width: 100%;
+        padding-inline-start: 0px;
+        padding: 1rem;
+        margin-top: 0 !important;
+        padding-bottom: 0.5rem;
+        .is-active{
+            color:$blue-light;
+        }
+        ul{
+            position: absolute;
+            left: -28%;
+            z-index: 1000;
+            // display: none;
+            display: flex;
+            flex-direction: column;
+            min-width: 210px;
+            width: fit-content;
+            justify-content: space-between;
+            padding-inline-start: 0px;
+            .is-active{
+                color:$blue-light;
+            }
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-10px);
+            transition: opacity 0.3s ease, transform 0.3s ease;
+        }
 
-        .ul1:not(.sous-liste){    
-            width: 300%;
+        li{
             position: relative;
-            right: 260px;
-            margin: 0;
-            padding-top: 2rem;
-            padding-bottom: 2rem;
-            z-index: 99;
-
-        }
-        ul  {
-            display: none;
-            background-color: $blue-light;
-            line-height: 2rem;
-            list-style: none;
-        
-            .ul1 .sous-liste{
-                a{
-                    opacity: 1;
-                }
+            display: flex;
+            flex-direction: column;
+            background-color: $white;
+            padding-bottom: 0.8rem;
+            max-width: inherit;
+            padding-left: 1rem;
+            padding-right: 0.5rem;
+            height: fit-content;
+            a {
+                color: $black;
             }
-            a{
-                opacity: 1;
-                color: $white;
-                font-weight: 800;
-                font-size: 1rem;
+            .is-active{
+                color:$blue-light;
+            }
+            :hover{
+                color: $blue-light;
             }
         }
-        &.opened ul {
-          display: block;
 
+        li:hover ul {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+    
+        .ul1.sous-liste.ul2{
+            padding-left: 1rem;
         }
-    }   
+    }
+ 
 
 
 }
-