From 90cd59bf621530cbb9469df361f5356dd829e2a2 Mon Sep 17 00:00:00 2001 From: ouidade Date: Tue, 20 Jun 2023 12:09:38 +0200 Subject: [PATCH] css bandeau zoom projets sur home --- web/themes/custom/eql/css-compiled/styles.css | 84 ++++++++++++- .../eql/scss/global/variables/_colors.scss | 3 +- web/themes/custom/eql/scss/pages/_home.scss | 114 +++++++++++++++++- 3 files changed, 195 insertions(+), 6 deletions(-) diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 19141b6..e3b3b05 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -471,9 +471,10 @@ a { visibility: hidden; } .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) { - padding-top: 2rem; } + padding-top: 2rem; + padding-bottom: 4rem; } .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static { - width: 70%; + width: 80%; margin: auto; } @media (max-width: 479px) { .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static { @@ -537,7 +538,84 @@ a { .path-frontpage .block-views-blockprojets-block-4 { border-top: 5px solid #009ee3; - background: rgba(0, 158, 227, 0.2); } + background: rgba(0, 158, 227, 0.2); + padding-top: 2rem; + padding-bottom: 4rem; } + .path-frontpage .block-views-blockprojets-block-4 span h2 { + width: 80%; + margin: auto; + padding-top: 1rem; + padding-bottom: 5rem; + text-transform: uppercase; + color: #e1000f; + font-family: 'Source Code Pro'; + font-weight: 1000; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets { + width: 80%; + margin: auto; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content { + display: flex; + flex-direction: row; + justify-content: space-between; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row { + width: 49%; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet { + color: #09398b; + line-height: 1.5rem; } + @media (max-width: 479px) { + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet { + padding-left: 0rem; + padding-right: 0rem; + padding-top: 2rem; } } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child { + display: flex; + flex-direction: column; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child a { + color: #09398b; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-photo { + order: 1; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-photo img { + width: 100%; + object-fit: cover; + height: fit-content; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-adresse { + order: 2; + display: flex; + text-transform: uppercase; + font-size: 0.9rem; + font-weight: 800; + margin-top: 0.8rem; + line-height: 0.6rem; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-adresse .address { + display: flex; + flex-direction: row; + margin: 0; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-adresse .address .locality { + padding-top: 0 !important; + padding-bottom: 0 !important; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-adresse .address .locality::after { + content: ","; + margin-right: 0.3rem; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-adresse .address .country { + padding-top: 0 !important; + padding-bottom: 0 !important; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-sous-titre { + margin-top: 0.5rem; + font-size: 0.9rem; + font-weight: 800; + order: 4; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-title { + order: 3; + margin-top: 0.5rem; + font-size: 0.9rem; + font-weight: 800; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-title h2 { + margin: 0; } + .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-incube { + order: 4; + color: #e1000f; + margin-top: 0.8rem; + font-size: 0.7rem; } .node-id-20 { background: url("../images/pictos/carre-contour-bleu_partenaire.svg"); diff --git a/web/themes/custom/eql/scss/global/variables/_colors.scss b/web/themes/custom/eql/scss/global/variables/_colors.scss index 6fc66e4..6e4493e 100644 --- a/web/themes/custom/eql/scss/global/variables/_colors.scss +++ b/web/themes/custom/eql/scss/global/variables/_colors.scss @@ -7,4 +7,5 @@ $blue-dark: rgb(9,57,139); $grey-background: rgb(153,147,174); $black: rgb(0,0,0); $white: rgb(255,255,255); -$background-actus: rgba(0,158,227, 0.2); \ No newline at end of file +$background-actus: rgba(0,158,227, 0.2); +$red: rgb(225,0,15); \ No newline at end of file diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss index 33a492e..7818d54 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -100,6 +100,7 @@ } } } + // bouton voir toutes actus du bandeau bleu .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{ visibility: hidden; @@ -151,6 +152,7 @@ .view-display-id-block_2:is(.view-id-home_nodes){ padding-top: 2rem; + padding-bottom: 4rem; // // background: url('data:image/svg+xml,'); // background: url('../images/pictos/carre-contour-bleu.svg'); // // background-position-y: 50%; @@ -160,7 +162,7 @@ .node-type-static{ - width: 70%; + width: 80%; margin: auto; @media (max-width: 479px) { width: 80%; @@ -256,7 +258,115 @@ .block-views-blockprojets-block-4{ border-top: 5px solid $blue-light; background: $background-actus; + padding-top: 2rem; + padding-bottom: 4rem; + span h2{ + width: 80%; + margin: auto; + padding-top: 1rem; + padding-bottom: 5rem; + text-transform: uppercase; + color: $red; + font-family: 'Source Code Pro'; + font-weight: 1000; + } + .view-projets{ + width: 80%; + margin: auto; + .view-content{ + display: flex; + flex-direction: row; + justify-content: space-between; + .views-row{ + width: 49%; + + .node-type-projet{ + color: $blue-dark; + line-height: 1.5rem; + // padding: 0.5rem; + // padding-right: 1rem; + // padding-left: 1rem; + @media (max-width: 479px){ + padding-left: 0rem; + padding-right: 0rem; + padding-top: 2rem; + } + div:first-child{ + display: flex; + flex-direction: column; + + a{ + color: $blue-dark; + } + .field--name-field-photo { + order:1; + img{ + width: 100%; + object-fit: cover; + height: fit-content; + } + // &::after{ + // display: block; + // content:url('data:image/svg+xml, '); + // } + } + .field--name-field-adresse{ + order:2; + display: flex; + text-transform: uppercase; + font-size: 0.9rem; + font-weight: 800; + margin-top: 0.8rem; + line-height: 0.6rem; + .address{ + display: flex; + flex-direction: row; + margin: 0; + .locality{ + padding-top: 0 !important; + padding-bottom: 0 !important; + &::after{ + content:","; + margin-right: 0.3rem; + } + } + .country{ + padding-top: 0 !important; + padding-bottom: 0 !important; + } } + } + .field--name-field-sous-titre{ + margin-top: 0.5rem; + font-size: 0.9rem; + font-weight: 800; + order: 4; + } + .field--name-title{ + order: 3; + margin-top: 0.5rem; + font-size: 0.9rem; + font-weight: 800; + h2{margin: 0;} + } + + .field--name-field-incube{ + order:4; + color: $red; + margin-top: 0.8rem; + font-size: 0.7rem; + } + } + } + // .node-type-projet{ + // .field--type-image img{ + // object-fit: cover; + // width: 100%; + // } + // } + } + } + + } } - } \ No newline at end of file