@media home

web/themes/custom/eql/css-compiled/styles.css

@@ -427,26 +427,35 @@ a {
   height: 600px;
   border-bottom: 5px solid #009ee3;
   background: rgba(0, 158, 227, 0.2); }
+  @media (max-width: 792px) {
+    .path-frontpage .block-views-blockactus-blocks-pages-block-1 {
+      max-height: 500px; } }
+  @media (max-width: 724px) {
+    .path-frontpage .block-views-blockactus-blocks-pages-block-1 {
+      max-height: 470px; } }
   .path-frontpage .block-views-blockactus-blocks-pages-block-1 div {
     height: 100%; }
     .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages {
       height: 100%; }
       .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content {
         height: 90%; }
-        @media (max-width: 479px) {
-          .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content {
-            display: flex;
-            flex-direction: column;
-            width: 80%; } }
         .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite {
           color: black;
           line-height: 1.5rem;
           width: 80%;
           height: 600px;
           margin: auto; }
+          @media (max-width: 680px) {
+            .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) {
+              .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;
+                height: 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-images {
               order: 1;
               grid-column: 1 /span 9;
@@ -454,7 +463,25 @@ 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 .field--name-field-images .field__item img {
                 width: inherit;
                 max-height: 550px;
-                object-fit: cover; }
+                object-fit: cover;
+                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; } }
+                @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; } }
+                @media (max-width: 724px) {
+                  .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: 400px; } }
+                @media (max-width: 680px) {
+                  .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 {
+                    height: 200px;
+                    object-fit: contain;
+                    max-width: 70vw;
+                    margin: auto;
+                    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 {
               grid-column: 9 / span 9;
               grid-row: 2;
@@ -479,6 +506,12 @@ 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 .field--name-field-lieu::before {
                 content: " | ";
                 margin-right: 2rem; }
+                @media (max-width: 534px) {
+                  .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::before {
+                    display: none; } }
+              @media (max-width: 534px) {
+                .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 {
+                  order: 2; } }
             .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;
               grid-column: 9 / span 9;
@@ -552,6 +585,9 @@ a {
         align-items: center; }
         .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links a:after {
           content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); }
+    @media (max-width: 479px) {
+      .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images {
+        width: 100%; } }
     .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images .field__item img {
       width: 15rem;
       height: auto; }
@@ -560,6 +596,11 @@ a {
     .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche {
       flex: 1 1 50px;
       padding-left: 1rem; }
+      @media (max-width: 534px) {
+        .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche {
+          padding-left: 0em;
+          flex: 1 1 100%;
+          padding-right: 1rem; } }
       @media (max-width: 479px) {
         .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche {
           padding-left: 0em; } }

web/themes/custom/eql/scripts/main.js

@@ -162,12 +162,8 @@ jQuery(function($) {
 //  slideshow home // marche pas. attention ai rajouter des class dans template views.view.html.twig et views-view-actus-blocks-pages--block-1.html.twig
 
 (function($, window) {
-
   console.log('hello')
-
   $(document).ready(function(){
-    // if ('.view-id-actus_blocks_pages view-display-id-block_1'){
-
       $('.path-frontpage .view-actus-blocks-pages .view-content').slick({
         slidesToShow: 1,
         // slidesToScroll: 1,
@@ -185,16 +181,11 @@ jQuery(function($) {
           }]
       });
       console.log('salut slick home');
-
       $('.page-node-type-actualite .block-entity-fieldnodefield-images .field--type-image').slick({
         dots: true,
         arrows: false,
-
-
       });
       console.log('salut slick actus');
-
-
       $('.page-node-type-projet .block-entity-fieldnodefield-photo .field--type-image').slick({
         slidesToShow: 1,
         dots: true,
@@ -203,10 +194,6 @@ jQuery(function($) {
         adaptiveHeight: true,
       });
       console.log('salut slick projets');
-
   });
-
-  // console.log('salut slick actus');
-
 })(jQuery, window);
 

web/themes/custom/eql/scss/pages/_home.scss

@@ -9,6 +9,12 @@
             height: 600px;
             border-bottom: 5px solid $blue-light;
             background: $background-actus;
+            @media(max-width:792px){
+                max-height: 500px;
+            }
+            @media(max-width:724px){
+                max-height: 470px;
+            }
             div{
                 height: 100%;
                 .view-actus-blocks-pages{
@@ -18,37 +24,58 @@
                         // flex-basis: auto;
                         height: 90%;
 
-                        @media (max-width: 479px){ 
-                            display: flex;
-                            flex-direction: column;
-                            width: 80%;
-                        }
+                        // @media (max-width: 479px){ 
+                        //     display: flex;
+                        //     flex-direction: column;
+                        //     width: 80%;
+                        // }
                         .views-row{
-                            // width: 80%;
-                            // margin: auto;
                             .node-type-actualite{
                                 color: $black;
                                 line-height: 1.5rem;
                                 width: 80%;
                                 height: 600px;
                                 margin: auto;
-    
-                                // background-color: burlywood;
-        
+                                @media (max-width: 680px){
+                                    width: 65%;
+                                }
                                 div:first-child{           // block actu dans le bandeau
-                                    // display: flex;
-                                    // flex-direction: column;
-                                    // flex-wrap: wrap;
                                     display: grid;
                                     grid-template-columns: 1fr repeat(9, 1fr) 1fr;
+                                    @media (max-width: 680px){ 
+                                        display: flex;
+                                        flex-direction: column;
+                                        height: fit-content;
+                                        
+                                    }
                                     .field--name-field-images {
                                         order: 1;
                                         grid-column: 1 /span 9;
                                         grid-row: 1 / span 6;
+                                        
                                         .field__item img{  
                                             width: inherit;
                                             max-height: 550px;
                                             object-fit: cover;
+                                            padding-left: 1rem;
+                                            @media(max-width:852px){
+                                                max-height: 500px;
+                                            }
+                                            @media(max-width:792px){
+                                                max-height: 450px;
+                                            }
+                                            @media(max-width:724px){
+                                                max-height: 400px;
+                                            }
+                                            @media (max-width: 680px){ 
+                                                height: 200px;
+                                                object-fit: contain;
+                                                max-width: 70vw;
+                                                margin: auto;
+                                                padding-left: 0;
+                                                padding-bottom: 1rem;
+                                                
+                                            }
                                         }
                                     }
                                     
@@ -94,6 +121,12 @@
                                         &::before{
                                             content: " | ";
                                             margin-right: 2rem;
+                                            @media (max-width: 534px){
+                                                display: none;
+                                            }
+                                        }
+                                        @media (max-width: 534px){
+                                            order: 2;
                                         }
                                         
                                     }
@@ -257,6 +290,9 @@
                     }
                     .field--name-field-images{
                         // grid-column: 2 / 4;
+                        @media (max-width: 479px) {
+                            width: 100%;
+                        }
                         .field__item{
                             img{
                                 width: 15rem;
@@ -271,9 +307,14 @@
                         flex: 1 1 50px;
                         // grid-column: 4 / 9;
                         padding-left: 1rem;
+                        @media (max-width: 534px){ 
+                            padding-left: 0em;
+                            flex: 1 1 100%;
+                            padding-right: 1rem;
+                            
+                        }
                         @media (max-width: 479px){ 
-                           padding-left: 0em;
-                           
+                           padding-left: 0em;                       
                         }
                         p{
                             background-color: $white;