[data-control=menu] relatived

src/stylesheets/lungo.layout.menu.styl

@@ -1,44 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Layout
- * @class Article
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.styl"
-
-[data-control=menu]
-  position: absolute
-  left: 0px
-  top: HEADER_FOOTER_HEIGHT
-  visibility: hidden
-  z-index: 2
-  width: inherit
-  font-size: FONT_SIZE_BIG
-  text-align: center
-
-  transform translateY(-120%)
-  transition-property transform
-  transition-duration TRANSITION_TIME
-  transition-timing-function DEFAULT_TRANSITION
-  backface-visibility hidden
-
-  &.show
-    visibility: visible
-    transform translateY(0%)
-
-  & > a
-    display: block
-    position: relative
-    padding: 14px 10px
-    text-shadow 0 1px 0 #111
-
-    &:active
-      border-color: transparent
-
-    & > .icon
-      position: absolute
-      left: 0.5em
-      font-size: 1.5em

src/stylesheets/lungo.layout.nav.styl

@@ -134,3 +134,41 @@ nav
         overflow: hidden
         white-space: nowrap
         text-overflow: ellipsis
+
+
+  /* ========================================================================= */
+  /* ================================= MENU ================================== */
+  /* ========================================================================= */
+  &[data-control=menu]
+    position: absolute
+    left: 0px
+    top: HEADER_FOOTER_HEIGHT
+    visibility: hidden
+    z-index: 2
+    width: inherit
+    font-size: FONT_SIZE_BIG
+    text-align: center
+
+    transform translateY(-120%)
+    transition-property transform
+    transition-duration TRANSITION_TIME
+    transition-timing-function DEFAULT_TRANSITION
+    backface-visibility hidden
+
+    &.show
+      visibility: visible
+      transform translateY(0%)
+
+    & > a
+      display: block
+      position: relative
+      padding: 14px 10px
+      text-shadow 0 1px 0 #111
+
+      &:active
+        border-color: transparent
+
+      & > .icon
+        position: absolute
+        left: 0.5em
+        font-size: 1.5em

src/stylesheets/lungo.layout.styl

@@ -16,14 +16,6 @@ body, html
   padding: 0
   overflow: hidden
 
-body
-  // &[data-position="absolute"] > section
-  //   position: absolute
-
-  // &[data-position="fixed"] > section
-  //   position: fixed
-
-
 aside, section
   display-box()
   box-orient(vertical)
@@ -31,12 +23,13 @@ aside, section
   & > header, > footer
     box-flex(0)
     z-index: 3
+    position: relative
   & > article
     box-flex(1)
     z-index: 0
 
 section
   z-index: 2
+  width: inherit
   &:not(.show)
     z-index: 1
-    display: none

src/stylesheets/lungo.media.phone.styl

@@ -2,6 +2,13 @@
 
 /* ==== Any phone ==== */
 @media only screen and (max-width: 767px)
+  body
+    &[data-position="absolute"] > section
+      position: absolute
+
+    &[data-position="fixed"] > section
+      position: fixed
+
   aside
     position: absolute
 
@@ -11,7 +18,6 @@
         transform translateX(ASIDE_WIDTH)
       &.small
         transform translateX(ASIDE_WIDTH_SMALL)
-
       &.right
         transform translateX(-(ASIDE_WIDTH))
         &.small

src/stylesheets/lungo.media.tablet.styl

@@ -1,7 +1,8 @@
 @import "constants.styl"
 
 /* ==== Tablet ==== */
-@media only screen and (min-width: 768px) and (max-width: 1280px)
+// @media only screen and (min-width: 768px) and (max-width: 1280px)
+@media only screen and (min-width: 768px)
 
   body
     display-box()
@@ -20,3 +21,5 @@
 
   section
     box-flex(1)
+    &:not(.show)
+      display: none !important