Update docs

Author: mrmrs

docs/typography/font-family/index.html

@@ -5,7 +5,7 @@
     <title>
        tachyons-font-family / Typography / Docs / TACHYONS
     </title>
-    <meta name="description" content="">
+    <meta name="description" content="Documentation about the system fonts available for use with Tachyons">
     <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 <meta name="author" content="@mrmrs">
@@ -71,6 +71,7 @@
         </div>
       </header>
       <article class="pa3 ph5-ns">
+        <h3 class="f6 ttu tracked mt0">Font Family</h3>
         <p class="measure f4 f3-ns lh-copy">
           There are several pre-defined classes for setting the typeface of a page or element. It is suggested
           that you customize or extend this module to suit your own needs. As tachyons is a toolkit for designing
@@ -85,7 +86,7 @@
         </p>
       </article>
       <div class="ph3 ph5-ns pt4 pb5">
-        <h2 class="f3 bold">Examples</h2>
+        <h3 class="f5 mb4 pb2 bb">Examples</h3>
         <h3 class="f5 fw4 sans-serif pt4">Default System Sans Serif</h3>
         <p class="system-sans-serif lh-copy measure">
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

docs/typography/font-style/index.html

@@ -4,7 +4,7 @@
     <title>
       Font Style / Typography / Docs / TACHYONS
     </title>
-    <meta name="description" content="css">
+    <meta name="description" content="Documentation for setting font style with the Tachyons css framework.">
     <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 <meta name="author" content="@mrmrs">
@@ -70,6 +70,7 @@
         </div>
       </header>
       <article class="pa3 ph5-ns">
+        <h3 class="f6 ttu tracked mt0">Measure</h3>
         <p class="measure f4 f3-ns lh-copy">
           Single purpose classes to set the font-style of any element at any breakpoint.
         </p>
@@ -79,7 +80,7 @@
         </p>
       </article>
       <div class="ph3 ph5-ns pt4 pb5">
-        <h2 class="f3 bold">Examples</h2>
+        <h3 class="f5 mb4 pb2 bb">Examples</h3>
         <code class="f6">
           &lt;p class="i"&gt;&lt;/p&gt;
         </code>

docs/typography/font-weight/index.html

@@ -70,6 +70,7 @@
         </div>
       </header>
       <article class="pa3 ph5-ns">
+        <h3 class="f6 ttu tracked mt0">Font Weight</h3>
         <p class="measure f4 f3-ns lh-copy">
           Single purpose classes to set the font-weight of any element at any breakpoint.
         </p>
@@ -83,14 +84,13 @@
         </p>
       </article>
       <div class="ph3 ph5-ns pt4 pb5">
-        <h2 class="f3 bold">Examples</h2>
-
-        <h3 class="f5 book sans-serif pt4 caps black-100">String Values</h3>
+        <h3 class="f5 mb4 pb2 bb">Examples</h3>
+        <h3 class="f5 fw4 pt4">String Values</h3>
         <div class="cf">
           <div class="fl f5 f2-m f1-l normal v-mid tc"><span class="db bg-washed-blue pv3 ba b--white ph4">Aa <span class="db f6 fw4">normal</span></span></div>
           <div class="fl f5 f2-m f1-l b v-mid tc"><span class="db bg-washed-blue pv3 ba b--white ph4">Aa <span class="db f6 fw4">b</span></span></div>
         </div>
-        <h3 class="f5 book sans-serif pt4 caps black-100">Literal Number Values</h3>
+        <h3 class="f5 fw4 pt4">Literal Number Values</h3>
         <div class="dt w-100" style="table-layout: fixed;">
           <div class="dtc f5 f2-m f1-l fw1 v-mid tc"><span class="db bg-washed-blue pv3 ba b--white">Aa <span class="db f6 fw4">100</span></span></div>
           <div class="dtc f5 f2-m f1-l fw2 v-mid tc"><span class="db bg-washed-blue pv3 ba b--white">Aa <span class="db f6 fw4">200</span></span></div>

docs/typography/line-height/index.html

@@ -132,7 +132,7 @@ <h4 class="f6 fw6">Reference</h4>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height" class="link fw6 blue dim">MDN - Line Height</a>
         </div>
       </div>
-      <section class="bg-white bt bb b--black-40 black-70 pv4 mb4 overflow-container">
+      <section class="bg-white bt bb b--black-40 black-70 pv4 mb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <h4 class="f4 mv0 fw6 dib mr4">tachyons-line-height</h4>
           <span class="f4 b dib pl0 ml0 mr4">v3.0.3</span>

docs/typography/text-align/index.html

@@ -70,7 +70,7 @@
         </div>
       </header>
       <article class="pa3 ph5-ns">
-      <article class="bt b--black-10 pa3 ph5-ns">
+        <h3 class="f6 ttu tracked mt0">Text Align</h3>
         <p class="measure f4 f3-ns lh-copy">
           Designing for readability across infinite screen-sizes
           often times requires setting elements to have different text-alignments across breakpoints.
@@ -80,16 +80,16 @@
         </p>
       </article>
       <div class="ph3 ph5-ns pt4 pb5">
-        <h2 class="f3 b">Examples</h2>
-        <h3 class="f5 fw4 pt4 caps">Text Align Left</h3>
-        <p class="measure bg-black-10">
+        <h3 class="f5 mb4 pb2 bb">Examples</h3>
+        <code class="f6">&lt;p class="tl"&gt;Aligned Left&lt;/p&gt;</code>
+        <p class="tl measure bg-black-10">
           Aligned Left
         </p>
-        <h3 class="f5 fw4 pt4 caps">Text Align Right</h3>
+        <code class="f6">&lt;p class="tr"&gt;Aligned Right&lt;/p&gt;</code>
         <p class="tr measure bg-black-10">
           Aligned Right
         </p>
-        <h3 class="f5 fw4 pt4 caps">Text Align Center</h3>
+        <code class="f6">&lt;p class="tc"&gt;Aligned Center&lt;/p&gt;</code>
         <p class="tc measure bg-black-10">
           Aligned to the center
         </p>
@@ -108,7 +108,7 @@ <h4 class="f6 fw6">Reference</h4>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align" class="link fw6 blue dim">MDN - Text Align</a>
         </div>
       </div>
-      <section class="bg-white bt bb b--black-40 black-70 pt4 pb5 overflow-container">
+      <section class="bg-white bt bb b--black-40 black-70 pv4 mb5 overflow-container">
       <header class="ph3 ph5-ns pt4">
         <h4 class="f4 mv0 fw6 dib mr4">tachyons-text-align</h4>
         <span class="f4 b dib pl0 ml0 mr4">v3.0.1</span>

docs/typography/text-decoration/index.html

@@ -71,23 +71,24 @@
         </div>
       </header>
       <article class="pa3 ph5-ns">
+        <h3 class="f6 ttu tracked mt0">Text Decoration</h3>
         <p class="measure f4 f3-ns lh-copy">
           Utilities for decorating text with underlines, or removing
           the default underlines browsers put on links.
         </p>
       </article>
       <div class="ph3 ph5-ns pt4 pb5">
-        <h2 class="f3 b">Examples</h2>
-        <h3 class="f5 fw4 pt4 ttu tracked">Text Decoration None</h3>
+        <h3 class="f5 mb4 pb2 bb">Examples</h3>
+        <h3 class="f5 fw4 pt4 ">Text Decoration None</h3>
         <a href="#" class="no-underline">Text Decoration None on a Link</a>
-        <h3 class="f5 fw4 pt4 ttu tracked">Text Decoration Underline</h3>
+        <h3 class="f5 fw4 pt4 ">Text Decoration Underline</h3>
         <p class="underline measure">
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
       tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
       vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
       no sea takimata sanctus est Lorem ipsum dolor sit amet.
       </p>
-        <h3 class="f5 fw4 pt4 ttu tracked">Text Decoration Strikethrough</h3>
+        <h3 class="f5 fw4 pt4 ">Text Decoration Strikethrough</h3>
         <p class="strike">Lorem ipsum dolor sit amet</p>
         <div class="mt5 cf">
           <div class="dib mr4">

docs/typography/vertical-align/index.html

@@ -4,7 +4,7 @@
     <title>
       Vertical Align / Typography / Docs / TACHYONS
     </title>
-    <meta name="description" content="css">
+    <meta name="description" content="Documentation for setting vertical align with the Tachyons css framework.">
     <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 <meta name="author" content="@mrmrs">
@@ -24,8 +24,7 @@
 </style>
 
   </head>
-  <body class="w-100 sans-serif">
-
+  <body class="w-100">
     <header class="w-100 pa3 ph5-ns bg-white">
   <div class="dt mw9 center w-100">
     <div class="dtc v-mid tl w-50">
@@ -71,6 +70,7 @@
         </div>
       </header>
       <article class="pa3 ph5-ns">
+        <h3 class="f6 ttu tracked mt0">Vertical Align</h3>
         <p class="measure f4 f3-ns lh-copy">
           Use vertical align to set typography just right. Vertical align
           works on text and on table cells.
@@ -81,7 +81,7 @@
         </p>
       </article>
       <div class="ph3 ph5-ns pt4 pb5">
-        <h2 class="f4 bold">Examples</h2>
+        <h3 class="f5 mb4 pb2 bb">Examples</h3>
         <h3 class="f5 book sans-serif pt4 caps">Inline Alignment</h3>
         <p class="f4 measure">
           Lorem ipsum dolor sit amet, consetetur sadipscing

docs/typography/white-space/index.html

@@ -4,7 +4,7 @@
     <title>
       White Space / Typography / Docs / TACHYONS
     </title>
-    <meta name="description" content="css">
+    <meta name="description" content="Documentation for adjusting white-space with the Tachyons css framework.">
     <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 <meta name="author" content="@mrmrs">
@@ -24,8 +24,7 @@
 </style>
 
   </head>
-  <body class="w-100 sans-serif">
-
+  <body class="w-100">
     <header class="w-100 pa3 ph5-ns bg-white">
   <div class="dt mw9 center w-100">
     <div class="dtc v-mid tl w-50">
@@ -71,8 +70,10 @@
         </div>
       </header>
       <article class="pa3 ph5-ns">
+        <h3 class="f6 ttu tracked mt0">White Space</h3>
         <p class="measure f4 f3-ns lh-copy">
-          White space in css is used to control how whitespace is rendered. Creative, I know.
+          White space in css is used to control how whitespace is rendered.
+          Creative, I know.
         </p>
         <p class="measure f5 f4-ns lh-copy">
           <b>Normal</b> supresses white space characters and breaks lines based on the width of the element
@@ -83,7 +84,7 @@
         </p>
       </article>
       <div class="ph3 ph5-ns pt4 pb5">
-        <h2 class="f4 bold">Examples</h2>
+        <h3 class="f5 mb4 pb2 bb">Examples</h3>
       <p class="f5 f4-ns measure lh-copy">This text is formatted the same way in the source and printed three times, with the only difference being which white-space class is attached.</p>
         <h3 class="f5 book pt4 code">.ws-normal</h3>
         <p class="ws-normal measure">