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

vm css footer

This commit is contained in:
ouidade 2024-07-12 22:06:26 +02:00
parent 4c1ac30bdf
commit abdae701ec
11 changed files with 126 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -509,13 +509,17 @@ footer {
} }
.footer { .footer {
display: grid; display: flex;
grid-template-columns: repeat(12, 1fr); flex-direction: row;
grid-template-rows: repeat(1, 1fr);
background-color: #edefe8; background-color: #edefe8;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@media (max-width: 700px) {
.footer {
flex-direction: column-reverse;
}
}
.footer section { .footer section {
width: fit-content; width: fit-content;
} }
@ -534,13 +538,9 @@ footer {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
} }
.footer #footer-left {
grid-column: 1/span 5;
grid-row: 1;
}
@media (max-width: 500px) { @media (max-width: 500px) {
.footer #footer-left { .footer #footer-left {
max-width: 25%; width: 100%;
} }
} }
.footer #footer-left .footer_left_container { .footer #footer-left .footer_left_container {
@ -552,11 +552,6 @@ footer {
.footer #footer-left .footer_left_container .logo-qdd { .footer #footer-left .footer_left_container .logo-qdd {
display: none; display: none;
} }
@media (max-width: 700px) {
.footer #footer-left .footer_left_container {
max-width: 50vw;
}
}
@media (max-width: 500px) { @media (max-width: 500px) {
.footer #footer-left .footer_left_container { .footer #footer-left .footer_left_container {
padding-left: 15%; padding-left: 15%;
@ -567,18 +562,40 @@ footer {
margin: auto; margin: auto;
padding-left: 2rem; padding-left: 2rem;
} }
@media (max-width: 700px) {
.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
padding-left: 0;
}
}
.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau img { .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau img {
width: auto; width: auto;
height: 65px; height: 40px;
padding-left: 1rem; padding-left: 1rem;
padding-bottom: 1rem;
}
@media (max-width: 700px) {
.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau img {
height: 30px;
padding-left: 0;
padding-bottom: 0;
}
} }
.footer #footer-left .footer_left_container img { .footer #footer-left .footer_left_container img {
width: auto; width: auto;
height: 150px; height: 90px;
}
@media (max-width: 700px) {
.footer #footer-left .footer_left_container img {
height: 60px;
}
}
.footer .first-row {
flex: 1 60%;
justify-content: space-evenly;
display: flex;
flex-direction: row;
} }
.footer #footer-middle { .footer #footer-middle {
grid-column: 6/span 7;
grid-row: 1;
font-size: 0.6rem; font-size: 0.6rem;
} }
.footer #footer-middle #block-quartiers-de-demain-pieddepage ul li { .footer #footer-middle #block-quartiers-de-demain-pieddepage ul li {
@ -586,13 +603,9 @@ footer {
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.footer #footer-middle #block-quartiers-de-demain-pieddepage ul { .footer #footer-middle #block-quartiers-de-demain-pieddepage ul {
padding-left: 0.5rem; padding-left: 0rem;
} }
} }
.footer #footer-right {
grid-column: 10/12;
grid-row: 1;
}
@media (max-width: 700px) { @media (max-width: 700px) {
.footer #footer-right { .footer #footer-right {
display: flex; display: flex;

4
web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg vendored
View File

@ -4,8 +4,8 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg1"
width="30" width="20"
height="30" height="20"
viewBox="0 0 31.925354 31.926757" viewBox="0 0 31.925354 31.926757"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

4
web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg vendored
View File

@ -4,8 +4,8 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg1"
width="30" width="20"
height="30" height="20"
viewBox="0 0 33.440002 38.374023" viewBox="0 0 33.440002 38.374023"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

2
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@ -239,8 +239,8 @@
font-size: 1rem; font-size: 1rem;
padding-top: 3rem; padding-top: 3rem;
border-top: solid 1px #0833c2ff; border-top: solid 1px #0833c2ff;
} }
p{ p{
padding-right: 1rem; padding-right: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;

57
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss
View File

@ -2,13 +2,17 @@ footer{
z-index: 100; z-index: 100;
} }
.footer{ .footer{
display: flex;
display: grid; flex-direction: row;
grid-template-columns: repeat(12, 1fr); // display: grid;
grid-template-rows: repeat(1, 1fr); // grid-template-columns: repeat(12, 1fr);
// grid-template-rows: repeat(1, 1fr);
background-color: #edefe8; background-color: #edefe8;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
@media(max-width: 700px){
flex-direction: column-reverse;
}
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;
@ -22,10 +26,11 @@ footer{
} }
#footer-left{ #footer-left{
grid-column: 1 /span 5; // grid-column: 1 /span 5;
grid-row: 1; // grid-row: 1;
@media (max-width: 500px){ @media (max-width: 500px){
max-width: 25%; // flex: 1 100%;
width: 100%;
} }
.footer_left_container{ .footer_left_container{
@ -33,7 +38,7 @@ footer{
padding-left: 3rem; padding-left: 3rem;
.logo-qdd{display: none;} .logo-qdd{display: none;}
@media(max-width: 700px){ @media(max-width: 700px){
max-width: 50vw; // max-width: 50vw;
} }
@media (max-width: 500px){ @media (max-width: 500px){
padding-left: 15%; padding-left: 15%;
@ -45,38 +50,60 @@ footer{
height: fit-content; height: fit-content;
margin: auto; margin: auto;
padding-left: 2rem; padding-left: 2rem;
@media(max-width: 700px){
padding-left: 0;
}
img{ img{
width: auto; width: auto;
height: 65px; height: 40px;
padding-left: 1rem; padding-left: 1rem;
padding-bottom: 1rem;
@media(max-width: 700px){
height: 30px;
padding-left: 0;
padding-bottom: 0;
}
} }
} }
img{ img{
width: auto; width: auto;
height: 150px; height: 90px;
@media(max-width: 700px){
height: 60px;
} }
} }
}
}
.first-row{
// grid-column: 6 /span 12;
flex: 1 60%;
justify-content: space-evenly;
display: flex;
flex-direction: row;
} }
#footer-middle{ #footer-middle{
grid-column: 6 /span 7; // grid-column: 6 /span 7;
grid-row: 1; // grid-row: 1;
#block-quartiers-de-demain-pieddepage{ #block-quartiers-de-demain-pieddepage{
ul li{ ul li{
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
} }
@media(max-width: 700px){ @media(max-width: 700px){
ul{ ul{
padding-left: 00.5rem; padding-left: 0rem;
} }
} }
} }
font-size: 0.6rem; font-size: 0.6rem;
} }
#footer-right{ #footer-right{
grid-column: 10 / 12; // grid-column: 10 / 12;
grid-row: 1; // grid-row: 1;
@media (max-width: 700px){ @media (max-width: 700px){
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

4
web/themes/custom/quartiers_de_demain/templates/page--front.html.twig
View File

@ -98,7 +98,6 @@
{% endif %} {% endif %}
</main> </main>
{# {% 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"> #}
@ -106,9 +105,12 @@
{# </section> #} {# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>
<div class='first-row'>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>
<section id="footer-right">{{ page.footer_right }}</section> <section id="footer-right">{{ page.footer_right }}</section>
</div> </div>
</div>
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #} {# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
</footer> </footer>
{# {% endif %} #} {# {% endif %} #}

13
web/themes/custom/quartiers_de_demain/templates/page--node--%.html.twig
View File

@ -77,15 +77,20 @@
{% endif %} {% endif %}
</main> </main>
{# {% 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"> #}
<span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
{# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>
<div class='first-row'>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>
<section id="footer-right">{{ page.footer_right }}</section> <section id="footer-right">{{ page.footer_right }}</section>
</div> </div>
<section id="footer-bottom">{{ page.footer_bottom }}</section>
</footer>
</div>
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
</footer>
{# {% endif %} #}
</div>{# /.layout-container #} </div>{# /.layout-container #}

3
web/themes/custom/quartiers_de_demain/templates/page--node--6.html.twig
View File

@ -84,9 +84,12 @@
{# </section> #} {# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>
<div class='first-row'>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>
<section id="footer-right">{{ page.footer_right }}</section> <section id="footer-right">{{ page.footer_right }}</section>
</div> </div>
</div>
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #} {# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
</footer> </footer>
{# {% endif %} #} {# {% endif %} #}

3
web/themes/custom/quartiers_de_demain/templates/page--node--7.html.twig
View File

@ -84,9 +84,12 @@
{# </section> #} {# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>
<div class='first-row'>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>
<section id="footer-right">{{ page.footer_right }}</section> <section id="footer-right">{{ page.footer_right }}</section>
</div> </div>
</div>
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #} {# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
</footer> </footer>
{# {% endif %} #} {# {% endif %} #}

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

@ -80,13 +80,16 @@
{# {% 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>
<div class='first-row'>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>
<section id="footer-right">{{ page.footer_right }}</section> <section id="footer-right">{{ page.footer_right }}</section>
</div> </div>
</div>
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #} {# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
</footer> </footer>
{# {% endif %} #} {# {% endif %} #}

12
web/themes/custom/quartiers_de_demain/templates/page.html.twig
View File

@ -77,15 +77,21 @@
{% endif %} {% endif %}
</main> </main>
{# {% 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"> #}
<span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
{# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>
<div class='first-row'>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>
<section id="footer-right">{{ page.footer_right }}</section> <section id="footer-right">{{ page.footer_right }}</section>
</div> </div>
<section id="footer-bottom">{{ page.footer_bottom }}</section>
</div>
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
</footer> </footer>
{# {% endif %} #}
</div>{# /.layout-container #} </div>{# /.layout-container #}