Update docs

Author: mrmrs

docs/typography/scale/index.html

@@ -72,25 +72,25 @@
       <article class="ph3 ph5-ns">
         <div class="cf mw9 center">
           <h3 class="w-100 fl f6 ttu tracked mt0">Type Scale</h3>
-          <div class="fl w-100 w-50-ns">
-            <p class="measure f5 f4-ns lh-copy">
+          <div class="fl w-100 w-two-thirds-l pr3-ns">
+            <p class="fl w-100 measure f5 f4-ns lh-copy mb3">
               Often times, websites devote a non-trivial amount of css to setting
               font-size. They declare an unnecessary amount of different
               font-sizes that upon inspection, don't come close to resembling a sane type scale.
             </p>
-            <p class="measure f6 f5-ns lh-copy">
+            <p class="fl w-100 w-50-ns v-top f5 f6-ns lh-copy pr2-ns">
               To create and design an easily readable interface, you don't need
-              more than 40 font-sizes. A simple ratio-based scale with 8 options should suffice.
-              Using the class extension namespaces you
-              can set the font-size for any particular breakpoint that you desire.
+              more than 40 font-sizes. A simple ratio-based scale with 8
+              options should suffice.  Using the class extension namespaces you
+              can set the font-size for any particular breakpoint that you
+              desire.
             </p>
-            <p class="measure f6 f5-ns lh-copy">
+            <p class="fl w-100 w-50-ns measure measure-narrow-ns v-top f5 f6-ns lh-copy pl2-ns">
               Don't spend time constantly overriding font-sizes in your css.
               If you don't like a default font-size for an element, use the utilities to quickly make the text larger or smaller until it looks just right.
             </p>
           </div>
-          <div class="fl pl4-m pl5-l w-100 w-50-ns v-top">
-            <h4 class="f6 fw6 black-70 lh-title mb0 mt3 pt2">Demo on how to adjust font-size using Tachyons</h4>
+          <div class="fl w-100 w-third-l v-top">
             <div class="ba b--light-gray bg-near-white pa3 mt3-ns">
             <div class="aspect-ratio aspect-ratio--8x5 ba b--black-10">
               <iframe class="aspect-ratio--object" src="https://player.vimeo.com/video/183819916" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
@@ -99,14 +99,15 @@ <h4 class="f6 fw6 black-70 lh-title mb0 mt3 pt2">Demo on how to adjust font-size
           </div>
         </div>
       </article>
-      <div class="ph3 ph5-ns bt bn-ns b--black-10 pt4 mb5-ns mv4 mt0-ns pt0-ns pb5">
-        <blockquote class="f5 f4-m f2-l black-70 lh-copy mh0 pv4 bb bt b--black-20">
-          <p class="baskerville fw1 measure center">
-            "The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection... In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years... This is the typographic equivalent of the diatonic scale."
-          </p>
-          <p class="dark-gray f5 f4-m f2-l center measure"><span class="f6">Robert Bringhurst - <b>The Elements of Typographic Style</b></span></p>
-        </blockquote>
-        <h2 class="f5 b mb4">Font sizes</h2>
+      <div class="ph3 ph5-ns mt0-ns mb5-ns pt0-ns pb5">
+        <div class="mw9 center">
+          <blockquote class="f5 f4-m f2-l black-70 lh-copy mh0 pv4 ph3 bt bb bw1 b--black-05 mv4 mv5-ns db">
+            <p class="baskerville fw1 measure center">
+              "The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection... In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years... This is the typographic equivalent of the diatonic scale."
+            </p>
+            <p class="dark-gray f5 f4-m f2-l center measure"><span class="f6">Robert Bringhurst - <b>The Elements of Typographic Style</b></span></p>
+          </blockquote>
+          <h2 class="f5 b mv4 mt5-ns">Font sizes</h2>
         <div class="w-100 overflow-x-auto">
           <table>
             <tr>
@@ -197,8 +198,12 @@ <h4 class="f6 fw6">Reference</h4>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" class="link fw6 blue dim">MDN - Font-size</a>
         </div>
       </div>
+    </div>
       <section class="bg-white black-70 pv4 mb4 bt bb b--black-40 overflow-container">
-        <header class="ph3 ph5-ns pt4">
+        <div class="ph3 ph5-ns pt4">
+          <div class="mw9 center">
+        <header>
+
         <h4 class="f4 mv0 fw6 dib mr4">tachyons-type-scale</h4>
         <span class="f4 b dib pl0 ml0 mr4">v6.0.1</span>
         <span class="f4 b dib pl0 ml0 mr4">242 B</span>
@@ -223,7 +228,7 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-type-scale</h4>
         <h4 class="f6">Source code</h4>
         <kbd>src/_type-scale.css</kbd>
         </header>
-<pre class="ph3 ph5-ns">
+<pre>
 <code class="code" style="font-size: .75rem;">
 /*
 
@@ -318,6 +323,8 @@ <h4 class="f6">Source code</h4>
 
 </code>
 </pre>
+</div>
+</div>
       </section>
       <div class="ph3 ph5-ns pb5">
     <article  class="pb3">