Switched to SASS

.gitignore

@@ -0,0 +1,2 @@
+/res/css/.sass-cache
+/res/css/*.map

res/css/main.css

@@ -1,21 +1,23 @@
 body {
-    font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   background: #f4f4f4;
-    margin: 0px;
+  margin: 0px; }
-}
+
 .actionbar {
   width: 100%;
   height: 60px;
   position: fixed;
-    background: #03A9F4;
+  background: #03a9f4;
   top: 0px;
   left: 0px;
   padding-left: 340px;
   color: #fff;
   font-size: 25px;
   line-height: 60px;
-    box-shadow: 4px 4px 4px 0px #999;
+  -webkit-box-shadow: 4px 4px 4px 0px #999;
-}
+  -moz-box-shadow: 4px 4px 4px 0px #999;
+  -ms-box-shadow: 4px 4px 4px 0px #999;
+  box-shadow: 4px 4px 4px 0px #999; }
 
 .drawer {
   width: 320px;
@@ -23,83 +25,74 @@ body{
   left: 0px;
   position: absolute;
   height: 100%;
-    background: #FFF;
+  background: #fff;
   border-right-width: 1px;
   border-right-color: #cecece;
-    border-right-style: solid;
+  border-right-style: solid; }
-}
 
 .drawerimg {
-    width: 100%;   
+  width: 100%; }
-}
 
 .draweritem {
   height: 72px;
   line-height: 72px;
   font-size: 18px;
-    padding-left: 16px;
+  padding-left: 16px; }
-}
 
 .draweritem:hover {
-    background: #e0e0e0;   
+  background: #e0e0e0; }
-}
 
-.drawerdivider{
+.drawerdivider, .carddivider {
   border-top-color: #cecece;
   border-top-width: 1px;
-    border-top-style: solid;
+  border-top-style: solid; }
-}
 
 .main {
   width: calc(100% - 320px);
   height: 100%;
   margin-left: 320px;
-    margin-top: 60px;
+  margin-top: 60px; }
-}
 
 .card {
   width: calc(50% - 36px);
   background: #fff;
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  -ms-border-radius: 1px;
   border-radius: 1px;
+  -webkit-box-shadow: 0px 0px 2px 2px #cecece;
+  -moz-box-shadow: 0px 0px 2px 2px #cecece;
+  -ms-box-shadow: 0px 0px 2px 2px #cecece;
   box-shadow: 0px 0px 2px 2px #cecece;
   display: inline-block;
   margin: 16px;
-    float: left;
+  float: left; }
-}
 
 .input {
   width: 100%;
   resize: none;
   border: 0px;
   height: 100px;
-    font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-size: 16px;
-    padding: 20px;
+  padding: 20px; }
-}
 
 .carddivider {
-    width: 100%;
+  width: 100%; }
-    border-top-color: #cecece;
-    border-top-width: 1px;
-    border-top-style: solid;
-}
 
 .cardtext {
-    margin: 20px;   
+  padding: 20px; }
-}
 
 .cardbuttons {
   float: right;
-    padding: 20px;
+  padding: 20px; }
-}
 
 .cardbutton {
   min-width: 64px;
   margin-left: 8px;
-    color: #000000;
+  padding: 5px; }
-    padding: 5px;
-}
 
 .cardbutton:hover {
-    background: #e0e0e0;   
+  background: #e0e0e0; }
-}
+
+/*# sourceMappingURL=main.css.map */

res/css/main.sass

@@ -0,0 +1,112 @@
+$font-stack: 'Roboto', sans-serif
+$body-color: #f4f4f4
+$primary-color: #03a9f4
+$drawer-width: 320px
+$actionbar-height: 60px
+$actionbar-shadow: #999
+$divider-color: #cecece
+$drawer-item-height: 72px
+$drawer-item-font-size: 18px
+$hovered-element-color: #e0e0e0
+$card-padding: 20px
+
+=border-radius($radius)
+    -webkit-border-radius: $radius
+    -moz-border-radius: $radius
+    -ms-border-radius: $radius
+    border-radius: $radius
+
+=box-shadow($horizontal, $vertical, $blur, $spread, $color)
+    -webkit-box-shadow: $horizontal $vertical $blur $spread $color
+    -moz-box-shadow: $horizontal $vertical $blur $spread $color
+    -ms-box-shadow: $horizontal $vertical $blur $spread $color
+    box-shadow: $horizontal $vertical $blur $spread $color
+
+body
+    font-family: $font-stack
+    background: $body-color
+    margin: 0px
+
+.actionbar
+    width: 100%
+    height: $actionbar-height
+    position: fixed
+    background: $primary-color
+    top: 0px
+    left: 0px
+    padding-left: $drawer-width + 20
+    color: #fff
+    font-size: 25px
+    line-height: $actionbar-height
+    +box-shadow(4px,4px,4px,0px,$actionbar-shadow)
+
+.drawer
+    width: $drawer-width
+    top: 0px
+    left: 0px
+    position: absolute
+    height: 100%
+    background: #fff
+    border-right-width: 1px
+    border-right-color: $divider-color
+    border-right-style: solid
+
+.drawerimg
+    width: 100%
+
+.draweritem
+    height: $drawer-item-height
+    line-height: $drawer-item-height
+    font-size: $drawer-item-font-size
+    padding-left: 16px
+
+.draweritem:hover
+    background: $hovered-element-color
+
+.drawerdivider
+    border-top-color: $divider-color
+    border-top-width: 1px
+    border-top-style: solid
+
+.main
+    width: calc(100% - 320px)
+    height: 100%
+    margin-left: $drawer-width
+    margin-top: $actionbar-height
+
+.card
+    width: calc(50% - 36px)
+    background: #fff
+    +border-radius(1px)
+    +box-shadow(0px,0px,2px,2px,$divider-color)
+    display: inline-block
+    margin: 16px
+    float: left
+
+.input
+    width: 100%
+    resize: none
+    border: 0px
+    height: 100px
+    font-family: $font-stack
+    font-size: 16px
+    padding: $card-padding
+
+.carddivider
+    @extend .drawerdivider
+    width: 100%
+
+.cardtext
+    padding: $card-padding
+
+.cardbuttons
+    float: right
+    padding: $card-padding
+
+.cardbutton
+    min-width: 64px
+    margin-left: 8px
+    padding: 5px
+
+.cardbutton:hover
+    background: $hovered-element-color