From 82d811d435e16d31dd0126502095e9ed0ec92ae1 Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 8 Apr 2022 15:08:49 +0200 Subject: [PATCH] responsive --- web/themes/custom/eql/css-compiled/styles.css | 124 ++++++++++-------- .../eql/scss/pages/_annuairederecherche.scss | 23 +++- web/themes/custom/eql/scss/pages/_faq.scss | 2 +- web/themes/custom/eql/scss/pages/_static.scss | 7 +- 4 files changed, 98 insertions(+), 58 deletions(-) diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index d7b872f..eb6240a 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -225,6 +225,7 @@ a { margin-left: 8%; margin-right: 5%; } } .path-node.page-node-type-static .layout-container .layout-content .layout__region--top .block-entity-fieldnodetitle .field--name-title { + display: inline; font-family: 'Source Code Pro'; font-size: 2rem; font-weight: 800; @@ -261,6 +262,9 @@ a { .path-node.page-node-type-static .layout-container .layout-content .layout__region--second { flex: 0 1 80%; margin: auto; } } + @media (max-width: 479px) { + .path-node.page-node-type-static .layout-container .layout-content .layout__region--second { + padding-top: 5rem; } } .path-node.page-node-type-static .layout-container .layout-content .layout__region--second .block-entity-fieldnodefield-textes { margin-top: 1rem; background-color: white; } @@ -1209,7 +1213,7 @@ a { margin-top: 8rem; } @media (max-width: 810px) { .path-faq #block-contenudelapageprincipale h2 { - margin-left: 6%; + margin-left: 8%; margin-right: 1%; } } .path-faq #block-contenudelapageprincipale .block-region-content { @@ -2298,59 +2302,75 @@ a { background-position-y: 7rem; max-width: 100vw; background-size: cover; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale span { - padding-top: 3rem; - padding-bottom: 3rem; - vertical-align: middle; - color: white; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale span h2 { - font-family: 'Source Code Pro'; - font-size: 2rem; - font-weight: 800; - color: white; - background-color: #009ee3; - text-transform: uppercase; - width: fit-content; - margin-left: 10%; - margin-top: 8rem; - margin-bottom: 6rem; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second { - flex: 0 1 50%; - margin-left: 25%; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .block-config-pages-block { - background-color: white; - margin-bottom: 4rem; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ { - margin-bottom: 3rem; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-logo { - grid-column: 1; - grid-row: 1 /span 3; - margin-right: 1rem; - max-height: 8rem; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-logo a { - height: 8rem; - width: 8rem; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-logo a img { - height: 100%; - width: 100%; - object-fit: contain; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-title { - grid-column: 2; + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale { + padding-top: 8rem; } + @media (max-width: 479px) { + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale { + padding-top: 5rem; + padding-left: 5rem; } } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale span { + padding-top: 3rem; + padding-bottom: 3rem; + vertical-align: middle; + color: white; } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale span h2 { + display: inline; + font-family: 'Source Code Pro'; + font-size: 2rem; font-weight: 800; - background-color: white; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-body { + color: white; + background-color: #009ee3; + text-transform: uppercase; + width: fit-content; + margin-left: 10%; + margin-top: 8rem; } + @media (max-width: 479px) { + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale span h2 { + margin-right: 37%; + margin-bottom: 2rem; + margin-left: 0; } } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second { + padding-top: 3rem; + flex: 0 1 50%; + margin-left: 20%; } + @media (max-width: 479px) { + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second { + flex: 0 1 80%; + margin: 0; } } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .block-config-pages-block { background-color: white; - grid-column: 2; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-body p { - margin: 0; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-lien { - background-color: white; - grid-column: 2; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-lien a { - color: black; - text-decoration: underline; } - .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-lien a svg { - display: none; } + margin-bottom: 4rem; } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ { + margin-bottom: 3rem; } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-logo { + grid-column: 1; + grid-row: 1 /span 3; + margin-right: 1rem; + max-height: 8rem; } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-logo a { + height: 8rem; + width: 8rem; } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-logo a img { + height: 100%; + width: 100%; + object-fit: contain; } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-title { + grid-column: 2; + font-weight: 800; + background-color: white; } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-body { + background-color: white; + grid-column: 2; } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-body p { + margin: 0; } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-lien { + background-color: white; + grid-column: 2; } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-lien a { + color: black; + text-decoration: underline; } + .path-ressources.annuairederecherche .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .node-type-partenaires_logo_footer_ div .field--name-field-lien a svg { + display: none; } .path-webform .region-content [aria-label="Message d'avertissement"] { display: none; } diff --git a/web/themes/custom/eql/scss/pages/_annuairederecherche.scss b/web/themes/custom/eql/scss/pages/_annuairederecherche.scss index 7216fb2..604ca78 100644 --- a/web/themes/custom/eql/scss/pages/_annuairederecherche.scss +++ b/web/themes/custom/eql/scss/pages/_annuairederecherche.scss @@ -8,13 +8,19 @@ .region-content{ #block-contenudelapageprincipale{ - + padding-top: 8rem; + @media (max-width: 479px){ + padding-top: 5rem; + padding-left: 5rem; + } + span{ padding-top: 3rem; padding-bottom: 3rem; vertical-align: middle; color: $white; h2{ + display: inline; font-family: 'Source Code Pro'; font-size: 2rem; font-weight: 800; @@ -24,14 +30,23 @@ width: fit-content; margin-left: 10%; margin-top: 8rem; - margin-bottom: 6rem; - + + @media (max-width: 479px) { + margin-right: 37%; + margin-bottom: 2rem; + margin-left: 0; + } } } .layout--threecol-25-50-25{ .layout__region--second{ + padding-top: 3rem; flex: 0 1 50%; - margin-left: 25%; + margin-left: 20%; + @media (max-width: 479px) { + flex: 0 1 80%; + margin: 0; + } .block-region-second{ .block-config-pages-block{ background-color: $white; diff --git a/web/themes/custom/eql/scss/pages/_faq.scss b/web/themes/custom/eql/scss/pages/_faq.scss index 2c1a9a3..389ead6 100644 --- a/web/themes/custom/eql/scss/pages/_faq.scss +++ b/web/themes/custom/eql/scss/pages/_faq.scss @@ -13,7 +13,7 @@ margin-left: 10%; margin-top: 8rem; @media (max-width: 810px){ - margin-left: 6%; + margin-left: 8%; margin-right: 1%; } } diff --git a/web/themes/custom/eql/scss/pages/_static.scss b/web/themes/custom/eql/scss/pages/_static.scss index 78f5906..b19167c 100644 --- a/web/themes/custom/eql/scss/pages/_static.scss +++ b/web/themes/custom/eql/scss/pages/_static.scss @@ -27,7 +27,9 @@ margin-left: 8%; margin-right: 5%; } + .field--name-title{ + display: inline; font-family: 'Source Code Pro'; font-size: 2rem; font-weight: 800; @@ -83,7 +85,10 @@ @media (max-width: 810px){ flex: 0 1 80%; margin: auto; - } + } + @media (max-width: 479px){ + padding-top: 5rem; + } // paragraphe texte .block-entity-fieldnodefield-textes{ margin-top: 1rem;