split apart reset style and clean whitespace

hypothesis/sass/app.scss

-@import 'common';
 @import 'compass';
 
+@import 'common';
+
 /* Annotator styles */
 
 .annotator-adder {
-	background-image: url(../annotator/img/annotator-icon-sprite.png);
-	background-repeat: no-repeat;
-	margin-top: -48px;
-	margin-left: -24px;
-	width: 48px;
-	height: 48px;
-	background-position: left top;
-	position: absolute;
+  background-image: url(../annotator/img/annotator-icon-sprite.png);
+  background-repeat: no-repeat;
+  margin-top: -48px;
+  margin-left: -24px;
+  width: 48px;
+  height: 48px;
+  background-position: left top;
+  position: absolute;
   z-index: 999;
 }
 
 .annotator-adder:hover {
-	background-position: center top;
+  background-position: center top;
 }
 
 .annotator-adder:active {
-	background-position: center right;
+  background-position: center right;
 }
 
 .annotator-adder button {
-	display: block;
-	width: 36px;
-	height: 41px;
-	margin: 0 auto;
-	border: none;
-	background: none;
-	text-indent: -999em;
-	cursor: pointer;
+  display: block;
+  width: 36px;
+  height: 41px;
+  margin: 0 auto;
+  border: none;
+  background: none;
+  text-indent: -999em;
+  cursor: pointer;
 }
 
 .annotator-hide {
-	display: none;
-	visibility: hidden;
+  display: none;
+  visibility: hidden;
 }
 
 .annotator-hl {
-	background: rgba(255, 255, 10, 0.3);
+  background: rgba(255, 255, 10, 0.3);
 }
 
 .annotator-wrapper {
-	position: relative;
+  position: relative;
 }
 
 /*
@@ -88,8 +89,8 @@ html {
   background: hsla(0, 0, 90%, 0.4);
   position: absolute;
   width: 10px;
-  left: -10px;
-  outline: solid $gray-lighter thin;
+  left: -11px;
+  outline: solid #999 thin;
 }
 
 // body
@@ -188,7 +189,7 @@ html {
 // misc
 .hyp-provider {
   @extend .small;
-  color: $gray-light;
+  color: #999;
 }
 
 .hyp-tag {
@@ -205,9 +206,9 @@ html {
 }
 
 /*
-	Mobile layout
-	240–479 px
-	Zoomed out below 320 px
+    Mobile layout
+    240–479 px
+    Zoomed out below 320 px
 */
 
 @media screen and (min-width: 15em) {
@@ -221,9 +222,9 @@ html {
 }
 
 /*
-	Wide mobile layout
-	480-767 px
-	Zoomed in above 480 px
+    Wide mobile layout
+    480-767 px
+    Zoomed in above 480 px
 */
 
 @media screen and (min-width: 30em) {

hypothesis/sass/common.scss

 @import 'compass/css3';
-@import 'compass/reset';
 
 // Grays
 $black:                 #000;
@@ -47,78 +46,10 @@ $gutter: 24;
   width: ($cols * ($column + $gutter) - $gutter) / $em;
 }
 
-/*
-  Consistency fixes
-  adopted from http://necolas.github.com/normalize.css/
-  */
-
-* { @include box-sizing(border-box); }
-
-html {
-  height: 100%;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-}
-
-body { min-height: 100%; font-size: 100%; }
-
-sub, sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-}
-
-sup {top: -.5em;}
-sub {bottom: -.25em;}
-
-pre {
-  white-space: pre;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-b, strong {font-weight: bold;}
-abbr[title] {border-bottom: 1px dotted;}
-
-a img, img {
-  -ms-interpolation-mode: bicubic;
-}
-
-input, textarea, button, select {
-  @include reset-font;
-  line-height: normal;
-  margin: 0;
-}
-
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  cursor: pointer;
-  -webkit-appearance: button;
-}
-
-textarea {overflow: auto;}
-
-img::selection,
-img::-moz-selection {
-  background: transparent;
-}
-
-body {
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
-
 /*
   Type presets
   */
 
-body {
-  font-size: $font-size / $em;
-  font-smoothing: antialiased;
-  line-height: $line-height / $em;
-}
-
 @mixin small {
   font-size: 13/$em;
   line-height: 14/13*1em;

hypothesis/sass/reset.scss

+@import "compass/reset";
+
+/*
+  Consistency fixes
+  adopted from http://necolas.github.com/normalize.css/
+  */
+
+* { @include box-sizing(border-box); }
+
+html {
+  height: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+body { min-height: 100%; font-size: 100%; }
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+}
+
+sup {top: -.5em;}
+sub {bottom: -.25em;}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+b, strong {font-weight: bold;}
+abbr[title] {border-bottom: 1px dotted;}
+
+a img, img {
+  -ms-interpolation-mode: bicubic;
+}
+
+input, textarea, button, select {
+  @include reset-font;
+  line-height: normal;
+  margin: 0;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button;
+}
+
+textarea {overflow: auto;}
+
+img::selection,
+img::-moz-selection {
+  background: transparent;
+}

hypothesis/sass/site.scss

@@ -3,7 +3,8 @@
 @import "compass/css3/user-interface";
 @import "compass/utilities/color";
 
-@import "app";
+@import "reset";
+@import "common";
 
 a {
   color: $link-color;
@@ -25,6 +26,10 @@ body {
   background-image: url('../images/noise_1.png');
   color: $gray;
   font-family: "Georgia", "Gentium Basic", "Times New Roman", serif;
+  font-size: $font-size / $em;
+  font-smoothing: antialiased;
+  line-height: $line-height / $em;
+
 }
 
 h1, h2, h3, h4 {
@@ -172,9 +177,9 @@ span.error {
 }
 
 /*
-	Mobile layout
-	240–479 px
-	Zoomed out below 320 px
+    Mobile layout
+    240–479 px
+    Zoomed out below 320 px
 */
 
 @media screen and (min-width: 15em) {
@@ -188,9 +193,9 @@ span.error {
 }
 
 /*
-	Wide mobile layout
-	480-767 px
-	Zoomed in above 480 px
+    Wide mobile layout
+    480-767 px
+    Zoomed in above 480 px
 */
 
 @media screen and (min-width: 30em) {
@@ -226,9 +231,9 @@ span.error {
 }
 
 /*
-	Tablet layout
-	600-911 px
-	Zoomed in above 600 px
+    Tablet layout
+    600-911 px
+    Zoomed in above 600 px
 */
 
 @media screen and (min-width: 37.5em) {
@@ -238,9 +243,9 @@ span.error {
 }
 
 /*
-	Widescreen layout
-	912-1887 px
-	Zoomed in above 912 px
+    Widescreen layout
+    912-1887 px
+    Zoomed in above 912 px
 */
 
 @media screen and (min-width: 57em) {
@@ -266,9 +271,9 @@ span.error {
 }
 
 /*
-	Huge-screen layout
-	1888-2520 px
-	Zoomed in above 1920 px
+    Huge-screen layout
+    1888-2520 px
+    Zoomed in above 1920 px
 */
 
 @media screen and (min-width: 118em) {