From cf0f65db4a80e3dbfe5e6f8b93e92a44f6ca9582 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Fri, 14 Jul 2023 15:22:52 +0200
Subject: [PATCH] slide home max height

---
 web/themes/custom/eql/css-compiled/styles.css | 13 +++++--
 web/themes/custom/eql/scss/pages/_home.scss   | 34 +++++++++++--------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css
index 5a309b8..182bfd3 100644
--- a/web/themes/custom/eql/css-compiled/styles.css
+++ b/web/themes/custom/eql/css-compiled/styles.css
@@ -444,6 +444,9 @@ a {
       height: 100%; }
       .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content {
         height: 90%; }
+        @media (max-width: 810px) {
+          .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .slick-list {
+            height: fit-content !important; } }
         @media (max-width: 479px) {
           .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .slick-list {
             height: fit-content !important; } }
@@ -453,13 +456,13 @@ a {
           width: 80%;
           height: 600px;
           margin: auto; }
-          @media (max-width: 680px) {
+          @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 {
               width: 65%; } }
           .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child {
             display: grid;
             grid-template-columns: 1fr repeat(9, 1fr) 1fr; }
-            @media (max-width: 680px) {
+            @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 {
                 display: flex;
                 flex-direction: column;
@@ -475,7 +478,11 @@ a {
                 padding-left: 1rem; }
                 @media (max-width: 852px) {
                   .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: 500px; } }
+                    max-height: 310px;
+                    max-width: 100%;
+                    object-fit: contain;
+                    padding-left: 0;
+                    margin-bottom: 1rem; } }
                 @media (max-width: 792px) {
                   .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: 450px; } }
diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss
index fb28c31..3a2ca14 100644
--- a/web/themes/custom/eql/scss/pages/_home.scss
+++ b/web/themes/custom/eql/scss/pages/_home.scss
@@ -9,6 +9,10 @@
             height: 600px;
             border-bottom: 5px solid $blue-light;
             background: $background-actus;
+
+            // @media(max-width: 810px){
+            //     max-height: fit-content;
+            // }
             @media(max-width:792px){
                 max-height: 500px;
             }
@@ -26,6 +30,9 @@
                     .view-content{
                         height: 90%;
                         .slick-list{
+                            @media(max-width: 810px){
+                                height: fit-content !important;
+                                } 
                             @media(max-width: 479px){
                             height: fit-content !important;
                             }   
@@ -37,13 +44,17 @@
                                 width: 80%;
                                 height: 600px;
                                 margin: auto;
-                                @media (max-width: 680px){
+                                @media (max-width: 810px){ 
+
+                                // @media (max-width: 680px){
                                     width: 65%;
                                 }
                                 div:first-child{           // block actu dans le bandeau
                                     display: grid;
                                     grid-template-columns: 1fr repeat(9, 1fr) 1fr;
-                                    @media (max-width: 680px){ 
+                                    @media (max-width: 810px){ 
+
+                                    // @media (max-width: 680px){ 
                                         display: flex;
                                         flex-direction: column;
                                         height: fit-content;
@@ -60,7 +71,11 @@
                                             object-fit: cover;
                                             padding-left: 1rem;
                                             @media(max-width:852px){
-                                                max-height: 500px;
+                                                max-height: 310px;
+                                                max-width: 100%;
+                                                object-fit: contain;
+                                                padding-left: 0;
+                                                margin-bottom: 1rem;
                                             }
                                             @media(max-width:792px){
                                                 max-height: 450px;
@@ -84,13 +99,6 @@
                                         grid-column: 9 / span 9;
                                         grid-row: 2;
                                         order: 2;
-                                        // display: flex !important;
-                                        // flex-direction: row;
-                                        // justify-content: flex-start;
-                                        // &:not(:last-child):after{ 
-                                        //     padding-right: 1rem;
-                                        //     content: "|";
-                                        // }
                                         div{
                                             display: flex !important;
                                             flex-direction: row;
@@ -101,11 +109,7 @@
                                             font-size: 0.9rem;
                                             font-weight: 800;
                                             padding-right: 1rem;
-                                            width: fit-content;
-                                            // :not(:last-child):after{ 
-                                            //     padding-left: 0.5rem;
-                                            //     content: "|";
-                                            // }            
+                                            width: fit-content;            
                                         }
                                     }