Fix swipe and transform

- [x] sidebarBehavior 3 & 6 still have issue

partially fixes #342 and #318

7 files changed, 12 insertions, 9 deletions

diff --git a/src/js/sidebar.js b/src/js/sidebar.js
index a195e15..1661f88 100755
--- a/src/js/sidebar.js
+++ b/src/js/sidebar.js
@@ -141,6 +141,7 @@
 
       // Check if there is enough place for translating `#header .header-title` and `#header .right-picture`
       // regarding the size of `#header .header-title-link`
+      // TODO better to use text-overflow on $headerElements.title
       if (this.$header.width() - this.$sidebar.width() - this.$headerElements.titleLink.width() < 130) {
         blog = blog.not(this.$headerElements.title).not(this.$headerElements.rightPicture);
       }
diff --git a/src/scss/layouts/_blog.scss b/src/scss/layouts/_blog.scss
index 03f16f9..73e9355 100755
--- a/src/scss/layouts/_blog.scss
+++ b/src/scss/layouts/_blog.scss
@@ -4,4 +4,5 @@
     left:     0;
     width:    100%;
     height:   100%;
-}
\ No newline at end of file
+    overflow-x: hidden;
+}
diff --git a/src/scss/utils/_variables.scss b/src/scss/utils/_variables.scss
index 109c256..af98558 100755
--- a/src/scss/utils/_variables.scss
+++ b/src/scss/utils/_variables.scss
@@ -98,6 +98,7 @@ $screen-max: (
 $screen: map-merge($screen-min, $screen-max);
 // Shortcuts for medias
 $xsmall-and-down: "only screen and (max-width : #{map-get($screen, xs-max)})" !default;
+$xsmall-and-up: "only screen and (min-width : #{map-get($screen, xs-min)})" !default;
 $small-and-down:  "only screen and (max-width : #{map-get($screen, sm-max)})" !default;
 $small-only:      "only screen and (min-width : #{map-get($screen, sm-min)}) and (max-width : #{map-get($screen, sm-max)})" !default;
 $small-and-up:    "only screen and (min-width : #{map-get($screen, sm-min)})" !default;
diff --git a/src/scss/utils/mixins/_header.scss b/src/scss/utils/mixins/_header.scss
index ab1bdeb..0493791 100755
--- a/src/scss/utils/mixins/_header.scss
+++ b/src/scss/utils/mixins/_header.scss
@@ -5,10 +5,10 @@
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
     }
-    @media #{$small-and-up} {
+    @media #{$xsmall-and-up} {
         .header-title {
             &.pushed {
-                @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz');
+                @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, md-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz');
             }
         }
         .header-right-picture {
@@ -24,7 +24,7 @@
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
-    @media #{$medium-and-up} {
+    @media #{$xsmall-and-up} {
         .header-title {
             &.pushed {
                 @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz');
diff --git a/src/scss/utils/mixins/_post-header-cover.scss b/src/scss/utils/mixins/_post-header-cover.scss
index 0f1fd05..1797f31 100755
--- a/src/scss/utils/mixins/_post-header-cover.scss
+++ b/src/scss/utils/mixins/_post-header-cover.scss
@@ -29,7 +29,7 @@
 @mixin post-header-cover-pushed-md {
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
-        width: calc(100% - #{map-get($sidebar, md-screen-width)});
+        /*background-position-x: calc(-#{map-get($sidebar, md-screen-width)});*/
     }
 }
 
@@ -37,7 +37,7 @@
 @mixin post-header-cover-pushed-lg {
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
-        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
+        /*background-position-x: calc(-#{map-get($sidebar, lg-screen-width)});*/
     }
 }
 
@@ -45,6 +45,6 @@
 @mixin post-header-cover-pushed-xlg {
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
-        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
+        /*background-position-x: calc(-#{map-get($sidebar, xlg-screen-width)});*/
     }
 }
diff --git a/tasks/config/cssmin.js b/tasks/config/cssmin.js
index a42c9a0..cad901b 100755
--- a/tasks/config/cssmin.js
+++ b/tasks/config/cssmin.js
@@ -1,4 +1,4 @@
-const { nanoid } = require('nanoid');
+const {nanoid} = require('nanoid');
 
 module.exports = function(grunt) {
   grunt.config.set('cssmin', {
diff --git a/tasks/config/uglify.js b/tasks/config/uglify.js
index b3a0d8e..b8aefa0 100755
--- a/tasks/config/uglify.js
+++ b/tasks/config/uglify.js
@@ -1,4 +1,4 @@
-const { nanoid } = require('nanoid');
+const {nanoid} = require('nanoid');
 
 module.exports = function(grunt) {
   var website = {};