Lungo domain "body > *"

src/stylesheets/lungo.layout.styl

@@ -16,91 +16,87 @@ body, html
   padding: 0
   overflow: hidden
 
-aside, section
-  display-box()
-  box-orient(vertical)
-  height: inherit
-  & > header, > footer
-    box-flex(0)
-    z-index: 3
-    position: relative
-  & > header
-    ordinal-group(1)
-  & > article
-    box-flex(1)
-    ordinal-group(2)
-    z-index: -1
-  & > footer
-    ordinal-group(3)
-
-/* ========================================================================= */
-/* ================================ SECTION ================================ */
-/* ========================================================================= */
-section
-  z-index: 2
-  width: inherit
-  &:not(.show)
-    z-index: 1
-
-/* ========================================================================= */
-/* ================================= ASIDE ================================= */
-/* ========================================================================= */
-aside
-  min-width: ASIDE_WIDTH
-  display: none
-  z-index: -1
-  &.active
+body
+  /* ========================================================================= */
+  /* ============================= ASIDE/SECTION ============================= */
+  /* ========================================================================= */
+  & > aside, & > section
     display-box()
-  &.show
-    z-index: 0
-    display-box()
-  &.right
-    right: 0px
-
-/* ========================================================================= */
-/* ============================= HEADER/FOOTER ============================= */
-/* ========================================================================= */
-header, footer
-  height: HEADER_HEIGHT
-  line-height: HEADER_HEIGHT
+    box-orient(vertical)
+    height: inherit
+    & > header, > footer
+      box-flex(0)
+      z-index: 3
+      position: relative
+    & > header
+      ordinal-group(1)
+    & > article
+      box-flex(1)
+      ordinal-group(2)
+      z-index: -1
+    & > footer
+      ordinal-group(3)
 
-  & > nav
-    box-flex(0)
+    /* ============================= HEADER/FOOTER ============================= */
+    & > header, > footer
+      height: HEADER_HEIGHT
+      line-height: HEADER_HEIGHT
 
-  & > .title
-    z-index: -1
-    margin: 0 4px
-    float: left
-    font-size: (FONT_SIZE_BIG * 1.2)
-    box-flex(1)
+      & > nav
+        box-flex(0)
 
-    &.centered
-      position: absolute
-      left: 32px
-      right: 32px
-      text-align: center
-      display: inline-block
+      & > .title
+        z-index: -1
+        margin: 0 4px
+        float: left
+        font-size: (FONT_SIZE_BIG * 1.2)
+        box-flex(1)
 
-  & > img.title
-    PAD = 18px
-    height: (HEADER_HEIGHT - PAD)
-    margin: (PAD / 2) auto
+        &.centered
+          position: absolute
+          left: 32px
+          right: 32px
+          text-align: center
+          display: inline-block
 
+      & > img.title
+        PAD = 18px
+        height: (HEADER_HEIGHT - PAD)
+        margin: (PAD / 2) auto
 
-/* ========================================================================= */
-/* ================================ ARTICLE ================================ */
-/* ========================================================================= */
-article
-  visibility: hidden
-  display: none
+    /* ================================ ARTICLE ================================ */
+    & > article
+      visibility: hidden
+      display: none
+    &.show > article.active, &.hide > article.active, &.hiding > article.active
+      visibility: visible
+      display: block
+      z-index: 1
+      height: inherit
+      &.pull
+        transition-property transform
+        transition-duration TRANSITION_TIME
 
-  .show > &.active, .hide > &.active, .hiding > &.active
-    visibility: visible
-    display: block
-    z-index: 1
-    height: inherit
-
-    &.pull
-      transition-property transform
-      transition-duration TRANSITION_TIME
+  /* ========================================================================= */
+  /* ================================ SECTION ================================ */
+  /* ========================================================================= */
+  & > section
+    z-index: 2
+    width: inherit
+    &:not(.show)
+      z-index: 1
 
+  /* ========================================================================= */
+  /* ================================= ASIDE ================================= */
+  /* ========================================================================= */
+  & > aside
+    min-width: ASIDE_WIDTH
+    display: none
+    z-index: -1
+    &.active
+      display-box()
+    &.show
+      z-index: 0
+      display-box()
+    &.right
+      right: 0px

src/stylesheets/lungo.media.phone.styl

@@ -9,58 +9,58 @@
     &[data-position="fixed"] > section
       position: fixed
 
-  aside
-    position: absolute
+    & > aside
+      position: absolute
 
-  section
-    &.show.aside
-      &:not(.right)
-        transform translateX(ASIDE_WIDTH)
-      &.right
-        transform translateX(-(ASIDE_WIDTH))
-    &.show.hide
-      z-index: -1
+    & > section
+      &.show.aside
+        &:not(.right)
+          transform translateX(ASIDE_WIDTH)
+        &.right
+          transform translateX(-(ASIDE_WIDTH))
+      &.show.hide
+        z-index: -1
 
-    &[data-transition]
-      display-box()
-      transition-property opacity, z-index, transform
-      transition-duration TRANSITION_TIME
-      transition-timing-function DEFAULT_TRANSITION
-      backface-visibility hidden
+      &[data-transition]
+        display-box()
+        transition-property opacity, z-index, transform
+        transition-duration TRANSITION_TIME
+        transition-timing-function DEFAULT_TRANSITION
+        backface-visibility hidden
 
-    /* Transition: POP */
-    &[data-transition="pop"]
-      opacity: 0
-      transform( scale(1.15) )
-      &.show
-        transform( scale(1) )
-        opacity: 1
-      &.hide
-        transform( scale(0.9) )
+      /* Transition: POP */
+      &[data-transition="pop"]
         opacity: 0
+        transform( scale(1.15) )
+        &.show
+          transform( scale(1) )
+          opacity: 1
+        &.hide
+          transform( scale(0.9) )
+          opacity: 0
 
-    /* Transition: SLIDE */
-    &[data-transition="slide"]
-      transform translateX(100%)
-      visibility: visible
-      &.show
-        transform translateX(0%)
-      &.hide
-        transform translateX(-100%)
+      /* Transition: SLIDE */
+      &[data-transition="slide"]
+        transform translateX(100%)
+        visibility: visible
+        &.show
+          transform translateX(0%)
+        &.hide
+          transform translateX(-100%)
 
-    /* Transition: COVER */
-    &[data-transition="cover"]
-      transform translateY(110%)
-      &.show, &.hide
-        transform translateY(0%)
-      &.hide
-        display: block
+      /* Transition: COVER */
+      &[data-transition="cover"]
+        transform translateY(110%)
+        &.show, &.hide
+          transform translateY(0%)
+        &.hide
+          display: block
 
-    /* Transition: FADE */
-    &[data-transition="fade"]
-      opacity: 0
-      &:first-child, &.show
-        opacity: 1
-      &:hide
+      /* Transition: FADE */
+      &[data-transition="fade"]
         opacity: 0
+        &:first-child, &.show
+          opacity: 1
+        &:hide
+          opacity: 0
 

src/stylesheets/lungo.media.tablet.styl

@@ -5,41 +5,40 @@
 /* ==== Tablet ==== */
 // @media only screen and (min-width: 768px) and (max-width: 1280px)
 @media only screen and (min-width: 768px)
-
   body
     display-box()
     box-orient(horizontal)
     overflow: hidden
 
-  aside
-    width 15%
-    transform translateX(-100%)
-
-    transition-property transform
-    transition-duration TRANSITION_TIME
-    &.show
-      transform translateX(0%)
-
-  section
-    display: none
-    opacity: 0
-    ordinal-group(2)
-    transform translateX(100%)
-    &.show
-      animation showing TRANSITION_TIME
-      animation-fill-mode forwards
-      display-box()
-    &.hide
-      animation hiding TRANSITION_TIME
-
-    &:not([data-children])
-      box-flex (1)
-
-    &[data-children]
-      width: 25%
-
-    & [data-view-aside]
-      display: none !important
+    & > aside
+      width 15%
+      transform translateX(-100%)
+
+      transition-property transform
+      transition-duration TRANSITION_TIME
+      &.show
+        transform translateX(0%)
+
+    & > section
+      display: none
+      opacity: 0
+      ordinal-group(2)
+      transform translateX(100%)
+      &.show
+        animation showing TRANSITION_TIME
+        animation-fill-mode forwards
+        display-box()
+      &.hide
+        animation hiding TRANSITION_TIME
+
+      &:not([data-children])
+        box-flex (1)
+
+      &[data-children]
+        width: 25%
+
+      & [data-view-aside]
+        display: none !important
 
 @-webkit-keyframes showing
   0%

src/stylesheets/lungo.widgets.pull.styl

@@ -9,7 +9,7 @@
 
 @import "constants.styl"
 
-section.show > [data-control="pull"]
+body > section.show > [data-control="pull"]
   position: absolute
   z-index: -1
   top: HEADER_HEIGHT

src/stylesheets/lungo.widgets.splash.styl

@@ -9,7 +9,7 @@
 
 @import "constants.styl"
 
-.splash
+body > section > article.splash
   text-align: center
   padding: (INDENT * 2)
 

src/stylesheets/lungo.widgets.styl

@@ -52,22 +52,6 @@
 .indented > *
   padding: INDENT
 
-/*
-.wrapper
-  padding: 8px 8px
-
-.icon.small
-  font-size: 1.3em
-
-
-.framed
-  border: 2px solid #fff
-
-.round
-  border-radius( 4px )
-*/
-
-
 
 /* ================================  TAG  ================================ */
 .tag

src/stylesheets/theme.lungo.styl

@@ -48,9 +48,8 @@ body
     &:active
       background-color: THEME
 
-
 /* -------------------------- LAYOUT COLORS -------------------------- */
-section
+body > section
   background-color: DARK
   & > header
     background-color: THEME
@@ -72,7 +71,7 @@ section
       box-shadow 1px 0 2px rgba(0,0,0,0.2)
 
 DARKEST = darken(DARK_darkest, 15%)
-aside
+body > aside
   background-color: DARK_dark
   color: #fff
   & > header, > footer