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

mobile home

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-07 15:20:10 +02:00
parent 713e5df873
commit 5d5ad21366
3 changed files with 348 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -232,7 +232,7 @@ header {
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
/* Classes for scroll effect */
}
@media (max-width: 500px) {
@media (max-width: 700px) {
header {
height: 110px;
}
@ -1153,14 +1153,30 @@ footer {
flex: 1 100%;
font-size: 1.5rem;
}
@media (max-width: 500px) {
#home article.node-type-static .field_body > p:nth-child(1) {
font-size: 1.3rem;
}
}
#home article.node-type-static .field_body > p:nth-child(2),
#home article.node-type-static .field_body p:nth-child(3) {
flex: 1;
padding: 1rem;
}
@media (max-width: 500px) {
#home article.node-type-static .field_body > p:nth-child(2),
#home article.node-type-static .field_body p:nth-child(3) {
padding-left: 0;
}
}
#home article.node-type-static .field_body > p:nth-child(2) {
padding-left: 15rem;
}
@media (max-width: 500px) {
#home article.node-type-static .field_body > p:nth-child(2) {
padding-left: 0;
}
}
#home article.node-type-static .field_field_title {
width: fit-content;
margin: auto;
@ -1178,6 +1194,11 @@ footer {
width: 50%;
margin: auto;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte {
width: 80%;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto {
display: flex;
flex-direction: row;
@ -1197,50 +1218,188 @@ footer {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p {
padding-right: 2rem;
padding-bottom: 1rem;
width: 30%;
flex: 1 30%;
max-width: 30%;
display: flex;
flex-direction: column;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p {
padding-right: 1rem;
flex: 1 30%;
max-width: 50%;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before {
content: url("../img/fanion.svg");
background-image: url("../img/fanion.svg");
background-size: 60px 80px;
background-repeat: no-repeat;
display: inline-block;
width: 80px;
height: 80px;
content: "";
padding-bottom: 1rem;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before {
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(2)::before {
content: url("../img/pouce.svg");
background-image: url("../img/pouce.svg");
background-size: 60px 80px;
background-repeat: no-repeat;
display: inline-block;
width: 80px;
height: 80px;
content: "";
padding-bottom: 1rem;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(2)::before {
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(3)::before {
content: url("../img/planete.svg");
background-image: url("../img/planete.svg");
background-size: 60px 80px;
background-repeat: no-repeat;
display: inline-block;
width: 80px;
height: 80px;
content: "";
padding-bottom: 1rem;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(3)::before {
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(4)::before {
content: url("../img/puzzle.svg");
background-image: url("../img/puzzle.svg");
background-size: 60px 80px;
background-repeat: no-repeat;
display: inline-block;
width: 80px;
height: 80px;
content: "";
padding-bottom: 1rem;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(4)::before {
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(5)::before {
content: url("../img/cube.svg");
background-image: url("../img/cube.svg");
background-size: 70px 80px;
background-repeat: no-repeat;
display: inline-block;
width: 80px;
height: 80px;
content: "";
padding-bottom: 1rem;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(5)::before {
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(6)::before {
content: url("../img/ampoule.svg");
background-image: url("../img/ampoule.svg");
background-size: 60px 80px;
background-repeat: no-repeat;
display: inline-block;
width: 80px;
height: 80px;
content: "";
padding-bottom: 1rem;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(6)::before {
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(7)::before {
content: url("../img/bonhome.svg");
background-image: url("../img/bonhome.svg");
background-size: 60px 80px;
background-repeat: no-repeat;
display: inline-block;
width: 80px;
height: 80px;
content: "";
padding-bottom: 1rem;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(7)::before {
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(8)::before {
content: url("../img/feuilles.svg");
background-image: url("../img/feuilles.svg");
background-size: 60px 80px;
background-repeat: no-repeat;
display: inline-block;
width: 80px;
height: 80px;
content: "";
padding-bottom: 1rem;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(8)::before {
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(9)::before {
content: url("../img/calendrier.svg");
background-image: url("../img/calendrier.svg");
background-size: 60px 80px;
background-repeat: no-repeat;
display: inline-block;
width: 80px;
height: 80px;
content: "";
padding-bottom: 1rem;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(9)::before {
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(10)::before {
content: url("../img/crayons.svg");
background-image: url("../img/crayons.svg");
background-size: 48px 80px;
background-repeat: no-repeat;
display: inline-block;
width: 80px;
height: 80px;
content: "";
padding-bottom: 1rem;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(10)::before {
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
#home article.node-type-static #paragraph-id--6 {
display: flex;
flex-direction: column;
@ -1249,6 +1408,12 @@ footer {
width: 70%;
padding-bottom: 2rem;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--6 {
width: 90%;
text-align: center;
}
}
#home article.node-type-static #paragraph-id--6 .field_field_texte {
margin: auto;
}
@ -1266,6 +1431,11 @@ footer {
font-size: 1.2rem;
align-self: center;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) {
width: 80%;
}
}
#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(3) {
width: 80%;
align-self: center;
@ -1290,6 +1460,11 @@ footer {
padding-top: 3rem;
text-align: center;
}
@media (max-width: 550px) {
#home article.node-type-static #paragraph-id--7 .field_field_title {
width: 90%;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte {
width: 80%;
}
@ -1329,6 +1504,11 @@ footer {
grid-row: 1/span 2;
grid-column: 1/span 2;
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) {
width: 200px;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
grid-row: 3;
grid-column: inherit;