css footer

This commit is contained in:
2024-07-06 22:35:42 +02:00
parent 46c3afcd53
commit 9d2ea6febc
5 changed files with 103 additions and 102 deletions

View File

@@ -25,8 +25,8 @@
&::before{
content:"";
display: block;
border-bottom: solid 1px $blue_QDD;
width: 60% ;
border-bottom: solid 2px $blue_QDD;
width: 80% ;
margin: auto;
}

View File

@@ -1,42 +1,49 @@
.partenaires{
background-color: #f6f7f3;
.layout-content{
.content_container{
display: flex;
flex-direction: column;
align-items: center;
#block-quartiers-de-demain-titredepage{
grid-column: 3 /span 9;
grid-row: 1;
margin-top: 3rem;
margin-top: 1rem;
width: fit-content;
@media(max-width: 500px){
margin-top: 1rem;
grid-column: 2 /span 9;
}
h1{
text-transform: uppercase;
color: $red_QDD ;
font-size: $font-large;
font-weight: 300;
text-transform: none;
color: black;
font-size: 2rem;
font-weight: 500;
}
}
.views-element-container{
grid-column: 3 /span 9;
grid-row: 2;
@media(max-width: 500px){
grid-column: 2 /span 9;
}
&::before{
content:"";
display: block;
border-bottom: solid 2px $blue_QDD;
width: 80% ;
margin: auto;
}
width: 80%;
.node-type-partenaire{
width: 100%;
padding-bottom: 3rem;
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-columns: 1fr repeat(5, 2fr) 1fr;
grid-template-rows: repeat(auto-fill);
// grid-gap: 10px;
padding-top: 1rem;
@media (max-width: 810px){
display: flex;
flex-direction: column;
}
.field_field_logo{
grid-column: 1 / 3;
grid-column: 2 / 3;
grid-row: 1 /span 3;
padding-right: 1rem;
margin: auto;
@@ -47,7 +54,7 @@
}
}
.field_title{
grid-column: 3 /span 8;
grid-column: 3 /span 4;
grid-row: 1;
font-weight: 500;
font-size: $font-normal;
@@ -57,7 +64,7 @@
}
}
.field_body{
grid-column: 3 /span 8;
grid-column: 3 /span 4 ;
grid-row: 2;
margin-left: 1rem;
@media (max-width:810px) {
@@ -66,12 +73,12 @@
}
.field_field_lien{
grid-column: 3 /span 8;
grid-column: 3 /span 4;
grid-row: 3;
border-bottom: 2px solid $blue_QDD;
width: fit-content;
padding-bottom: 0.5rem;
margin-left: 1rem;
padding-left: 0.5rem;
background: black;
@media (max-width:810px) {
margin-left: 0;
}
@@ -79,14 +86,18 @@
a{
display: inline-flex;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.6rem;
svg{
display: none;
}
&::before{
&::after{
display: inline-block;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.5rem;
padding-top: 0.2rem;
}
}
}

View File

@@ -1,43 +1,45 @@
footer{
z-index: 100;
span.totop {
display: inline-flex;
width: 100vw;
#toTop{
margin: auto;
background-color: #fff;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
padding-bottom: 0.5rem;
.arrow-up{
font-size: 1.7rem;
line-height: 2.5rem;
text-align: center;
width: 4rem;
height: 2rem;
display: inline-block;
text-align: top;
// span.totop {
// display: inline-flex;
// width: 100vw;
// #toTop{
// margin: auto;
// background-color: #fff;
// border-top-left-radius: 10%;
// border-top-right-radius: 10%;
// padding-bottom: 0.5rem;
// .arrow-up{
// font-size: 1.7rem;
// line-height: 2.5rem;
// text-align: center;
// width: 4rem;
// height: 2rem;
// display: inline-block;
// text-align: top;
&::before{
content:url("/themes/custom/quartiers_de_demain/src/assets/img/up-arrow.svg") ;
// &::before{
// content:url("/themes/custom/quartiers_de_demain/src/assets/img/up-arrow.svg") ;
// width: 20%;
}
}
// // width: 20%;
// }
// }
}
}
// }
// }
}
.footer{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(1, 1fr);
background-color: $white-header;
background-color: #edefe8;
padding-top: 1rem;
padding-bottom: 1rem;
section{width: fit-content;}
h2, ul{margin: 0;}
border-top: 1px solid #808080;
// border-top: 1px solid #808080;
@media(max-width: 700px){
display: flex;
flex-wrap: wrap;
@@ -91,7 +93,7 @@ footer{
}
img{
width: auto;
height: $header-height;
height: 150px;
@media(max-width: 700px){
height: $header-height-pad;
}