From ec01d33b50dd2ecf607b845ad1c87f5aea14058a Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Thu, 29 Jan 2015 18:53:49 -1000
Subject: [PATCH] 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                              |  2 +-
 stylesheets/{view => }/_conversation.scss | 24 ----------
 stylesheets/_global.scss                  | 23 +++++++++
 stylesheets/{index.scss => _index.scss}   |  0
 stylesheets/_variables.scss               |  9 +++-
 stylesheets/manifest.css                  | 57 ++++++++++++-----------
 stylesheets/manifest.scss                 |  3 +-
 7 files changed, 65 insertions(+), 53 deletions(-)
 rename stylesheets/{view => }/_conversation.scss (92%)
 create mode 100644 stylesheets/_global.scss
 rename stylesheets/{index.scss => _index.scss} (100%)

diff --git a/Gruntfile.js b/Gruntfile.js
index e1db9895b..290bb44d5 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -134,7 +134,7 @@ module.exports = function(grunt) {
         tasks: ['jshint']
       },
       sass: {
-        files: ['./stylesheets/**/!(manifest.css)'],
+        files: ['./stylesheets/*.scss'],
         tasks: ['sass']
       }
     },
diff --git a/stylesheets/view/_conversation.scss b/stylesheets/_conversation.scss
similarity index 92%
rename from stylesheets/view/_conversation.scss
rename to stylesheets/_conversation.scss
index 8611a0f94..7d4751a6e 100644
--- a/stylesheets/view/_conversation.scss
+++ b/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;
   }
 }
-
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
new file mode 100644
index 000000000..7bfb08b6e
--- /dev/null
+++ b/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);
+}
diff --git a/stylesheets/index.scss b/stylesheets/_index.scss
similarity index 100%
rename from stylesheets/index.scss
rename to stylesheets/_index.scss
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 325dcd2e0..ac9600059 100644
--- a/stylesheets/_variables.scss
+++ b/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;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 9085898ea..00d30e384 100644
--- a/stylesheets/manifest.css
+++ b/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; }
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index c9cea992f..23f3a306f 100644
--- a/stylesheets/manifest.scss
+++ b/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