bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css footer

This commit is contained in:
ouidade 2024-07-06 22:35:42 +02:00
parent 46c3afcd53
commit 9d2ea6febc
5 changed files with 103 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -378,38 +378,14 @@ header .header:hover + .header_nav_container {
footer { footer {
z-index: 100; 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 { .footer {
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr);
background-color: rgb(255, 255, 255); background-color: #edefe8;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
border-top: 1px solid #808080;
} }
.footer section { .footer section {
width: fit-content; width: fit-content;
@ -463,7 +439,7 @@ footer span.totop #toTop .arrow-up::before {
} }
.footer #footer-left .footer_left_container img { .footer #footer-left .footer_left_container img {
width: auto; width: auto;
height: 320px; height: 150px;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.footer #footer-left .footer_left_container img { .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 { #consultation .layout-content .content_container .node-type-static::before {
content: ""; content: "";
display: block; display: block;
border-bottom: solid 1px rgb(7, 50, 194); border-bottom: solid 2px rgb(7, 50, 194);
width: 60%; width: 80%;
margin: auto; margin: auto;
} }
#consultation .layout-content .content_container .node-type-static .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 { #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%; 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 { .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage {
grid-column: 3/span 9; margin-top: 1rem;
grid-row: 1; width: fit-content;
margin-top: 3rem;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage { .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 { .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
text-transform: uppercase; text-transform: none;
color: rgb(247, 0, 43); color: black;
font-size: 1.6rem; font-size: 2rem;
font-weight: 300; font-weight: 500;
} }
.partenaires .layout-content .content_container .views-element-container { .partenaires .layout-content .content_container .views-element-container {
grid-column: 3/span 9; width: 80%;
grid-row: 2;
} }
@media (max-width: 500px) { .partenaires .layout-content .content_container .views-element-container::before {
.partenaires .layout-content .content_container .views-element-container { content: "";
grid-column: 2/span 9; 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 { .partenaires .layout-content .content_container .views-element-container .node-type-partenaire {
width: 100%; width: 100%;
padding-bottom: 3rem; padding-bottom: 3rem;
display: grid; display: grid;
grid-template-columns: repeat(9, 1fr); grid-template-columns: 1fr repeat(5, 2fr) 1fr;
grid-template-rows: repeat(auto-fill); grid-template-rows: repeat(auto-fill);
padding-top: 1rem;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire { .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 { .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; grid-row: 1/span 3;
padding-right: 1rem; padding-right: 1rem;
margin: auto; margin: auto;
@ -1527,7 +1512,7 @@ footer span.totop #toTop .arrow-up::before {
max-height: 200px; max-height: 200px;
} }
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title { .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; grid-row: 1;
font-weight: 500; font-weight: 500;
font-size: 0.6rem; 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 { .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; grid-row: 2;
margin-left: 1rem; 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 { .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; grid-row: 3;
border-bottom: 2px solid rgb(7, 50, 194);
width: fit-content; width: fit-content;
padding-bottom: 0.5rem;
margin-left: 1rem; margin-left: 1rem;
padding-left: 0.5rem;
background: black;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien { .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 { .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a {
display: inline-flex; display: inline-flex;
align-items: center; 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 { .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a svg {
display: none; 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; display: inline-block;
content: url("../img/noun-arrow-to-right.svg"); content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.5rem; padding-right: 0.5rem;
padding-top: 0.2rem;
} }
.node-type-static .layout-content { .node-type-static .layout-content {

4
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss
View File

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

55
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/_partenaires.scss → web/themes/custom/quartiers_de_demain/src/assets/scss/pages/partenaires.scss
View File

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

56
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_footer.scss
View File

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

2
web/themes/custom/quartiers_de_demain/templates/page--partenaires.html.twig
View File

@ -80,7 +80,7 @@
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #} {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
<footer role="contentinfo"> <footer role="contentinfo">
{# <section id="footer-top"> #} {# <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> #} {# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>