Reorganize stylesheets and global styles

Simplifies the grunt watch task for sass. Renames sass partials with
leading underscores. Flattens stylesheet directory. The only remaining
raw css file is options.css.

Move globally-relevant styles to _global. Shrink overall font size.

Gruntfile.js

@@ -134,7 +134,7 @@ module.exports = function(grunt) {
         tasks: ['jshint']
       },
       sass: {
-        files: ['./stylesheets/**/!(manifest.css)'],
+        files: ['./stylesheets/*.scss'],
         tasks: ['sass']
       }
     },

stylesheets/_conversation.scss

@@ -1,15 +1,3 @@
-@font-face {
-  font-family: 'Roboto';
-  src: url('/fonts/Roboto-Regular.ttf') format('truetype');
-}
-
-body, input {
-  font-family: $roboto;
-}
-
-body {
-  margin: 0;
-}
 
 .group-update {
   font-size: smaller;
@@ -21,15 +9,6 @@ body {
 }
 
 .title-bar {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 1;
-  height: 36px;
-  line-height: 24px;
-  background: #f2f2f2;
-  box-shadow: 0 -4px 3px 4px rgba(darken($blue, 30%), 0.8);
-
   button {
     height: 36px;
     line-height: 36px;
@@ -39,7 +18,6 @@ body {
     outline: 0;
     color: white;
   }
-
 }
 
 .menu {
@@ -91,7 +69,6 @@ button {
   margin: 36px + 16px 0;
   padding: 0;
   list-style: none;
-  font-size: 16px;
   font-weight: 300;
 
   li {
@@ -307,4 +284,3 @@ button {
       z-index: 5;
   }
 }
-

stylesheets/_global.scss

@@ -0,0 +1,23 @@
+* {
+  box-sizing: border-box;
+  max-height: 100%;
+}
+
+body {
+  height: 100%;
+  width: 100%;
+  margin: $header-height 0 0;
+  font-family: $roboto;
+  font-size: 14px;
+}
+
+#header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+  height: $header-height;
+  line-height: 24px;
+  background: #f2f2f2;
+  box-shadow: 0 -4px 3px 4px rgba(darken($header-color, 30%), 0.8);
+}

stylesheets/_variables.scss

@@ -5,4 +5,11 @@ $grey_l: #f3f3f3;
 $grey: #616161;
 $grey_d: #454545;
 
-$roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif
+@font-face {
+  font-family: 'Roboto';
+  src: url('/fonts/Roboto-Regular.ttf') format('truetype');
+}
+$roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+$header-height: 36px;
+$header-color: #f2f2f2;

stylesheets/manifest.css

@@ -1,4 +1,28 @@
 @charset "UTF-8";
+@font-face {
+  font-family: 'Roboto';
+  src: url("/fonts/Roboto-Regular.ttf") format("truetype"); }
+* {
+  box-sizing: border-box;
+  max-height: 100%; }
+
+body {
+  height: 100%;
+  width: 100%;
+  margin: 36px 0 0;
+  font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
+  font-size: 14px; }
+
+#header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+  height: 36px;
+  line-height: 24px;
+  background: #f2f2f2;
+  box-shadow: 0 -4px 3px 4px rgba(165, 165, 165, 0.8); }
+
 .gutter {
   margin-top: 36px; }
 
@@ -119,15 +143,6 @@ input.new-message {
   .settings-open .settings {
     display: block; }
 
-@font-face {
-  font-family: 'Roboto';
-  src: url("/fonts/Roboto-Regular.ttf") format("truetype"); }
-body, input {
-  font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; }
-
-body {
-  margin: 0; }
-
 .group-update {
   font-size: smaller; }
 
@@ -135,23 +150,14 @@ body {
   font-size: smaller;
   opacity: 0.8; }
 
-.title-bar {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 1;
+.title-bar button {
   height: 36px;
-  line-height: 24px;
-  background: #f2f2f2;
-  box-shadow: 0 -4px 3px 4px rgba(12, 65, 108, 0.8); }
-  .title-bar button {
-    height: 36px;
-    line-height: 36px;
-    margin-right: 8px;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    color: white; }
+  line-height: 36px;
+  margin-right: 8px;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  color: white; }
 
 .menu {
   position: relative;
@@ -191,7 +197,6 @@ button {
   margin: 52px 0;
   padding: 0;
   list-style: none;
-  font-size: 16px;
   font-weight: 300; }
   .message-list li {
     margin: 0 8px 16px; }

stylesheets/manifest.scss

@@ -4,10 +4,11 @@
 
 // Global Settings, Variables, and Mixins
   @import 'variables';
+  @import 'global';
 
 // Build the main view
   @import 'index';
-  @import 'view/conversation';
+  @import 'conversation';
 
 // Not sure where something goes, or
 // implementing a known CSS hack? Add it