From fc4bade327d2a0fe2290533a8a37eb6899906c77 Mon Sep 17 00:00:00 2001 From: ouidade Date: Wed, 1 Dec 2021 14:26:45 +0100 Subject: [PATCH] bandeau actu home --- web/themes/custom/eql/css-compiled/styles.css | 310 +++-------- web/themes/custom/eql/scss/pages/_home.scss | 484 +++++------------- .../custom/eql/scss/pages/_home1 copy.scss | 393 ++++++++++++++ 3 files changed, 585 insertions(+), 602 deletions(-) create mode 100644 web/themes/custom/eql/scss/pages/_home1 copy.scss diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 80a0fa7..b4feaab 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -251,223 +251,80 @@ a { width: 100%; height: auto; } -.field--type-entity-reference-revisions .paragraph-summary { - font-family: "Marianne", sans-serif; - font-size: 5rem; - font-weight: 600; - color: black !important; - text-transform: capitalize; } - .field--type-entity-reference-revisions .paragraph-summary span:nth-of-type(2n) { - display: block; - font-size: 1rem; } - -.field--type-entity-reference-revisions .paragraph-summary:nth-of-type(2n) { - font-size: 2rem; } - -.block-views-blockhome-nodes-block-1 { - background: url("../images/pictos/carre-contour-bleu_contact.svg"); } - .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); } - .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-images { - display: none; } - .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: 0; } - .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-accroche p { - margin: 0; } - .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-title { - grid-column: 4; - grid-row: 1; - margin-top: 2rem; } - .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; } - .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; } - .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; } - .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .links.inline a:after { - display: block; - content: url('data:image/svg+xml,'); } - -.block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca { +.path-frontpage .block-region-content { display: grid; - 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; - 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; } - .block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link a { - display: inline-flex; - text-transform: uppercase; - font-weight: 700; - color: #009ee3; } - .block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link a::after { - content: url('data:image/svg+xml,'); } - -.block-region-content { - position: relative; } - -.block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 { - position: relative; - width: 20%; - float: right; - margin-right: 13%; - bottom: -100%; - background-color: #009ee3; } - .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien { - text-align: center; } - .block-block-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"); } - .block-block-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; } - .block-block-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; } - .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-description p a { - font-weight: 800; - color: white; - font-size: 1.3rem; } - .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-description p:after { - display: block; - content: url("../images/pictos/noun_Arrow_3771902.svg"); } - -.block-views-blockactus-blocks-pages-block-1 { - clear: both; - border-bottom: 5px solid #009ee3; - border-top: 5px solid #009ee3; } - .block-views-blockactus-blocks-pages-block-1 .view-content { - display: grid; - grid-template-columns: 1fr repeat(4, 2fr) 1fr; - margin: auto; - padding-top: 2rem; - padding-bottom: 4rem; } - .block-views-blockactus-blocks-pages-block-1 .view-content .views-row:nth-of-type(1) { - grid-column: 2; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite { - color: black; - line-height: 1.5rem; - padding: 0.5rem; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite div:first-child { - display: flex; - flex-direction: column; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite div:first-child :nth-child(1) { - order: 1; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite div:first-child :nth-child(4) { - order: 2; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite div:first-child :nth-child(5) { - order: 3; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite .field--name-field-images .field__item img { - max-width: 70%; - max-height: 130px; - object-fit: cover; - width: 100%; - padding-bottom: 1rem; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite time { - font-size: 0.9rem; - font-weight: 800; - padding-right: 1rem; - width: fit-content; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite time:after { - padding-left: 0.5rem; - content: "|"; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite .field:not(.field--name-field-images) { - width: 100%; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite h2 { - margin: 0; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite a { - color: black; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite .inline.links { - padding-top: none !important; - list-style: none; - width: fit-content; - align-self: flex-end; - padding-right: 1rem; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite .inline.links a { - display: none; } - .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite .field--name-field-actu-type { - padding-top: 1rem; } - -.block-block-content.block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 { - display: grid; - grid-template-columns: 1fr repeat(8, 2fr) 1fr; - position: relative; - height: 0; } - .block-block-content.block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 .field--type-link { - grid-area: 8 / span 9; - justify-self: end; - position: relative; - top: -200%; + 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"; + grid-template-rows: auto auto auto; + grid-template-columns: 1fr repeat(4, 2fr) 1fr; } + .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 { + grid-area: presentation; } + .path-frontpage .block-region-content .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca { + grid-area: presentation; } + .path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 { + grid-area: presentation; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 { + grid-area: actus; + width: 100vw; + border-bottom: 5px solid #009ee3; + border-top: 5px solid #009ee3; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content { + display: grid; + grid-template-columns: 1fr repeat(4, 2fr) 1fr; + margin: auto; + padding-top: 2rem; + padding-bottom: 4rem; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .views-row:nth-of-type(1) { + grid-column: 2; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite { + color: black; + line-height: 1.5rem; + padding: 0.5rem; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite div:first-child { + display: flex; + flex-direction: column; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite div:first-child :nth-child(1) { + order: 1; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite div:first-child :nth-child(4) { + order: 2; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite div:first-child :nth-child(5) { + order: 3; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-images .field__item img { + max-width: 70%; + max-height: 150px; + object-fit: cover; + width: 100%; + padding-bottom: 1rem; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite time { + font-size: 0.9rem; + font-weight: 800; + padding-right: 1rem; + width: fit-content; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite time:after { + padding-left: 0.5rem; + content: "|"; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field:not(.field--name-field-images) { + width: 100%; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite h2 { + margin: 0; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite a { + color: black; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .inline.links { + padding-top: none !important; + list-style: none; + width: fit-content; + align-self: flex-end; + padding-right: 1rem; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .inline.links a { + display: none; } + .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-actu-type { + padding-top: 1rem; } + .path-frontpage .block-region-content .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 { + grid-area: actus; + grid-row: 5; + grid-column: 5 / span 6; width: fit-content; - height: fit-content; - padding: 0.4rem 1rem; - font-size: 0.8rem; - margin: 0; - background-color: white; - border: 2px solid #009ee3; - list-style: none; } - .block-block-content.block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 .field--type-link a { - text-transform: uppercase; - font-weight: 700; - color: #009ee3; } - .block-block-content.block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 .field--type-link a::after { - content: url('data:image/svg+xml,'); } - -.view-display-id-block_2:is(.view-id-home_nodes) { - padding-top: 2rem; - background: url("../images/pictos/carre-contour-bleu.svg"); - background-repeat: no-repeat; - max-width: 100vw; - background-size: cover; } - .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static { - width: 70%; - margin: auto; } - .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static div:first-child:not(.field__item):not(.field) { - display: flex; - flex-direction: row; } - .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links { - align-self: flex-end; + margin-bottom: 2rem; } + .path-frontpage .block-region-content .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 .field--type-link { width: fit-content; height: fit-content; padding: 0.4rem 1rem; @@ -476,27 +333,14 @@ a { background-color: white; border: 2px solid #009ee3; list-style: none; } - .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links a { + .path-frontpage .block-region-content .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 .field--type-link a { text-transform: uppercase; font-weight: 700; color: #009ee3; } - .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links a:after { - content: url('data:image/svg+xml,'); } - .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images .field__item img { - width: 15rem; - height: auto; } - .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-title { - display: none; } - .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche { - flex: 1 1 50px; - padding-left: 1rem; } - .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche p { - background-color: white; - font-size: 1.5rem; - width: 110%; - margin-bottom: 2rem; - padding-bottom: 2rem; - margin-block-start: 0; } + .path-frontpage .block-region-content .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 .field--type-link a::after { + content: url('data:image/svg+xml,'); } + .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 { + grid-area: programme; } .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 591af97..45aa10c 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -1,388 +1,134 @@ +.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"; + grid-template-rows: auto auto auto; + grid-template-columns: 1fr repeat(4, 2fr) 1fr; + + .block-views-blockhome-nodes-block-1{ + grid-area: presentation; + } + .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca{ + grid-area: presentation; + } + .block-block-content1bb9024b-d95f-4137-894c-362abf10a483{ + grid-area: presentation; + } + .block-views-blockactus-blocks-pages-block-1{ + grid-area: actus; + width: 100vw; + border-bottom: 5px solid $blue-light; + border-top: 5px solid $blue-light; + .view-actus-blocks-pages{ + .view-content{ -.field--type-entity-reference-revisions{ - .paragraph-summary{ - font-family: $font-family-default; - font-size: 5rem; - font-weight: 600; - color: $black !important; - text-transform: capitalize; - - span:nth-of-type(2n){ - display: block; - font-size: 1rem; - } - } - .paragraph-summary:nth-of-type(2n) { - font-size: 2rem; - - } - -} - -// 1er bandeau - -.block-views-blockhome-nodes-block-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; - p{ - margin: 0; - } - margin: 0; - } - .field--name-title{ - grid-column: 4; - grid-row: 1; - margin-top: 2rem; - - h2{ - a{ - color: #e1000f; - font-weight: 900; - text-transform: uppercase; + display: grid; + grid-template-columns: 1fr repeat(4, 2fr) 1fr; + margin: auto; + padding-top: 2rem; + padding-bottom: 4rem; + .views-row:nth-of-type(1) { grid-column: 2; } + .node-type-actualite{ + color: $black; + line-height: 1.5rem; + padding: 0.5rem; + div:first-child{ // block actu dans le bandeau + display: flex; + flex-direction: column; + :nth-child(1) { order: 1; } + :nth-child(4) { order: 2; } + :nth-child(5) { order: 3; } + } + .field--name-field-images { + .field__item img{ + max-width: 70%; + max-height: 150px; + object-fit: cover; + width: 100%; + padding-bottom: 1rem; + } + } + time{ + font-size: 0.9rem; + font-weight: 800; + padding-right: 1rem; + width: fit-content; + &:after{ + padding-left: 0.5rem; + content: "|";} + } + + .field:not(.field--name-field-images){ + width: 100%; + } + h2{ margin:0; } + a{ color: $black; } + + .inline.links{ + padding-top: none !important; + list-style: none; + width: fit-content; + align-self: flex-end; + padding-right: 1rem; + a{ + display: none; + } + } + .field--name-field-actu-type{ + padding-top: 1rem; + } } } } - .links.inline{ - grid-column: 2; - grid-row: 4; - max-width: 70%; - min-width: fit-content; - height: 1.5rem; + } + .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{ + grid-area: actus; + grid-row: 5; + grid-column: 5 / span 6; + width: fit-content; + margin-bottom: 2rem; + + // display: grid; + // grid-template-columns: 1fr repeat(4, 2fr) 1fr; + // position: relative; + // height: 0; + + .field--type-link { + // grid-column: 2; + // justify-self: end; + // position: relative; + // top: -200%; + width: fit-content; + height: fit-content; padding: 0.4rem 1rem; font-size: 0.8rem; - margin-bottom: 2.5rem; + margin: 0; background-color: $white; border: 2px solid $blue-light; - list-style: none; - text-align: center !important; - + list-style: none; + 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-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; - 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-region-content{ - position: relative; -} -.block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483{ - position: relative; - width: 20%; - float: right; - margin-right: 13%; - bottom: -100%; - // grid-column: 5; - background-color: $blue-light; - .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") - - } - } - } - - - // .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 - -.block-views-blockactus-blocks-pages-block-1{ - clear: both; - border-bottom: 5px solid $blue-light; - border-top: 5px solid $blue-light; - .view-content{ - - display: grid; - grid-template-columns: 1fr repeat(4, 2fr) 1fr; - margin: auto; - padding-top: 2rem; - padding-bottom: 4rem; - .views-row:nth-of-type(1) { grid-column: 2; } - - .node-type-actualite{ - color: $black; - line-height: 1.5rem; - padding: 0.5rem; - div:first-child{ // block actu dans le bandeau - display: flex; - flex-direction: column; - :nth-child(1) { order: 1; } - :nth-child(4) { order: 2; } - :nth-child(5) { order: 3; } - } - .field--name-field-images { - .field__item img{ - max-width: 70%; - max-height: 130px; - object-fit: cover; - width: 100%; - padding-bottom: 1rem; - } - // &::after{ - // display: block; - // content:url('data:image/svg+xml, '); - // } - } - time{ - font-size: 0.9rem; - font-weight: 800; - padding-right: 1rem; - width: fit-content; - &:after{ - padding-left: 0.5rem; - content: "|";} - } - - .field:not(.field--name-field-images){ - width: 100%; - } - h2{ margin:0; } - a{ color: $black; } - - .inline.links{ - padding-top: none !important; - list-style: none; - width: fit-content; - align-self: flex-end; - padding-right: 1rem; - a{ - display: none; - } - // a{ - // content: url('data:image/svg+xml,'); - // } - } - .field--name-field-actu-type{ - padding-top: 1rem; - } - } - } -} - - - -// bouton voir toutes actus du bandeau bleu -// .layout--onecol{ -.block-block-content.block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{ - display: grid; - grid-template-columns: 1fr repeat(8, 2fr) 1fr; - position: relative; - height: 0; - .field--type-link { - grid-area: 8 / span 9; - justify-self: end; - position: relative; - top: -200%; - width: fit-content; - height: fit-content; - padding: 0.4rem 1rem; - font-size: 0.8rem; - margin: 0; - background-color: $white; - border: 2px solid $blue-light; - list-style: none; - - a{ - text-transform: uppercase; - font-weight: 700; - color: $blue-light; - - } - a::after{ - content: url('data:image/svg+xml,'); - - } - } -} -// } - - -// boutons en savoir plus pour lien vers pages statiques -// présentation programme - -.view-display-id-block_2:is(.view-id-home_nodes){ - padding-top: 2rem; - // background: url('data:image/svg+xml,'); - background: url('../images/pictos/carre-contour-bleu.svg'); - // background-position-y: 50%; - background-repeat: no-repeat; - max-width: 100vw; - background-size: cover; - - - .node-type-static{ - width: 70%; - margin: auto; - div:first-child:not(.field__item):not(.field){ - display: flex; - flex-direction: row; - } - - .inline.links{ - align-self: flex-end; - width: fit-content; - height: fit-content; - padding: 0.4rem 1rem; - font-size: 0.8rem; - margin: 0; - background-color: $white; - border: 2px solid $blue-light; - list-style: none; - - a{ - text-transform: uppercase; - font-weight: 700; - color: $blue-light; - &:after{ - // display: block; - content: url('data:image/svg+xml,'); + } + a::after{ + content: url('data:image/svg+xml,'); + } } + + } - .field--name-field-images{ - // grid-column: 2 / 4; - .field__item{ - img{ - width: 15rem; - height: auto; - } - } - } - .field--name-title{ - display: none; - } - .field--name-field-accroche{ - flex: 1 1 50px; - // grid-column: 4 / 9; - padding-left: 1rem; - p{ - background-color: $white; - font-size: 1.5rem; - width: 110%; - margin-bottom: 2rem; - padding-bottom: 2rem; - margin-block-start: 0; - } - + .block-views-blockhome-nodes-block-2{ + grid-area: programme; } } - -} - +} \ No newline at end of file diff --git a/web/themes/custom/eql/scss/pages/_home1 copy.scss b/web/themes/custom/eql/scss/pages/_home1 copy.scss new file mode 100644 index 0000000..b20af6c --- /dev/null +++ b/web/themes/custom/eql/scss/pages/_home1 copy.scss @@ -0,0 +1,393 @@ + + +.field--type-entity-reference-revisions{ + .paragraph-summary{ + font-family: $font-family-default; + font-size: 5rem; + font-weight: 600; + color: $black !important; + text-transform: capitalize; + + span:nth-of-type(2n){ + display: block; + font-size: 1rem; + } + } + .paragraph-summary:nth-of-type(2n) { + font-size: 2rem; + + } + +} + +// 1er bandeau + +.block-views-blockhome-nodes-block-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; + p{ + margin: 0; + } + 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-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; + 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-region-content{ + position: relative; +} +.block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483{ + position: relative; + width: 20%; + float: right; + margin-right: 13%; + bottom: -100%; + // grid-column: 5; + background-color: $blue-light; + .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") + + } + } + } + + + // .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 + +.block-views-blockactus-blocks-pages-block-1{ + clear: both; + border-bottom: 5px solid $blue-light; + border-top: 5px solid $blue-light; + .view-content{ + + display: grid; + grid-template-columns: 1fr repeat(4, 2fr) 1fr; + margin: auto; + padding-top: 2rem; + padding-bottom: 4rem; + .views-row:nth-of-type(1) { grid-column: 2; } + + .node-type-actualite{ + color: $black; + line-height: 1.5rem; + padding: 0.5rem; + div:first-child{ // block actu dans le bandeau + display: flex; + flex-direction: column; + :nth-child(1) { order: 1; } + :nth-child(4) { order: 2; } + :nth-child(5) { order: 3; } + } + .field--name-field-images { + .field__item img{ + max-width: 70%; + max-height: 130px; + object-fit: cover; + width: 100%; + padding-bottom: 1rem; + } + // &::after{ + // display: block; + // content:url('data:image/svg+xml, '); + // } + } + time{ + font-size: 0.9rem; + font-weight: 800; + padding-right: 1rem; + width: fit-content; + &:after{ + padding-left: 0.5rem; + content: "|";} + } + + .field:not(.field--name-field-images){ + width: 100%; + } + h2{ margin:0; } + a{ color: $black; } + + .inline.links{ + padding-top: none !important; + list-style: none; + width: fit-content; + align-self: flex-end; + padding-right: 1rem; + a{ + display: none; + } + // a{ + // content: url('data:image/svg+xml,'); + // } + } + .field--name-field-actu-type{ + padding-top: 1rem; + } + } + } +} + + + +// bouton voir toutes actus du bandeau bleu +// .layout--onecol{ +.block-block-content.block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{ + display: grid; + grid-template-columns: 1fr repeat(8, 2fr) 1fr; + position: relative; + height: 0; + + .field--type-link { + grid-area: 8 / span 9; + justify-self: end; + position: relative; + top: -200%; + width: fit-content; + height: fit-content; + padding: 0.4rem 1rem; + font-size: 0.8rem; + margin: 0; + background-color: $white; + border: 2px solid $blue-light; + list-style: none; + + a{ + text-transform: uppercase; + font-weight: 700; + color: $blue-light; + + } + a::after{ + content: url('data:image/svg+xml,'); + + } + } +} +// } + + +// boutons en savoir plus pour lien vers pages statiques +// présentation programme + +.view-display-id-block_2:is(.view-id-home_nodes){ + padding-top: 2rem; + // background: url('data:image/svg+xml,'); + background: url('../images/pictos/carre-contour-bleu.svg'); + // background-position-y: 50%; + background-repeat: no-repeat; + max-width: 100vw; + background-size: cover; + + + .node-type-static{ + width: 70%; + margin: auto; + div:first-child:not(.field__item):not(.field){ + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + .inline.links{ + align-self: flex-end; + width: fit-content; + height: fit-content; + padding: 0.4rem 1rem; + font-size: 0.8rem; + margin: 0; + background-color: $white; + border: 2px solid $blue-light; + list-style: none; + + a{ + text-transform: uppercase; + font-weight: 700; + color: $blue-light; + &:after{ + // display: block; + content: url('data:image/svg+xml,'); + } + } + } + .field--name-field-images{ + // grid-column: 2 / 4; + .field__item{ + img{ + width: 15rem; + height: auto; + } + } + } + .field--name-title{ + display: none; + } + .field--name-field-accroche{ + flex: 1 1 50px; + // grid-column: 4 / 9; + padding-left: 1rem; + p{ + background-color: $white; + font-size: 1.5rem; + width: 110%; + margin-bottom: 2rem; + padding-bottom: 2rem; + margin-block-start: 0; + } + + } + .field--name-field-videos{ + flex: 0 0 80%; + margin: auto; + } + } + +} +