diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 7724362..84a695b 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/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, '); } #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; diff --git a/web/themes/custom/eql/images/pictos/linkedin_black.svg b/web/themes/custom/eql/images/pictos/linkedin_black.svg new file mode 100644 index 0000000..300a548 --- /dev/null +++ b/web/themes/custom/eql/images/pictos/linkedin_black.svg @@ -0,0 +1,48 @@ + +image/svg+xml diff --git a/web/themes/custom/eql/images/pictos/linkedin_white.svg b/web/themes/custom/eql/images/pictos/linkedin_white.svg new file mode 100644 index 0000000..b4e379d --- /dev/null +++ b/web/themes/custom/eql/images/pictos/linkedin_white.svg @@ -0,0 +1,48 @@ + +image/svg+xml diff --git a/web/themes/custom/eql/images/pictos/twitter_black.svg b/web/themes/custom/eql/images/pictos/twitter_black.svg new file mode 100644 index 0000000..ddbf641 --- /dev/null +++ b/web/themes/custom/eql/images/pictos/twitter_black.svg @@ -0,0 +1,43 @@ + +image/svg+xml diff --git a/web/themes/custom/eql/images/pictos/twitter_white.svg b/web/themes/custom/eql/images/pictos/twitter_white.svg new file mode 100644 index 0000000..2ecbb82 --- /dev/null +++ b/web/themes/custom/eql/images/pictos/twitter_white.svg @@ -0,0 +1,43 @@ + +image/svg+xml diff --git a/web/themes/custom/eql/images/pictos/youtube_black.svg b/web/themes/custom/eql/images/pictos/youtube_black.svg new file mode 100644 index 0000000..1fdef8f --- /dev/null +++ b/web/themes/custom/eql/images/pictos/youtube_black.svg @@ -0,0 +1,74 @@ + +image/svg+xml diff --git a/web/themes/custom/eql/images/pictos/youtube_white.svg b/web/themes/custom/eql/images/pictos/youtube_white.svg new file mode 100644 index 0000000..2c5bc91 --- /dev/null +++ b/web/themes/custom/eql/images/pictos/youtube_white.svg @@ -0,0 +1,78 @@ + +image/svg+xml diff --git a/web/themes/custom/eql/scss/partials/_footer.scss b/web/themes/custom/eql/scss/partials/_footer.scss index 076dbb0..3ba1447 100644 --- a/web/themes/custom/eql/scss/partials/_footer.scss +++ b/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){ - &:before{ - display: block; - content: ""; - background: url("../images/pictos/logo-twitter.png"); - } + flex-direction: row-reverse; + justify-content: start; + + a{ + color: $white; + font-size: 0; + padding-left: 1rem; } - svg{ + svg.ext{ display: none; } - + .link-twitter{ + display: flex; + &:before{ + content: url("../images/pictos/twitter_black.svg"); + min-width: 50px; + } + } + .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; diff --git a/web/themes/custom/eql/scss/partials/_header.scss b/web/themes/custom/eql/scss/partials/_header.scss index ae287b2..9bd51a6 100644 --- a/web/themes/custom/eql/scss/partials/_header.scss +++ b/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, '); }