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

mobile 3 pilliers

This commit is contained in:
ouidade 2024-07-07 18:18:54 +02:00
parent 5d5ad21366
commit 39bef4b27a
2 changed files with 77 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1474,6 +1474,12 @@ footer {
grid-template-columns: repeat(6 auto);
grid-template-rows: repeat(3 1fr);
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto {
grid-template-rows: repeat(10 auto);
grid-template-columns: repeat(2 1fr);
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5 {
font-size: 5rem;
font-weight: 800;
@ -1488,10 +1494,22 @@ footer {
grid-row: 2;
grid-column: 3;
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) {
grid-row: 4;
grid-column: 1;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
grid-row: 1;
grid-column: 5;
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
grid-row: 9;
grid-column: 1;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p {
font-size: 1rem;
font-weight: 400;
@ -1506,17 +1524,31 @@ footer {
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) {
width: 200px;
width: 315px;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
grid-row: 3;
grid-column: inherit;
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
grid-row: 5;
grid-column: 1;
width: 315px;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
grid-row: 1/span 2;
grid-column: 5/span 6;
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
grid-row: 9/span 9;
grid-column: 1/span 2;
width: 315px;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(1) {
grid-row: 3;
grid-column: 1/span 2;
@ -1524,10 +1556,22 @@ footer {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) {
grid-row: 1;
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) {
grid-row: 7;
grid-column: 1/span 2;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
grid-row: 3;
grid-column: 5;
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
grid-row: 8;
grid-column: 1/span 2;
}
}
#home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
display: none;
}

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

@ -309,6 +309,10 @@
display: grid;
grid-template-columns: repeat(6 auto);
grid-template-rows: repeat(3 1fr);
@media(max-width: 700px){
grid-template-rows: repeat(10 auto);
grid-template-columns: repeat(2 1fr);
}
h5{
font-size: 5rem;
@ -319,14 +323,23 @@
h5:nth-of-type(1){
grid-row: 2;
grid-column: 1;
}
h5:nth-of-type(2){
grid-row: 2;
grid-column: 3;
@media(max-width: 700px){
grid-row: 4;
grid-column: 1;
}
}
h5:nth-of-type(3){
grid-row: 1;
grid-column: 5;
@media(max-width: 700px){
grid-row: 9;
grid-column: 1;
}
}
p{
font-size: 1rem;
@ -340,16 +353,26 @@
grid-row: 1 /span 2;
grid-column: 1 /span 2;
@media(max-width: 700px){
width: 200px;
width: 315px;
}
}
svg:nth-of-type(2){
grid-row: 3;
grid-column: inherit;
@media(max-width: 700px){
grid-row: 5;
grid-column: 1 ;
width: 315px;
}
}
svg:nth-of-type(3){
grid-row: 1 /span 2;
grid-column: 5 /span 6;
@media(max-width: 700px){
grid-row: 9/span 9;
grid-column: 1 /span 2;
width: 315px;
}
}
p:nth-of-type(1){
grid-row: 3;
@ -357,10 +380,18 @@
}
p:nth-of-type(2){
grid-row: 1;
@media(max-width: 700px){
grid-row: 7;
grid-column: 1 /span 2;
}
}
p:nth-of-type(3){
grid-row: 3;
grid-column: 5;
@media(max-width: 700px){
grid-row: 8;
grid-column: 1 /span 2;
}
}
}
}