jekyll-theme-chalk 0.1.1

data/_assets/yarn/retinajs/src/retina.less

@@ -0,0 +1,56 @@
+// retina.less
+// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
+
+// Updated by John Newman
+// github.com/jgnewman
+// http://axial.agency
+
+/**
+ * Allows you to use retina images at various pixel densities.
+ * Examples:
+ *
+ *   .retina(/images/mypic.jpg, 2);
+ *   .retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
+ *
+ * @param  {String} $path               The path to the file name minus extension.
+ * @param  {Number} $cap:    2          The highest pixel density level images exist for.
+ * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
+ * @param  {Value}  $extras: null       Any other `background` values to be added.
+ */
+.retina(@path, @cap: 2, @size: auto auto, @extras: ~'') {
+  @lowretina: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
+  @2xpath: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;
+
+  /*
+   * Set a base background for 1x environments.
+   */
+  background: url(@path) @extras;
+  background-size: @size;
+
+  /*
+   * Create an @2x-ish media query.
+   */
+  @media @lowretina {
+    background      : url(@2xpath) @extras;
+    background-size : @size;
+  }
+
+  /*
+   * Create media queries for all environments that the user has
+   * provided images for.
+   */
+  .create-queries() when (@cap >= 2) {
+    .loop(@env) when (@env <= @cap) {
+      @retinapath: ~`@{path}.replace(/\.\w+$/, function(match) { return "@@{env}x" + match; })`;
+      @media (-webkit-min-device-pixel-ratio: @env),
+             (min-resolution: @env * 96dpi) {
+               background      : url(@retinapath) @extras;
+               background-size : @size;
+      }
+      .loop((@env + 1));    // next iteration
+    }
+    .loop(2);
+  }
+  .create-queries();
+
+}

data/_assets/yarn/retinajs/src/retina.styl

@@ -0,0 +1,56 @@
+// retina.styl
+// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
+
+// Created by John Newman
+// github.com/jgnewman
+// http://axial.agency
+
+
+/**
+ * Allows you to use retina images at various pixel densities.
+ * Examples:
+ *
+ *   retina(/images/mypic.jpg, 2)
+ *   retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent)
+ *
+ * @param  {Value}  $path               The path to the file name minus extension.
+ * @param  {Number} $cap:    2          The highest pixel density level images exist for.
+ * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
+ * @param  {Value}  $extras: null       Any other `background` values to be added.
+ */
+retina($path, $cap = 2, $size = auto auto, $extras = null)
+  $dirname = dirname($path)
+  $filename = basename($path)
+  $at2xpath = pathjoin($dirname, replace('\.', '@2x.', $filename))
+
+  /*
+   * Set a base background for 1x environments.
+   */
+  background: url($path) $extras
+  background-size: $size
+
+  /*
+   * Create an @2x-ish media query.
+   */
+  @media all and (-webkit-min-device-pixel-ratio : 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5)
+    background: url($at2xpath) $extras
+    background-size: $size
+
+  /*
+   * Create media queries for all environments that the user has
+   * provided images for.
+   */
+  if $cap >= 2
+    for $env in (2..$cap)
+      $newpath = pathjoin($dirname, replace('\.', '@' + $env + 'x.', $filename))
+      @media (-webkit-min-device-pixel-ratio: $env), (min-resolution: $env * 96dpi)
+        background: url($newpath) $extras
+        background-size: $size
+
+  /*
+   * If anything went wrong trying to separate the file from its
+   * extension, set a background value without doing anything to it.
+   */
+  else
+    background: url($path) $extras
+    background-size: $size

data/_assets/yarn/retinajs/test/DOM.js

@@ -0,0 +1,44 @@
+/* eslint-disable */
+
+var sinonChai = require('sinon-chai');
+var jsdom = require('jsdom');
+
+// Setup the jsdom environment
+// @see https://github.com/facebook/react/issues/5046
+global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
+global.window = document.defaultView;
+global.navigator = global.window.navigator;
+global.usingJSDOM = true;
+
+global.chai = require('chai');
+global.expect = global.chai.expect;
+global.sinon = require('sinon');
+
+chai.use(sinonChai);
+
+//JSDOM doesn't support localStrage by default, so lets just fake it..
+if (!global.window.localStorage) {
+  global.window.localStorage = {
+    getItem() { return '{}'; },
+    setItem() {}
+  };
+}
+
+// take all properties of the window object and also attach it to the
+// mocha global object
+propagateToGlobal(global.window);
+
+// from mocha-jsdom https://github.com/rstacruz/mocha-jsdom/blob/master/index.js#L80
+function propagateToGlobal (window) {
+  for (var key in window) {
+    if (!window.hasOwnProperty(key)) continue;
+    if (key in global) continue;
+
+    global[key] = window[key];
+  }
+}
+if (!global.requestAnimationFrame) {
+  global.requestAnimationFrame = function (func) {
+    setTimeout(func, 1000 / 60);
+  }
+}

data/_assets/yarn/retinajs/test/fixtures/image.js

@@ -0,0 +1,19 @@
+function Image() {
+  this.complete = true;
+  this.attributes = {
+    src: '/images/some_image.png',
+    width: 500,
+    height: 400
+  };
+}
+
+Image.prototype.setAttribute = function(name, value) {
+  this.attributes[name] = value;
+};
+
+Image.prototype.getAttribute = function(name) {
+  return this.attributes[name];
+};
+
+var root = (exports || window);
+root.Image = Image;

data/_assets/yarn/retinajs/test/fixtures/less_expected_output.css

@@ -0,0 +1,18 @@
+body {
+  background-image: url('/path/to/image.png');
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
+  body {
+    background-image: url("/path/to/image@2x.png");
+    background-size: 200px 100px;
+  }
+}
+header {
+  background-image: url("/path/to/header.png");
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
+  header {
+    background-image: url("/path/to/header@2x.png");
+    background-size: 600px 50px;
+  }
+}

data/_assets/yarn/retinajs/test/fixtures/scss_expected_output.css

@@ -0,0 +1,13 @@
+body {
+  background-image: url("/path/to/image.png"); }
+  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
+    body {
+      background-image: url("/path/to/image@2x.png");
+      background-size: 200px 100px; } }
+
+header {
+  background-image: url("/path/to/header.png"); }
+  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
+    header {
+      background-image: url("/path/to/header@2x.png");
+      background-size: 600px 50px; } }

data/_assets/yarn/retinajs/test/fixtures/test.less

@@ -0,0 +1,10 @@
+@import 'src/retina';
+
+// Single quoted
+body {
+  .at2x('/path/to/image.png', 200px, 100px);
+}
+// Double quoted
+header {
+  .at2x("/path/to/header.png", 600px, 50px);
+}

data/_assets/yarn/retinajs/test/fixtures/test.scss

@@ -0,0 +1,11 @@
+@import 'src/retina';
+
+// Single quoted
+body {
+  @include retina('/path/to/image.png', 2, 200px, 100px);
+}
+
+// Double quoted
+header {
+  @include retina("/path/to/header.png", 2, 600px, 50px);
+}

data/_assets/yarn/retinajs/test/fixtures/xml_http_request.js

@@ -0,0 +1,24 @@
+function XMLHttpRequest() {
+  this.status = XMLHttpRequest.status;
+  this.contentType = XMLHttpRequest.contentType;
+  this.readyState = 4;
+  this.onreadystatechange = function() {}
+}
+
+XMLHttpRequest.status = 200;
+XMLHttpRequest.contentType = 'image/png';
+
+XMLHttpRequest.prototype.open = function() {
+  return true;
+}
+
+XMLHttpRequest.prototype.send = function() {
+  this.onreadystatechange();
+}
+
+XMLHttpRequest.prototype.getResponseHeader = function(contentType) {
+  return this.contentType;
+}
+
+var root = (exports || window);
+root.XMLHttpRequest = XMLHttpRequest;

data/_assets/yarn/retinajs/test/functional/public/index.html

@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style type="text/css" media="screen">
+      body {
+        text-align: center;
+        font-family: helvetica, sans-serif;
+        padding-bottom: 25px;
+      }
+
+      h2 {
+        margin-top: 35px;
+      }
+
+      .responsive {
+        width: 80%;
+        margin: auto;
+      }
+
+      .responsive img {
+        display: block;
+        width: auto;
+        height: auto;
+        max-width: 100%;
+      }
+
+      .wrapper {
+        background: #eaeaea;
+        margin: 35px auto;
+        width: 1170px;
+        padding: 25px 25px 45px;
+        border-radius: 5px;
+      }
+
+      .img-wrapper {
+        display: inline-block;
+        width: 30%;
+        background: rgba(0, 0, 0, .06);
+        padding: 0 15px 25px;
+        vertical-align: middle;
+        border-radius: 3px;
+      }
+
+      .img-wrapper p {
+        height: 75px;
+        font-size: 13px;
+      }
+
+      .bg, .bg2, .bg3 {
+        height: 150px;
+      }
+    </style>
+
+    <!-- Uncomment one of the following CSS links to test the behavior of a
+         different CSS preprocessor.-->
+
+    <!-- <link type="text/css" rel="stylesheet" href="styles/retina.scss.css"> -->
+    <!-- <link type="text/css" rel="stylesheet" href="styles/retina.sass.css"> -->
+    <link type="text/css" rel="stylesheet" href="styles/retina.less.css">
+
+    <script type="text/javascript">
+      // Spoof the browser into thinking it is Retina
+      // comment the next line out to make sure it works without retina
+      window.devicePixelRatio = 3;
+    </script>
+  </head>
+  <body>
+
+    <div class="wrapper">
+      <h1>retina.js test environement</h1>
+
+      <h2>Img Tags</h2>
+
+      <!-- This image does not opt in. It will always be shown at 1x -->
+      <div class="img-wrapper">
+        <h3>Img tag @1x</h3>
+        <p>
+          This image does not opt in. It will always be shown at 1x.
+        </p>
+        <img src="google-logo.png">
+      </div>
+
+      <!-- This image should be shown at 2x all retina environments,
+           but shown at 1x in non-retina environments. -->
+      <div class="img-wrapper">
+        <h3>Img tag @2x</h3>
+        <p>
+          This image should be shown at 2x all retina environments,
+          but shown at 1x in non-retina environments.
+        </p>
+        <img src="google-logo.png" data-rjs="2">
+      </div>
+
+      <!-- This image should be shown at 3x in all environments 3x and up,
+           shown at 2x in 2x environments, and shown at 1x in non-retina
+           environments. -->
+      <div class="img-wrapper">
+        <h3>Img tag @3x</h3>
+        <p>
+          This image should be shown at 3x in all environments 3x and up,
+          shown at 2x in 2x environments, and shown at 1x in non-retina
+          environments.
+        </p>
+        <img src="google-logo.png" data-rjs="3">
+      </div>
+
+      <h2>Background Images</h2>
+
+      <!-- This image does not opt in. It will always be shown at 1x -->
+      <div class="img-wrapper">
+        <h3>Bg @1x</h3>
+        <p>
+          This image does not opt in. It will always be shown at 1x.
+        </p>
+        <div class="bg"></div>
+      </div>
+
+      <!-- This image should be shown at 2x all retina environments,
+           but shown at 1x in non-retina environments. -->
+      <div class="img-wrapper">
+        <h3>Bg @2x</h3>
+        <p>
+          This image should be shown at 2x all retina environments,
+          but shown at 1x in non-retina environments.
+        </p>
+        <div class="bg2"></div>
+      </div>
+
+      <!-- This image should be shown at 3x in all environments 3x and up,
+           shown at 2x in 2x environments, and shown at 1x in non-retina
+           environments. -->
+      <div class="img-wrapper">
+        <h3>Bg @3x</h3>
+        <p>
+          This image should be shown at 3x in all environments 3x and up,
+          shown at 2x in 2x environments, and shown at 1x in non-retina
+          environments.
+        </p>
+        <div class="bg3"></div>
+      </div>
+
+      <h2>Rarer Cases</h2>
+
+      <!-- This image does not opt in. It will always be shown at 1x -->
+      <div class="img-wrapper">
+        <h3>External URL w/ Naming Convention</h3>
+        <p>
+          This image is pulled in externally. Retina.js should still work
+          on external files. Thanks to
+          <a href="http://powinteractive.com">POWINTERACTIVE</a>
+          for unwittingly allowing us to borrow their logo :)
+        </p>
+        <img
+          src="http://powinteractive.com/wp-content/uploads/2015/03/pow-circle-logo.png"
+          data-rjs="2"
+        />
+      </div>
+
+      <!-- This image does not opt in. It will always be shown at 1x -->
+      <div class="img-wrapper">
+        <h3>External URL w/o Naming Convention</h3>
+        <p>
+          retina.js continues to provide basic support for manually indicating
+          a direct URL for a "retina" image. Note that this technique does not
+          allow for multiple images to be associated with multiple pixel densities.
+        </p>
+        <img
+          src="https://www.google.com/logos/2012/doisneau12-hp.jpg"
+          data-rjs="http://www.google.com/logos/2012/wilhelm_busch-2012-hp.jpg"
+          style="max-width: 100%"
+        />
+      </div>
+
+      <!-- This image should be shown at 2x all retina environments,
+           but shown at 1x in non-retina environments. -->
+      <div class="img-wrapper">
+        <h3>Inline Background Image</h3>
+        <p>
+          This image should be shown at 2x all retina environments,
+          but shown at 1x in non-retina environments.
+        </p>
+        <div data-rjs="2" style="background: url(google-logo.png) center center no-repeat; background-size: 300px 99px; width: 300px; height: 99px; margin: 0 auto;"></div>
+      </div>
+
+    </div>
+
+
+    <script type="text/javascript" charset="utf-8" src="retina.min.js"></script>
+  </body>
+</html>