[ux] start porting andyet/style variables

public/css/_mixins.styl

@@ -1,9 +1,5 @@
 @import _variables
 
-gotham()
-  font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif
-  font-style: normal
-
 roundall($round)
   -moz-border-radius: $round
   -webkit-border-radius: $round

public/css/_variables.styl

@@ -12,9 +12,20 @@ $textSecondary = #b7b7b7
 $grayBackground = #f7f7f7
 $grayOutline = #e4e4e4
 
-// font sizes
+$font-family-gotham = 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif
 
-$fontLarge = 20px
+// Font sizes
-$fontMedium = 14px
-$fontSmall = 12px 
 
+$font-size-large = 16px
+$font-size-base = 14px
+$font-size-small = 12px
+
+$font-size-h1 = 30px
+$font-size-h2 = 24px
+$font-size-h3 = 18px
+$font-size-h4 = 14px
+
+$line-height-base = 18px
+$line-height-headings = 26px
+
+$font-weight-bold = 800

public/css/app/callbar.styl

@@ -79,7 +79,7 @@ $callHeight = 80px
       right: 1px solid rgba(255,255,255,.2)
     width: 100px
     margin-right: 10px
-    font-size: 16px
+    font-size: $font-size-large
     color: rgba(0,0,0,.75)
     text_shadow(rgba(255,255,255,.5),0,1px,0)
     float: left
@@ -102,7 +102,7 @@ $callHeight = 80px
     roundall(30px)
     
   .callerName, .callTime  
-    font-weight: bold
+    font-weight: $font-weight-bold
     color: #fff
     text_shadow(rgba(0,0,0,.7),0,1px,0)
     line-height: 1

public/css/app/chat.styl

@@ -53,7 +53,7 @@
       roundall(3px)
       text-transform: uppercase
       font-size: 9px
-      font-weight: bold
+      font-weight: $font-weight-bold
       line-height: 20px
       color: lighten($baseText, 30%)
       background: $grayOutline
@@ -179,7 +179,7 @@
 
     .timestamp
       font-size: 10px
-      font-weight: bold
+      font-weight: $font-weight-bold
       color: lighten($activeBlue, 50%)
       float: right
       display: block
@@ -210,7 +210,7 @@
     width: 100%
     position: relative
     height: 30px
-    line-height: 18px
+    line-height: $line-height-base
     padding: 5px
     background: white
 

public/css/app/forms.styl

@@ -6,10 +6,10 @@ input[type=text], input[type=email], input[type=search], input[type=password], t
   padding: 0 10px
   background-color: white
   border: 1px solid $grayOutline
-  font-size: $fontSmall
+  font-size: $font-size-small
   color: $baseText
   borderbox()
-  gotham()
+  font-family: $font-family-gotham
   -webkit-font-smoothing: antialiased
   -webkit-appearance: none
 
@@ -36,7 +36,7 @@ label
   display: block
   margin-bottom: 5px
   font-size: 13px
-  font-weight: bold
+  font-weight: $font-weight-bold
   color: $baseText
 
 a.button
@@ -52,8 +52,8 @@ button, a.button
   padding: 0 1em
   color: white
   background: $activeBlue
-  font-size: $fontSmall
+  font-size: $font-size-small
-  font-weight: bold
+  font-weight: $font-weight-bold
   text-decoration: none
   text-align: center
   cursor: pointer

public/css/app/layout.styl

@@ -4,8 +4,8 @@
 body
   background: white
   color: $baseText
-  gotham()
+  font-family: $font-family-gotham
-  font-size: 16px
+  font-size: $font-size-base
   font-weight: 400
   -webkit-font-smoothing: antialiased
 

public/css/app/roster.styl

@@ -58,7 +58,7 @@
     margin: 0px
     position: relative
     min-height: 40px
-    font-size: $fontSmall
+    font-size: $font-size-small
     color: #fff
     cursor: pointer
     transition: all .3s ease-in 0
@@ -116,7 +116,7 @@
 
     &.activeContact, &.offline.activeContact
       background: white
-      font-weight: bold
+      font-weight: $font-weight-bold
 
       .name
         color: $baseText
@@ -181,7 +181,7 @@
       top: 5px
       left: 10px
       font-size: 10px
-      font-weight: bold
+      font-weight: $font-weight-bold
       text-align: center
       background: rgba(0, 174, 239, .8)
 

public/css/app/settings.styl

@@ -13,7 +13,7 @@
 
 .uploadRegion
   padding: 15px
-  font-size: $fontSmall
+  font-size: $font-size-small
   roundall(3px)
   margin: 10px 0
   color: $textSecondary

public/css/otalk.css

@@ -243,8 +243,7 @@ body {
   background: #fff;
   color: #565656;
   font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
-  font-style: normal;
+  font-size: 14px;
-  font-size: 16px;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
 }
@@ -256,7 +255,7 @@ h4 {
 }
 h3 {
   margin-top: 0;
-  font-size: 14px;
+  font-size: $fontMedium;
 }
 #pages {
   position: absolute;
@@ -456,7 +455,7 @@ h3 {
 #roster li.offline.activeContact,
 #bookmarks li.offline.activeContact {
   background: #fff;
-  font-weight: bold;
+  font-weight: 800;
 }
 #roster li.activeContact .name,
 #bookmarks li.activeContact .name,
@@ -551,7 +550,7 @@ h3 {
   top: 5px;
   left: 10px;
   font-size: 10px;
-  font-weight: bold;
+  font-weight: 800;
   text-align: center;
   background: rgba(0,174,239,0.8);
 }
@@ -701,7 +700,7 @@ h3 {
   border-radius: 3px;
   text-transform: uppercase;
   font-size: 9px;
-  font-weight: bold;
+  font-weight: 800;
   line-height: 20px;
   color: #898989;
   background: #e4e4e4;
@@ -841,7 +840,7 @@ h3 {
 }
 .messages .message .timestamp {
   font-size: 10px;
-  font-weight: bold;
+  font-weight: 800;
   color: #78daff;
   float: right;
   display: block;
@@ -1005,7 +1004,6 @@ textarea,
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
-  font-style: normal;
   -webkit-font-smoothing: antialiased;
   -webkit-appearance: none;
   -webkit-transition: border 0.2s ease-in 0;
@@ -1038,7 +1036,7 @@ label {
   display: block;
   margin-bottom: 5px;
   font-size: 13px;
-  font-weight: bold;
+  font-weight: 800;
   color: #565656;
 }
 a.button {
@@ -1047,8 +1045,6 @@ a.button {
 button,
 a.button {
   display: inline-block;
-  font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
-  font-style: normal;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   -khtml-border-radius: 3px;
@@ -1062,7 +1058,7 @@ a.button {
   color: #fff;
   background: #00aeef;
   font-size: 12px;
-  font-weight: bold;
+  font-weight: 800;
   text-decoration: none;
   text-align: center;
   cursor: pointer;
@@ -1205,7 +1201,7 @@ rgba(0,0,0,0.2)
 }
 #calls .callerName,
 #calls .callTime {
-  font-weight: bold;
+  font-weight: 800;
   color: #fff;
 rgba(0,0,0,0.7)
   line-height: 1;

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1382536313264
+# 0.0.1 1382540896499
 
 CACHE:
 /app.js