Skip to content

Commit f1ebcf1

Browse files
author
mrmrs
committed
Add deleted intro paragraph back to background-size. Edit copy.
1 parent 79f2f9f commit f1ebcf1

File tree

2 files changed

+24
-16
lines changed

2 files changed

+24
-16
lines changed

docs/themes/background-size/index.html

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<title>
77
tachyons-background-size / Theming / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mr3rs">
10-
<meta name="description" content="Documentation for setting background-size on elements with the tachyons background-size module.">
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="Documentation for setting background-size on elements with the tachyons-background-size css module.">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
1212
<link rel="stylesheet" href="/css/tachyons.css">
1313
</head>
@@ -63,16 +63,21 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-background-size</h4>
6363
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
6464
</dl>
6565
</div>
66+
<p class="measure f6 f5-ns lh-copy pb4 mt0">
67+
Background-size affects how background images fill their containing elements.
68+
While measurements can be declared explicitly to size an image, the ones that seem most reusable are
69+
setting contain or cover.
70+
</p>
6671
</article>
6772
<div class="ph3 ph5-ns pt4 pb5">
68-
<h2 class="f3 bold">Examples</h2>
69-
<h3 class="f5 book pt4 caps">Contain</h3>
70-
<p class="measure lh-copy">Contain will make sure that the entire image is displayed within the element, regardless of the elements dimensions.</p>
73+
<h2 class="f3 mb4">Examples</h2>
74+
<code class="f6 fw4 dib">.bg-cn { background-size: contain }</code>
75+
<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>
7176
<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">
7277

7378
</div>
74-
<h3 class="f5 book pt4 caps">Cover</h3>
75-
<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>
79+
<code class="f6 fw4 mt5 dib">.bg-cv { background-size: cover }</code>
80+
<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>
7681
<div style="background-image: url(http://placekitten.com/g/500/500); outline: 1px solid black;" class="bg-cv h4 w-50">
7782

7883
</div>
@@ -230,6 +235,5 @@ <h2 class="f6 fw7 ttu tracked">Theming</h2>
230235

231236
</script>
232237

233-
234238
</body>
235239
</html>

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<title>
77
<%= name %> / Theming / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mr3rs">
10-
<meta name="description" content="Documentation for setting background-size on elements with the tachyons background-size module.">
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="Documentation for setting background-size on elements with the tachyons-background-size css module.">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
1212
<link rel="stylesheet" href="/css/tachyons.css">
1313
</head>
@@ -36,16 +36,21 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
3636
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
3737
</dl>
3838
</div>
39+
<p class="measure f6 f5-ns lh-copy pb4 mt0">
40+
Background-size affects how background images fill their containing elements.
41+
While measurements can be declared explicitly to size an image, the ones that seem most reusable are
42+
setting contain or cover.
43+
</p>
3944
</article>
4045
<div class="ph3 ph5-ns pt4 pb5">
41-
<h2 class="f3 bold">Examples</h2>
42-
<h3 class="f5 book pt4 caps">Contain</h3>
43-
<p class="measure lh-copy">Contain will make sure that the entire image is displayed within the element, regardless of the elements dimensions.</p>
46+
<h2 class="f3 mb4">Examples</h2>
47+
<code class="f6 fw4 dib">.bg-cn { background-size: contain }</code>
48+
<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>
4449
<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">
4550

4651
</div>
47-
<h3 class="f5 book pt4 caps">Cover</h3>
48-
<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>
52+
<code class="f6 fw4 mt5 dib">.bg-cv { background-size: cover }</code>
53+
<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>
4954
<div style="background-image: url(http://placekitten.com/g/500/500); outline: 1px solid black;" class="bg-cv h4 w-50">
5055

5156
</div>
@@ -78,6 +83,5 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
7883
</main>
7984
<%= siteFooter %>
8085
<%= googleAnalytics %>
81-
8286
</body>
8387
</html>

0 commit comments

Comments
 (0)