From 814340e2ac751864c765ec375e9210c62b56875c Mon Sep 17 00:00:00 2001 From: ouidade Date: Sat, 2 Mar 2024 16:49:14 +0100 Subject: [PATCH] mediaquerries --- .../css/quartiers_de_demain.css | 55 +++++++++++++++---- .../scss/global/_layout.scss | 2 + .../scss/pages/_presentation.scss | 23 +++++++- .../scss/partials/_footer.scss | 22 +++++++- .../scss/partials/_header.scss | 21 +++++-- .../scss/quartiers_de_demain.scss | 2 +- 6 files changed, 104 insertions(+), 21 deletions(-) diff --git a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css index 65ecebe..95d7c49 100644 --- a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css +++ b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css @@ -160,9 +160,9 @@ header { position: relative; top: 0; border-bottom: 1px solid #808080; } - @media (max-width: 800px) { + @media (max-width: 810px) { header { - width: 800px; } } + height: 110px; } } header .contextual-region { width: max-content; } header .header_left_container { @@ -171,15 +171,24 @@ header { display: flex; flex-direction: row; border-right: 1px solid #808080; - padding-left: 40px; } + padding-left: 5%; } + @media (max-width: 891px) { + header .header_left_container #block-quartiers-de-demain-logorepu-2 { + height: 110px; } } header .header_left_container #block-quartiers-de-demain-logoepau-2 { height: 150px; } + @media (max-width: 891px) { + header .header_left_container #block-quartiers-de-demain-logoepau-2 { + height: 110px; } } header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain { margin-left: auto; - padding-right: 50px; } + padding-right: 5%; } header .header_left_container img { width: auto; height: 150px; } + @media (max-width: 891px) { + header .header_left_container img { + height: 110px; } } header .header_right_container { padding-right: 10px; } header .header_right_container .language-switcher-language-url ul { @@ -253,23 +262,37 @@ header { width: fit-content; } .footer h2, .footer ul { margin: 0; } + @media (max-width: 891px) { + .footer { + display: flex; + flex-wrap: wrap; + justify-content: space-between; } } .footer #footer-left { grid-column: 1 /span 5; grid-row: 1; - padding-left: 40px; } + padding-left: 5%; } .footer #footer-left .footer_left_container { display: flex; flex-direction: row; } .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau { height: 150px; } + @media (max-width: 891px) { + .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau { + height: 110px; } } .footer #footer-left .footer_left_container img { width: auto; height: 150px; } + @media (max-width: 891px) { + .footer #footer-left .footer_left_container img { + height: 110px; } } .footer #footer-middle { grid-column: 6 /span 7; grid-row: 1; } .footer #footer-middle #block-quartiers-de-demain-pieddepage ul li { padding-bottom: 0.2rem; } + @media (max-width: 891px) { + .footer #footer-middle #block-quartiers-de-demain-pieddepage ul { + padding-left: 00.5rem; } } .footer #footer-right { grid-column: 10 / 12; grid-row: 1; } @@ -371,9 +394,6 @@ header { order: 2; padding-top: 3rem; padding-bottom: 6rem; } - @media (max-width: 891px) { - #presentation .layout-content { - width: 90%; } } @media (max-width: 500px) { #presentation .layout-content { padding-top: 0; } } @@ -385,11 +405,18 @@ header { width: 100%; } #presentation .layout-content .content_container article.node-type-static .field_body { padding-left: 20%; - width: 80%; } + padding-right: 20%; } + @media (max-width: 640px) { + #presentation .layout-content .content_container article.node-type-static .field_body { + padding-left: 10%; + padding-right: 10%; } } #presentation .layout-content .content_container article.node-type-static .field_body h2 { font-size: 0.8rem; font-weight: 600; margin-bottom: 0; } + #presentation .layout-content .content_container article.node-type-static .field_body img { + width: 100%; + height: auto; } #presentation .layout-content .content_container article.node-type-static .field_body p { margin-top: 0; } #presentation .layout-content .content_container article.node-type-static .paragraph { @@ -397,6 +424,10 @@ header { padding-bottom: 1rem; padding-left: 20%; padding-right: 20%; } + @media (max-width: 640px) { + #presentation .layout-content .content_container article.node-type-static .paragraph { + padding-left: 10%; + padding-right: 10%; } } #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_title { text-transform: uppercase; font-size: 1rem; @@ -437,6 +468,9 @@ header { #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img { width: 40px; height: auto; } + @media (max-width: 891px) { + #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img { + width: 30px; } } #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img { width: -moz-available; height: auto; @@ -483,7 +517,8 @@ header { font-size: small; font-weight: 800; } #presentation aside .views-field-field-pieces-jointes .field-content span:nth-child(2) { - margin-left: 50px; } + margin-left: 50px; + align-self: center; } .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage { grid-column: 3 /span 9; diff --git a/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss b/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss index b24f8b5..25f6cc7 100644 --- a/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss +++ b/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss @@ -1,5 +1,7 @@ $header-height : 150px; +$header-height-pad : 110px; +$header-height-small : 70px; $width-menu-slidedown : 550px; .layout-container { diff --git a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss index c2198d4..1cb32eb 100644 --- a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss +++ b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss @@ -13,7 +13,7 @@ // width: 70%; // margin: auto; @media(max-width: 891px){ - width: 90%; + // width: 90%; } @media (max-width:500px) { padding-top: 0; @@ -29,12 +29,22 @@ .field_body{ padding-left: 20%; - width: 80%; + padding-right: 20%; + @media (max-width:640px) { + padding-left: 10%; + padding-right: 10%; + } + + // width: 80%; h2{ font-size: $font-medium; font-weight: 600; margin-bottom: 0; } + img{ + width: 100%; + height: auto; + } p{ margin-top: 0; } @@ -44,6 +54,10 @@ padding-bottom: 1rem; padding-left: 20%; padding-right: 20%; + @media (max-width:640px) { + padding-left: 10%; + padding-right: 10%; + } } .field_field_textes{ @@ -108,6 +122,9 @@ img{ width: 40px; height: auto; + @media(max-width: 891px){ + width: 30px; + } } } #paragraph-id--9{ @@ -171,6 +188,8 @@ font-weight: 800; &:nth-child(2){ margin-left: 50px; + align-self: center; + } } } diff --git a/web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss b/web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss index d979732..b89273a 100644 --- a/web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss +++ b/web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss @@ -7,12 +7,17 @@ section{width: fit-content;} h2, ul{margin: 0;} border-top: 1px solid #808080; + @media(max-width: 891px){ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } #footer-left{ grid-column: 1 /span 5; grid-row: 1; - padding-left: 40px; + padding-left: 5%; .footer_left_container{ display: flex; flex-direction: row; @@ -20,11 +25,17 @@ } #block-quartiers-de-demain-logoepau{ - height: $header-height; + height: $header-height; + @media(max-width: 891px){ + height: $header-height-pad; + } } img{ width: auto; - height: $header-height; + height: $header-height; + @media(max-width: 891px){ + height: $header-height-pad; + } } } @@ -36,6 +47,11 @@ ul li{ padding-bottom: 0.2rem; } + @media(max-width: 891px){ + ul{ + padding-left: 00.5rem; + } + } } } #footer-right{ diff --git a/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss b/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss index 121fc70..2d1b775 100644 --- a/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss +++ b/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss @@ -3,7 +3,7 @@ header{ grid-template-columns: repeat(12, 1fr); grid-gap: 10px; grid-template-rows: repeat(3, 1fr); - height: 150px; + height: $header-height; background-color: $white-header; z-index: 99; width: 100vw; @@ -13,9 +13,11 @@ header{ position: relative; top: 0; border-bottom: 1px solid #808080; - @media (max-width:800px) { - width: 800px; + @media (max-width:810px) { + // width: 800px; + height: $header-height-pad; } + @media (max-width:360px) { } .contextual-region{ width: max-content; } @@ -26,20 +28,29 @@ header{ display: flex; flex-direction: row; border-right: 1px solid #808080; - padding-left: 40px; + padding-left: 5%; #block-quartiers-de-demain-logorepu-2{ + @media(max-width: 891px){ + height: $header-height-pad; + } } #block-quartiers-de-demain-logoepau-2{ height: $header-height; + @media(max-width: 891px){ + height: $header-height-pad; + } } #block-quartiers-de-demain-logoquartiersdedemain{ margin-left: auto; - padding-right: 50px; + padding-right: 5%; } img{ width: auto; height: $header-height; + @media(max-width: 891px){ + height: $header-height-pad; + } } } .header_right_container{ diff --git a/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss b/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss index 4477c63..227327c 100644 --- a/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss +++ b/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss @@ -28,6 +28,6 @@ /*pages*/ @import "pages/partenaires"; -@import "pages/_presentation"; +@import "pages/presentation"; @import "pages/static";