tweak line-height of h2 and h3 to not be gihugeous, updated responsive to improve tablet grid and phone styles

2 files changed, 41 insertions, 9 deletions

diff --git a/lib/responsive.less b/lib/responsive.less
index ee974d3e1..5c8e0539e 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -3,6 +3,9 @@
  * ------------------------------------------------------------- */
 
 
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
 @media (max-width: 480px) {
   // Remove width from containers
   .container {
@@ -14,10 +17,40 @@
     float: none;
     display: block;
     width: auto;
+    margin: 0;
+  }
+  // Resize modals
+  .modal {
+    width: auto;
+    margin: 0;
   }
+
+  // Remove the horizontal form styles
+  .form-horizontal .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  // Move over all input controls and content
+  .form-horizontal .controls {
+    margin-left: 0;
+  }
+  // Move the options list down to align with labels
+  .form-horizontal .control-list {
+    padding-top: 0; // has to be padding because margin collaspes
+  }
+  // Move over buttons in .form-actions to align with .controls
+  .form-horizontal .form-actions {
+    padding-left: 0;
+  }
+
 }
 
 
+// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+// --------------------------------------------------
+
 @media (min-width: 480px) and (max-width: 768px) {
   // Remove width from containers
   .container {
@@ -34,24 +67,23 @@
 }
 
 
-// TABLET TO MEDIUM DESKTOP
-// ------------------------
+// PORTRAIT TABLET TO DEFAULT DESKTOP
+// ----------------------------------
 
 @media (min-width: 768px) and (max-width: 940px) {
 
   // Reset grid variables
   @gridColumns:       16;
-  @gridColumnWidth:   28px;
+  @gridColumnWidth:   44px;
   @gridGutterWidth:   20px;
   @siteWidth:         748px;
-  @extraSpace:        (@gridGutterWidth * 2);
 
   // Bring grid mixins to recalculate widths
   .columns(@columnSpan: 1) {
     width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
   }
   .offset(@columnOffset: 1) {
-    margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
+    margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
   }
 
   // 16cols at 30px wide with 16px gutters
@@ -90,8 +122,8 @@
 }
 
 
-// LARGE DESKTOP
-// -------------
+// LARGE DESKTOP & UP
+// ------------------
 
 @media (min-width: 1170px) {
 
diff --git a/lib/type.less b/lib/type.less
index 4232a24df..7cf9e6ccd 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -38,13 +38,13 @@ h1 {
 }
 h2 {
   font-size: 24px;
-  line-height: @baseLineHeight * 2;
+  line-height: @baseLineHeight * 1.5;
   small {
     font-size: 14px;
   }
 }
 h3 {
-  line-height: @baseLineHeight * 2;
+  line-height: @baseLineHeight * 1.5;
   font-size: 18px;
   small {
     font-size: 14px;