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

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

@ -4,8 +4,8 @@
<svg
version="1.1"
id="svg1"
width="30"
height="30"
width="20"
height="20"
viewBox="0 0 31.925354 31.926757"
xmlns="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
version="1.1"
id="svg1"
width="30"
height="30"
width="20"
height="20"
viewBox="0 0 33.440002 38.374023"
xmlns="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;
padding-top: 3rem;
border-top: solid 1px #0833c2ff;
}
p{
padding-right: 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;
}
.footer{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(1, 1fr);
display: flex;
flex-direction: row;
// display: grid;
// grid-template-columns: repeat(12, 1fr);
// grid-template-rows: repeat(1, 1fr);
background-color: #edefe8;
padding-top: 1rem;
padding-bottom: 1rem;
@media(max-width: 700px){
flex-direction: column-reverse;
}
section{width: fit-content;}
h2, ul{margin: 0;}
// border-top: 1px solid #808080;
@ -22,10 +26,11 @@ footer{
}
#footer-left{
grid-column: 1 /span 5;
grid-row: 1;
// grid-column: 1 /span 5;
// grid-row: 1;
@media (max-width: 500px){
max-width: 25%;
// flex: 1 100%;
width: 100%;
}
.footer_left_container{
@ -33,7 +38,7 @@ footer{
padding-left: 3rem;
.logo-qdd{display: none;}
@media(max-width: 700px){
max-width: 50vw;
// max-width: 50vw;
}
@media (max-width: 500px){
padding-left: 15%;
@ -45,38 +50,60 @@ footer{
height: fit-content;
margin: auto;
padding-left: 2rem;
@media(max-width: 700px){
padding-left: 0;
}
img{
width: auto;
height: 65px;
height: 40px;
padding-left: 1rem;
padding-bottom: 1rem;
@media(max-width: 700px){
height: 30px;
padding-left: 0;
padding-bottom: 0;
}
}
}
img{
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{
grid-column: 6 /span 7;
grid-row: 1;
// grid-column: 6 /span 7;
// grid-row: 1;
#block-quartiers-de-demain-pieddepage{
ul li{
padding-bottom: 0.2rem;
}
@media(max-width: 700px){
ul{
padding-left: 00.5rem;
padding-left: 0rem;
}
}
}
font-size: 0.6rem;
}
#footer-right{
grid-column: 10 / 12;
grid-row: 1;
// grid-column: 10 / 12;
// grid-row: 1;
@media (max-width: 700px){
display: flex;
justify-content: flex-end;

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

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

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

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

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

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

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

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

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

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

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

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