<commit_before><!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      <%= name %> / Theming / Docs / TACHYONS
    </title>
    <meta name="description" content="Documentation for setting background-size on elements with the tachyons-background-size css module.">
    <%= head  %>
  </head>
  <body class="w-100 sans-serif">
    <%= siteHeader  %>
    <main>
      <article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
        <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
        <span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
        <span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
        <div>
          <dl class="dib mr4 mt0">
            <dt class="f6 db">Declarations </dt>
            <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></dd>
          </dl>
          <dl class="dib mr4">
            <dt class="f6 db pr2">Selectors </dt>
            <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
          </dl>
          <dl class="dib mr4">
            <dt class="f6 db pr2">Max. Specificity Score </dt>
            <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></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"><%= 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 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>
        <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>
        <div class="mt5 cf">
          <div class="dib mr4">
            <h1 class="f4 ttu tracked fw6">Previous</h1>
            <a href="/docs/themes/hovers/" class="link fw6 blue dim">Hovers</a>
          </div>
          <div class="dib">
            <h1 class="f4 ttu tracked fw6">Next</h1>
            <a href="/docs/themes/borders" class="link fw6 blue dim">Borders</a>
          </div>
        </div>
        <div class="mt5">
          <h1 class="f4 ttu tracked fw6">Reference</h1>
          <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size" class="link fw6 blue dim">MDN - Background Size</a>
        </div>
      </div>
      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
        <header class="ph3 ph5-ns pt4">
          <kbd class="yellow">src/_background-size.css</kbd>
        </header>
<pre class="ph3 ph5-ns">
<code class="code" style="font-size: .75rem;">
<%= srcCSS  %>
</code>
</pre>
      </section>
      <%= navDocs  %>
    </main>
    <%= siteFooter  %>
    <%= googleAnalytics  %>
  </body>
</html><commit_msg>Remove yellow class from kbd element<commit_after><!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      <%= name %> / Theming / Docs / TACHYONS
    </title>
    <meta name="description" content="Documentation for setting background-size on elements with the tachyons-background-size css module.">
    <%= head  %>
  </head>
  <body class="w-100 sans-serif">
    <%= siteHeader  %>
    <main>
      <article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
        <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
        <span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
        <span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
        <div>
          <dl class="dib mr4 mt0">
            <dt class="f6 db">Declarations </dt>
            <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></dd>
          </dl>
          <dl class="dib mr4">
            <dt class="f6 db pr2">Selectors </dt>
            <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
          </dl>
          <dl class="dib mr4">
            <dt class="f6 db pr2">Max. Specificity Score </dt>
            <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></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"><%= 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 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>
        <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>
        <div class="mt5 cf">
          <div class="dib mr4">
            <h1 class="f4 ttu tracked fw6">Previous</h1>
            <a href="/docs/themes/hovers/" class="link fw6 blue dim">Hovers</a>
          </div>
          <div class="dib">
            <h1 class="f4 ttu tracked fw6">Next</h1>
            <a href="/docs/themes/borders" class="link fw6 blue dim">Borders</a>
          </div>
        </div>
        <div class="mt5">
          <h1 class="f4 ttu tracked fw6">Reference</h1>
          <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size" class="link fw6 blue dim">MDN - Background Size</a>
        </div>
      </div>
      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
        <header class="ph3 ph5-ns pt4">
          <kbd>src/_background-size.css</kbd>
        </header>
<pre class="ph3 ph5-ns">
<code class="code" style="font-size: .75rem;">
<%= srcCSS  %>
</code>
</pre>
      </section>
      <%= navDocs  %>
    </main>
    <%= siteFooter  %>
    <%= googleAnalytics  %>
  </body>
</html>
{'fraction_non_alphanumeric': 0.15974656241574547, 'fraction_numerical': 0.0318145052574818, 'mean_word_length': 2.32243618450515, 'pattern_counts': {'":': 0, '<': 227, '<?xml version=': 0, '>': 227, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4033816', 'n_tokens_mistral': 2618, 'n_tokens_neox': 2506, 'n_words': 703}