add imgload

web/app/themes/la_mine/src/assets/js/scripts.js

@@ -50,12 +50,17 @@ function masonry() {
 function burger() {
   var hamburgers = document.querySelector(".hamburger");
   var nav = document.querySelector(".nav-main");
+  var $nav_li = $('.nav-main li a');
   hamburgers.addEventListener("click", function() {
     this.classList.toggle("is-active");
     nav.classList.toggle("is-active");
   });
-}
+  $nav_li.on( 'click', function() {
+    hamburgers.classList.remove('is-active');
+    nav.classList.remove('is-active');
+  });
 
+}
 
 function paralax() {
   var rellax = new Rellax('.paralax', {
@@ -64,13 +69,19 @@ function paralax() {
 }
 
 function isotope() {
+
   var $grid = $('.grid').isotope({
     percentPosition: true,
-    masonry: {
-      columnWidth: '.thumbnails'
-    },
     itemSelector: '.thumbnails',
-    stagger: 30
+    layoutMode: 'masonry',
+    masonry: {
+      columnWidth: '.thumbnails',
+    },
+  });
+
+  $('.grid').imagesLoaded().progress( function(instance, imageObj) {
+      $(imageObj.img).fadeIn(300);
+      $('.grid').isotope('layout');
   });
 
   $('.cat-list li').on( 'click', function(evt) {
@@ -99,7 +110,6 @@ function click_nav() {
 }
 
 function scrollto(){
-
   $(window).scroll(function() {
     var scroll = $(window).scrollTop();
     if (scroll >= 100) {
@@ -108,17 +118,17 @@ function scrollto(){
         $(".logo a").removeClass("reduct");
     }
   });
-
 }
 
+
 $( document ).ready(function() {
   burger();
+  click_nav();
   slides();
+  isotope();
   // masonry();
   // paralax();
-  isotope();
   // drag();
-  click_nav();
   if (window.width >= 578) {
     scrollto();
   }

web/app/themes/la_mine/src/assets/scss/components/_index.scss

@@ -2,5 +2,8 @@
 @import "thumbnails.scss";
 @import "hero.scss";
 @import "forms.scss";
-@import "_title-page.scss";
-@import "_footer.scss";
+@import "title-page.scss";
+@import "footer.scss";
+.grid img {
+   display: none;
+}

web/app/themes/la_mine/src/assets/scss/components/_thumbnails.scss

@@ -1,4 +1,11 @@
 .thumbnails{
+  height: auto;
+    &:not(:last-child){
+      margin-bottom: 5rem;
+    }
+  @media screen and (min-width: 992px) {
+    margin-bottom: 0rem;
+  }
     a{
         text-decoration: none;
     }

web/app/themes/la_mine/src/assets/scss/pages/_home.scss

@@ -4,7 +4,7 @@
             &:first-of-type{
                 padding-top: 5rem;
             }
-            padding: 2.5rem 0;
+            padding: 5rem 0;
             @media screen and (min-width: 576px) {
                 &:first-of-type{
                     padding-top: 10rem;
@@ -60,6 +60,7 @@
 
             }
             &#section_asso{
+              padding-bottom: 10rem;
                 .container-fluid{
                     & > h3{
                         border: 5px solid $colorYellow;
@@ -147,7 +148,7 @@
                     }
                     & > div{
                         border:5px solid $colorRed;
-                        padding: 1rem;
+                        padding: 2rem;
                         height: calc(100% - 4rem);
                         h4{
                             font-size: 1rem;