Clean UI

src/stylesheets/lungo.layout.nav.styl

@@ -12,28 +12,22 @@ nav
   /* ================================= HEADER ================================ */
   /* ========================================================================= */
   header &
-    & .button, button
-      margin-top: 0.45em
-      float: left
-    &.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)
+    & a, button /*:not(.button)*/
+      position: relative
       padding: 0 0.75em !important
       float: left
       height: HEADER_HEIGHT
+      min-width: HEADER_HEIGHT
       & > .icon
         font-size: 1.7em
 
     & .tag
-      position: relative
-      top:  -1em
-      left: -1em
-      margin-right: -20px
+      position: absolute
+      top: 0.5em
+      right: 0.25em
+      height: FONT_SIZE_LARGE
+      line-height: FONT_SIZE_LARGE
 
-    // @TODO
     & .loading
       margin-top: .5em
       font-size: 1.6em
@@ -74,6 +68,7 @@ nav
   &[data-control=menu]
     position: absolute
     left: 0
+    top: 0
     top: HEADER_HEIGHT
     visibility: hidden
     z-index: 2
@@ -119,10 +114,10 @@ nav
   /* ========================================================================= */
   footer &
     & a
-      text-align: center
       display: block
       padding: 0
       height:  HEADER_HEIGHT
+      text-align: center
 
     & .icon
       font-size: 2.0em

src/stylesheets/lungo.layout.styl

@@ -47,15 +47,13 @@ body
 
       & > .title
         z-index: -1
-        margin: 0 0.25em
         float: left
         font-size: FONT_SIZE_BIG
         box-flex(1)
-
         &.centered
           position: absolute
-          left: 2em
-          right: 2em
+          left: (INDENT * 2)
+          right: (INDENT * 2)
           text-align: center
           display: inline-block
 
@@ -100,6 +98,10 @@ body
     width: ASIDE_WIDTH
     display: none
     z-index: -1
+    & > header
+      & .title
+        margin: 0 INDENT
+
     &.active, &.show
       display-box()
     &.show

src/stylesheets/lungo.widget.button.styl

@@ -17,27 +17,20 @@
   text-decoration: none
   outline: none
   background: none
+  font-size: inherit
 
   header &
-    padding: 0 0.5em
-    height: BUTTON_HEIGHT
-    min-width: BUTTON_HEIGHT
-    font-size: 1.0em
-    line-height: BUTTON_HEIGHT
-    & > .icon
-      font-size: 1.4em
     & > abbr
       font-size: FONT_SIZE_SMALL
     & .icon + abbr
       position: relative
-      left: 0.2em
-      display: inline
+      left: 0.3em
+      top: 0.7em
       float: right
 
   article &
     font-size: 1.1em
     line-height: 2.5em
-
     &.icon
       padding: 0 0.65em
     &:not(.icon)
@@ -51,7 +44,6 @@
       font-size: FONT_SIZE_SMALL
     &.tiny
       font-size: FONT_SIZE_TINY
-
     &.anchor
       width: 100%
       position: relative

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

@@ -48,19 +48,14 @@
 
   aside & li
     background: none
-    &:not(:first-child)
-      border-top: solid 1px  lighten(COLOR, 5%)
-    &:not(:last-child)
-      border-bottom: solid 1px darken(COLOR, 20%)
-    &:active
-      background: darken(COLOR, 5%)
-    &.active
-      background: THEME
+    &, & a
+      color: lighten(COLOR, 25%)
     &.active, &:active
       border-color: transparent
-      & strong, & small, & .icon
-        color: #fff
-    & strong
-      color: lighten(COLOR, 75%)
+      background-color: lighten(COLOR, 5%)
+      & :not(.icon)
+        color: WHITE
+      & .icon
+        color: THEME
     & small, .icon
-      color: lighten(COLOR, 40%)
+      color: lighten(COLOR, 25%)

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

@@ -18,25 +18,33 @@ nav
 
   section > footer > & > a, &[data-control=groupbar] > a
     color: NAV_LINK
+
+    & .icon, abbr
+      text-shadow: 0 1px darken(COLOR, 25%)
     & abbr
-      font-weight: 700 !important
+      font-weight: 600
     &.active
       color: NAV_LINK_ACTIVE
 
   section > &[data-control=groupbar] > a.active
     transition box-shadow TRANSITION_time TRANSITION_easing
-    box-shadow inset 0 -4px 0 THEME
+    box-shadow inset 0 -3px 0 THEME
 
   section > footer > & > a
-    box-shadow inset 0 1px 0 #000, inset 0 2px 0 lighten(COLOR, 20%)
+    box-shadow inset 0 1px 0 darken(COLOR, 50%), inset 0 2px 0 lighten(COLOR, 15%)
     &.active
       box-shadow inset 0 0 16px darken(COLOR, 75%)
       background-color: darken(COLOR, 10%)
 
-  aside & a
-    color: lighten(COLOR, 20%)
-    &:active
-      color: lighten(COLOR, 50%)
+  aside &
+    & a:not(.button)
+      color: THEME
+    & .button, button
+      color: lighten(COLOR, 20%)
+    & a, button
+      &:active
+        color: WHITE
+        text-shadow: 0 0 1em WHITE
 
   &[data-control=menu]
     background: COLOR

src/stylesheets/theme/theme.layout.styl

@@ -14,7 +14,6 @@ body > section
   & > header
     C = THEME
     background-color: THEME
-    // box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 lighten(C, 20%), inset 0 -1px 0 darken(C, 20%)
     box-shadow 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 1px lighten(C, 25%), inset 0 -1px 0 darken(C, 20%)
     color: #fff
 
@@ -35,12 +34,11 @@ body > section
 
 body > aside
   background-color: COLOR
-  color: #fff
-  C = darken(COLOR, 20%)
-  & > header, > footer
-    background-color: C
+  color: WHITE
+  & > header, & > footer
+    background-color: darken(COLOR, 15%)
   & > header
-    box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 lighten(C, 10%), inset 0 -1px 0 darken(C, 20%)
+    box-shadow: inset 0 1px COLOR, inset 0 1px darken(COLOR, 25%)
 
 body > * > header > .title
-  font-weight: 700
+  font-weight: 600

src/stylesheets/theme/theme.media.styl

@@ -11,4 +11,4 @@
   body
     & > section
       & > header
-        border-radius (BORDER_radius * 2.5) (BORDER_radius * 2.5) 0 0
+        border-radius BORDER_radius BORDER_radius 0 0

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

@@ -8,27 +8,31 @@
  */
 
 .button, button
-  border-radius (BORDER_radius * 2)
   &, abbr
     font-weight: 600
 
-header
+section header
   & .button, button
     color: #fff
-    background-color: darken(THEME, 15%)
-    box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
+    // background-color: lighten(THEME, 10%)
+    box-shadow: inset 0 0 0 2em rgba(0,0,0,0.05), inset 0 0 1px rgba(0,0,0,0.1)
     &:active
-      background-color: darken(THEME, 40%)
+      background-color: darken(THEME, 25%)
+      box-shadow: none
 
 article
   & .button, button
+    border-radius (BORDER_radius * 2)
     color: #fff !important
-    box-shadow inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.15)
-    border: solid 1px rgba(0,0,0,0.1)
-    text-shadow: 0 1px 0 rgba(0,0,0,0.1)
+
+    box-shadow: inset 0 0.1em 0 rgba(255,255,255,0.1), inset 0 -0.15em 0 rgba(0,0,0,0.2), 0 0.15em 0 rgba(0,0,0,0.075)
+    -webkit-font-smoothing: antialiased
+    text-shadow: 0 0.1em 0 rgba(0,0,0,0.1)
+
+    &:hover
+        box-shadow: inset 0 0 5em rgba(0,0,0,0.15), inset 0 -0.15em 0 rgba(0,0,0,0.2), 0 0.15em 0 rgba(0,0,0,0.075)
     &:active
-      box-shadow inset 0 0 128px rgba(0,0,0,0.25)
-      border-color: none
+      box-shadow inset 0 0 5em rgba(0,0,0,0.3), inset 0 0.15em 0 rgba(0,0,0,0.1)
 
     & .icon
       opacity: 0.65

src/stylesheets/theme/theme.widget.styl

@@ -12,12 +12,10 @@
   color: #fff
   border-radius BORDER_radius
   font-weight: 700
+  box-shadow inset 0 0.1em rgba(255,255,255,0.2), 0 0.1em rgba(0,0,0,0.25)
   &.count
     background-color: DANGER
-    box-shadow inset 0 0.1em 0.1em rgba(255,255,255,0.3), 0 0.1em 0.2em rgba(0,0,0,0.5)
-    footer a.active &, [data-control="groupbar"] a.active &
-      background-color: DANGER
-    footer a:not(.active) &, [data-control="groupbar"] a:not(.active) &
+    aside a:not(.active) &,  footer a:not(.active) &, [data-control="groupbar"] a:not(.active) &
       background-color: lighten(COLOR, 20%)