Update docs for text-align.

Author: mrmrs

docs/typography/text-align/index.html

@@ -42,7 +42,7 @@
 </header>
 
     <main class="">
-      <article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
+      <article class="bg-near-white bt b--black-10 pa3 ph5-ns">
         <h4 class="f4 mv0 fw6 dib mr4">text-align</h4>
         <span class="f4 b dib pl0 ml0 mr4">v2.0.3</span>
         <span class="f4 b dib pl0 ml0 mr4">146 B</span>
@@ -64,22 +64,29 @@ <h4 class="f4 mv0 fw6 dib mr4">text-align</h4>
               <dd class="db pl0 ml0 f4 f2-ns b">1</dd>
             </dl>
         </div>
+        <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.
+        </p>
+        <p class="measure f5 f4-ns lh-copy">
+          These are simple utilities for setting text-alignment to the left, right, or center of an element.
+        </p>
       </article>
 <div class="ph3 ph5-ns pt4 pb5">
-  <h2 class="f3 bold">Examples</h2>
-  <h3 class="f5 book pt4 caps">Text Align Left</h3>
+  <h2 class="f3 b">Examples</h2>
+  <h3 class="f5 fw4 pt4 caps">Text Align Left</h3>
   <p class="measure bg-black-10">
     Aligned Left
   </p>
-  <h3 class="f5 book pt4 caps">Text Align Right</h3>
+  <h3 class="f5 fw4 pt4 caps">Text Align Right</h3>
   <p class="tr measure bg-black-10">
     Aligned Right
   </p>
-  <h3 class="f5 book pt4 caps">Text Align Center</h3>
+  <h3 class="f5 fw4 pt4 caps">Text Align Center</h3>
   <p class="tc measure bg-black-10">
     Aligned to the center
   </p>
-  <h3 class="f5 book pt4 caps">Justified Text</h3>
+  <h3 class="f5 fw4 pt4 caps">Justified Text</h3>
   <p class="tj measure bg-black-10">
     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

src/templates/docs/text-align/index.html

@@ -15,7 +15,7 @@
 
     <%= siteHeader %>
     <main class="">
-      <article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
+      <article class="bg-near-white bt b--black-10 pa3 ph5-ns">
         <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
         <span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
         <span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
@@ -37,22 +37,29 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
               <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
             </dl>
         </div>
+        <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.
+        </p>
+        <p class="measure f5 f4-ns lh-copy">
+          These are simple utilities for setting text-alignment to the left, right, or center of an element.
+        </p>
       </article>
 <div class="ph3 ph5-ns pt4 pb5">
-  <h2 class="f3 bold">Examples</h2>
-  <h3 class="f5 book pt4 caps">Text Align Left</h3>
+  <h2 class="f3 b">Examples</h2>
+  <h3 class="f5 fw4 pt4 caps">Text Align Left</h3>
   <p class="measure bg-black-10">
     Aligned Left
   </p>
-  <h3 class="f5 book pt4 caps">Text Align Right</h3>
+  <h3 class="f5 fw4 pt4 caps">Text Align Right</h3>
   <p class="tr measure bg-black-10">
     Aligned Right
   </p>
-  <h3 class="f5 book pt4 caps">Text Align Center</h3>
+  <h3 class="f5 fw4 pt4 caps">Text Align Center</h3>
   <p class="tc measure bg-black-10">
     Aligned to the center
   </p>
-  <h3 class="f5 book pt4 caps">Justified Text</h3>
+  <h3 class="f5 fw4 pt4 caps">Justified Text</h3>
   <p class="tj measure bg-black-10">
     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