From ab1afa5c7deb332789ff84d34aed6b6c4503b7bb Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 1 Feb 2014 15:21:36 -0800
Subject: [PATCH] adding better support for headings and paragraphs

---
 components.html          | 16 ++++++++++------
 dist/ratchet.css         | 11 +++++++++++
 docs-assets/css/docs.css |  5 ++---
 lib/sass/base.scss       | 13 ++++++++++++-
 lib/sass/docs.scss       |  5 ++---
 5 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/components.html b/components.html
index 9db77f1..73bcad4 100644
--- a/components.html
+++ b/components.html
@@ -308,6 +308,10 @@ base_url: "../"
   <li class="table-view-divider">Divider</li>
   <li class="table-view-cell">Item 3</li>
 </ul>
+<h1>Heading</h1>
+<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>
 {% endhighlight %}
 
   </article>
@@ -660,9 +664,9 @@ base_url: "../"
         </li>
       </ul>
       <div class="card">
-        <p id="item1mobile" class="segmented-control-item active">Item 1</p>
-        <p id="item2mobile" class="segmented-control-item">Item 2</p>
-        <p id="item3mobile" class="segmented-control-item">Item 3</p>
+        <span id="item1mobile" class="segmented-control-item active">Item 1</span>
+        <span id="item2mobile" class="segmented-control-item">Item 2</span>
+        <span id="item3mobile" class="segmented-control-item">Item 3</span>
       </div>
     </div>
 
@@ -679,9 +683,9 @@ base_url: "../"
   </li>
 </ul>
 <div class="card">
-  <p id="item1mobile" class="segmented-control-item active">Item 1</p>
-  <p id="item2mobile" class="segmented-control-item">Item 2</p>
-  <p id="item3mobile" class="segmented-control-item">Item 3</p>
+  <span id="item1mobile" class="segmented-control-item active">Item 1</span>
+  <span id="item2mobile" class="segmented-control-item">Item 2</span>
+  <span id="item3mobile" class="segmented-control-item">Item 3</span>
 </div>
 </div>
 {% endhighlight %}
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 55a4f0e..0d57031 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -257,6 +257,17 @@ strong {
   font-weight: 500;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  margin: 10px 15px;
+  font-size: 14px;
+}
+
+p {
+  margin: 10px 15px;
+  font-size: 14px;
+  color: #777;
+}
+
 .content {
   position: fixed;
   top: 0;
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 114c15c..5bf37b5 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -396,9 +396,8 @@ body {
   margin-right: 10px;
   margin-left: 10px;
 }
-#segmentedControllersInDevice .card p {
-  padding-right: 10px;
-  padding-left: 10px;
+#segmentedControllersInDevice .card span {
+  padding: 10px;
 }
 
 #badgesInDevice {
diff --git a/lib/sass/base.scss b/lib/sass/base.scss
index 846c335..efc249e 100644
--- a/lib/sass/base.scss
+++ b/lib/sass/base.scss
@@ -22,12 +22,23 @@ body {
 a {
   color: $primary-color;
   text-decoration: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links 
 }
 strong {
   font-weight: $font-weight;
 }
 
+// Typography
+h1,h2,h3,h4,h5,h6 {
+  margin: 10px 15px;
+  font-size: 14px;
+}
+p {
+  margin: 10px 15px;
+  font-size: 14px;
+  color: #777;
+}
+
 // Wrapper to be used around all content not in .bar-title and .bar-tab
 .content {
   position: fixed;
diff --git a/lib/sass/docs.scss b/lib/sass/docs.scss
index 74d8d4b..d3a8f24 100644
--- a/lib/sass/docs.scss
+++ b/lib/sass/docs.scss
@@ -415,9 +415,8 @@ body {
     margin-right: 10px;
     margin-left: 10px;
   }
-  .card p {
-    padding-right: 10px;
-    padding-left: 10px;
+  .card span {
+    padding: 10px;
   }
 }