Update docs!

Author: mrmrs

docs/typography/line-height/index.html

@@ -53,35 +53,31 @@
 </header>
 
     <main class="bg-white black-70">
-      <article class="bt b--black-10 pa3 ph5-ns">
-        <h4 class="f4 mv0 fw6 dib mr4">tachyons-line-height</h4>
-        <span class="f4 b dib pl0 ml0 mr4">v3.0.3</span>
-        <span class="f4 b dib pl0 ml0 mr4">151 B</span>
-        <div>
-          <dl class="dib mr4 mt0">
-            <dt class="f6 db">Declarations </dt>
-            <dd class="db pl0 ml0 f4 f2-ns b">12</dd>
-          </dl>
-          <dl class="dib mr4">
-            <dt class="f6 db pr2">Selectors </dt>
-            <dd class="db pl0 ml0 f4 f2-ns b">12</dd>
-          </dl>
-          <dl class="dib mr4">
-            <dt class="f6 db pr2">Max. Specificity Score </dt>
-            <dd class="db pl0 ml0 f4 f2-ns b">10</dd>
-          </dl>
-          <dl class="dib mr4">
-            <dt class="f6 db pr2">Size of Avg. Rule </dt>
-            <dd class="db pl0 ml0 f4 f2-ns b">1</dd>
-          </dl>
+      <header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
+        <div class="nowrap mw9 center">
+        <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/scale/" title="Type">Type Scale</a>
+        <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/measure/" title="Measure">Measure</a>
+        <a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
+        <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/tracking" title="Tracking">Tracking</a>
+        <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
+        <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-style" title="Font Families">Font Style</a>
+        <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
+        <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-align" title="Text Align">Text Align</a>
+        <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
+        <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
+        <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/white-space" title="White Space">White Space</a>
+        <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-family" title="Font Families">Font Families</a>
         </div>
+      </header>
+      <article class="pa3 ph5-ns">
+        <h3 class="f6 ttu tracked mt0">Line Height</h3>
         <p class="measure f3 lh-copy">
-          <b class="bold">line-height</b> is a css property<br><br>
-          <b class="bold">lead</b> <i>[rhyming with red]:</i> <br>
+          <b class="fw6">line-height</b> is a css property<br><br>
+          <b class="fw6">lead</b> <i>[rhyming with red]:</i> <br>
            Originally a strip of soft metal used
            for vertical spacing between lines of type. Now meaning the
            vertical distance from the baseline of one line to the baseline of the next. Also
-           called <b class="bold">leading</b>.
+           called <b class="fw6">leading</b>.
         </p>
         <p class="measure f4 lh-copy">
           There are generally 3 to 4 different line-heights you will need when setting type.
@@ -90,31 +86,34 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-line-height</h4>
         </p>
       </article>
       <div class="ph3 ph5-ns pt4 pb5">
-        <h2 class="f3 bold">Examples</h2>
-        <h3 class="f5 book mt5 ttu tracked">No applied line-height (default)</h3>
+        <h3 class="f5 mb4">Examples</h3>
+        <h4 class="f5 fw4 mt5">No applied line-height (default)</h4>
         <p class="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 book mt5 ttu tracked">Prose Leading (1.5)</h3>
+        <h3 class="f5 fw4 mt5">Prose Leading (1.5)</h3>
+        <code class="f6">&lt;p class="lh-copy"&gt;Paragraph content&lt;/p&gt;</code>
         <p class="measure lh-copy">
           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 book mt5 ttu tracked">No Applied Title Leading (Default)</h3>
+        <h3 class="f6 fw6 mt5">No Applied Title Leading (Default)</h3>
         <h4 class="measure ttu fw6 mt0 f2 f-subheadline-l">
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr
         </h4>
-        <h3 class="f5 book mt5 ttu tracked">Title Leading (1.25)</h3>
+        <h3 class="f6 fw6 mt5">Title Leading (1.25)</h3>
+        <code class="f6">&lt;h1 class="lh-title"&gt;Paragraph content&lt;/h1&gt;</code>
         <h4 class="measure lh-title ttu f2 f-subheadline-l fw6 mt0">
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr
         </h4>
-        <h3 class="f5 book mt5 ttu tracked">Solid Leading (1)</h3>
-        <h4 class="measure lh-solid ttu tracked f2 f-subheadline-l fw6 mt0">
+        <h3 class="f6 fw6 mt5">Solid Leading (1)</h3>
+        <code class="f6">&lt;h4 class="lh-solid"&gt;Paragraph content&lt;/h4&gt;</code>
+        <h4 class="measure lh-solid  f2 f-subheadline-l fw6 mt0">
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr
         </h4>
         <div class="mt5 cf">
@@ -132,7 +131,28 @@ <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 black-70 pt4 pb5 overflow-container">
+      <section class="bg-white bt bb b--black-40 black-70 pv4 overflow-container">
+        <h4 class="f4 mv0 fw6 dib mr4">tachyons-line-height</h4>
+        <span class="f4 b dib pl0 ml0 mr4">v3.0.3</span>
+        <span class="f4 b dib pl0 ml0 mr4">151 B</span>
+        <div>
+          <dl class="dib mr4 mt0">
+            <dt class="f6 db">Declarations </dt>
+            <dd class="db pl0 ml0 f4 f2-ns b">12</dd>
+          </dl>
+          <dl class="dib mr4">
+            <dt class="f6 db pr2">Selectors </dt>
+            <dd class="db pl0 ml0 f4 f2-ns b">12</dd>
+          </dl>
+          <dl class="dib mr4">
+            <dt class="f6 db pr2">Max. Specificity Score </dt>
+            <dd class="db pl0 ml0 f4 f2-ns b">10</dd>
+          </dl>
+          <dl class="dib mr4">
+            <dt class="f6 db pr2">Size of Avg. Rule </dt>
+            <dd class="db pl0 ml0 f4 f2-ns b">1</dd>
+          </dl>
+        </div>
         <header class="ph3 ph5-ns pt4">
           <kbd>src/_line-height.css</kbd>
         </header>

docs/typography/measure/index.html

@@ -70,6 +70,7 @@
         </div>
       </header>
       <article class="pa3 ph5-ns">
+        <h3 class="f6 ttu tracked mt0">Measure</h3>
         <p class="measure f4 lh-copy">
           Measure refers to the length of a line of text. It is one of the most important aspects
           of readability.