Change layout for 15px

example/static/articles/list.html

@@ -3,10 +3,6 @@
 
 <article id="list" class="active list scroll">
     <ul>
-        <li>
-            <strong>&lt;li&gt; + &lt;strong&gt; </strong>
-        </li>
-
         <li class="selectable">
             <strong>&lt;li .selectable&gt; + &lt;strong&gt; </strong>
         </li>
@@ -56,7 +52,7 @@
 
         <li>
             <a href="#">
-                <div class="right">.right</div>
+                <div class="on-right">.right</div>
                 <strong>&lt;strong&gt; element</strong>
                 <small>with &lt;small&gt; element</small>
             </a>
@@ -66,13 +62,13 @@
             <a href="#">
                 <strong>&lt;strong&gt; element</strong>
                 <small>with &lt;small&gt; element</small>
-                <div class="right">.right</div>
+                <div class="on-right">.right</div>
             </a>
         </li>
 
         <li>
             <a href="#">
-                <div class="right tag blue">.right.tag</div>
+                <div class="on-right tag blue">.right.tag</div>
                 <strong>&lt;strong&gt; element</strong>
                 <small>with &lt;small&gt; element</small>
             </a>
@@ -80,7 +76,7 @@
 
         <li>
             <a href="#">
-                <div class="right tag blue" data-icon="clock">.right data-icon</div>
+                <div class="on-right" data-icon="globe">.right data-icon</div>
                 <strong>&lt;strong&gt; element</strong>
                 <small>with &lt;small&gt; element</small>
             </a>
@@ -88,29 +84,40 @@
 
         <li>
             <a href="#">
-                <a href="#" class="button small red right" data-label="button"></a>
+                <a href="#" class="button small red on-right" data-label="button"></a>
                 <strong>&lt;strong&gt; element</strong>
                 <small>with &lt;small&gt; element</small>
             </a>
         </li>
 
         <li class="anchor contrast">With data-icon or data-image attribute</li>
-        <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
-            <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
-            <small>&lt;small&gt;</small>
-        </li>
-        <li class=" thumb" data-image="http://cdn.tapquo.com/lungo/icon-144.png">
-            <strong>&lt;li .thumb data-image&gt; + &lt;strong&gt; </strong>
-            <small>&lt;small&gt;</small>
+        <li class="thumb">
+            <img src="http://cdn.tapquo.com/lungo/icon-144.png" />
+            <div>
+                <div class="on-right text tiny">lorem ipsum</div>
+                <strong>&lt;strong&gt;</strong>
+                <span class="text small">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
+                </span>
+            </div>
+        </li>
+
+        <li class="thumb big">
+            <img src="http://cdn.tapquo.com/lungo/icon-144.png" />
+            <div>
+                <div class="on-right text tiny">lorem ipsum</div>
+                <strong>&lt;strong&gt;</strong>
+                <span class="text tiny opacity">lorem ipsum</span>
+                <small>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
+                </small>
+            </div>
         </li>
+
         <li data-icon="user">
             <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
             <small>&lt;small&gt;</small>
         </li>
-        <li class="thumb" data-icon="user">
-            <strong>&lt;li .thumb data-icon&gt; + &lt;strong&gt; </strong>
-            <small>&lt;small&gt;</small>
-        </li>
 
         <li class="anchor contrast">With colours</li>
         <li class="accept">
@@ -134,9 +141,7 @@
 
 <article id="list-indented" class="list scroll indented">
     <ul>
-        <li>
-            <strong>&lt;li&gt; + &lt;strong&gt; </strong>
-        </li>
+
 
         <li class="selectable">
             <strong>&lt;li .selectable&gt; + &lt;strong&gt; </strong>
@@ -187,7 +192,7 @@
 
         <li>
             <a href="#">
-                <div class="right">.right</div>
+                <div class="on-right">.right</div>
                 <strong>&lt;strong&gt; element</strong>
                 <small>with &lt;small&gt; element</small>
             </a>
@@ -197,13 +202,13 @@
             <a href="#">
                 <strong>&lt;strong&gt; element</strong>
                 <small>with &lt;small&gt; element</small>
-                <div class="right">.right</div>
+                <div class="on-right">.right</div>
             </a>
         </li>
 
         <li>
             <a href="#">
-                <div class="right tag blue">.right.tag</div>
+                <div class="on-right tag blue">.right.tag</div>
                 <strong>&lt;strong&gt; element</strong>
                 <small>with &lt;small&gt; element</small>
             </a>
@@ -211,7 +216,7 @@
 
         <li>
             <a href="#">
-                <div class="right tag blue" data-icon="clock">.right data-icon</div>
+                <div class="on-right" data-icon="globe">.right data-icon</div>
                 <strong>&lt;strong&gt; element</strong>
                 <small>with &lt;small&gt; element</small>
             </a>
@@ -219,29 +224,40 @@
 
         <li>
             <a href="#">
-                <a href="#" class="button small red right" data-label="button"></a>
+                <a href="#" class="button small red on-right" data-label="button"></a>
                 <strong>&lt;strong&gt; element</strong>
                 <small>with &lt;small&gt; element</small>
             </a>
         </li>
 
         <li class="anchor contrast">With data-icon or data-image attribute</li>
-        <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
-            <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
-            <small>&lt;small&gt;</small>
-        </li>
-        <li class=" thumb" data-image="http://cdn.tapquo.com/lungo/icon-144.png">
-            <strong>&lt;li .thumb data-image&gt; + &lt;strong&gt; </strong>
-            <small>&lt;small&gt;</small>
+        <li class="thumb">
+            <img src="http://cdn.tapquo.com/lungo/icon-144.png" />
+            <div>
+                <div class="on-right text tiny">lorem ipsum</div>
+                <strong>&lt;strong&gt;</strong>
+                <span class="text small">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
+                </span>
+            </div>
+        </li>
+
+        <li class="thumb big">
+            <img src="http://cdn.tapquo.com/lungo/icon-144.png" />
+            <div>
+                <div class="on-right text tiny">lorem ipsum</div>
+                <strong>&lt;strong&gt;</strong>
+                <span class="text tiny opacity">lorem ipsum</span>
+                <small>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
+                </small>
+            </div>
         </li>
+
         <li data-icon="user">
             <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
             <small>&lt;small&gt;</small>
         </li>
-        <li class="thumb" data-icon="user">
-            <strong>&lt;li .thumb data-icon&gt; + &lt;strong&gt; </strong>
-            <small>&lt;small&gt;</small>
-        </li>
 
         <li class="anchor contrast">With colours</li>
         <li class="accept">
@@ -265,26 +281,41 @@
 
 <article id="list-examples" class="list scroll">
     <ul>
+        <li>
+            <h1>text example</h1>
+            <h2>text example</h2>
+            <h3>text example</h3>
+            <h4>text example</h4>
+            <strong>text example</strong>
+            <small>text example</small>
+            <span class="block text big">text example</span>
+            <span class="block text bold">text example</span>
+            <span class="block text normal">text example</span>
+            <span class="block text thin">text example</span>
+            <span class="block text small">text example</span>
+            <span class="block text tiny">text example</span>
+        </li>
+
         <li class="feature">
-            <div class="right  ">15:49</div>
+            <div class="on-right  ">15:49</div>
             <strong class="text bold">Javi Jimenez Villar</strong>
             <div class="text small">[JavaScript] [JOB] FrontEnd Developer</div>
             <small>
-                <div class="right tag ">theme</div>
+                <div class="on-right tag ">theme</div>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam delectus unde.
             </small>
         </li>
         <li class="feature">
-            <div class="right ">15:49</div>
+            <div class="on-right ">15:49</div>
             <strong class="text normal">Ignacio Olalde</strong>
             <small class="text small">[Python] [JOB] BackEnd Developer</small>
             <small>
-                <div class="right tag cancel">important</div>
+                <div class="on-right tag cancel">important</div>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam delectus unde.
             </small>
         </li>
         <li class="feature">
-            <div class="right tag accept">sended</div>
+            <div class="on-right tag accept">sended</div>
             <strong class="text bold">Open Source Project</strong>
             <p class="text thin">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos officia dolore in perferendis eum ducimus molestias...</p>
         </li>

src/stylesheets/__init.styl

@@ -1,29 +1,29 @@
 @import "CSSmethods/vendor.styl"
 
 /* CONSTANTS */
-HEADER_HEIGHT          = 45px
+HEADER_HEIGHT           = 45px
 
-ASIDE_WIDTH            = 264px
-ASIDE_WIDTH_SMALL      = 64px
-ASIDE_SMALL_ICON       = 48px
+ASIDE_WIDTH             = 264px
+ASIDE_WIDTH_SMALL       = 64px
+ASIDE_SMALL_ICON        = 48px
 
-DEFAULT_TRANSITION     = easeOutSine
-DEFAULT_TRANSITION     = easeInCubic
-TRANSITION_TIME        = 400ms
+DEFAULT_TRANSITION      = easeOutSine
+DEFAULT_TRANSITION      = easeInCubic
+TRANSITION_TIME         = 400ms
 
-FONT_SIZE_TINY         = 11px
-FONT_SIZE_SMALL        = 0.9em
-FONT_size_normal       = 1.0em
-FONT_SIZE_BIG          = 1.2em
-FONT_SIZE_LARGE        = 1.4em
+FONT_SIZE_TINY          = 11px
+FONT_SIZE_SMALL         = 0.9em
+FONT_SIZE_NORMAL        = 1.0em
+FONT_SIZE_BIG           = 1.2em
+FONT_SIZE_LARGE         = 1.4em
 
+LIST_IMAGE              = 44px
+LIST_BIG_IMAGE          = 64px
+LIST_SMALL_IMAGE        = 24px
 
-LIST_PADDING           = 14px
-LIST_PADDING_HORIZONTAL= (LIST_PADDING / 1.25)
+INDENT                  = 0.8em
 
-INDENT                 = 3%
-
-FORM_HEIGHT = 30px
-FORM_border          = 2px
-FORM_border_height   = FORM_HEIGHT + (FORM_border * 4)
-FORM_PROGRESS_HEIGHT = 12px
+FORM_HEIGHT             = 30px
+FORM_border             = 2px
+FORM_border_height      = FORM_HEIGHT + (FORM_border * 4)
+FORM_PROGRESS_HEIGHT    = 12px

src/stylesheets/lungo.base.styl

@@ -91,12 +91,12 @@ audio:not([controls]) display: none
 [hidden]  display: none
 
 html
+  width: 100%
   height: 100%
   font-size: 100%
   -webkit-text-size-adjust: 100%
   -ms-text-size-adjust: 100%
 
-
 body
   margin: 0
   padding: 0
@@ -112,8 +112,8 @@ body
   // -webkit-box-align: stretch
   // -webkit-tap-highlight-color: rgba(0,0,0,0)
 
-  // display-box()
   */
+  display-box()
 
   & *
     box-sizing(border-box)
@@ -129,16 +129,17 @@ a
     opacity: 1
 
 img
-    border: 0
-    -ms-interpolation-mode: bicubic
-    vertical-align: middle
-    font-size: 0
+  border: 0
+  -ms-interpolation-mode: bicubic
+  vertical-align: middle
+  font-size: 0
 
+strong
+  font-weight: 600
 
 table
-    border-collapse: collapse
-    border-spacing: 0
-
+  border-collapse: collapse
+  border-spacing: 0
 
 th, td, caption
   vertical-align: top

src/stylesheets/lungo.layout.list.styl

@@ -10,88 +10,94 @@
 .list
   & li
     list-style-type: none
-    padding: LIST_PADDING LIST_PADDING_HORIZONTAL (LIST_PADDING - 1) LIST_PADDING_HORIZONTAL
     position: relative
+    text-align: -webkit-match-parent
 
-    &, & a, & small, & .right
-      font-weight: 300
+    &:not(.big)
+      padding: INDENT
+
+    &.thumb
+      display-box()
+      box-orient(horizontal)
+      & > div
+        box-flex(1)
+
+      &.big
+        & > img
+          width: LIST_BIG_IMAGE
+          height: LIST_BIG_IMAGE
+        & > div
+          padding: 0.5em INDENT
+
+      &:not(.big)
+        & > img
+          width: LIST_IMAGE
+          height: LIST_IMAGE
+        & > div
+          padding-left: INDENT
 
     &.arrow::after
+      SIZE = 0.5em
       position: absolute
-      right: LIST_PADDING
+      right: SIZE
       top: 45%
-      width: 6px
-      height: 6px
+      width: SIZE
+      height: SIZE
       content: ''
-      border-right: 3px solid
-      border-top: 3px solid
-      transform( rotate(45deg) )
+      border-right: (SIZE / 2) solid
+      border-top: (SIZE / 2) solid
+      transform rotate(45deg)
 
     & a
       display: block
       text-decoration: none
 
-    & img, .icon
+    & .icon
+      display: inline-block
       float: left
-      line-height: 1.0em
+      margin-right: (INDENT / 2)
+      width: S = LIST_IMAGE
+      height: S
       text-align: center
-      margin-right: LIST_PADDING_HORIZONTAL
-
-    &:not(.thumb)
-      section & img, section & .icon
-        width: S = 34px
-        height: S
-        font-size: 2.6em
-      aside & img, aside & .icon
-        width: S = 18px
-        height: S
-        font-size: 1.3em
-
-    &.thumb
-      & img, & .icon
-        margin-top: -(LIST_PADDING)
-        margin-left: -(LIST_PADDING_HORIZONTAL)
+      font-size: 2.6em
+      line-height: 1.0em
 
-        height: S = 61px
-        width: S
-        font-size: 3.6em
-        line-height: 1.3em
+    aside & .icon
+      width: S = LIST_SMALL_IMAGE
+      height: S
+      font-size: FONT_SIZE_LARGE
 
     &.anchor
-      padding: (LIST_PADDING_HORIZONTAL / 2) LIST_PADDING_HORIZONTAL
+      padding: 0.5em
       line-height: 1.0em
       & .tag
         display: none
 
-    & strong
-      position: relative
-      font-size: FONT_SIZE_BIG
-
-    & small
-      display: block
+    & h1, h2, h3, h4, h5, h6, strong, small
       overflow: hidden
       white-space: nowrap
       text-overflow: ellipsis
-      & + .right
-        margin-left: 0px
-        margin-top: -12px
+      display: block
+
+    & small
+      & + .on-right
+        margin-left: 0
+        margin-top: -1.4em
 
-    & small, &.anchor, & .right:not(.tag)
+    & small, &.anchor
       font-size: FONT_SIZE_SMALL
 
-  & .loading .right
-    font-size: 1.0em
+    & .on-right:not(.tag)
+      font-size: FONT_SIZE_TINY
 
-  & .right, small
+  & .loading .on-right
+    font-size: FONT_SIZE_NORMAL
+
+  & .on-right, small
     & .icon
-      height: 13px !important
-      width: 13px !important
-      margin-right: 1px !important
-      font-size: 1.2em !important
-      line-height: 1.1em
+      font-size: inherit !important
+      width: auto !important
+      height: auto !important
 
   &.indented li:not(:last-child)
-    margin-bottom: 10px
-
-
-
+    margin-bottom: INDENT

src/stylesheets/lungo.layout.nav.styl

@@ -10,45 +10,42 @@
 HEADER_GROUPBAR_HEIGHT = 32px
 
 nav
-
   /* ========================================================================= */
   /* ================================= HEADER ================================ */
   /* ========================================================================= */
   header &
     & .button, button
-      margin-top: 6px
+      margin-top: 0.45em
       float: left
-    &.right .button, &.right button
-      margin-right: 5px
-    &:not(.right) .button, &:not(.right) button
-      margin-left: 5px
+    &.on-right .button, &.on-right button
+      margin-right: 0.4em
+    &:not(.on-right) .button, &:not(.on-right) button
+      margin-left: 0.4em
 
     & a:not(.button)
-      padding: 0px 11px !important
+      padding: 0 0.75em !important
       float: left
       height: HEADER_HEIGHT
       & > .icon
-        font-size: 1.8em
-
-    & .tag
-      position: relative
-      top:  -12px
-      left: -12px
-      margin-right: -20px
-
-    & abbr
-      font-size: FONT_SIZE_SMALL
-      font-weight: 700
-      display: block
-
-    & .icon ~ abbr
-      margin-left: 4px
-
-    & .loading
-      margin-top: .5em
-      font-size: 1.6em
-      & + .icon
-        display: none
+        font-size: 1.7em
+
+    // @TODO
+    // & .tag
+    //   position: relative
+    //   top:  -12px
+    //   left: -12px
+    //   margin-right: -20px
+
+    // & abbr
+    //   font-size: FONT_SIZE_SMALL
+    //   font-weight: 700
+    //   display: block
+
+    // & .loading
+    //   margin-top: .5em
+    //   font-size: 1.6em
+    //   & + .icon
+    //     display: none
 
   &[data-control=groupbar], footer &
     display-box()
@@ -63,9 +60,10 @@ nav
   /* =============================== GROUPBAR ================================ */
   /* ========================================================================= */
   &[data-control=groupbar]
+    z-index: 2
     height: HEADER_GROUPBAR_HEIGHT
     width: 100%
-    z-index: 2
+    font-size: FONT_SIZE_SMALL
     line-height: HEADER_GROUPBAR_HEIGHT
     & > a
       padding: 0px
@@ -73,15 +71,14 @@ nav
       height: HEADER_GROUPBAR_HEIGHT !important
       display: block
       text-align: center
-
       & .icon
-          font-size: 1.0em
-          margin-right: 2px
+        font-size: 1.0em
+        margin-right: 2px
 
       & .tag
-          position: relative
-          top: -1px
-          left: 2px
+        position: relative
+        top: -1px
+        left: 2px
 
 
   /* ========================================================================= */
@@ -122,7 +119,7 @@ nav
       & > a
         display: block
         position: relative
-        padding: LIST_PADDING LIST_PADDING_HORIZONTAL (LIST_PADDING - 1) LIST_PADDING_HORIZONTAL
+        padding: INDENT
         & > .icon
           position: absolute
           left: 0.5em

src/stylesheets/lungo.layout.styl

@@ -49,7 +49,7 @@ body
         z-index: -1
         margin: 0 4px
         float: left
-        font-size: FONT_SIZE_LARGE
+        // font-size: FONT_SIZE_LARGE
         box-flex(1)
 
         &.centered

src/stylesheets/lungo.media.phone.styl

@@ -1,5 +1,11 @@
 
 /* ==== Any phone ==== */
+
+// media="all"
+//   ::-webkit-scrollbar
+//     width: 1px
+//     height: 1px
+
 @media only screen and (max-width: 767px)
   body
     &[data-position="absolute"] > section

src/stylesheets/lungo.widget.button.styl

@@ -12,64 +12,47 @@
   border: none
   cursor: pointer
   font-family: inherit
+  font-weight: inherit
   text-align: center
   text-decoration: none
   outline: none
   background: none
 
   header &
+    padding: 0 0.5em
+    height: HEIGHT = 34px
+    min-width: HEIGHT
     font-size: 1.0em
-    height: H = 32px
-    line-height: H
-    padding: 0 8px
+    line-height: HEIGHT
     & > .icon
-      font-size: 1.3em
+      font-size: 1.4em
     & .icon + abbr
       position: relative
-      top: -2px
-      left: 1px
+      left: 0.2em
       display: inline
+      float: right
 
   article &
-    font-size: FONT_SIZE_BIG
-    height: H = 40px
-    line-height: (H - 2)
-    padding: 0 14px
+    font-size: 1.1em
+    line-height: 2.5em
 
-    & .icon + abbr
-      margin-left: 6px
-    &:not(.anchor) .icon
-      line-height: (H / 2)
-
-    &.anchor
-      display: block
-      // width: inherit
-      width: 100%
-      position: relative
-      & .icon
-        position: absolute
-        left: 14px
+    &.icon
+      padding: 0 0.65em
+    &:not(.icon)
+      padding: 0 1em
+      & .icon + abbr
+        margin-left: 0.5em
 
     &.large
-      height: H = 52px
-      padding: 0 20px
       font-size: FONT_SIZE_LARGE
-      line-height: (H - 2)
-      & .icon + abbr
-        margin-left: 10px
-
     &.small
-      height: H = 30px
-      padding: 0 10px
       font-size: FONT_SIZE_SMALL
-      line-height: (H - 2)
-      & .icon + abbr
-        margin-left: 4px
-
     &.tiny
-      height: H = 22px
-      padding: 0 6px
       font-size: FONT_SIZE_TINY
-      line-height: (H - 2)
-      & .icon + abbr
-        margin-left: 2px
+
+    &.anchor
+      width: 100%
+      position: relative
+      &:not(.icon) .icon
+        position: absolute
+        left: 1.0em

src/stylesheets/lungo.widget.empty.styl

@@ -0,0 +1,16 @@
+body > section > article > .empty
+  display: block
+  width: 80%
+  margin: 0 auto
+  padding-top: 15%
+  text-align: center
+  & > *
+    display: block
+  & > .icon
+    font-size: S = 120px
+    line-height: S
+  & > strong
+    font-size: FONT_SIZE_BIG
+    line-height: FONT_SIZE_BIG
+  & > button
+    margin: 0.5em 0

src/stylesheets/lungo.widget.pull.styl

@@ -0,0 +1,43 @@
+section.hide > [data-control="pull"]
+  display: none
+
+section.show > [data-control="pull"]
+  position: absolute
+  z-index: -1
+  top: HEADER_HEIGHT
+  width: 100%
+  height: 80px
+  padding: 10px 0
+  text-align: center
+
+  & > .icon
+    display: inline-block
+    width: S = 52px
+    height: S
+    font-size: S
+    line-height: S
+    transition-property rotate, color
+    transition-duration TRANSITION_TIME
+    transition-timing-function DEFAULT_TRANSITION
+    backface-visibility hidden
+
+  & > .loading
+    display: none
+    left: 0%
+
+  & > strong
+    position: relative
+    top: -16px
+    margin-left: 4px
+    font-size: FONT_SIZE_NORMAL
+
+  &.rotate
+    & > .icon
+      transform( rotate(180deg) )
+
+  &.refresh
+    & > .icon
+      display: none
+    & > .loading
+      display: inline-block
+

src/stylesheets/lungo.widget.styl

@@ -31,11 +31,11 @@
 .margin-left
   margin-left: INDENT
 
-:not(.icon)
-  &.left
-    float: left
-  &.right
-    float: right
+
+.on-left
+  float: left
+.on-right
+  float: right
 
 /* ================================  SCROLL  ================================ */
 .overthrow-enabled .overthrow
@@ -64,45 +64,15 @@
     -webkit-transform: translate3d(0, 0, 0)
 
 
-/* ================================  TEXT  ================================ */
-.text
-  &.italic
-    font-style: italic
-  &.underline
-    text-decoration: underline
-  &.line-through
-    text-decoration: line-through
-  &.align_left
-    text-align: left
-  &.align_right
-    text-align: right
-  &.align_center
-    text-align: center
-  &.align_justify
-    text-align: justify
-  &.tiny
-    font-size: 0.8em
-  &.small
-    font-size: FONT_SIZE_SMALL
-  &.big
-    font-size: FONT_SIZE_BIG
-  &.opacity
-    opacity: 0.5
-
 
 /* ================================  TAG  ================================ */
 .tag
-  padding: 0 0.5em
+  padding: 0 0.33em
   font-size: FONT_SIZE_TINY
   line-height: inherit
   text-align: center
   z-index: 1
 
-// size = 5px
-// .margin
-//   &.bottom
-//     margin-bottom: size
-
 
 /* ================================  .LAYOUT  ================================ */
 .layout
@@ -150,51 +120,6 @@
   list-style: none
   margin: 0
 
-/* ==================================  PULL  ================================== */
-section.hide > [data-control="pull"]
-  display: none
-
-section.show > [data-control="pull"]
-  position: absolute
-  z-index: -1
-  top: HEADER_HEIGHT
-  width: 100%
-  height: 80px
-  padding: 10px 0
-  text-align: center
-
-  & > .icon
-    display: inline-block
-    width: S = 52px
-    height: S
-    font-size: S
-    line-height: S
-    transition-property rotate, color
-    transition-duration TRANSITION_TIME
-    transition-timing-function DEFAULT_TRANSITION
-    backface-visibility hidden
-
-  & > .loading
-    display: none
-    left: 0%
-
-  & > strong
-    position: relative
-    top: -16px
-    margin-left: 4px
-    font-size: FONT_SIZE_NORMAL
-
-  &.rotate
-    & > .icon
-      transform( rotate(180deg) )
-
-  &.refresh
-    & > .icon
-      display: none
-    & > .loading
-      display: inline-block
-
-
 
 /* ================================  SPLASH  ================================ */
 body > section > article.splash
@@ -213,23 +138,3 @@ body > section > article.splash
     left: 0px
     font-size: FONT_SIZE_TINY
     padding: 0px
-
-/* ================================  MESSAGE  ================================ */
-body > section > article > .empty
-  text-align: center
-  width: 256px
-  display: block
-  margin: 0 auto
-  padding-top: 15%
-  & > *
-    display: block
-    margin-bottom: 3%
-  & > .icon
-    font-size: S = 120px
-    line-height: S
-  & > strong
-    font-weight: 700
-    font-size: FONT_SIZE_LARGE
-  & > small
-    font-weight: 600
-    margin-bottom: 5%

src/stylesheets/lungo.widget.text.styl

@@ -0,0 +1,34 @@
+.text
+  &.italic
+    font-style: italic
+  &.underline
+    text-decoration: underline
+  &.line-through
+    text-decoration: line-through
+  &.align_left
+    text-align: left
+  &.align_right
+    text-align: right
+  &.align_center
+    text-align: center
+  &.align_justify
+    text-align: justify
+  &.tiny
+    font-size: 0.8em
+  &.small
+    font-size: FONT_SIZE_SMALL
+  &.big
+    font-size: FONT_SIZE_BIG
+  &.large
+    font-size: FONT_SIZE_LARGE
+  &.opacity
+    opacity: 0.5
+
+h1
+  font-size: 1.6em
+h2
+  font-size: 1.5em
+h3
+  font-size: 1.4em
+h4
+  font-size: 1.3em

src/stylesheets/theme/theme.base.styl

@@ -12,11 +12,8 @@
 body
   background-color: #000
   color: COLOR
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
+  font: 14px/1.25 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
   font-weight: 400
-  font-size: 13px
-  line-height: 1.3em
-  letter-spacing: -0.05em
 
   & .text
     &.thin

src/stylesheets/theme/theme.layout.list.styl

@@ -32,13 +32,16 @@
         background: LIST_border
         color: lighten(COLOR, 20%)
       &.contrast, &.selectable:active, &.theme
-        &, small, & .right:not(.tag), strong, .arrow::after
+        &, small, & .on-right:not(.tag), strong, .arrow::after
           color: #fff
         &.arrow::after
           border-color: #fff
-      & small, & .right:not(.tag)
+      & small, & .on-right:not(.tag)
         color: lighten(COLOR, 20%)
 
+    &:not(.big) img
+      border-radius 4px
+
   &:not(.indented) li
     &.dark, &.theme, &.light
       border-bottom-color: rgba(0,0,0,0.1)

src/stylesheets/theme/theme.layout.nav.styl

@@ -17,6 +17,8 @@ nav
 
   section > footer > & > a, &[data-control=groupbar] > a
     color: NAV_LINK
+    & abbr
+      font-weight: 700 !important
     &.active
       color: NAV_LINK_ACTIVE
 

src/stylesheets/theme/theme.widget.button.styl

@@ -9,6 +9,8 @@
 
 .button, button
   border-radius (BORDER_radius * 2)
+  &, abbr
+    font-weight: 600
 
 header
   & .button, button
@@ -27,8 +29,7 @@ article
     &:active
       box-shadow inset 0 0 128px rgba(0,0,0,0.25)
       border-color: none
-    &, abbr
-      font-weight: 600
+
     & .icon
       opacity: 0.65
       text-shadow: 0 -1px 0 rgba(0,0,0,0.25)

src/stylesheets/theme/theme.widget.styl

@@ -19,14 +19,6 @@
   footer &
     box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)
 
-/* ===============================  MESSAGE  =============================== */
-body > section > article > .empty
-  & > .icon, > strong, > small
-    text-shadow: 0 1px 0 lighten(BACKGROUND, 95%)
-  & > .icon, > small
-    color: darken(BACKGROUND, 20%)
-  & > strong
-    color: darken(BACKGROUND, 40%)
 
 /* =================================  PULL  =============================== */
 body > section > [data-control="pull"]
@@ -38,3 +30,12 @@ body > section > [data-control="pull"]
   &.rotate
     color: darken(BACKGROUND, 75%)
 
+
+/* ===============================  EMPTY  =============================== */
+body > section > article > .empty
+  & > .icon, > strong, > small
+    text-shadow: 0 1px 0 lighten(BACKGROUND, 95%)
+  & > .icon, > small
+    color: darken(BACKGROUND, 20%)
+  & > strong
+    color: darken(BACKGROUND, 40%)