diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 296a357..4ddf369 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -253,7 +253,7 @@ a { .path-frontpage .block-region-content { display: grid; - 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-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; min-height: 100vh; } @@ -277,7 +277,9 @@ a { 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; } + display: table; + margin: 0px auto 0px auto; + background-color: white; } .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; @@ -285,7 +287,10 @@ a { .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; } + text-transform: uppercase; + display: table; + margin: 0px auto 0px auto; + background-color: white; } .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; @@ -455,12 +460,14 @@ a { width: 70%; margin: auto; } .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 1fr 1fr; } + display: flex; + flex-direction: row; + flex-wrap: wrap; } + .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) :nth-child(4) { + order: 3; } .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: 3; - grid-column: 5 / span 6; + z-index: 95; + align-self: flex-end; width: fit-content; height: fit-content; padding: 0.4rem 1rem; @@ -468,26 +475,20 @@ a { margin: 0; background-color: white; border: 2px solid #009ee3; - list-style: none; - align-self: end; } + list-style: none; } .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; color: #009ee3; } .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:after { content: url('data:image/svg+xml,'); } - .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-images { - grid-column: 1; - grid-row: 1; - width: fit-content; } - .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-images .field__item img { - width: 15rem; - height: auto; } + .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-images .field__item img { + width: 15rem; + height: auto; } .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-title { display: none; } .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-accroche { - grid-column: 2 / 6; - grid-row: 1 /span 3; + flex: 1 1 50px; padding-left: 1rem; } .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-accroche p { background-color: white; @@ -497,9 +498,9 @@ a { padding-bottom: 2rem; 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 / span 6; - height: fit-content; } + flex: 0 0 80%; + padding-top: 4rem; + margin: auto; } .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 b897d33..65da14d 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -3,7 +3,6 @@ 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" @@ -22,22 +21,11 @@ .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; @@ -48,7 +36,9 @@ line-height: 6rem; margin-bottom: 5rem; p{ - margin: 0; + display: table; + margin: 0px auto 0px auto; + background-color: $white; } } .field--name-title{ @@ -61,6 +51,9 @@ color: #e1000f; font-weight: 900; text-transform: uppercase; + display: table; + margin: 0px auto 0px auto; + background-color: $white; } } } @@ -275,84 +268,84 @@ // présentation programme .block-views-blockhome-nodes-block-2{ grid-area: programme; - .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; - - - .node-type-static{ - width: 70%; - margin: auto; + +.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; - 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 1fr 1fr; - } - - .inline.links{ - grid-row: 3; - 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 $blue-light; - list-style: none; - align-self: end; - - 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: 1; - grid-row: 1; - width: fit-content; - .field__item{ - img{ - width: 15rem; - height: auto; - } - } - } - .field--name-title{ - display: none; - } - .field--name-field-accroche{ - grid-column: 2 / 6; - grid-row: 1 /span 3; - 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{ + + .node-type-static{ + width: 70%; + margin: auto; + div:first-child:not(.field__item):not(.field){ + display: flex; + flex-direction: row; + flex-wrap: wrap; + :nth-child(4) { order: 3; } + } - grid-column: 1 / span 5; - grid-row: 5 / span 6; - height: fit-content; - } + .inline.links{ + z-index: 95; + 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%; + padding-top: 4rem; + margin: auto; + } + } + +} + } } } \ No newline at end of file