drupal-quartiersdedemain/web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss

97 lines
2.4 KiB
SCSS

.footer{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(1, 1fr);
background-color: $white-header;
padding-top: 1rem;
section{width: fit-content;}
h2, ul{margin: 0;}
border-top: 1px solid #808080;
@media(max-width: 891px){
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media(max-width: 600px){
flex-wrap: nowrap;
}
#footer-left{
grid-column: 1 /span 5;
grid-row: 1;
padding-left: 5%;
.footer_left_container{
display: flex;
flex-direction: row;
#block-quartiers-de-demain-logorepu{
}
#block-quartiers-de-demain-logoepau{
height: $header-height;
@media(max-width: 891px){
height: $header-height-pad;
}
}
img{
width: auto;
height: $header-height;
@media(max-width: 891px){
height: $header-height-pad;
}
@media(max-width: 660px){
height: $header-height-small;
}
@media(max-width: 450px){
height: $header-height-ultrasmall;
}
}
}
}
#footer-middle{
grid-column: 6 /span 7;
grid-row: 1;
#block-quartiers-de-demain-pieddepage{
ul li{
padding-bottom: 0.2rem;
}
@media(max-width: 891px){
ul{
padding-left: 00.5rem;
}
}
}
}
#footer-right{
grid-column: 10 / 12;
grid-row: 1;
#block-quartiers-de-demain-socialmedialinks{
flex-direction: column;
h2{
display: flex;
flex-direction: column;
font-size: $font-medium;
font-weight: 400;
&::before{
content: "Nous contacter";
padding-bottom: 1rem;
font-weight: 600;
}
padding-bottom: 1rem;
}
}
}
div{
@media(max-width: 891px){
flex-wrap: wrap;
}
@media(max-width: 520px){
flex-direction: column;
}
}
}