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 e1db9895be..290bb44d50 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 8611a0f94a..7d4751a6e6 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 0000000000..7bfb08b6e3
--- /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 325dcd2e0f..ac9600059e 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 9085898ea0..00d30e3843 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 c9cea992f5..23f3a306fd 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