macaron dans home

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

@@ -209,7 +209,7 @@ a {
       justify-content: flex-end;
       position: -webkit-sticky;
       position: sticky;
-      top: 9rem; }
+      top: 10rem; }
       @media (max-width: 810px) {
         .path-node.page-node-type-static .layout-container .layout-content .layout__region--first .block-region-first {
           display: none; } }
@@ -258,7 +258,10 @@ a {
     margin-top: 1rem;
     display: flex;
     flex-direction: column;
-    width: 70%; }
+    width: 70%;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 9rem; }
     @media (max-width: 810px) {
       .path-node.page-node-type-static .layout-container .layout-content .layout__region--third .block-region-third {
         margin: auto; } }
@@ -392,7 +395,19 @@ a {
       grid-template-columns: 1fr repeat(4, 2fr) 1fr;
       grid-template-rows: repeat(4, auto); }
       .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-images {
-        display: none; }
+        grid-column: 4 / span 6;
+        grid-row: 2; }
+        .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-images .field__item {
+          display: block;
+          width: 400px;
+          height: 400px; }
+          @media (max-width: 1517px) {
+            .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-images .field__item {
+              width: 300px;
+              height: 300px; } }
+          .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-images .field__item img {
+            max-width: 100%;
+            max-height: 100%; }
       .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-accroche {
         grid-column: 2 /span 3;
         grid-row: 2 / span 2;
@@ -419,8 +434,8 @@ a {
             .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-accroche p {
               margin-top: 0rem; } }
       .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-title {
-        grid-column: 4;
+        grid-column: 2;
-        grid-row: 2;
+        grid-row: 1 / span 2;
         margin-top: 3rem; }
         .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-title h2 {
           background-color: white; }

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

@@ -141,8 +141,84 @@ jQuery(function($) {
 //   var speed = 750; // gérer la vitesse de défliement
       
 //       // Ici on retranche la hauteur du bandeau (201px dans ta feuille de styles)
-// document.querySelector('html, body').animate( { scrollTop: page.offset().top - 201 }, speed );
+// document.querySelector('html, body').animate( { scrollTop: page.offset().top - 500 }, speed );
 //   return false;
 // });
 
 
+// ///////////////////////////////
+// (function(document, history, location) {
+//   var HISTORY_SUPPORT = !!(history && history.pushState);
+
+//   var anchorScrolls = {
+//     ANCHOR_REGEX: /^#[^ ]+$/,
+//     OFFSET_HEIGHT_PX: 50,
+
+//     /**
+//      * Establish events, and fix initial scroll position if a hash is provided.
+//      */
+//     init: function() {
+//       this.scrollToCurrent();
+//       $(window).on('hashchange', $.proxy(this, 'scrollToCurrent'));
+//       $('body').on('click', 'a', $.proxy(this, 'delegateAnchors'));
+//     },
+
+//     /**
+//      * Return the offset amount to deduct from the normal scroll position.
+//      * Modify as appropriate to allow for dynamic calculations
+//      */
+//     getFixedOffset: function() {
+//       return this.OFFSET_HEIGHT_PX;
+//     },
+
+//     /**
+//      * If the provided href is an anchor which resolves to an element on the
+//      * page, scroll to it.
+//      * @param  {String} href
+//      * @return {Boolean} - Was the href an anchor.
+//      */
+//     scrollIfAnchor: function(href, pushToHistory) {
+//       var match, anchorOffset;
+
+//       if(!this.ANCHOR_REGEX.test(href)) {
+//         return false;
+//       }
+
+//       match = document.getElementById(href.slice(1));
+
+//       if(match) {
+//         anchorOffset = $(match).offset().top - this.getFixedOffset();
+//         $('html, body').animate({ scrollTop: anchorOffset});
+
+//         // Add the state to history as-per normal anchor links
+//         if(HISTORY_SUPPORT && pushToHistory) {
+//           history.pushState({}, document.title, location.pathname + href);
+//         }
+//       }
+
+//       return !!match;
+//     },
+    
+//     /**
+//      * Attempt to scroll to the current location's hash.
+//      */
+//     scrollToCurrent: function(e) { 
+//       if(this.scrollIfAnchor(window.location.hash) && e) {
+//       	e.preventDefault();
+//       }
+//     },
+
+//     /**
+//      * If the click event's target was an anchor, fix the scroll position.
+//      */
+//     delegateAnchors: function(e) {
+//       var elem = e.target;
+
+//       if(this.scrollIfAnchor(elem.getAttribute('href'), true)) {
+//         e.preventDefault();
+//       }
+//     }
+//   };
+
+// 	$(document).ready($.proxy(anchorScrolls, 'init'));
+// })(window.document, window.history, window.location);

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

@@ -39,7 +39,22 @@
                     grid-template-columns: 1fr repeat(4, 2fr) 1fr;
                     grid-template-rows: repeat(4, auto);
                     .field--name-field-images{
-                        display: none;
+                        // display: none;
+                        grid-column: 4 / span 6;
+                        grid-row: 2;
+                        .field__item{
+                            display: block;
+                            width: 400px;
+                            height: 400px;
+                            @media (max-width: 1517px){
+                                width: 300px;
+                                height: 300px;
+                            }
+                            img{
+                                max-width:100%;
+                                max-height: 100%;
+                            }
+                        }
 
                     }
                     .field--name-field-accroche{
@@ -76,8 +91,10 @@
 
                     }
                     .field--name-title{
-                        grid-column: 4;
+                        // grid-column: 4;
-                        grid-row: 2;
+                        // grid-row: 2;
+                        grid-column: 2;
+                        grid-row: 1 / span 2;
                         margin-top: 3rem;
         
                         h2{ 
@@ -93,6 +110,9 @@
                                 
                                 // background-color: $white;
                             }
+                        }
+                        @media (max-width: 1517px){
+
                         }
                         @media (max-width: 810px){ 
                             margin-top: 1rem;

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

@@ -41,7 +41,6 @@
                 
                     // }
                 }
-
                 // menu ancres a gauche
                 .layout__region--first{             // menu ancres a gauche
                     position: relative;
@@ -50,7 +49,7 @@
                         justify-content: flex-end;
                         position: -webkit-sticky;
                         position: sticky;
-                        top: 9rem;
+                        top: 10rem;
                        @media (max-width: 810px){
                            display: none;
                        }
@@ -123,9 +122,9 @@
                         display: flex;
                         flex-direction: column;
                         width: 70%;
-                        // position: -webkit-sticky;
+                        position: -webkit-sticky;
-                        // position: sticky;
+                        position: sticky;
-                        // top: 11rem; 
+                        top: 9rem; 
                         @media (max-width: 810px){
                             margin: auto;
                         }