From 70be2e6593b935254160ab1577bba5bf85443f4b Mon Sep 17 00:00:00 2001 From: ouidade Date: Tue, 24 Oct 2023 12:51:14 +0200 Subject: [PATCH] slide taille img and grid display --- web/themes/custom/eql/css-compiled/styles.css | 39 +++++++++--- web/themes/custom/eql/scss/pages/_home.scss | 60 +++++++++++-------- 2 files changed, 66 insertions(+), 33 deletions(-) diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 8f520b3..e1e6343 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -480,10 +480,11 @@ a { display: flex; max-height: 420px; } .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img { - width: 100%; + max-width: 100%; + max-height: 456px; object-fit: cover; object-position: center; } - @media (max-width: 852px) { + @media (max-width: 810px) { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img { max-height: 310px; max-width: 100%; @@ -502,9 +503,13 @@ a { padding-left: 0; padding-bottom: 1rem; } } .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date { + display: inline-block; + block-size: fit-content; grid-column: 9 / span 9; - grid-row: 2; order: 2; } + @media (min-width: 811px) { + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date { + margin-top: 5rem; } } .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date div { display: flex !important; flex-direction: row; } @@ -516,27 +521,39 @@ a { padding-right: 1rem; width: fit-content; } .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu { + display: inline-block; + block-size: fit-content; grid-column: 9 / span 9; - grid-row: 3; } + order: 3; } + @media (min-width: 811px) { + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu { + margin-top: 1rem; } } .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu .field__label { display: none; } - @media (max-width: 810px) { + @media (max-width: 811px) { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu { display: inline-flex; order: 3; } } .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title { display: inline-flex; + block-size: fit-content; grid-column: 9 / span 9; - grid-row: 4; order: 4; } + @media (min-width: 811px) { + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title { + margin-top: 1rem; } } .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title h2 a { color: #009ee3 !important; } .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre { + display: inline-block; + block-size: fit-content; grid-column: 9 / span 9; - grid-row: 5; order: 5; - margin-top: 0.3rem; font-weight: 800; } + @media (min-width: 811px) { + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre { + font-size: 1.5rem; + margin-top: 1rem; } } .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field:not(.field--name-field-images) { width: 100%; } .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child h2 { @@ -553,9 +570,13 @@ a { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .inline.links a { display: none; } .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type { + display: inline-block; + block-size: fit-content; grid-column: 9 / span 7; - grid-row: 6; order: 6; } + @media (min-width: 811px) { + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type { + margin-top: 1rem; } } .path-frontpage .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 { visibility: hidden; } diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss index f639f1c..3954f5b 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -72,12 +72,12 @@ max-height: 420px; } .field__item img{ - width: 100%; - // max-height: 456px; + max-width: 100%; + max-height: 456px; object-fit: cover; object-position: center; // padding-left: 1rem; - @media(max-width:852px){ + @media(max-width:810px){ max-height: 310px; max-width: 100%; object-fit: cover; @@ -103,9 +103,14 @@ } .field--name-field-date{ + display: inline-block; + block-size: fit-content; grid-column: 9 / span 9; - grid-row: 2; + // grid-row: 2; order: 2; + @media (min-width: 811px) { + margin-top: 5rem; + } div{ display: flex !important; flex-direction: row; @@ -121,23 +126,21 @@ } .field--name-field-lieu{ - // display: inline-block; + display: inline-block; + block-size: fit-content; grid-column: 9 / span 9; - grid-row: 3; + // grid-row: 3; + order: 3; + @media (min-width: 811px) { + margin-top: 1rem; + } // display: flex !important; // flex-direction: row; .field__label{ display: none; } - - // &::before{ - // content: " | "; - // margin-right: 2rem; - // @media (max-width: 534px){ - // display: none; - // } - // } - @media (max-width: 810px){ + + @media (max-width: 811px){ display: inline-flex; order: 3; } @@ -145,20 +148,28 @@ } .field--name-title{ display: inline-flex; + block-size: fit-content; grid-column: 9 / span 9; - grid-row: 4; + // grid-row: 4; order:4; + @media (min-width: 811px) { + margin-top: 1rem; + } h2 a{ color: $blue-light !important; } } .field--name-field-sous-titre{ - // display: inline-block; + display: inline-block; + block-size: fit-content; grid-column: 9 / span 9; - grid-row: 5; + // grid-row: 5; order:5; - margin-top: 0.3rem; font-weight: 800; + @media (min-width: 811px) { + font-size: 1.5rem; + margin-top: 1rem; + } } .field:not(.field--name-field-images){ @@ -171,8 +182,6 @@ } .inline.links{ - // grid-column: 5; - // grid-row: 4; padding-top: none !important; list-style: none; width: fit-content; @@ -183,11 +192,14 @@ } } .field--name-field-actu-type{ - // display: inline-block; - + display: inline-block; + block-size: fit-content; grid-column: 9 / span 7; - grid-row: 6; + // grid-row: 6; order:6; + @media (min-width: 811px) { + margin-top: 1rem; + } // padding-top: 1rem; } }