<commit_before><!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Gray</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
  <link rel="stylesheet" href="css/gray.css">
</head>
<body>

  <div class="container">
    <h1>Gray <small>by <NAME></small></h1>

    <p>Make an image gray in all browsers.</p>

    <iframe src="https://ghbtns.com/github-btn.html?user=karlhorky&repo=gray&type=star&count=true&size=large" frameborder="0" scrolling="0" width="130" height="30"></iframe>

    <div class="row">
      <div class="col-half">
        <h2>Color</h2>
      </div>
      <div class="col-half">
        <h2>Gray</h2>
      </div>
    </div>


    <div class="row">
      <h3>&lt;img&gt; tag</h3>

      <div class="col-half" data-label="Color">
        <img src="img/color.jpg">
      </div>
      <div class="col-half" data-label="Gray">
        <img src="img/color.jpg" class="grayscale">
      </div>
    </div>

    <div class="row">
      <div>
        <pre><code>&lt;img src="img/color.jpg" class="grayscale"&gt;</code></pre>
      </div>
    </div>

    <div class="row">
      <h3>&lt;img&gt; tag with transition</h3>

      <div class="col-half" data-label="Color">
        <img src="img/color.jpg">
      </div>
      <div class="col-half" data-label="Gray">
        <img src="img/color.jpg" class="grayscale grayscale-fade">
      </div>
    </div>

    <div class="row">
      <div>
        <pre><code>&lt;img src="img/color.jpg" class="grayscale grayscale-fade"&gt;</code></pre>
      </div>
    </div>


    <div class="row">
      <h3>&lt;img&gt; tag with styles</h3>

      <div class="col-half" data-label="Color">
        <img src="img/color.jpg" style="
          position  : absolute;
          top       : 0;
          left      : 50%;
          margin    : 0 0 0 -90px;
          padding   : 5px;
          border    : 1px solid #ddd;
        ">
      </div>
      <div class="col-half" data-label="Gray">
        <img src="img/color.jpg" class="grayscale" style="
          position  : absolute;
          top       : 0;
          left      : 50%;
          margin    : 0 0 0 -90px;
          padding   : 5px;
          border    : 1px solid #ddd;
        ">
      </div>
    </div>

    <div class="row">
      <div>
        <pre><code>&lt;img src="img/color.jpg" class="grayscale" style="
  position  : absolute;
  top       : 0;
  left      : 50%;
  margin    : 0 0 0 -90px;
  padding   : 5px;
  border    : 1px solid #ddd;
"&gt;</code></pre>
      </div>
    </div>


    <div class="row">
      <h3>CSS background</h3>

      <div class="col-half" data-label="Color">
        <div style="
        background-image: url(img/color.jpg);
        display         : inline-block;
        width           : 180px;
        height          : 72px;
        "></div>
      </div>
      <div class="col-half" data-label="Gray">
        <div style="
        background-image: url(img/color.jpg);
        display         : inline-block;
        width           : 180px;
        height          : 72px;
        " class="grayscale"></div>
      </div>
    </div>

    <div class="row">
      <div>
        <pre><code>&lt;div style="
  background-image: url(img/color.jpg);
  display         : inline-block;
  width           : 180px;
  height          : 72px;
" class="grayscale"&gt;&lt;/div&gt;</code></pre>
      </div>
    </div>


    <div class="row">
      <h3>CSS sprite background</h3>

      <div class="col-half" data-label="Color">
        <div style="
        background-image   : url(img/color-sprite.jpg);
        background-position: -180px 0;
        display            : inline-block;
        width              : 180px;
        height             : 72px;
        "></div>
      </div>
      <div class="col-half" data-label="Gray">
        <div style="
        background-image   : url(img/color-sprite.jpg);
        background-position: -180px 0;
        display            : inline-block;
        width              : 180px;
        height             : 72px;
        " class="grayscale"></div>
      </div>
    </div>

    <div class="row">
      <div>
        <pre><code>&lt;div style="
  background-image   : url(img/color-sprite.jpg);
  background-position: -180px 0;
  display            : inline-block;
  width              : 180px;
  height             : 72px;
" class="grayscale"&gt;&lt;/div&gt;</code></pre>
      </div>
    </div>


    <div class="row">
      <h3>CSS sprite background with background-size</h3>

      <div class="col-half" data-label="Color">
        <div style="
        background-image   : url(img/color-sprite-lg.jpg);
        background-size    : auto 72px;
        background-position: -180px 0;
        display            : inline-block;
        width              : 180px;
        height             : 72px;
        "></div>
      </div>
      <div class="col-half" data-label="Gray">
        <div style="
        background-image   : url(img/color-sprite-lg.jpg);
        background-size    : auto 72px;
        background-position: -180px 0;
        display            : inline-block;
        width              : 180px;
        height             : 72px;
        " class="grayscale"></div>
      </div>
    </div>

    <div class="row">
      <div>
        <pre><code>&lt;div style="
  background-image   : url(img/color-sprite-lg.jpg);
  background-size    : auto 72px;
  background-position: -180px 0;
  display            : inline-block;
  width              : 180px;
  height             : 72px;
" class="grayscale"&gt;&lt;/div&gt;</code></pre>
      </div>
    </div>


    <div class="row">
      <h3>Toggling Grayscale</h3>
      <button onclick="$('.grayscale').toggleClass('grayscale-off')">Toggle Grayscale</button>
    </div>

    <div class="row">
      <div>
        <pre><code>$('.grayscale').toggleClass('grayscale-off');</code></pre>
      </div>
    </div>
  </div>

  <a href="https://github.com/karlhorky/gray"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

  <!--[if lt IE 9]>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <![endif]-->
  <!--[if !(IE)|(gte IE 9)]><!-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!--<![endif]-->
  <script src="js/jquery.gray.js"></script>
</body>
</html><commit_msg>Always use https<commit_after><!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Gray</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
  <link rel="stylesheet" href="css/gray.css">
</head>
<body>

  <div class="container">
    <h1>Gray <small>by <NAME></small></h1>

    <p>Make an image gray in all browsers.</p>

    <iframe src="https://ghbtns.com/github-btn.html?user=karlhorky&repo=gray&type=star&count=true&size=large" frameborder="0" scrolling="0" width="130" height="30"></iframe>

    <div class="row">
      <div class="col-half">
        <h2>Color</h2>
      </div>
      <div class="col-half">
        <h2>Gray</h2>
      </div>
    </div>


    <div class="row">
      <h3>&lt;img&gt; tag</h3>

      <div class="col-half" data-label="Color">
        <img src="img/color.jpg">
      </div>
      <div class="col-half" data-label="Gray">
        <img src="img/color.jpg" class="grayscale">
      </div>
    </div>

    <div class="row">
      <div>
        <pre><code>&lt;img src="img/color.jpg" class="grayscale"&gt;</code></pre>
      </div>
    </div>

    <div class="row">
      <h3>&lt;img&gt; tag with transition</h3>

      <div class="col-half" data-label="Color">
        <img src="img/color.jpg">
      </div>
      <div class="col-half" data-label="Gray">
        <img src="img/color.jpg" class="grayscale grayscale-fade">
      </div>
    </div>

    <div class="row">
      <div>
        <pre><code>&lt;img src="img/color.jpg" class="grayscale grayscale-fade"&gt;</code></pre>
      </div>
    </div>


    <div class="row">
      <h3>&lt;img&gt; tag with styles</h3>

      <div class="col-half" data-label="Color">
        <img src="img/color.jpg" style="
          position  : absolute;
          top       : 0;
          left      : 50%;
          margin    : 0 0 0 -90px;
          padding   : 5px;
          border    : 1px solid #ddd;
        ">
      </div>
      <div class="col-half" data-label="Gray">
        <img src="img/color.jpg" class="grayscale" style="
          position  : absolute;
          top       : 0;
          left      : 50%;
          margin    : 0 0 0 -90px;
          padding   : 5px;
          border    : 1px solid #ddd;
        ">
      </div>
    </div>

    <div class="row">
      <div>
        <pre><code>&lt;img src="img/color.jpg" class="grayscale" style="
  position  : absolute;
  top       : 0;
  left      : 50%;
  margin    : 0 0 0 -90px;
  padding   : 5px;
  border    : 1px solid #ddd;
"&gt;</code></pre>
      </div>
    </div>


    <div class="row">
      <h3>CSS background</h3>

      <div class="col-half" data-label="Color">
        <div style="
        background-image: url(img/color.jpg);
        display         : inline-block;
        width           : 180px;
        height          : 72px;
        "></div>
      </div>
      <div class="col-half" data-label="Gray">
        <div style="
        background-image: url(img/color.jpg);
        display         : inline-block;
        width           : 180px;
        height          : 72px;
        " class="grayscale"></div>
      </div>
    </div>

    <div class="row">
      <div>
        <pre><code>&lt;div style="
  background-image: url(img/color.jpg);
  display         : inline-block;
  width           : 180px;
  height          : 72px;
" class="grayscale"&gt;&lt;/div&gt;</code></pre>
      </div>
    </div>


    <div class="row">
      <h3>CSS sprite background</h3>

      <div class="col-half" data-label="Color">
        <div style="
        background-image   : url(img/color-sprite.jpg);
        background-position: -180px 0;
        display            : inline-block;
        width              : 180px;
        height             : 72px;
        "></div>
      </div>
      <div class="col-half" data-label="Gray">
        <div style="
        background-image   : url(img/color-sprite.jpg);
        background-position: -180px 0;
        display            : inline-block;
        width              : 180px;
        height             : 72px;
        " class="grayscale"></div>
      </div>
    </div>

    <div class="row">
      <div>
        <pre><code>&lt;div style="
  background-image   : url(img/color-sprite.jpg);
  background-position: -180px 0;
  display            : inline-block;
  width              : 180px;
  height             : 72px;
" class="grayscale"&gt;&lt;/div&gt;</code></pre>
      </div>
    </div>


    <div class="row">
      <h3>CSS sprite background with background-size</h3>

      <div class="col-half" data-label="Color">
        <div style="
        background-image   : url(img/color-sprite-lg.jpg);
        background-size    : auto 72px;
        background-position: -180px 0;
        display            : inline-block;
        width              : 180px;
        height             : 72px;
        "></div>
      </div>
      <div class="col-half" data-label="Gray">
        <div style="
        background-image   : url(img/color-sprite-lg.jpg);
        background-size    : auto 72px;
        background-position: -180px 0;
        display            : inline-block;
        width              : 180px;
        height             : 72px;
        " class="grayscale"></div>
      </div>
    </div>

    <div class="row">
      <div>
        <pre><code>&lt;div style="
  background-image   : url(img/color-sprite-lg.jpg);
  background-size    : auto 72px;
  background-position: -180px 0;
  display            : inline-block;
  width              : 180px;
  height             : 72px;
" class="grayscale"&gt;&lt;/div&gt;</code></pre>
      </div>
    </div>


    <div class="row">
      <h3>Toggling Grayscale</h3>
      <button onclick="$('.grayscale').toggleClass('grayscale-off')">Toggle Grayscale</button>
    </div>

    <div class="row">
      <div>
        <pre><code>$('.grayscale').toggleClass('grayscale-off');</code></pre>
      </div>
    </div>
  </div>

  <a href="https://github.com/karlhorky/gray"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

  <!--[if lt IE 9]>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <![endif]-->
  <!--[if !(IE)|(gte IE 9)]><!-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!--<![endif]-->
  <script src="js/jquery.gray.js"></script>
</body>
</html>
{'fraction_non_alphanumeric': 0.18093675417661098, 'fraction_numerical': 0.022822195704057278, 'mean_word_length': 1.934777850733202, 'pattern_counts': {'":': 0, '<': 363, '<?xml version=': 0, '>': 361, 'https://': 9, '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': '5744962', 'n_tokens_mistral': 4913, 'n_tokens_neox': 4521, 'n_words': 859}