Files
d9-eql/web/themes/custom/eql/scss/pages/_home.scss
T

201 lines
8.3 KiB
SCSS

.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-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;
}
// 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: 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;
}
}
}
}
}
// bouton voir toutes actus du bandeau bleu
.block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
grid-area: actus;
grid-row: 5;
grid-column: 5 / span 6;
width: fit-content;
margin-bottom: 2rem;
.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,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
}
}
}
.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;
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;
}
.inline.links{
grid-row: 4;
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;
a{
text-transform: uppercase;
font-weight: 700;
color: $blue-light;
&:after{
// display: block;
content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
}
}
}
.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{
grid-column: 1 / span 5;
grid-row: 5;
}
}
}
}
}
}