diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 2dc7216..8487fca 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -407,7 +407,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul { } @media (max-width: 1090px) { header .header_nav_container #block-quartiers-de-demain-entete ul li { - padding-top: 0.3rem; + padding-top: 0.5rem; } } header .header_nav_container #block-quartiers-de-demain-entete ul li a { @@ -417,7 +417,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li a { } @media (max-width: 1090px) { header .header_nav_container #block-quartiers-de-demain-entete ul li a { - font-size: 0.6rem; + font-size: 0.9rem; } } @media (max-width: 500px) { @@ -425,13 +425,12 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li a { display: flex; flex-direction: column; align-items: center; - font-size: 0.9rem; + font-size: 1rem; } } header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after { content: ""; display: block; - width: 80px; border-bottom: solid white 1px; padding-bottom: 0.3rem; } @@ -580,11 +579,6 @@ footer { .footer #footer-left .footer_left_container .logo-qdd { display: none; } -@media (max-width: 500px) { - .footer #footer-left .footer_left_container { - padding-left: 15%; - } -} .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau { height: fit-content; margin: auto; @@ -629,6 +623,9 @@ footer { padding-bottom: 0.2rem; } @media (max-width: 700px) { + .footer #footer-middle #block-quartiers-de-demain-pieddepage { + padding-left: 40px; + } .footer #footer-middle #block-quartiers-de-demain-pieddepage ul { padding-left: 0rem; } @@ -650,6 +647,11 @@ footer { .footer #footer-right #block-quartiers-de-demain-socialmedialinks { flex-direction: column; } +@media (max-width: 700px) { + .footer #footer-right #block-quartiers-de-demain-socialmedialinks { + padding-left: 1rem; + } +} .footer #footer-right #block-quartiers-de-demain-socialmedialinks h2 { display: flex; flex-direction: column; @@ -657,6 +659,11 @@ footer { font-weight: 400; font-size: 0.6rem; } +@media (max-width: 700px) { + .footer #footer-right #block-quartiers-de-demain-socialmedialinks h2 { + width: 50%; + } +} .footer #footer-right #block-quartiers-de-demain-socialmedialinks li { padding: 0; } @@ -2814,6 +2821,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h .node-type-site .layout--threecol-25-50-25 { flex-wrap: nowrap; } +@media (max-width: 500px) { + .node-type-site .layout--threecol-25-50-25 { + display: flex; + flex-direction: column; + width: 100%; + } +} .node-type-site .layout--threecol-25-50-25 .layout__region--first { flex: 1 0 20%; display: flex; @@ -2823,6 +2837,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h .node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first { width: 100%; } +@media (max-width: 500px) { + .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) { + margin-top: 1rem; + } +} .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) h2, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) .field--label-above, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) span:not(.file) { display: none; } @@ -2832,6 +2851,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h font-size: 0.4rem; text-transform: uppercase; } +@media (max-width: 500px) { + .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) .file--mime-application-pdf { + font-size: 0.8rem; + } +} .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) .file--mime-application-pdf a { color: white; padding: 0.5rem 0.3rem; @@ -2843,6 +2867,12 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h text-transform: uppercase; width: fit-content; } +@media (max-width: 500px) { + .node-type-site .layout--threecol-25-50-25 .layout__region--first .field_field_liens_site div div { + margin-top: 0.5rem; + font-size: 0.8rem; + } +} .node-type-site .layout--threecol-25-50-25 .layout__region--first .field_field_liens_site div div a { color: white; padding: 0.5rem 0.3rem; @@ -2856,6 +2886,12 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h flex-wrap: wrap; margin-left: 2.5rem; } +@media (max-width: 500px) { + .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second { + margin-left: 0.5rem; + margin-top: 1rem; + } +} .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_title, .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_numero, .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_sous_titre { @@ -2930,6 +2966,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) { margin-top: 2rem; } +@media (max-width: 500px) { + .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) { + width: 100%; + } +} .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) .paragraph--type--site-parts .field_field_titre_site { font-family: "gilroy-semibold"; font-size: 0.6rem; @@ -2944,6 +2985,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h flex-direction: row !important; justify-content: space-between; } +@media (max-width: 500px) { + .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama { + flex-direction: column !important; + } +} .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama .cadre-img-zoom { margin: auto; } @@ -2959,10 +3005,22 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h font-size: 0.3rem; font-family: "gilroy-light"; } +@media (max-width: 500px) { + .node-type-site .layout--threecol-25-50-25 .layout__region--third { + display: flex; + flex-direction: column; + width: 100%; + } +} .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div { display: flex; flex-direction: row; } +@media (max-width: 500px) { + .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div { + justify-content: center; + } +} .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .prev-site { padding-right: 0.5rem; } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss index d9ccaa8..df415c5 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss @@ -8,6 +8,11 @@ } .layout--threecol-25-50-25{ flex-wrap: nowrap; + @media(max-width: 500px){ + display: flex; + flex-direction: column; + width: 100%; + } .layout__region--first{ flex: 1 0 20%; display: flex; @@ -20,6 +25,9 @@ // width: fit-content; } div:has(.field_field_documents){ + @media(max-width: 500px){ + margin-top: 1rem; + } h2, .field--label-above, span:not(.file){ display: none; @@ -29,6 +37,9 @@ color: white; font-size: 0.4rem; text-transform: uppercase; + @media(max-width: 500px){ + font-size: 0.8rem; + } a{ color: white; padding: 0.5rem 0.3rem; @@ -42,6 +53,10 @@ font-size: 0.4rem; text-transform: uppercase; width: fit-content; + @media(max-width: 500px){ + margin-top: 0.5rem; + font-size: 0.8rem; + } a{ color: white; padding: 0.5rem 0.3rem; @@ -55,6 +70,10 @@ flex-direction: row; flex-wrap: wrap; margin-left: 2.5rem; + @media(max-width: 500px){ + margin-left: 0.5rem; + margin-top: 1rem; + } .field_title, .field_field_numero, .field_field_sous_titre{ @@ -143,6 +162,9 @@ div:has(.field_field_parties){ margin-top: 2rem; + @media(max-width: 500px){ + width: 100%; + } .paragraph--type--site-parts{ .field_field_titre_site{ @@ -164,6 +186,9 @@ display: flex !important; flex-direction: row !important; justify-content: space-between; + @media(max-width: 500px){ + flex-direction: column !important; + } .cadre-img-zoom{ margin: auto; img{ @@ -190,10 +215,19 @@ .layout__region--third{ + @media(max-width: 500px){ + display: flex; + flex-direction: column; + width: 100%; + } .block-region-third{ div{ display: flex; flex-direction: row; + @media(max-width: 500px){ + justify-content: center; + } + .prev-site{ padding-right: 0.5rem; &::before{ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss index caa64c8..c93ec63 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss @@ -41,7 +41,7 @@ footer{ // max-width: 50vw; } @media (max-width: 500px){ - padding-left: 15%; + // padding-left: 15%; } display: flex; flex-direction: row; @@ -94,6 +94,7 @@ footer{ padding-bottom: 0.2rem; } @media(max-width: 700px){ + padding-left: 40px; ul{ padding-left: 0rem; } @@ -120,6 +121,9 @@ footer{ #block-quartiers-de-demain-socialmedialinks{ // display: none; flex-direction: column; + @media (max-width: 700px){ + padding-left: 1rem; + } h2{ display: flex; flex-direction: column; @@ -128,6 +132,9 @@ footer{ // padding-bottom: 0.6rem; font-size: 0.6rem; + @media (max-width: 700px){ + width: 50%; + } } // .fa-3x{ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss index 014c54f..600819b 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss @@ -149,20 +149,20 @@ header{ } li{ @media(max-width: 1090px){ - padding-top: 0.3rem; + padding-top: 0.5rem; } a{ text-transform: uppercase; color: white; font-size: 0.5rem; @media(max-width:1090px){ - font-size: 0.6rem; + font-size: 0.9rem; } @media(max-width: 500px){ display: flex; flex-direction: column; align-items: center; - font-size: 0.9rem; + font-size: 1rem; } } @@ -170,7 +170,7 @@ header{ ::after{ content: ""; display: block; - width: 80px; + // width: 80px; border-bottom: solid white 1px; padding-bottom: 0.3rem; }