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

276 lines
14 KiB
SCSS

.offresdeservices{
.layout-content{
.region-content{
#block-contenudelapageprincipale{
background: url('../images/pictos/carre-contour-bleu_programme.svg');
background-repeat: no-repeat;
background-position-y: 20vh;
max-width: 100vw;
background-size: cover;
span{
padding-top: 3rem;
padding-bottom: 3rem;
vertical-align: middle;
color: $white;
h2{
font-family: 'Source Code Pro';
font-size: 2rem;
font-weight: 800;
color: $white;
background-color: $blue-light;
text-transform: uppercase;
width: fit-content;
margin-left: 10%;
margin-top: 8rem;
}
}
.layout--onecol{
.block-region-content{
display: grid;
grid-template-columns: 1fr repeat(4, 2fr) 1fr;
// texte présentation
.block-config-pages-block{
grid-column: 2 / span 3;
// margin: 2rem;
margin-top: 4rem;
.field--name-field-introduction{
margin: auto;
background: $white;
p{margin: 0;}
}
}
// buton déposer une offre
.block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc{
grid-column: 5;
margin-top: 4rem;
background-color: $blue-light;
height: fit-content;
width: 80%;
margin-left: 2rem;
.field--name-field-lien{
display: flex;
flex-direction: column;
margin-top: 2rem;
margin-bottom: 2rem;
margin-left: 1.5rem;
margin-right: 1.5rem;
text-align: center;
a{
font-weight: 800;
color: $white;
font-size: 1.3rem;
}
&:after{
margin-left: auto;
padding-top: 1rem;
display: block;
content:url("../images/pictos/noun_Arrow_3771902.svg")
}
}
}
// offres
.block-views-blockoffres-de--block-1{
grid-column: 2 / span 3;
@media (max-width: 810px){
grid-column: 2 / span 4;
}
.view-display-id-block_1{
margin: auto;
}
// bandeau filtes
.view-filters{
// display: none;
background: $white;
}
// grille offres
.view-content{
display: flex;
flex-wrap: wrap;
margin-top: 3rem;
.views-row{
width: 50%;
.node-type-offre_de_service{
display: flex;
justify-content: space-between;
// flex-direction: column;
// border: 2px solid rgb(199, 215, 74);
// border: 2px solid $blue-light;
padding: 1rem;
height: fit-content;
margin-bottom: 1rem;
background-color: $white;
margin-right: 1rem;
// height: 200px;
&::after{
content: url("../images/pictos/noun_Arrow_3771902.svg");
align-self: flex-end;
}
div:first-of-type{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(6 auto);
// div:last-of-type{
// // display: inline-flex;
// // justify-content: space-between;
// // &::after{
// // content: url("../images/pictos/noun_Arrow_3771902.svg");
// // align-self: flex-end;
// // }
// }
.field--name-field-type-de-protagoniste{
grid-column: 1 / span 3;
grid-row: 1;
margin-bottom: 1rem;
text-transform: uppercase;
font-weight: 800;
font-size: 00.8rem;
}
.field--name-field-photo{
grid-column: 1;
grid-row: 2 / span 6;
margin-right: 1rem;
max-height: 170px;
img{
max-width: 100%;
object-fit: cover;
height: auto;
max-height: 95%;
}
}
.field--name-field-prenom{
grid-column: 2;
grid-row: 2;
padding-right: 0.5rem;
text-transform: uppercase;
font-weight: 800;
font-size: 1rem;
}
.field--name-field-nom{
grid-column: 3;
grid-row: 2;
text-transform: uppercase;
font-weight: 800;
font-size: 1rem;
}
.field--name-field-structure{
grid-column: 2 / span 3;
grid-row: 3;
text-transform: uppercase;
font-weight: 800;
font-size: 0.8rem;
}
.field--name-title{
grid-column: 2 / span 3;
grid-row: 4;
font-size: 1.3rem;
a{
color: $black;
}
}
.field--name-field-localisation{
grid-column: 2 / span 3;
grid-row: 5;
text-transform: uppercase;
font-weight: 800;
font-size: 00.8rem;
}
.field--name-field-date-de-proposition{
display: inline-flex;
grid-column: 2 /span 3;
grid-row: 6;
font-size: 0.8rem;
padding-top: 1rem;
justify-content: flex-start;
// align-items: center;
// &::after{
// content: url("../images/pictos/noun_Arrow_3771902.svg");
// align-self: flex-end;
// }
time{
justify-self: flex-start;
}
&::before{
content: "proposé le";
hyphens: none;
padding-right: 0.5rem;
}
}
}
}
.type-de-protagoniste-5{
border: 2px solid rgb(255, 0, 15);
// .field--name-field-type-de-protagoniste{
// color: rgb(255, 0, 15);
// }
}
.type-de-protagoniste-6{
border: 2px solid rgb(160, 26, 39);
// .field--name-field-type-de-protagoniste{
// color:rgb(160, 26, 39) ;
// }
}
.type-de-protagoniste-7{
border: 2px solid rgb(199, 215, 74);
// .field--name-field-type-de-protagoniste{
// color: rgb(199, 215, 74);
// }
}
.type-de-protagoniste-8{
border: 2px solid rgb(255, 100, 83);
// .field--name-field-type-de-protagoniste{
// color:rgb(255, 100, 83) ;
// }
}
.type-de-protagoniste-9{
border: 2px solid rgb(111, 109, 125);
// .field--name-field-type-de-protagoniste{
// color:rgb(111, 109, 125) ;
// }
}
}
@media (max-width: 810px){
flex-direction: column;
.views-row{
width: 100%;
}
}
}
}
}
}
}
}
}
}