reseaux sociaux

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

@@ -851,14 +851,6 @@ header {
   position: fixed;
   z-index: 99; }
 
-#block-socialnetwork-2 {
-  display: none; }
-  #block-socialnetwork-2 .field--name-body p {
-    display: flex;
-    flex-direction: row-reverse; }
-    #block-socialnetwork-2 .field--name-body p :nth-child(1):before {
-      content: url(); }
-
 #header-top {
   height: 7rem;
   background-color: white;
@@ -926,6 +918,53 @@ header {
         color: black; }
         #header-top .region-header-top-left :hover ul div:nth-child(2) li div a:hover {
           color: #009ee3; }
+  #header-top #block-socialnetwork-2 {
+    position: relative;
+    top: -33px; }
+    #header-top #block-socialnetwork-2 .field--name-body {
+      min-height: 75px; }
+    #header-top #block-socialnetwork-2 p {
+      display: flex;
+      flex-direction: row-reverse;
+      margin-bottom: 0;
+      min-height: 54px;
+      justify-content: space-around;
+      min-width: 120%; }
+      #header-top #block-socialnetwork-2 p a {
+        color: white;
+        font-size: 0; }
+      #header-top #block-socialnetwork-2 p svg.ext {
+        display: none; }
+      #header-top #block-socialnetwork-2 p .link-twitter {
+        display: flex;
+        background-color: black;
+        min-width: 40px;
+        justify-content: center;
+        align-items: end; }
+        #header-top #block-socialnetwork-2 p .link-twitter:before {
+          content: url("../images/pictos/twitter_white.svg");
+          min-width: 30px;
+          padding-bottom: 0.3rem; }
+      #header-top #block-socialnetwork-2 p .link-youtube {
+        display: flex;
+        background-color: black;
+        min-width: 40px;
+        justify-content: center;
+        align-items: end; }
+        #header-top #block-socialnetwork-2 p .link-youtube:before {
+          content: url("../images/pictos/youtube_white.svg");
+          min-width: 25px;
+          padding-bottom: 0.5rem; }
+      #header-top #block-socialnetwork-2 p .link-linkedin {
+        display: flex;
+        background-color: black;
+        min-width: 40px;
+        justify-content: center;
+        align-items: end; }
+        #header-top #block-socialnetwork-2 p .link-linkedin:before {
+          content: url("../images/pictos/linkedin_white.svg");
+          min-width: 35px;
+          padding-bottom: 0.2rem; }
   #header-top #block-burger {
     z-index: 1;
     background-color: #009ee3;
@@ -942,7 +981,6 @@ header {
     #header-top #block-burger h2:after {
       display: block;
       margin: auto;
-      align-self: center;
       height: 70px;
       content: url('data:image/svg+xml,<svg width="100" height="70" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 30,13 H 70" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-3" d="M 30,25 H 70" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-6" d="M 30,37 H 70" stroke-linecap="round" stroke="white" stroke-width="3"/></svg>'); }
     #header-top #block-burger #block-burger-menu {
@@ -993,7 +1031,7 @@ header {
   #fotter-bottom .region-footer-bottom-left {
     margin-left: 3rem;
     border: none;
-    width: 30%; }
+    width: 25%; }
     #fotter-bottom .region-footer-bottom-left .view-id-partenaires .view-content {
       display: flex;
       flex-direction: row;
@@ -1007,21 +1045,38 @@ header {
       width: auto;
       height: 30px; }
   #fotter-bottom .region-footer-bottom-right {
-    width: 15%;
+    width: 25%;
     display: flex;
     flex-direction: column-reverse;
     justify-content: flex-end; }
     #fotter-bottom .region-footer-bottom-right #block-socialnetwork {
-      display: none; }
+      margin-bottom: 1rem; }
       #fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p {
+        margin-top: 0;
         display: flex;
-        flex-direction: row; }
-        #fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p :nth-child(1):before {
-          display: block;
-          content: "";
-          background: url("../images/pictos/logo-twitter.png"); }
-        #fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p svg {
+        flex-direction: row-reverse;
+        justify-content: start; }
+        #fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p a {
+          color: white;
+          font-size: 0;
+          padding-left: 1rem; }
+        #fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p svg.ext {
           display: none; }
+        #fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p .link-twitter {
+          display: flex; }
+          #fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p .link-twitter:before {
+            content: url("../images/pictos/twitter_black.svg");
+            min-width: 50px; }
+        #fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p .link-youtube {
+          display: flex; }
+          #fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p .link-youtube:before {
+            content: url("../images/pictos/youtube_black.svg");
+            min-width: 50px; }
+        #fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p .link-linkedin {
+          display: flex; }
+          #fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p .link-linkedin:before {
+            content: url("../images/pictos/linkedin_black.svg");
+            min-width: 50px; }
     #fotter-bottom .region-footer-bottom-right #block-pieddepage ul {
       margin-top: 0;
       color: #09398b;

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

@@ -27,7 +27,7 @@
     .region-footer-bottom-left{
         margin-left: 3rem;
         border: none;
-        width: 30%;
+        width: 25%;
         .view-id-partenaires{
             .view-content{
               
@@ -51,30 +51,55 @@
     }
 
     .region-footer-bottom-right{
-        width: 15%;
+        width: 25%;
         display: flex;
         flex-direction: column-reverse;
         justify-content: flex-end;
 
         #block-socialnetwork {
-            display: none;
+            // display: none;
+            margin-bottom: 1rem;
+
             .field--name-body{
                 p{
+                    margin-top: 0;
                     display: flex;
-                    flex-direction: row;
-                    :nth-child(1){
+                    flex-direction: row-reverse;
+                    justify-content: start;
+
+                    a{
+                        color: $white;
+                        font-size: 0;
+                        padding-left: 1rem;
+                    }
+                    svg.ext{
+                        display: none;
+                    }
+                    .link-twitter{
+                        display: flex;
                         &:before{
-                            display: block;
-                            content: "";
-                            background: url("../images/pictos/logo-twitter.png");
+                            content: url("../images/pictos/twitter_black.svg");
+                            min-width: 50px;
                         }
                     }
-                    svg{
-                        display: none;
+                    .link-youtube{
+                        display: flex;
+                        &:before{
+                            content: url("../images/pictos/youtube_black.svg");
+                            min-width: 50px;
+                        }
+                    }
+                    .link-linkedin{
+                        display: flex;
+                        &:before{
+                            content: url("../images/pictos/linkedin_black.svg");
+                            min-width: 50px;
+                        }
                     }
-        
+                    
                 }
             }
+
         }
         #block-pieddepage ul{
             margin-top: 0;

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

@@ -12,21 +12,7 @@ header{
 }
 
 
-#block-socialnetwork-2{
-    display: none;
-    .field--name-body{
-        p{
-            display: flex;
-            flex-direction: row-reverse;
-            :nth-child(1){
-                &:before{
-                    content: url();
-                }
-            }
 
-        }
-    }
-}
 #header-top {
     height: 7rem;
     background-color: $white;
@@ -132,6 +118,70 @@ header{
             }
         }
     } 
+    #block-socialnetwork-2{
+        position: relative;
+        top: -33px;
+        // display: none;
+        .field--name-body{
+            min-height: 75px;
+        }
+            p{
+                display: flex;
+                flex-direction: row-reverse;
+                margin-bottom: 0;
+                min-height: 54px;
+                justify-content: space-around;
+                min-width: 120%;
+                a{
+                    color: $white;
+                    font-size: 0;
+                    // padding-left: 0.5rem;
+                    // padding-right: 0.5rem;
+                }
+                svg.ext{
+                    display: none;
+                }
+                .link-twitter{
+                    display: flex;
+                    background-color: black;
+                    min-width: 40px;
+                    justify-content: center;
+                    align-items: end;
+                    &:before{
+                        content: url("../images/pictos/twitter_white.svg");
+                        min-width: 30px;
+                        padding-bottom: 0.3rem;
+                    }
+                }
+                .link-youtube{
+                    display: flex;
+                    background-color: black;
+                    min-width: 40px;
+                    justify-content: center;
+                    align-items: end;
+                    &:before{
+                        content: url("../images/pictos/youtube_white.svg");
+                        min-width: 25px;
+                        padding-bottom: 0.5rem;
+                    }
+                }
+                .link-linkedin{
+                    display: flex;
+                    background-color: black;
+                    min-width: 40px;
+                    justify-content: center;
+                    align-items: end;
+                    // background-position-y: top;
+                  
+                &:before{
+                        content: url("../images/pictos/linkedin_white.svg");
+                        min-width: 35px;
+                        padding-bottom: 0.2rem;
+                    }
+                }
+            }
+        
+    }
 
     #block-burger {              // menu burger à droite
         z-index: 1;
@@ -151,7 +201,6 @@ header{
         h2:after{
             display: block;
             margin:auto;
-            align-self: center;
             height: 70px;
             content:url('data:image/svg+xml,<svg width="100" height="70" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 30,13 H 70" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-3" d="M 30,25 H 70" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-6" d="M 30,37 H 70" stroke-linecap="round" stroke="white" stroke-width="3"/></svg>');
         }