css footer
This commit is contained in:
parent
46c3afcd53
commit
9d2ea6febc
|
@ -378,38 +378,14 @@ header .header:hover + .header_nav_container {
|
|||
footer {
|
||||
z-index: 100;
|
||||
}
|
||||
footer span.totop {
|
||||
display: inline-flex;
|
||||
width: 100vw;
|
||||
}
|
||||
footer span.totop #toTop {
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 10%;
|
||||
border-top-right-radius: 10%;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
footer span.totop #toTop .arrow-up {
|
||||
font-size: 1.7rem;
|
||||
line-height: 2.5rem;
|
||||
text-align: center;
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
display: inline-block;
|
||||
text-align: top;
|
||||
}
|
||||
footer span.totop #toTop .arrow-up::before {
|
||||
content: url("/themes/custom/quartiers_de_demain/src/assets/img/up-arrow.svg");
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: repeat(1, 1fr);
|
||||
background-color: rgb(255, 255, 255);
|
||||
background-color: #edefe8;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-top: 1px solid #808080;
|
||||
}
|
||||
.footer section {
|
||||
width: fit-content;
|
||||
|
@ -463,7 +439,7 @@ footer span.totop #toTop .arrow-up::before {
|
|||
}
|
||||
.footer #footer-left .footer_left_container img {
|
||||
width: auto;
|
||||
height: 320px;
|
||||
height: 150px;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.footer #footer-left .footer_left_container img {
|
||||
|
@ -1353,8 +1329,8 @@ footer span.totop #toTop .arrow-up::before {
|
|||
#consultation .layout-content .content_container .node-type-static::before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-bottom: solid 1px rgb(7, 50, 194);
|
||||
width: 60%;
|
||||
border-bottom: solid 2px rgb(7, 50, 194);
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
#consultation .layout-content .content_container .node-type-static .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
|
||||
|
@ -1476,10 +1452,17 @@ footer span.totop #toTop .arrow-up::before {
|
|||
width: 30%;
|
||||
}
|
||||
|
||||
.partenaires {
|
||||
background-color: #f6f7f3;
|
||||
}
|
||||
.partenaires .layout-content .content_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.partenaires .layout-content .content_container #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) {
|
||||
.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage {
|
||||
|
@ -1488,26 +1471,28 @@ footer span.totop #toTop .arrow-up::before {
|
|||
}
|
||||
}
|
||||
.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
|
||||
text-transform: uppercase;
|
||||
color: rgb(247, 0, 43);
|
||||
font-size: 1.6rem;
|
||||
font-weight: 300;
|
||||
text-transform: none;
|
||||
color: black;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.partenaires .layout-content .content_container .views-element-container {
|
||||
grid-column: 3/span 9;
|
||||
grid-row: 2;
|
||||
width: 80%;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.partenaires .layout-content .content_container .views-element-container {
|
||||
grid-column: 2/span 9;
|
||||
}
|
||||
.partenaires .layout-content .content_container .views-element-container::before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-bottom: solid 2px rgb(7, 50, 194);
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
.partenaires .layout-content .content_container .views-element-container .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);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire {
|
||||
|
@ -1516,7 +1501,7 @@ footer span.totop #toTop .arrow-up::before {
|
|||
}
|
||||
}
|
||||
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo {
|
||||
grid-column: 1/3;
|
||||
grid-column: 2/3;
|
||||
grid-row: 1/span 3;
|
||||
padding-right: 1rem;
|
||||
margin: auto;
|
||||
|
@ -1527,7 +1512,7 @@ footer span.totop #toTop .arrow-up::before {
|
|||
max-height: 200px;
|
||||
}
|
||||
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title {
|
||||
grid-column: 3/span 8;
|
||||
grid-column: 3/span 4;
|
||||
grid-row: 1;
|
||||
font-weight: 500;
|
||||
font-size: 0.6rem;
|
||||
|
@ -1539,7 +1524,7 @@ footer span.totop #toTop .arrow-up::before {
|
|||
}
|
||||
}
|
||||
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
|
||||
grid-column: 3/span 8;
|
||||
grid-column: 3/span 4;
|
||||
grid-row: 2;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
@ -1549,12 +1534,12 @@ footer span.totop #toTop .arrow-up::before {
|
|||
}
|
||||
}
|
||||
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
|
||||
grid-column: 3/span 8;
|
||||
grid-column: 3/span 4;
|
||||
grid-row: 3;
|
||||
border-bottom: 2px solid rgb(7, 50, 194);
|
||||
width: fit-content;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-left: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
background: black;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
|
||||
|
@ -1564,15 +1549,18 @@ footer span.totop #toTop .arrow-up::before {
|
|||
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
background: black;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a svg {
|
||||
display: none;
|
||||
}
|
||||
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a::before {
|
||||
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a::after {
|
||||
display: inline-block;
|
||||
content: url("../img/noun-arrow-to-right.svg");
|
||||
padding-right: 0.5rem;
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
|
||||
.node-type-static .layout-content {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
|
||||
&::before{
|
||||
content:url("/themes/custom/quartiers_de_demain/src/assets/img/up-arrow.svg") ;
|
||||
// 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;
|
||||
|
||||
// width: 20%;
|
||||
}
|
||||
}
|
||||
// &::before{
|
||||
// content:url("/themes/custom/quartiers_de_demain/src/assets/img/up-arrow.svg") ;
|
||||
|
||||
}
|
||||
}
|
||||
// // 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;
|
||||
}
|
||||
|
|
|
@ -80,7 +80,7 @@
|
|||
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
|
||||
<footer role="contentinfo">
|
||||
{# <section id="footer-top"> #}
|
||||
<span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
|
||||
{# <span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span> #}
|
||||
{# </section> #}
|
||||
<div class="footer">
|
||||
<section id="footer-left">{{ page.footer_left }}</section>
|
||||
|
|
Loading…
Reference in New Issue