Changes on styles

dolfly · Jun 4, 2013 · 4d24df0 · 4d24df0
1 parent 76d98ca
commit 4d24df0
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 48 deletions.
diff --git a/src/stylesheets/__init.styl b/src/stylesheets/__init.styl
@@ -1,8 +1,8 @@
 @import "CSSmethods/vendor.styl"
 
 /* CONSTANTS */
-HEADER_HEIGHT           = 45px
-HEADER_GROUPBAR_HEIGHT  = 32px
+HEADER_HEIGHT           = 46px
+HEADER_GROUPBAR_HEIGHT  = 34px
 
 ASIDE_WIDTH             = 264px
 ASIDE_WIDTH_SMALL       = 64px

diff --git a/src/stylesheets/lungo.layout.nav.styl b/src/stylesheets/lungo.layout.nav.styl
@@ -19,7 +19,7 @@ nav
       height: HEADER_HEIGHT
       min-width: HEADER_HEIGHT
       & > .icon
-        font-size: 1.7em
+          font-size: 1.65em
 
     & .tag
       position: absolute

diff --git a/src/stylesheets/lungo.layout.styl b/src/stylesheets/lungo.layout.styl
@@ -28,6 +28,7 @@ body
       box-flex(0)
       z-index: 3
       position: relative
+
     & > header
       ordinal-group(1)
     & > article
@@ -48,7 +49,8 @@ body
       & > .title
         z-index: -1
         float: left
-        font-size: FONT_SIZE_BIG
+        // font-size: FONT_SIZE_BIG
+        font-size: 1.25em
         box-flex(1)
         &.centered
           position: absolute

diff --git a/src/stylesheets/theme/__init.styl b/src/stylesheets/theme/__init.styl
@@ -22,3 +22,4 @@ FORM_color          = darken(#e5e5e5, 5%)
 FORM_border         = 2px
 FORM_border_radius  = (BORDER_radius * FORM_border)
 /* -------------------------- BUTTON -------------------------- */
+SHADOW              = rgba(0,0,0,0.15)
diff --git a/src/stylesheets/theme/theme.base.styl b/src/stylesheets/theme/theme.base.styl
@@ -14,6 +14,7 @@ body
   color: COLOR
   font: 14px/1.25 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
   font-weight: 400
+  letter-spacing: -0.025em
 
   & .text
     &.thin

diff --git a/src/stylesheets/theme/theme.layout.nav.styl b/src/stylesheets/theme/theme.layout.nav.styl
@@ -8,47 +8,36 @@
  */
 
 nav
-  section > header > &
+  header > &
     & a:not(.button)
-      color: darken(THEME, 35%)
+      color: THEME
+    & .button, button
+      color: lighten(COLOR, 20%)
+    & a, button
       &:active
-        color: darken(THEME, 50%)
-      & > .icon
-        text-shadow 0 1px 0 lighten(THEME, 25%)
+        color: WHITE
+        text-shadow: 0 0 1em WHITE
 
   section > footer > & > a, &[data-control=groupbar] > a
     color: NAV_LINK
-
-    & .icon, abbr
+    & .icon
       text-shadow: 0 1px darken(COLOR, 25%)
     & abbr
       font-weight: 600
     &.active
+      transition box-shadow TRANSITION_time TRANSITION_easing
       color: NAV_LINK_ACTIVE
+      background-color: lighten(COLOR, 5%)
 
   section > &[data-control=groupbar] > a.active
-    transition box-shadow TRANSITION_time TRANSITION_easing
-    box-shadow inset 0 -3px 0 THEME
-
-  section > footer > & > a
-    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%)
+      box-shadow inset 0 -2px 0 THEME
 
-  aside &
-    & a:not(.button)
-      color: THEME
-    & .button, button
-      color: lighten(COLOR, 20%)
-    & a, button
-      &:active
-        color: WHITE
-        text-shadow: 0 0 1em WHITE
+  section > footer > & > a.active
+      box-shadow inset 0 2px THEME
 
   &[data-control=menu]
     background: COLOR
-    box-shadow 0 2px 0 rgba(0,0,0,0.15)
+    box-shadow 0 2px 0 SHADOW
     &.icons
       background: rgba(0,0,0,0.8)
       & > a

diff --git a/src/stylesheets/theme/theme.layout.styl b/src/stylesheets/theme/theme.layout.styl
@@ -13,21 +13,28 @@ body > section
     color: COLOR
   & > header
     C = THEME
-    background-color: THEME
-    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%)
+    background-color: darken(COLOR, 50%)
+    box-shadow 0 2px 0 SHADOW
     color: #fff
 
-  & > footer, & nav[data-control=groupbar]
+  & nav[data-control=groupbar], & > footer
     background-color: COLOR
+    box-shadow inset 0 -2px SHADOW
+
+  & > footer
+    box-shadow 0 -2px SHADOW, inset 0 2px SHADOW
+
   & > article, & > [data-control="pull"]
     background-color: BACKGROUND
+    box-shadow: 0 1px 0 red
     &.splash
       background: THEME
       color: #fff
+
   &.aside
-    box-shadow -1px 0 2px rgba(0,0,0,0.2)
+    box-shadow -2px SHADOW
     &.right
-      box-shadow 1px 0 2px rgba(0,0,0,0.2)
+      box-shadow 2px SHADOW
 
   &[data-pull] > article.active
     box-shadow: 0 -1px 0 rgba(0,0,0,0.05)
@@ -36,9 +43,12 @@ body > aside
   background-color: COLOR
   color: WHITE
   & > header, & > footer
-    background-color: darken(COLOR, 15%)
+    background-color: darken(COLOR, 25%)
   & > header
-    box-shadow: inset 0 1px COLOR, inset 0 1px darken(COLOR, 25%)
+    box-shadow 0 2px 0 SHADOW
 
 body > * > header > .title
-  font-weight: 600
+  color: lighten(COLOR, 85%)
+  font-weight: 700
+  text-transform: uppercase
+  letter-spacing: -0.05em
diff --git a/src/stylesheets/theme/theme.widget.button.styl b/src/stylesheets/theme/theme.widget.button.styl
@@ -11,18 +11,10 @@
   &, abbr
     font-weight: 600
 
-section header
-  & .button, button
-    color: #fff
-    // 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, 25%)
-      box-shadow: none
-
 article
   & .button, button
-    border-radius (BORDER_radius * 2)
+    // border-radius (BORDER_radius * 2)
+    border-radius BORDER_radius
     color: #fff !important
 
     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)

diff --git a/src/stylesheets/theme/theme.widget.styl b/src/stylesheets/theme/theme.widget.styl
@@ -14,7 +14,7 @@
   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
+    background-color: THEME
     aside a:not(.active) &,  footer a:not(.active) &, [data-control="groupbar"] a:not(.active) &
       background-color: lighten(COLOR, 20%)