From 836b9e157ced1dc308b201683b9c0bcae21adb74 Mon Sep 17 00:00:00 2001 From: ouidade Date: Wed, 12 Jul 2023 22:54:10 +0200 Subject: [PATCH] reglages taille img slickcarroussel & @media --- web/themes/custom/eql/css-compiled/styles.css | 34 ++++++++++++++++-- web/themes/custom/eql/scss/pages/_projet.scss | 36 +++++++++++++++++-- 2 files changed, 66 insertions(+), 4 deletions(-) diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 306b4c6..3a248d2 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -3091,11 +3091,14 @@ a { .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top { display: flex; flex-direction: row; - margin-bottom: 2rem; } + margin-bottom: 2rem; + max-height: 600px; } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .block-entity-fieldnodefield-photo { width: 60%; padding-right: 2rem; } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .block-entity-fieldnodefield-photo img { + height: auto; + max-height: 600px; object-fit: contain; width: inherit; } @media (max-width: 810px) { @@ -3112,11 +3115,28 @@ a { font-size: 2.5rem; font-weight: 800; color: #009ee3; } + @media (max-width: 1624px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodetitle .field--name-title { + font-size: 2.3rem; } } + @media (max-width: 1384px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodetitle .field--name-title { + font-size: 2rem; } } + @media (max-width: 1216px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodetitle .field--name-title { + font-size: rem; } } @media (max-width: 810px) { .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .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 .top_top .top_right .block-entity-fieldnodefield-equipe { margin-top: 2rem; } + @media (max-width: 1624px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe { + margin-top: 1rem; + padding-top: 0.5rem; } } + @media (max-width: 1384px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe { + margin-top: 0.8rem; + padding-top: 0.5rem; } } @media (max-width: 810px) { .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe { padding-top: 0.5rem; } } @@ -3125,6 +3145,12 @@ a { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; } + @media (max-width: 1624px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe .field--name-field-equipe { + font-size: 1.3rem; } } + @media (max-width: 1216px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe .field--name-field-equipe { + font-size: 1.1rem; } } @media (max-width: 810px) { .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe .field--name-field-equipe { font-size: 1rem; } } @@ -3137,12 +3163,16 @@ a { font-weight: 800; padding-right: 0.3rem; padding-left: 0.2rem; } + @media (max-width: 1624px) { + .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-incube { + margin-top: 1rem; } } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom { display: flex; flex-direction: row; border: 0.1rem solid; justify-content: space-evenly; - width: 90%; } + width: 90%; + margin-top: 3rem; } .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .top_bottom_left { padding-right: 1rem; order: 1; diff --git a/web/themes/custom/eql/scss/pages/_projet.scss b/web/themes/custom/eql/scss/pages/_projet.scss index 78957a8..b5255e0 100644 --- a/web/themes/custom/eql/scss/pages/_projet.scss +++ b/web/themes/custom/eql/scss/pages/_projet.scss @@ -15,6 +15,7 @@ display: flex; flex-direction: row; margin-bottom: 2rem; + max-height: 600px; // width: 800px; .block-entity-fieldnodefield-photo{ width: 60%; @@ -26,10 +27,11 @@ // padding-top: 2rem; // width: 600px; // width: 65%; - // height: auto; - // max-height: 360px; + height: auto; + max-height: 600px; object-fit: contain; width: inherit; + @media (max-width: 810px) { padding-top: 1rem; object-fit: cover; @@ -49,6 +51,15 @@ font-size: 2.5rem; font-weight: 800; color: $blue-light; + @media (max-width:1624px) { + font-size: 2.3rem; + } + @media (max-width:1384px) { + font-size: 2rem; + } + @media (max-width:1216px) { + font-size: rem; + } @media (max-width: 810px){ font-size: 1.7rem; } @@ -57,6 +68,15 @@ .block-entity-fieldnodefield-equipe{ margin-top: 2rem; // grid-column: 8 / span 8; + @media (max-width:1624px) { + margin-top: 1rem; + padding-top: 0.5rem; + } + @media (max-width:1384px) { + margin-top: 0.8rem; + padding-top: 0.5rem; + } + @media (max-width: 810px){ padding-top: 0.5rem; } @@ -65,6 +85,12 @@ font-size: 1.5rem; font-weight: 900; text-transform: uppercase ; + @media (max-width:1624px) { + font-size: 1.3rem; + } + @media (max-width:1216px) { + font-size: 1.1rem; + } @media (max-width: 810px){ font-size: 1rem; } @@ -82,6 +108,11 @@ padding-right: 0.3rem; padding-left: 0.2rem; } + @media (max-width:1624px) { + margin-top: 1rem; + // padding-top: 0.5rem; + } + @media (max-width: 810px) { // grid-column: 2 / span 4; } @@ -97,6 +128,7 @@ border: 0.1rem solid; justify-content: space-evenly; width: 90%; + margin-top: 3rem; .top_bottom_left{ padding-right: 1rem; order: 1;