From 497172ec56e75fa0403191d64a99445807aabbaa Mon Sep 17 00:00:00 2001 From: ouidade Date: Mon, 29 Nov 2021 15:59:28 +0100 Subject: [PATCH] bouton 1er bandeau home suite --- web/themes/custom/eql/css-compiled/styles.css | 65 ++++++++++++++----- .../custom/eql/scss/global/_mediaqueries.scss | 36 ++++++++++ web/themes/custom/eql/scss/pages/_home.scss | 51 +++++++++------ 3 files changed, 116 insertions(+), 36 deletions(-) diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 05e1bf3..e4c461d 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -128,6 +128,26 @@ a { text-decoration: none; } +@media (max-width: 1330px) { + .path-frontpage .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 { + position: relative; } + .path-frontpage .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien.field--type-link { + position: relative; + bottom: +387%; } + .path-frontpage .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-description { + position: relative; + bottom: +132%; } } + +@media (max-width: 1033px) { + .path-frontpage .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 { + position: relative; } + .path-frontpage .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien.field--type-link { + position: relative; + bottom: +450%; } + .path-frontpage .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-description { + position: relative; + bottom: +126%; } } + @media (max-width: 934px) { #block-headermenu { display: none; } @@ -307,7 +327,8 @@ a { .block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca { display: grid; - grid-template-columns: 1fr repeat(4, 2fr) 1fr; } + grid-template-columns: 1fr repeat(4, 2fr) 1fr; + height: 0; } .block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link { grid-column: 3; position: relative; @@ -334,31 +355,43 @@ a { position: relative; } .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 { + display: grid; + grid-template-columns: 1fr repeat(4, 2fr) 1fr; position: relative; background-color: #009ee3; - width: 20%; - float: right; - margin-right: 10%; } + height: 0; + width: 100%; + position: relative; } .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien.field--type-link { - width: fit-content; - padding: 0.4rem 1rem; + position: relative; + bottom: +326%; + grid-column: 5; + width: inherit; font-size: 0.8rem; - margin: auto; - list-style: none; } + list-style: none; + background-color: #009ee3; + display: flex; + justify-content: center; } .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien.field--type-link a { text-transform: uppercase; font-weight: 700; - color: black; } + color: #09398b; } .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien.field--type-link a:before { display: block; + width: fit-content; content: url('data:image/svg+xml,'); } - .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 p { - color: white; - font-size: 1.2rem; - padding-left: 1rem; - padding-right: 1rem; - margin-top: 0; - text-align: center; } + .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-description { + position: relative; + bottom: +140%; + grid-column: 5; + background-color: #009ee3; } + .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-description p { + color: white; + font-size: 1.2rem; + padding-left: 1rem; + padding-right: 1rem; + margin-top: 0; + text-align: center; } .block-views-blockactus-blocks-pages-block-1 { clear: both; diff --git a/web/themes/custom/eql/scss/global/_mediaqueries.scss b/web/themes/custom/eql/scss/global/_mediaqueries.scss index b760b65..959781c 100644 --- a/web/themes/custom/eql/scss/global/_mediaqueries.scss +++ b/web/themes/custom/eql/scss/global/_mediaqueries.scss @@ -1,3 +1,38 @@ +@media (max-width: 1330px){ + .path-frontpage{ + .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483{ + position: relative; + .field--name-field-lien.field--type-link{ + position: relative; + bottom: +387%; + } + .field--name-field-description{ + position: relative; + bottom: +132%; + } + } + + } +} + +@media (max-width: 1033px){ + .path-frontpage{ + .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483{ + position: relative; + .field--name-field-lien.field--type-link{ + position: relative; + bottom: +450%; + } + .field--name-field-description{ + position: relative; + bottom: +126%; + } + } + + } + +} + @media (max-width: 934px){ #block-headermenu{ @@ -42,3 +77,4 @@ } + diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss index 83102a3..149d050 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -91,6 +91,7 @@ .block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca{ display: grid; grid-template-columns: 1fr repeat(4, 2fr) 1fr; + height: 0; .field--type-link { grid-column: 3; // justify-self: end; @@ -126,41 +127,51 @@ position: relative; } .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483{ + display: grid; + grid-template-columns: 1fr repeat(4, 2fr) 1fr; position: relative; background-color: $blue-light; - width: 20%; - float: right; + height: 0; + width: 100%; + position: relative; - // display: flex; - // flex-direction: column; - margin-right: 10%; .field--name-field-lien.field--type-link{ - // align-self: flex-end; - width: fit-content; - // height: fit-content; - padding: 0.4rem 1rem; + position: relative; + bottom: +326%; + grid-column: 5; + width:inherit; font-size: 0.8rem; - margin: auto; list-style: none; + background-color: $blue-light; + display: flex; + justify-content: center; a{ text-transform: uppercase; font-weight: 700; - color: $black; + color: $blue-dark; &:before{ display: block; + width: fit-content; content: url('data:image/svg+xml,'); } } - } - p{ - color: $white; - font-size: 1.2rem; - padding-left: 1rem; - padding-right: 1rem; - margin-top: 0; - text-align: center; - } + } + .field--name-field-description{ + position: relative; + bottom: +140%; + grid-column: 5; + background-color: $blue-light; + p{ + color: $white; + font-size: 1.2rem; + padding-left: 1rem; + padding-right: 1rem; + margin-top: 0; + text-align: center; + } + } + } // bandeau actus