Update docs

Author: mrmrs

docs/typography/scale/index.html

@@ -70,24 +70,36 @@
         </div>
       </header>
       <article class="ph3 ph5-ns">
-        <h3 class="f6 ttu tracked mt0">Type Scale</h3>
-        <p class="measure f4 f3-ns lh-copy">
-          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 f5 f4-ns lh-copy">
-          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.
-        </p>
-        <p class="measure f5 f4-ns lh-copy">
-          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 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">
+              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">
+              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.
+            </p>
+            <p class="measure f6 f5-ns lh-copy">
+              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 f5-ns fw6 black-70 lh-title mb0 mt3 pt2">Demo on how to adjust font-size using Tachyons</h4>
+            <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>
+            </div>
+            </div>
+          </div>
+        </div>
       </article>
-      <div class="ph3 ph5-ns pb5">
+      <div class="ph3 ph5-ns bt bn-ns b--black-10 pt4 mt4 mt0-ns pt0-ns pb5">
         <blockquote class="f5 black-70 measure lh-copy mh0 mb4 mb5-ns">
           <p class="i">
             "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."