From 4b4ae05e29b89048a364589a70bfe1567102230e Mon Sep 17 00:00:00 2001 From: ouidade Date: Wed, 1 Dec 2021 16:57:18 +0100 Subject: [PATCH] 1er bandeau home --- web/themes/custom/eql/css-compiled/styles.css | 128 +++++++++++-- web/themes/custom/eql/scss/pages/_home.scss | 174 +++++++++++++++++- 2 files changed, 284 insertions(+), 18 deletions(-) diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index be6e5e7..336294e 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -253,15 +253,118 @@ a { .path-frontpage .block-region-content { display: grid; - grid-template-areas: "presentation presentation presentation presentation presentation presentation" "presentation presentation presentation presentation presentation presentation" "presentation presentation presentation presentation presentation presentation" "actus actus actus actus actus actus" "actus actus actus actus actus actus" "programme programme programme programme programme programme" "programme programme programme programme programme programme" "programme programme programme programme programme programme"; + grid-template-areas: "presentation presentation presentation presentation presentation presentation" "presentation presentation presentation presentation presentation presentation" "actus actus actus actus actus actus" "actus actus actus actus actus actus" "programme programme programme programme programme programme" "programme programme programme programme programme programme" "programme programme programme programme programme programme"; grid-template-rows: auto auto auto; - grid-template-columns: 1fr repeat(4, 2fr) 1fr; } + grid-template-columns: 1fr repeat(4, 2fr) 1fr; + min-height: 100vh; } .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 { - grid-area: presentation; } + grid-area: presentation; + grid-row: 1; + background: url("../images/pictos/carre-contour-bleu_contact.svg"); } + .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child { + display: grid; + grid-template-columns: 1fr repeat(4, 2fr) 1fr; + grid-template-rows: repeat(4, auto); } + .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-images { + display: none; } + .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-accroche { + grid-column: 2 /span 3; + grid-row: 2 / span 2; + font-size: 5rem; + font-weight: 800; + color: #009ee3; + line-height: 6rem; + margin-bottom: 5rem; } + .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-accroche p { + margin: 0; } + .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-title { + grid-column: 4; + grid-row: 1; + margin-top: 2rem; } + .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-title h2 a { + color: #e1000f; + font-weight: 900; + text-transform: uppercase; } + .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .links.inline { + grid-column: 2; + grid-row: 4; + max-width: 70%; + min-width: fit-content; + height: 1.5rem; + padding: 0.4rem 1rem; + font-size: 0.8rem; + margin-bottom: 2.5rem; + background-color: white; + border: 2px solid #009ee3; + list-style: none; + text-align: center !important; } + .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .links.inline a { + display: inline-flex; + text-transform: uppercase; + font-weight: 700; + color: #009ee3; } + .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .links.inline a:after { + display: block; + content: url('data:image/svg+xml,'); } .path-frontpage .block-region-content .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca { - grid-area: presentation; } + grid-area: presentation; + grid-column: 3 /span 4; + grid-row: 1; + align-self: end; + margin-bottom: 2.5rem; + width: fit-content; } + .path-frontpage .block-region-content .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link { + grid-column: 3; + position: relative; + max-width: 70%; + min-width: fit-content; + height: 1.5rem; + padding: 0.4rem 1rem; + font-size: 0.8rem; + margin: 0; + background-color: white; + border: 2px solid #009ee3; + list-style: none; + top: -200%; + text-align: center !important; } + .path-frontpage .block-region-content .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link a { + display: inline-flex; + text-transform: uppercase; + font-weight: 700; + color: #009ee3; } + .path-frontpage .block-region-content .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link a::after { + content: url('data:image/svg+xml,'); } .path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 { - grid-area: presentation; } + grid-area: presentation; + grid-column: 5; + grid-row: 1; + background-color: #009ee3; + height: fit-content; + align-self: end; } + .path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien { + text-align: center; } + .path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien:before { + margin-top: 1rem; + display: block; + content: url("../images/pictos/picto_faq.svg"); } + .path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien a { + font-size: 0.8rem; + font-weight: 1000; + color: #09398b; + text-transform: uppercase; } + .path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-description p { + margin-top: 0; + margin-bottom: 0; + margin-left: 1.5rem; + margin-right: 1.5rem; + text-align: center; } + .path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-description p a { + font-weight: 800; + color: white; + font-size: 1.3rem; } + .path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-description p:after { + display: block; + content: url("../images/pictos/noun_Arrow_3771902.svg"); } .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 { grid-area: actus; width: 100vw; @@ -320,10 +423,11 @@ a { padding-top: 1rem; } .path-frontpage .block-region-content .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 { grid-area: actus; - grid-row: 5; + grid-row: 4; grid-column: 5 / span 6; width: fit-content; - margin-bottom: 2rem; } + margin-bottom: 2rem; + align-self: end; } .path-frontpage .block-region-content .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 .field--type-link { width: fit-content; height: fit-content; @@ -353,9 +457,9 @@ a { .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static div:first-child:not(.field__item):not(.field) { display: grid; grid-template-columns: 1fr repeat(4, 2fr) 1fr; - grid-template-rows: 1fr 1fr 1fr 0.5fr 6fr; } + grid-template-rows: 1fr 1fr 1fr 0.5fr 1fr 1fr; } .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links { - grid-row: 4; + grid-row: 3; grid-column: 5 / span 6; width: fit-content; height: fit-content; @@ -364,7 +468,8 @@ a { margin: 0; background-color: white; border: 2px solid #009ee3; - list-style: none; } + list-style: none; + align-self: end; } .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links a { text-transform: uppercase; font-weight: 700; @@ -393,7 +498,8 @@ a { margin-block-start: 0; } .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-videos { grid-column: 1 / span 5; - grid-row: 5; } + grid-row: 5 / span 6; + height: fit-content; } .node-id-20 { background: url("../images/pictos/carre-contour-bleu_partenaire.svg"); diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss index e01a0e9..5d1853a 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -3,7 +3,7 @@ display: grid; grid-template-areas: "presentation presentation presentation presentation presentation presentation" "presentation presentation presentation presentation presentation presentation" - "presentation presentation presentation presentation presentation presentation" + // "presentation presentation presentation presentation presentation presentation" "actus actus actus actus actus actus" "actus actus actus actus actus actus" "programme programme programme programme programme programme" @@ -11,17 +11,170 @@ "programme programme programme programme programme programme"; grid-template-rows: auto auto auto; grid-template-columns: 1fr repeat(4, 2fr) 1fr; + min-height: 100vh; .block-views-blockhome-nodes-block-1{ grid-area: presentation; + grid-row: 1; + background: url("../images/pictos/carre-contour-bleu_contact.svg"); + .node-type-static{ + div:first-child{ + display: grid; + // flex-direction: column; + grid-template-columns: 1fr repeat(4, 2fr) 1fr; + grid-template-rows: repeat(4, auto); + .field--name-field-images{ + display: none; + // z-index: -99; + // filter: grayscale(100%); + // filter: brightness(0%); + // opacity: 0.5; + // // display: none; + // grid-column: 1 /span 10; + // grid-row: 1 / span 4; + // img{ + // width: 100vw; + // height: auto; + // } + } + .field--name-field-accroche{ + grid-column: 2 /span 3; + grid-row: 2 / span 2; + font-size: 5rem; + font-weight: 800; + color: $blue-light; + line-height: 6rem; + margin-bottom: 5rem; + p{ + margin: 0; + } + } + .field--name-title{ + grid-column: 4; + grid-row: 1; + margin-top: 2rem; + + h2{ + a{ + color: #e1000f; + font-weight: 900; + text-transform: uppercase; + } + } + } + .links.inline{ + grid-column: 2; + grid-row: 4; + max-width: 70%; + min-width: fit-content; + height: 1.5rem; + padding: 0.4rem 1rem; + font-size: 0.8rem; + margin-bottom: 2.5rem; + background-color: $white; + border: 2px solid $blue-light; + list-style: none; + text-align: center !important; + + a{ + display: inline-flex; + text-transform: uppercase; + font-weight: 700; + color: $blue-light; + &:after{ + display: block; + content: url('data:image/svg+xml,'); + + } + } + } + } + } } + + // bouton déposer candidature .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca{ grid-area: presentation; + grid-column: 3 /span 4; + grid-row: 1; + align-self: end; + margin-bottom: 2.5rem; + width: fit-content; + + .field--type-link { + grid-column: 3; + // justify-self: end; + position: relative; + max-width: 70%; + min-width: fit-content; + height: 1.5rem; + padding: 0.4rem 1rem; + font-size: 0.8rem; + margin: 0; + background-color: $white; + border: 2px solid $blue-light; + list-style: none; + top: -200%; + text-align: center !important; + + a{ + display: inline-flex; + text-transform: uppercase; + font-weight: 700; + color: $blue-light; + + } + a::after{ + content: url('data:image/svg+xml,'); + + } + } } + + // bouton foire aux questions .block-block-content1bb9024b-d95f-4137-894c-362abf10a483{ grid-area: presentation; + grid-column: 5; + grid-row: 1; + background-color: $blue-light; + height: fit-content; + align-self: end; + .field--name-field-lien{ + &:before{ + margin-top: 1rem; + display: block; + content: url("../images/pictos/picto_faq.svg"); + } + text-align: center; + a{ + font-size: 0.8rem; + font-weight: 1000; + color: $blue-dark; + text-transform: uppercase; + } + } + .field--name-field-description{ + p{ + margin-top: 0; + margin-bottom: 0; + margin-left: 1.5rem; + margin-right: 1.5rem; + text-align: center; + a{ + font-weight: 800; + color: $white; + font-size: 1.3rem; + } + &:after{ + display: block; + content:url("../images/pictos/noun_Arrow_3771902.svg") + + } + } + } } + // bandeau actus .block-views-blockactus-blocks-pages-block-1{ grid-area: actus; @@ -90,13 +243,15 @@ } } } + // bouton voir toutes actus du bandeau bleu .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{ grid-area: actus; - grid-row: 5; + grid-row: 4; grid-column: 5 / span 6; width: fit-content; - margin-bottom: 2rem; + margin-bottom: 2rem; + align-self: end; .field--type-link { width: fit-content; height: fit-content; @@ -119,6 +274,8 @@ } } } + + // présentation programme .block-views-blockhome-nodes-block-2{ grid-area: programme; .view-display-id-block_2:is(.view-id-home_nodes){ @@ -135,12 +292,12 @@ div:first-child:not(.field__item):not(.field){ display: grid; - grid-template-columns: 1fr repeat(4,2fr) 1fr; - grid-template-rows: 1fr 1fr 1fr 0.5fr 6fr; + grid-template-columns: 1fr repeat(4, 2fr) 1fr; + grid-template-rows: 1fr 1fr 1fr 0.5fr 1fr 1fr; } .inline.links{ - grid-row: 4; + grid-row: 3; grid-column: 5 / span 6; width: fit-content; height: fit-content; @@ -150,6 +307,7 @@ background-color: $white; border: 2px solid $blue-light; list-style: none; + align-self: end; a{ text-transform: uppercase; @@ -190,8 +348,10 @@ } .field--name-field-videos{ + grid-column: 1 / span 5; - grid-row: 5; + grid-row: 5 / span 6; + height: fit-content; } }