From ae3de8a9890ef1e9461c9aaef7787469854a7d28 Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 8 Apr 2022 16:12:44 +0200 Subject: [PATCH] responsive page 1 projet --- web/themes/custom/eql/css-compiled/styles.css | 33 ++++++++++++++- .../custom/eql/scss/global/_mediaqueries.scss | 2 +- web/themes/custom/eql/scss/pages/_projet.scss | 40 ++++++++++++++++++- 3 files changed, 72 insertions(+), 3 deletions(-) diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index eb6240a..a3f2ffa 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -3151,16 +3151,25 @@ a { font-family: "Source Code Pro"; font-size: 2.8rem; font-weight: 500; } + @media (max-width: 810px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodetitle .field--name-title { + font-size: 1.7rem; } } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe { grid-column: 2 / span 7; } + @media (max-width: 810px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe { + padding-top: 0.5rem; } } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe .field--name-field-equipe { color: #09398b; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; } + @media (max-width: 810px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe .field--name-field-equipe { + font-size: 1rem; } } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-incube { padding-top: 2rem; - grid-column: 2; + grid-column: 2 / span 4; width: fit-content; } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-incube .field--name-field-incube { background-color: red; @@ -3168,17 +3177,31 @@ a { font-weight: 800; padding-right: 0.3rem; padding-left: 0.2rem; } + @media (max-width: 810px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-incube { + grid-column: 2 / span 4; } } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo { grid-column-start: 5; grid-column-end: 9; } + @media (max-width: 810px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo { + grid-column: 1 / span 10; } } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo img { padding-top: 2rem; width: 600px; max-height: 360px; object-fit: cover; } + @media (max-width: 810px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo img { + padding-top: 1rem; + object-fit: contain; + width: 100%; } } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--first { margin-top: 5rem; } + @media (max-width: 479px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--first { + display: none; } } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--first .block-region-first { display: flex; justify-content: flex-end; @@ -3206,8 +3229,16 @@ a { .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second { margin-top: 5rem; flex: 0 1 50%; } + @media (max-width: 479px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second { + flex: 0 1 100%; + margin-top: 1rem; } } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second { width: 90%; } + @media (max-width: 479px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second { + width: 80%; + margin: auto; } } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .block-entity-fieldnodebody p { margin-top: 0; } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .block-entity-fieldnodebody .field--type-text-with-summary { diff --git a/web/themes/custom/eql/scss/global/_mediaqueries.scss b/web/themes/custom/eql/scss/global/_mediaqueries.scss index c97325a..06d0fc0 100644 --- a/web/themes/custom/eql/scss/global/_mediaqueries.scss +++ b/web/themes/custom/eql/scss/global/_mediaqueries.scss @@ -136,7 +136,7 @@ } } } - } + } } diff --git a/web/themes/custom/eql/scss/pages/_projet.scss b/web/themes/custom/eql/scss/pages/_projet.scss index 74f633b..64be675 100644 --- a/web/themes/custom/eql/scss/pages/_projet.scss +++ b/web/themes/custom/eql/scss/pages/_projet.scss @@ -15,10 +15,15 @@ // position: relative; display: grid; grid-template-columns: 1fr repeat(8, 1fr) 1fr; + // @media (max-width: 479px) { + // display: flex; + // flex-direction: column; + // } .block-block-contentbfb4368c-4f85-4329-88f1-8769161aa66f{ grid-column: 1 / span 10; background-color: $blue-light; + .field--name-body{ vertical-align: middle; color: $white; @@ -57,20 +62,29 @@ font-family: "Source Code Pro"; font-size: 2.8rem; font-weight: 500; + @media (max-width: 810px){ + font-size: 1.7rem; + } } } .block-entity-fieldnodefield-equipe{ grid-column: 2 / span 7; + @media (max-width: 810px){ + padding-top: 0.5rem; + } .field--name-field-equipe{ color: $blue-dark; font-size: 1.5rem; font-weight: 900; text-transform: uppercase ; + @media (max-width: 810px){ + font-size: 1rem; + } } } .block-entity-fieldnodefield-incube{ padding-top: 2rem; - grid-column: 2; + grid-column: 2 / span 4; width: fit-content; .field--name-field-incube{ background-color: red; @@ -79,16 +93,28 @@ padding-right: 0.3rem; padding-left: 0.2rem; } + @media (max-width: 810px) { + grid-column: 2 / span 4; + } } .block-entity-fieldnodefield-photo{ grid-column-start: 5; grid-column-end: 9; + @media (max-width: 810px) { + grid-column: 1 / span 10; + + } img{ padding-top: 2rem; width: 600px; // height: auto; max-height: 360px; object-fit: cover; + @media (max-width: 810px) { + padding-top: 1rem; + object-fit: contain; + width: 100%; + } } // position: relative; @@ -102,6 +128,9 @@ .layout__region--first{ // margin-top: 18rem; margin-top: 5rem; + @media (max-width: 479px){ + display: none; + } .block-region-first{ display: flex; justify-content: flex-end; @@ -143,8 +172,17 @@ margin-top: 5rem; flex: 0 1 50%; // margin-top: 18rem; + @media (max-width: 479px) { + flex: 0 1 100%; + margin-top: 1rem; + + } .block-region-second{ width: 90%; + @media (max-width: 479px) { + width: 80%; + margin: auto; + } .block-entity-fieldnodebody{ p{ margin-top: 0;