Clean up measure/line height on display docs

Author: Lachlan Campbell

docs/layout/display/index.html

@@ -87,7 +87,7 @@ <h3 class="f5 book pt4 caps">Display Block</h3>
         <code class="f6">
           &lt;span class="db"&gt;&lt;/span&gt;
         </code>
-        <p>Block will inherently set width to 100% of its parent element. It will also cause a line break, even if the declared width doesn't take up the full width of the parent.</p>
+        <p class="measure lh-copy">Block will inherently set width to 100% of its parent element. It will also cause a line break, even if the declared width doesn't take up the full width of the parent.</p>
         <div class="db bg-black-10 mb2">
           block
         </div>
@@ -100,7 +100,7 @@ <h3 class="f5 book pt4 caps">Display Inline-Block</h3>
         <code class="f6">
           &lt;span class="dib"&gt;&lt;/span&gt;
         </code>
-        <p class="measure">
+        <p class="measure lh-copy">
           Inline-block will wrap around content inline. It also allows you to set
           height and width properties on the element, which display inline does not allow
           you to do. It does render the white-space inbeween elements, so if you set
@@ -125,7 +125,7 @@ <h3 class="f5 book pt4 caps">Display Inline</h3>
         <code class="f6">
           &lt;div class="di"&gt;&lt;/div&gt;
         </code>
-        <p class="measure">
+        <p class="measure lh-copy">
           Set content inline. Inline doesn't respect height or width values. It does not render white space between elements.
         </p>
         <div class="di bg-black-10 mb2">
@@ -149,10 +149,10 @@ <h3 class="f5 book pt4 caps">Display Table</h3>
           &nbsp;&nbsp;  &lt;div class="dtc"&gt;&lt;/div&gt;<br>
           &lt;/div&gt;
         </code>
-        <p class="measure">
+        <p class="measure lh-copy">
           Display table can be combined with display table-cell to render a table
           without table markup. This can be useful for vertically aligning content
-          or for auto-calculating a variable amount of table cells.
+          or for auto-calculating a variable number of table cells.
         </p>
         <div class="dt bg-black-10 mb2 w-100">
           <div class="dtc v-mid pa1 bg-black-10">display</div>
@@ -165,7 +165,7 @@ <h3 class="f5 book pt4 caps">Display None</h3>
         <code class="f6">
           &lt;div class="dn"&gt;&lt;/div&gt;
         </code>
-        <p class="measure">
+        <p class="measure lh-copy">
           You can set the display of any element to none by tacking on the <code class="code">dn</code> class.
         </p>
 

src/templates/docs/display/index.html

@@ -51,7 +51,7 @@ <h3 class="f5 book pt4 caps">Display Block</h3>
         <code class="f6">
           &lt;span class="db"&gt;&lt;/span&gt;
         </code>
-        <p>Block will inherently set width to 100% of its parent element. It will also cause a line break, even if the declared width doesn't take up the full width of the parent.</p>
+        <p class="measure lh-copy">Block will inherently set width to 100% of its parent element. It will also cause a line break, even if the declared width doesn't take up the full width of the parent.</p>
         <div class="db bg-black-10 mb2">
           block
         </div>
@@ -64,7 +64,7 @@ <h3 class="f5 book pt4 caps">Display Inline-Block</h3>
         <code class="f6">
           &lt;span class="dib"&gt;&lt;/span&gt;
         </code>
-        <p class="measure">
+        <p class="measure lh-copy">
           Inline-block will wrap around content inline. It also allows you to set
           height and width properties on the element, which display inline does not allow
           you to do. It does render the white-space inbeween elements, so if you set
@@ -89,7 +89,7 @@ <h3 class="f5 book pt4 caps">Display Inline</h3>
         <code class="f6">
           &lt;div class="di"&gt;&lt;/div&gt;
         </code>
-        <p class="measure">
+        <p class="measure lh-copy">
           Set content inline. Inline doesn't respect height or width values. It does not render white space between elements.
         </p>
         <div class="di bg-black-10 mb2">
@@ -113,10 +113,10 @@ <h3 class="f5 book pt4 caps">Display Table</h3>
           &nbsp;&nbsp;  &lt;div class="dtc"&gt;&lt;/div&gt;<br>
           &lt;/div&gt;
         </code>
-        <p class="measure">
+        <p class="measure lh-copy">
           Display table can be combined with display table-cell to render a table
           without table markup. This can be useful for vertically aligning content
-          or for auto-calculating a variable amount of table cells.
+          or for auto-calculating a variable number of table cells.
         </p>
         <div class="dt bg-black-10 mb2 w-100">
           <div class="dtc v-mid pa1 bg-black-10">display</div>
@@ -129,7 +129,7 @@ <h3 class="f5 book pt4 caps">Display None</h3>
         <code class="f6">
           &lt;div class="dn"&gt;&lt;/div&gt;
         </code>
-        <p class="measure">
+        <p class="measure lh-copy">
           You can set the display of any element to none by tacking on the <code class="code">dn</code> class.
         </p>