Add deleted intro paragraph back to background-size. Edit copy.

Author: mrmrs

docs/themes/background-size/index.html

@@ -6,8 +6,8 @@
     <title>
       tachyons-background-size / Theming / Docs / TACHYONS
     </title>
-    <meta name="author" content="@mr3rs">
-    <meta name="description" content="Documentation for setting background-size on elements with the tachyons background-size module.">
+    <meta name="author" content="@mrmrs">
+    <meta name="description" content="Documentation for setting background-size on elements with the tachyons-background-size css module.">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/css/tachyons.css">
   </head>
@@ -63,16 +63,21 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-background-size</h4>
               <dd class="db pl0 ml0 f4 f2-ns b">1</dd>
             </dl>
         </div>
+        <p class="measure f6 f5-ns lh-copy pb4 mt0">
+          Background-size affects how background images fill their containing elements.
+          While measurements can be declared explicitly to size an image, the ones that seem most reusable are
+          setting contain or cover.
+        </p>
       </article>
 <div class="ph3 ph5-ns pt4 pb5">
-  <h2 class="f3 bold">Examples</h2>
-  <h3 class="f5 book pt4 caps">Contain</h3>
-  <p class="measure lh-copy">Contain will make sure that the entire image is displayed within the element, regardless of the elements dimensions.</p>
+  <h2 class="f3 mb4">Examples</h2>
+  <code class="f6 fw4 dib">.bg-cn { background-size: contain }</code>
+  <p class="measure lh-copy mt0"><code>contain</code> will make sure that the entire image is displayed within the element, regardless of the elements dimensions.</p>
   <div style="background-image: url(http://placekitten.com/g/500/500);background-repeat: no-repeat;outline: 1px solid black;" class="bg-cn h4 w-50">
 
   </div>
-  <h3 class="f5 book pt4 caps">Cover</h3>
-  <p class="measure lh-copy">Cover will make sure the entire element is covered - but won't guarantee that the entire image will be shown.</p>
+  <code class="f6 fw4 mt5 dib">.bg-cv { background-size: cover }</code>
+  <p class="measure lh-copy mt0"><code>cover</code> will make sure the entire element is covered - but won't guarantee that the entire image will be shown.</p>
   <div style="background-image: url(http://placekitten.com/g/500/500); outline: 1px solid black;" class="bg-cv h4 w-50">
 
   </div>
@@ -230,6 +235,5 @@ <h2 class="f6 fw7 ttu tracked">Theming</h2>
 
     </script>
 
-
   </body>
 </html>

src/templates/docs/background-size/index.html

@@ -6,8 +6,8 @@
     <title>
       <%= name %> / Theming / Docs / TACHYONS
     </title>
-    <meta name="author" content="@mr3rs">
-    <meta name="description" content="Documentation for setting background-size on elements with the tachyons background-size module.">
+    <meta name="author" content="@mrmrs">
+    <meta name="description" content="Documentation for setting background-size on elements with the tachyons-background-size css module.">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/css/tachyons.css">
   </head>
@@ -36,16 +36,21 @@ <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 f6 f5-ns lh-copy pb4 mt0">
+          Background-size affects how background images fill their containing elements.
+          While measurements can be declared explicitly to size an image, the ones that seem most reusable are
+          setting contain or cover.
+        </p>
       </article>
 <div class="ph3 ph5-ns pt4 pb5">
-  <h2 class="f3 bold">Examples</h2>
-  <h3 class="f5 book pt4 caps">Contain</h3>
-  <p class="measure lh-copy">Contain will make sure that the entire image is displayed within the element, regardless of the elements dimensions.</p>
+  <h2 class="f3 mb4">Examples</h2>
+  <code class="f6 fw4 dib">.bg-cn { background-size: contain }</code>
+  <p class="measure lh-copy mt0"><code>contain</code> will make sure that the entire image is displayed within the element, regardless of the elements dimensions.</p>
   <div style="background-image: url(http://placekitten.com/g/500/500);background-repeat: no-repeat;outline: 1px solid black;" class="bg-cn h4 w-50">
 
   </div>
-  <h3 class="f5 book pt4 caps">Cover</h3>
-  <p class="measure lh-copy">Cover will make sure the entire element is covered - but won't guarantee that the entire image will be shown.</p>
+  <code class="f6 fw4 mt5 dib">.bg-cv { background-size: cover }</code>
+  <p class="measure lh-copy mt0"><code>cover</code> will make sure the entire element is covered - but won't guarantee that the entire image will be shown.</p>
   <div style="background-image: url(http://placekitten.com/g/500/500); outline: 1px solid black;" class="bg-cv h4 w-50">
 
   </div>
@@ -78,6 +83,5 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
     </main>
     <%= siteFooter  %>
     <%= googleAnalytics  %>
-
   </body>
 </html>