header menu

web/themes/custom/eql/css-compiled/styles.css

@@ -122,6 +122,9 @@
 .path-faq {
   margin: 0; }
 
+.path-ressources {
+  margin: 0; }
+
 .main-content {
   margin-top: 7rem; }
 
@@ -1166,12 +1169,36 @@ a {
       background-color: #009ee3;
       text-transform: uppercase; }
 
-.page-node-type-ressource .block-contenudelapageprincipale {
-  display: flex; }
-  .page-node-type-ressource .block-contenudelapageprincipale span {
-    flex: 0 1 100%; }
-  .page-node-type-ressource .block-contenudelapageprincipale .node-type-ressource {
-    flex: 0 1 100%; }
+.path-node.page-node-type-ressource #block-contenudelapageprincipale span h2 {
+  font-family: "Source Code Pro";
+  font-size: 2rem;
+  font-weight: 500; }
+
+.path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div {
+  display: grid;
+  grid-template-areas: "contact contact contact"  "ancre texte liens"; }
+  .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-type-de-ressource {
+    text-transform: uppercase; }
+    .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-type-de-ressource a {
+      color: #009ee3;
+      font-size: 0.8rem;
+      font-weight: 800; }
+  .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-auteur-s- {
+    grid-area: contact;
+    font-size: 1.2rem;
+    font-weight: 900; }
+  .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-edition {
+    grid-area: contact; }
+  .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-images {
+    display: none; }
+  .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-textes {
+    grid-area: texte; }
+  .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-fichiers {
+    grid-area: liens; }
+  .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-actu-liee {
+    grid-area: liens; }
+  .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-liens {
+    grid-area: liens; }
 
 .node-type-offre_de_service {
   display: flex; }
@@ -1231,16 +1258,19 @@ a {
       #header-top .region-header-top-left #block-logoeql img {
         width: 80%;
         height: auto; }
+    #header-top .region-header-top-left #block-headermenu {
+      align-self: baseline;
+      width: 70%; }
     #header-top .region-header-top-left ul {
-      font-size: 1.2rem;
+      font-size: 1rem;
       list-style: none;
       display: flex;
       flex-direction: row;
+      justify-content: space-between;
       width: 100%; }
       #header-top .region-header-top-left ul :is(.sous-liste) {
         display: flex;
-        flex-direction: column;
-        padding: 1rem; }
+        flex-direction: column; }
       #header-top .region-header-top-left ul li a {
         color: black; }
       #header-top .region-header-top-left ul li .is-active {
@@ -1249,10 +1279,14 @@ a {
         color: #009ee3; }
     #header-top .region-header-top-left ul div:first-child li div {
       display: none; }
+    #header-top .region-header-top-left ul div:nth-child(2) li div {
+      display: none; }
+    #header-top .region-header-top-left ul:is(.ul1 .sous-liste .ul2) {
+      display: none; }
     #header-top .region-header-top-left :hover ul div:first-child li div {
       display: block;
       background-color: white;
-      padding: 1rem; }
+      padding: 0.2rem; }
       #header-top .region-header-top-left :hover ul div:first-child li div a {
         color: black; }
         #header-top .region-header-top-left :hover ul div:first-child li div a:hover {
@@ -1260,11 +1294,19 @@ a {
     #header-top .region-header-top-left :hover ul div:nth-child(2) li div {
       display: block;
       background-color: white;
-      padding: 1rem; }
+      padding: 0.2rem; }
       #header-top .region-header-top-left :hover ul div:nth-child(2) li div a {
         color: black; }
         #header-top .region-header-top-left :hover ul div:nth-child(2) li div a:hover {
           color: #009ee3; }
+    #header-top .region-header-top-left :hover ul:is(.ul1 .sous-liste .ul2) {
+      display: block;
+      background-color: white;
+      padding: 0.2rem; }
+      #header-top .region-header-top-left :hover ul:is(.ul1 .sous-liste .ul2) a {
+        color: black; }
+        #header-top .region-header-top-left :hover ul:is(.ul1 .sous-liste .ul2) a:hover {
+          color: #009ee3; }
   #header-top #block-socialnetwork-2 {
     position: relative;
     top: -33px;

web/themes/custom/eql/scss/global/_layout.scss

@@ -34,6 +34,9 @@
 .path-faq{
     margin: 0;
 }
+.path-ressources{
+    margin: 0;
+}
 .main-content{
     margin-top: 7rem;
 }

web/themes/custom/eql/scss/pages/_ressource.scss

@@ -1,13 +1,65 @@
 
-.page-node-type-ressource{
+.path-node.page-node-type-ressource{
 
-    .block-contenudelapageprincipale{
-        display: flex;
+    #block-contenudelapageprincipale{
+        // display: grid;
+        // grid-template-areas: "contact" 
+        //                     "ancre texte liens" 
         span{
-            flex: 0 1 100%;
+            // grid-column: 2 / span 6;
+            // grid-area: contact;
+            h2{ 
+                font-family: "Source Code Pro";
+                font-size: 2rem;
+                font-weight: 500;
+            }
         }
         .node-type-ressource{
-            flex:0 1 100%;
+            div{
+                display: grid;
+                grid-template-areas: "contact contact contact" 
+                            "ancre texte liens" ;
+               
+                // display: flex;
+                // flex-direction: column;
+                .field--name-field-type-de-ressource{
+                    // grid-area: contact;
+                    text-transform: uppercase;
+                    a{
+                        color: $blue-light;
+                        font-size: 0.8rem;
+                        font-weight: 800;
+                    }
+                   
+                }
+                .field--name-field-auteur-s-{
+                    grid-area: contact;
+                    font-size: 1.2rem;
+                    font-weight: 900;
+                }
+                .field--name-field-edition {
+                    grid-area: contact;
+                }
+                .field--name-field-date-de-parution{
+
+                }
+                .field--name-field-images{
+                    display:none;
+                }
+                .field--name-field-textes{
+                    grid-area: texte;
+                }
+                .field--name-field-fichiers{
+                    grid-area: liens;
+                }
+                .field--name-field-actu-liee{
+                    grid-area: liens;
+                }
+                .field--name-field-liens{
+                    grid-area: liens;
+                }
+            }
+            // flex:0 1 100%;
         }  
     }
 }

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

@@ -62,16 +62,25 @@
             }
         }
 
+        #block-headermenu{
+            align-self: baseline;
+            width: 70%;
+            .block-headermenu-menu{
+              
+            }
+        }
+
         ul{
-            font-size: 1.2rem;
+            font-size: 1rem;
             list-style: none;
             display: flex;
             flex-direction: row;
+            justify-content: space-between;
             width: 100%;
             :is(.sous-liste){
                 display: flex;
                 flex-direction: column;
-                padding: 1rem;
+                // padding: 1rem;
             }
             li{
 
@@ -89,17 +98,17 @@
         ul div:first-child li div{
             display: none;
         }
-        // ul div:nth-child(2) li div{
-        //     display: none;
-        // }
-        // ul:is(.ul1 .sous-liste .ul2){
-        //     display: none;
-        // }
-        :hover  ul {
+        ul div:nth-child(2) li div{
+            display: none;
+        }
+        ul:is(.ul1 .sous-liste .ul2){
+            display: none;
+        }
+        :hover  ul{
             div:first-child li div{
                 display: block;
                 background-color: $white;
-                padding: 1rem;
+                padding: 0.2rem;
                 a{
                     color: $black;
                     &:hover{
@@ -112,7 +121,7 @@
             div:nth-child(2)  li div{
                 display: block;
                 background-color: $white;
-                padding: 1rem;
+                padding: 0.2rem;
                 a{
                     color: $black;
                     &:hover{
@@ -121,6 +130,18 @@
                 }
             }
         }
+        :hover  ul:is(.ul1 .sous-liste .ul2){
+                display: block;
+                background-color: $white;
+                padding: 0.2rem;
+                a{
+                    color: $black;
+                    &:hover{
+                        color: $blue-light;
+                    }  
+                }
+            
+        } 
     } 
 
     // reseaux sociaux