final commit

user/themes/labonneadresse/css/styles.css

@@ -7217,15 +7217,17 @@ header#top-bar {
     @media screen and (min-width: 40em) {
       header#top-bar .nav .wrapper {
         padding-top: 4.55em; } }
-  header#top-bar #left-nav a {
-    font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-    font-size: 0.87em;
-    font-weight: bold; }
-  header#top-bar #left-nav a:hover {
-    font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-    font-size: 0.87em;
-    font-weight: bold;
-    text-decoration: underline; }
+  header#top-bar #left-nav {
+    line-height: 0.5; }
+    header#top-bar #left-nav a {
+      font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+      font-size: 0.87em;
+      font-weight: bold; }
+    header#top-bar #left-nav a:hover {
+      font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+      font-size: 0.87em;
+      font-weight: bold;
+      text-decoration: underline; }
   header#top-bar #right-nav {
     text-align: right; }
     header#top-bar #right-nav h4 {
@@ -7233,7 +7235,7 @@ header#top-bar {
       font-size: 0.87em;
       font-weight: bold;
       margin: 0;
-      line-height: 1.6; }
+      line-height: 1.9; }
       header#top-bar #right-nav h4 a:hover {
         text-decoration: underline; }
     header#top-bar #right-nav ul {
@@ -7435,7 +7437,8 @@ div#center {
       div#center #diaporama > * img {
         height: 100%; }
   div#center .client-block {
-    margin: 0 0 1em; }
+    margin: 0 0 1em;
+    padding: 0.7em; }
     div#center .client-block h3 {
       font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
       font-size: 0.87em;
@@ -7474,13 +7477,15 @@ div#center {
   header#top-bar:before {
     padding-bottom: 0.45em; }
   header#top-bar #title-area {
-    height: 10.1em -2.1em; }
-    header#top-bar #title-area h1 a {
-      display: block;
-      height: 6.3em; }
+    height: 10.1em -3.1em; }
+    header#top-bar #title-area h1 {
+      height: 100%;
+      min-height: 5.6em; }
+      header#top-bar #title-area h1 a {
+        display: block;
+        height: 6.3em; }
   header#top-bar.reduced #title-area {
-    height: 6.044em;
-    overflow: hidden; }
+    height: 5.2885em; }
   header#top-bar .nav {
     position: absolute;
     top: 0.75em;
@@ -7491,7 +7496,9 @@ div#center {
     right: 0; }
   div#center {
     padding-top: 11.2em;
-    padding-bottom: 6em; } }
+    padding-bottom: 6em; }
+  body.categories a.projet-img {
+    display: none; } }
 
 /*
    __            _

user/themes/labonneadresse/gulpfile.js

@@ -27,8 +27,8 @@ gulp.task('styles', function () {
     .pipe(gulp.dest('./css'));
 });
 
-gulp.task('default', function () {
-});
+// gulp.task('default', function () {
+// });
 
 // default gulp task
 gulp.task('default', ['scripts', 'styles'], function() {

user/themes/labonneadresse/js/script.js

@@ -13,35 +13,38 @@ jQuery(document).ready(function($) {
   });
 
   // init categories content images behaviour
-  if($('body').is('.categories')){
-    // console.log('hello');
-    var $diapo = $('<div id="diaporama"></div>');
-    $("#categories-content")
-      .before($diapo)
-      .find('li.project').each(function(index, el) {
-        // console.log(index);
-        $(this)
-          .addClass('projet-'+index)
-          .hover(function (e) {
-            $diapo.children().removeClass('visible');
-            var c = $(this).attr('class').match('projet-[0-9]+');
-            console.log("class",c[0]);
-            $diapo.children('.'+c[0]).addClass('visible');
-          })
-          .find('.projet-img')
+  // console.log($(window).width());
+  if( $(window).width() > 600 ){
+    if($('body').is('.categories')){
+      // console.log('hello');
+      var $diapo = $('<div id="diaporama"></div>');
+      $("#categories-content")
+        .before($diapo)
+        .find('li.project').each(function(index, el) {
+          // console.log(index);
+          $(this)
             .addClass('projet-'+index)
-            .appendTo($diapo);
-      });
-    $diapo.children('.projet-img').first().addClass('visible');
-  }
+            .hover(function (e) {
+              $diapo.children().removeClass('visible');
+              var c = $(this).attr('class').match('projet-[0-9]+');
+              console.log("class",c[0]);
+              $diapo.children('.'+c[0]).addClass('visible');
+            })
+            .find('.projet-img')
+              .addClass('projet-'+index)
+              .appendTo($diapo);
+        });
+      $diapo.children('.projet-img').first().addClass('visible');
+    }
 
-  // init Masonry
-  var $grid = $('.grid').masonry({
-    itemSelector: '.grid-block',
-    transitionDuration: '0.4s'
-  });
+    // init Masonry
+    var $grid = $('.grid').masonry({
+      itemSelector: '.grid-block',
+      transitionDuration: '0.4s'
+    });
 
-  $grid.imagesLoaded().progress(function(){
-    $grid.masonry('layout');
-  });
+    $grid.imagesLoaded().progress(function(){
+      $grid.masonry('layout');
+    });
+  }
 });

user/themes/labonneadresse/scss/styles.scss

@@ -68,6 +68,7 @@ $logo_mt:0.3em;
 $logo_mb:0.5em;
 $titleareaH: $logoH+$logo_mb+$logo_mt;
 $titleReducedFactor:0.7555;
+$titleReducedFactorSmall:0.5;
 $centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH+1em;
 $footerheight: 5em;
 $centerpaddingbottom:$footerheight+1em;
@@ -120,6 +121,10 @@ header#top-bar{
   &.reduced{
     #title-area{
       height:$titleareaH*$titleReducedFactor;
+      // @media #{$medium-up}{
+      //   height:$titleareaH*$titleReducedFactorSmall;
+      // }
+
     }
   }
 
@@ -143,6 +148,7 @@ header#top-bar{
 
   #left-nav{
     // margin-left: -0.1rem;
+    line-height:0.5;
     a{@include fontbold;}
     a:hover{@include fontbold; text-decoration: underline;}
   }
@@ -151,7 +157,7 @@ header#top-bar{
     text-align: right;
 
     h4{
-      @include fontbold; margin:0; line-height: 1.6;
+      @include fontbold; margin:0; line-height: 1.9;
       a:hover{text-decoration: underline;}
     }
     ul{background-color: transparent;}
@@ -320,6 +326,7 @@ div#center{
   /*
   * Catégories
   */
+
   nav.categories{
     margin: 1em 0;
     ul.tags{
@@ -366,6 +373,7 @@ div#center{
 
   .client-block{
     margin:0 0 1em;
+    padding:0.7em;
     h3{
       @include fontbold;
       line-height:0.6; display:inline-block; position:relative;
@@ -404,9 +412,11 @@ div#center{
     }
 
     #title-area{
-      height:$titleareaH -2.1em;
+      height:$titleareaH -3.1em;
       // padding-top: $headerpaddingtopH;
       h1{
+        height:100%;
+        min-height:($titleareaH - 3.1em)*0.8;
         a{display: block;
           height:$logoH - 3em;
           // height:100%;
@@ -416,8 +426,8 @@ div#center{
 
     &.reduced{
       #title-area{
-        height:($titleareaH - 2.1em)*$titleReducedFactor;
-        overflow: hidden;
+        height:($titleareaH - 3.1em)*$titleReducedFactor;
+        // overflow: hidden;
       }
     }
 
@@ -434,6 +444,12 @@ div#center{
     padding-top:$centerpaddingtop - 1.1em;
     padding-bottom: $centerpaddingbottom;
   }
+
+  body.categories{
+    a.projet-img{
+      display:none;
+    }
+  }
 }
 
 /*