From dfbe38ffd5381b8e511ae643ddbd1bf3907ad6b0 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 8 Feb 2014 12:31:47 -0800
Subject: [PATCH] break type into its own scss file

---
 components.html       | 14 ++++++++++++--
 dist/ratchet.css      | 44 ++++++++++++++++++++++++++++++++++---------
 lib/sass/base.scss    |  9 ---------
 lib/sass/ratchet.scss |  1 +
 4 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/components.html b/components.html
index f7264c6..722ec73 100644
--- a/components.html
+++ b/components.html
@@ -289,14 +289,24 @@ base_url: "../"
     <p class="component-description">Use headings and paragraphs to title and describe sections of your app.</p>
 
     <div class="component-example component-example-fullbleed">
-      <h1>Heading</h1>
+      <h1>h1. Heading</h1>
+      <h2>h2. Heading</h2>
+      <h3>h3. Heading</h3>
+      <h4>h4. Heading</h4>
+      <h5>h5. Heading</h5>
+      <h6>h6. Heading</h6>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco.</p>
     </div>
 
 {% highlight html %}
-<h1>Heading</h1>
+<h1>h1. Heading</h1>
+<h2>h2. Heading</h2>
+<h3>h3. Heading</h3>
+<h4>h4. Heading</h4>
+<h5>h5. Heading</h5>
+<h6>h6. Heading</h6>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco.</p>
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 2d237b6..f74f267 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -257,15 +257,6 @@ strong {
   font-weight: 500;
 }
 
-h1, h2, h3, h4, h5, h6, p {
-  margin: 10px 15px;
-  font-size: 14px;
-}
-
-p {
-  color: #777;
-}
-
 .content {
   position: fixed;
   top: 0;
@@ -302,6 +293,41 @@ p {
   float: right;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  margin: 10px 15px;
+  line-height: 1;
+}
+
+h1, .h1 {
+  font-size: 36px;
+}
+
+h2, .h2 {
+  font-size: 30px;
+}
+
+h3, .h3 {
+  font-size: 24px;
+}
+
+h4, .h4 {
+  font-size: 18px;
+}
+
+h5, .h5 {
+  font-size: 14px;
+}
+
+h6, .h6 {
+  font-size: 12px;
+}
+
+p {
+  margin: 10px 15px;
+  font-size: 14px;
+  color: #777;
+}
+
 .bar {
   position: fixed;
   right: 0;
diff --git a/lib/sass/base.scss b/lib/sass/base.scss
index 8a7c7a9..1c5e1e6 100644
--- a/lib/sass/base.scss
+++ b/lib/sass/base.scss
@@ -28,15 +28,6 @@ strong {
   font-weight: $font-weight;
 }
 
-// Typography
-h1, h2, h3, h4, h5, h6, p {
-  margin: 10px 15px;
-  font-size: 14px;
-}
-p {
-  color: #777;
-}
-
 // Wrapper to be used around all content not in .bar-title and .bar-tab
 .content {
   position: fixed;
diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss
index 1704869..7c9073d 100644
--- a/lib/sass/ratchet.scss
+++ b/lib/sass/ratchet.scss
@@ -8,6 +8,7 @@
 // Normalize & Base CSS
 @import "normalize.scss";
 @import "base.scss";
+@import "type.scss";
 
 // Components
 @import "bars.scss";