Updated media queries

assets/js/src/cover.coffee

@@ -18,8 +18,21 @@ $ ->
     return $('#menu-button').trigger 'click' unless Uno.is 'device', 'desktop'
     _expand form: 'toggle'
 
-  $("#menu-button").click ->
-    $('main, .cover, #menu-button').toggleClass 'expanded'
+  $("#menu-button").click (e)->
+    if $(e.currentTarget).hasClass 'expanded'
+      $('html,body').animate({scrollTop:0})
+    $('nav.navigation.left').toggle 'slideUp'
+    $('#menu-button').toggleClass 'expanded'
+
+  # // Close menu on scroll down
+  unless Uno.is 'device', 'desktop'
+    old = $(document).scrollTop();
+    $(document).on 'scroll', (e)->
+      if !($("#menu-button").hasClass 'expanded') && (old < $(document).scrollTop())
+        $('nav.navigation.left').hide 'slideUp'
+        $("#menu-button").addClass 'expanded'
+
+      old = $(document).scrollTop();
 
   if (Uno.is 'device', 'desktop') and (Uno.is 'page', 'home')
     _animate()

assets/scss/components/_media-queries.scss

@@ -18,95 +18,91 @@
   /* disabling element, too much information*/
   .pace,
   .post.reading-time,
-  .post.related {
+  #back-button {
     display: none;
   }
   #search-container {
     display: none !important;
   }
 
-  /* Enable element special for little devices */
-  #profile-resume {
-    display: inherit;
-  }
-
   /* off canvas */
   #menu-button {
     position: fixed;
-    top: .5rem;
-    left: 13.5rem;
+    top: 0;
+    left: 1.5rem;
     z-index: 999;
 
     display: block;
+    transition: top $aside-animation-time;
 
     transition: all $aside-animation-time;
     &.expanded {
-      left: .85rem;
+      > a {
+        > i {
+          color: $hover-color;
+          opacity: 1;
+        }
+      }
     }
     > a {
       > i {
-        color: $hover-color;
+        left: -12px;
+        opacity: 0.8;
       }
     }
   }
   .cover {
-    width: 16rem;
-
-    transition: all $aside-animation-time;
-    transform: translate3d(-16rem, 0, 0);
-    &.expanded {
-      width: 16rem;
-
-      transform: translate3d(0, 0, 0);
-    }
-    &.animated {
-      transition: all $aside-animation-time;
-    }
+    width: 100%;
+    position: fixed;
+    transition: height $aside-animation-time;
+    transform: translate3d(0, 0, 0);
+    height: 50%;
+    z-index: 10;
   }
   .profile {
     width: 100%;
     height: 100%;
-    max-width: 100%;
-    overflow: hidden;
+    margin-top: 1rem;
     &.contact {
       > nav {
         padding: 0;
       }
     }
     > a {
       > img {
-        width: 8rem;
-        margin-bottom: 1rem;
+        width: 6rem;
       }
     }
-    > p {
-      display: none;
-    }
     .divider {
       display: none;
     }
   }
   .link-item {
-    padding: .85rem 1.25rem;
     margin: 0;
-
-    font-size: 1rem;
-
     border-radius: 0;
-    &:hover {
-      background-color: rgba($black, .1);
-    }
+    padding: .625rem 1.25rem;
   }
   #avatar-link {
     display: inline-block;
-    margin-top: 4rem;
+    margin-top: 1rem;
   }
   .navigation {
     width: 100%;
     &.right {
       margin: 0;
     }
     &.left {
+      display:none;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      padding: 3rem 0 !important;
+      background-color: $mobile-primary;
+      height: 100%;
+      margin: 0;
+      z-index: 20;
+
       .links.item {
         width: 100%;
       }
@@ -117,8 +113,13 @@
 
     transition: all $aside-animation-time;
     transform: translate3d(0, 0, 0);
-    &.expanded {
-      transform: translate3d(14rem, 0, 0);
+    position: relative;
+    z-index: 15;
+    background: #fff;
+    margin-top: 40%;
+
+    > .content {
+      padding: 1rem;
     }
   }
 }
@@ -127,12 +128,32 @@
 // ------------------------------
 
 @media all and (max-width:480px) {
+  .profile {
+    > a {
+      > h1 {
+        font-size: 1.25rem;
+      }
+
+      > h3 {
+        font-size: 1rem;
+      }
+    }
+
+    > p {
+      max-height: 4.6rem;
+      overflow: hidden;
+    }
+  }
   .btn {
     display: block;
     margin-bottom: .4em;
   }
+  .cover {
+    height: 70%;
+  }
   main {
     padding: 1rem 0;
+    margin-top: 100%;
   }
   .mayday {
     width: auto;

assets/scss/modules/_variables.scss

@@ -21,6 +21,10 @@ $secondary-color       : $gray-dark;
 $cover-secondary       : rgba(#5f2c82, .1);
 $cover-primary         : rgba(#49a09d, .2);
 
+
+$mobile-primary        : $gray-darkest;
+
+
 $link-color            : $gray-darkest;
 $hover-color           : $primary-color;