.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-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/forme_home_2.svg"); background-size: 75%; background-position-y: bottom; background-position-x: left; background-repeat: no-repeat; .node-type-static{ div:first-child{ display: grid; grid-template-columns: 1fr repeat(4, 2fr) 1fr; grid-template-rows: repeat(4, auto); .field--name-field-images{ display: none; } .field--name-field-accroche{ grid-column: 2 /span 3; grid-row: 2 / span 2; font-size: 5rem; font-weight: 900; color: $blue-light; line-height: 7rem; margin-top: 6rem; margin-bottom: 5rem; width: fit-content; span { background-color: $white; } } .field--name-title{ grid-column: 4; grid-row: 2; margin-top: 4rem; h2{ background-color: $white; a{ color: #e1000f; font-weight: 900; text-transform: uppercase; font-family: "Source Code Pro"; display: table; margin: 0px auto 0px auto; // background-color: $white; } } } .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{ margin-bottom: 1rem; 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; } } } } // bandeau actus .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{ 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: 95%; 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; } } } } } // bouton voir toutes actus du bandeau bleu .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{ grid-area: actus; grid-row: 4; grid-column: 5 / span 6; width: fit-content; margin-bottom: 2rem; align-self: end; .field--type-link { 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,'); } } } // 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('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; :nth-child(4) { order: 3; } } .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; } } } } } }