jekyll-theme-chalk 0.1.1

data/_assets/yarn/retinajs/es/_retina.scss

@@ -0,0 +1,102 @@
+// retina.scss
+// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
+
+// Submitted by Nathan Crank
+// nathancrank.com
+
+// Updated by Gabriel R. Sezefredo
+// gabriel.sezefredo.com.br
+
+// Updated by John Newman
+// github.com/jgnewman
+// http://axial.agency
+
+
+/**
+ * Allows you to use retina images at various pixel densities.
+ * Examples:
+ *
+ *   @include retina(/images/mypic.jpg, 2);
+ *   @include 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.
+ */
+@mixin retina($path, $cap: 2, $size: auto auto, $extras: null) {
+
+  /*
+   * Set a counter and get the length of the image path.
+   */
+  $position: -1;
+  $strpath: '#{$path}';
+  $length: str-length($strpath);
+
+  /*
+   * Loop ver the image path and figure out the
+   * position of the dot where the extension begins.
+   */
+  @for $i from $length through $length - 10{
+      @if $position == -1 {
+          $char : str-slice($strpath, $i, $i);
+          @if str-index($char, ".") == 1 {
+              $position: $i;
+          }
+      }
+  }
+
+  /*
+   * If we were able to figure out where the extension is,
+   * slice the path into a base and an extension. Use that to
+   * calculate urls for different density environments. Set
+   * values for different environments.
+   */
+  @if $position != -1 {
+    $ext: str-slice($strpath, $position + 1, $length);
+    $base: str-slice($strpath, 1, $position - 1);
+    $at1x_path: "#{$base}.#{$ext}";
+    $at2x_path: "#{$base}@2x.#{$ext}";
+
+    /*
+     * Set a base background for 1x environments.
+     */
+    background: url("#{$at1x_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("#{$at2x_path}") $extras;
+             background-size : $size;
+    }
+
+    /*
+     * Create media queries for all environments that the user has
+     * provided images for.
+     */
+    @if $cap >= 2 {
+      @for $env from 2 through $cap {
+        $suffix: "@#{$env}x";
+        @media (-webkit-min-device-pixel-ratio: $env),
+               (min-resolution: $env * 96dpi) {
+                 background      : url("#{$base}#{$suffix}.#{$ext}") $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/es/retina.js

@@ -0,0 +1,91 @@
+const hasWindow = typeof window !== 'undefined';
+const environment = Math.round(hasWindow ? window.devicePixelRatio || 1 : 1);
+const srcReplace = /(\.[A-z]{3,4}\/?(\?.*)?)$/;
+const inlineReplace = /url\(('|")?([^)'"]+)('|")?\)/i;
+const selector = '[data-rjs]';
+const processedAttr = 'data-rjs-processed';
+function arrayify(object) {
+  return Array.prototype.slice.call(object);
+}
+function chooseCap(cap) {
+  const numericCap = parseInt(cap, 10);
+  if (environment < numericCap) {
+    return environment;
+  } else {
+    return numericCap;
+  }
+}
+function forceOriginalDimensions(image) {
+  if (!image.hasAttribute('data-no-resize')) {
+    if (image.offsetWidth === 0 && image.offsetHeight === 0) {
+      image.setAttribute('width', image.naturalWidth);
+      image.setAttribute('height', image.naturalHeight);
+    } else {
+      image.setAttribute('width', image.offsetWidth);
+      image.setAttribute('height', image.offsetHeight);
+    }
+  }
+  return image;
+}
+function setSourceIfAvailable(image, retinaURL) {
+  const imgType = image.nodeName.toLowerCase();
+  const testImage = document.createElement('img');
+  testImage.addEventListener('load', () => {
+    if (imgType === 'img') {
+      forceOriginalDimensions(image).setAttribute('src', retinaURL);
+    } else {
+      image.style.backgroundImage = `url(${retinaURL})`;
+    }
+  });
+  testImage.setAttribute('src', retinaURL);
+  image.setAttribute(processedAttr, true);
+}
+function dynamicSwapImage(image, src, rjs = 1) {
+  const cap = chooseCap(rjs);
+  if (src && cap > 1) {
+    const newSrc = src.replace(srcReplace, `@${cap}x$1`);
+    setSourceIfAvailable(image, newSrc);
+  }
+}
+function manualSwapImage(image, src, hdsrc) {
+  if (environment > 1) {
+    setSourceIfAvailable(image, hdsrc);
+  }
+}
+function getImages(images) {
+  if (!images) {
+    return typeof document !== 'undefined' ? arrayify(document.querySelectorAll(selector)) : [];
+  } else {
+    return typeof images.forEach === 'function' ? images : arrayify(images);
+  }
+}
+function cleanBgImg(img) {
+  return img.style.backgroundImage.replace(inlineReplace, '$2');
+}
+function retina(images) {
+  getImages(images).forEach(img => {
+    if (!img.getAttribute(processedAttr)) {
+      const isImg = img.nodeName.toLowerCase() === 'img';
+      const src = isImg ? img.getAttribute('src') : cleanBgImg(img);
+      const rjs = img.getAttribute('data-rjs');
+      const rjsIsNumber = !isNaN(parseInt(rjs, 10));
+      if (rjs === null) {
+        return;
+      }
+      if (rjsIsNumber) {
+        dynamicSwapImage(img, src, rjs);
+      } else {
+        manualSwapImage(img, src, rjs);
+      }
+    }
+  });
+}
+if (hasWindow) {
+  window.addEventListener('load', () => {
+    retina();
+  });
+  window.retinajs = retina;
+}
+
+export default retina;
+//# sourceMappingURL=retina.js.map

data/_assets/yarn/retinajs/es/retina.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"retina.js","sources":["../src/retina.js"],"sourcesContent":["/* @flow */\n\n/**\n * --------------------------------------------------------------------------\n * Retina.js\n * Licensed under MIT (https://github.com/strues/retinajs/blob/master/LICENSE)\n *\n * Retina.js is an open source script that makes it easy to serve high-resolution\n * images to devices with retina displays.\n * --------------------------------------------------------------------------\n */\n\n/*\n * Determine whether or not `window` is available.\n */\nconst hasWindow = typeof window !== 'undefined';\n\n/*\n * Get the device pixel ratio per our environment.\n * Default to 1.\n */\nconst environment = Math.round(hasWindow ? window.devicePixelRatio || 1 : 1);\n\n/*\n * Define a pattern for capturing src url suffixes.\n */\nconst srcReplace = /(\\.[A-z]{3,4}\\/?(\\?.*)?)$/;\nconst inlineReplace = /url\\(('|\")?([^)'\"]+)('|\")?\\)/i;\n\n/*\n * Define our selectors for elements to target.\n */\nconst selector = '[data-rjs]';\n\n/*\n * Define the attribute we'll use to mark an image as having been processed.\n */\nconst processedAttr = 'data-rjs-processed';\n\n/**\n * Shortcut for turning some iterable object into an array.\n *\n * @param  {Iterable} object Any iterable object.\n *\n * @return {Array}\n */\nfunction arrayify(object) {\n  return Array.prototype.slice.call(object);\n}\n\n/**\n * Chooses the actual image size to fetch, (for example 2 or 3) that\n * will be used to create a suffix like \"@2x\" or \"@3x\".\n *\n * @param  {String|Number} cap The number the user provided indicating that\n *                             they have prepared images up to this size.\n *\n * @return {Number} The number we'll be using to create a suffix.\n */\nfunction chooseCap(cap) {\n  const numericCap = parseInt(cap, 10);\n\n  /*\n   * If the environment's device pixel ratio is less than what the user\n   * provided, we'll only grab images at that size.\n   */\n  if (environment < numericCap) {\n    return environment;\n\n    /*\n   * If the device pixel ratio is greater than or equal to what the\n   * user provided, we'll use what the user provided.\n   */\n  } else {\n    return numericCap;\n  }\n}\n\n/**\n * Makes sure that, since we are going to swap out the source of an image,\n * the image does not change size on the page.\n *\n * @param  {Element} image An image element in the DOM.\n *\n * @return {Element} The same element that was passed in.\n */\nfunction forceOriginalDimensions(image) {\n  if (!image.hasAttribute('data-no-resize')) {\n    if (image.offsetWidth === 0 && image.offsetHeight === 0) {\n      image.setAttribute('width', image.naturalWidth);\n      image.setAttribute('height', image.naturalHeight);\n    } else {\n      image.setAttribute('width', image.offsetWidth);\n      image.setAttribute('height', image.offsetHeight);\n    }\n  }\n  return image;\n}\n\n/**\n * Determines whether the retina image actually exists on the server.\n * If so, swaps out the retina image for the standard one. If not,\n * leaves the original image alone.\n *\n * @param {Element} image  An image element in the DOM.\n * @param {String}  newSrc The url to the retina image.\n *\n * @return {undefined}\n */\nfunction setSourceIfAvailable(image, retinaURL) {\n  const imgType = image.nodeName.toLowerCase();\n\n  /*\n   * Create a new image element and give it a load listener. When the\n   * load listener fires, it means the URL is correct and we will then\n   * attach it to the user's image.\n   */\n  const testImage = document.createElement('img');\n  testImage.addEventListener('load', () => {\n    /*\n     * If we're dealing with an image tag, force it's dimensions\n     * and set the source attribute. If not, go after the background-image\n     * inline style.\n     */\n    if (imgType === 'img') {\n      forceOriginalDimensions(image).setAttribute('src', retinaURL);\n    } else {\n      image.style.backgroundImage = `url(${retinaURL})`;\n    }\n  });\n\n  /*\n   * Attach the retina URL to our proxy image to load in the new\n   * image resource.\n   */\n  testImage.setAttribute('src', retinaURL);\n\n  /*\n   * Mark our image as processed so that it won't be processed again.\n   */\n  image.setAttribute(processedAttr, true);\n}\n\n/**\n * Attempts to do an image url swap on a given image.\n *\n * @param  {Element}       image An image in the DOM.\n * @param  {String}        src   The original image source attribute.\n * @param  {String|Number} rjs   The pixel density cap for images provided.\n *\n * @return {undefined}\n */\nfunction dynamicSwapImage(image, src, rjs = 1) {\n  const cap = chooseCap(rjs);\n\n  /*\n   * Don't do anything if the cap is less than 2 or there is no src.\n   */\n  if (src && cap > 1) {\n    const newSrc = src.replace(srcReplace, `@${cap}x$1`);\n    setSourceIfAvailable(image, newSrc);\n  }\n}\n\n/**\n * Performs an image url swap on a given image with a provided url.\n *\n * @param  {Element} image  An image in the DOM.\n * @param  {String}  src    The original image source attribute.\n * @param  {String}  hdsrc  The path for a 2x image.\n *\n * @return {undefined}\n */\nfunction manualSwapImage(image, src, hdsrc) {\n  if (environment > 1) {\n    setSourceIfAvailable(image, hdsrc);\n  }\n}\n\n/**\n * Collects all images matching our selector, and converts our\n * NodeList into an Array so that Array methods will be available to it.\n *\n * @param {Iterable} images  Optional. An Array, jQuery selection, or NodeList\n *                           of elements to affect with retina.js.\n *\n * @return {Iterable} Contains all elements matching our selector.\n */\nfunction getImages(images) {\n  if (!images) {\n    return typeof document !== 'undefined' ? arrayify(document.querySelectorAll(selector)) : [];\n  } else {\n    return typeof images.forEach === 'function' ? images : arrayify(images);\n  }\n}\n\n/**\n * Converts a string like \"url(hello.png)\" into \"hello.png\".\n *\n * @param  {Element} img An HTML element with a background image.\n *\n * @return {String}\n */\nfunction cleanBgImg(img) {\n  return img.style.backgroundImage.replace(inlineReplace, '$2');\n}\n\n/**\n * Gets all participating images and dynamically swaps out each one for its\n * retina equivalent taking into account the environment capabilities and\n * the densities for which the user has provided images.\n *\n * @param {Iterable} images  Optional. An Array, jQuery selection, or NodeList\n *                           of elements to affect with retina.js. If not\n *                           provided, retina.js will grab all images on the\n *                           page.\n *\n * @return {undefined}\n */\nfunction retina(images) {\n  getImages(images).forEach(img => {\n    if (!img.getAttribute(processedAttr)) {\n      const isImg = img.nodeName.toLowerCase() === 'img';\n      const src = isImg ? img.getAttribute('src') : cleanBgImg(img);\n      const rjs = img.getAttribute('data-rjs');\n      const rjsIsNumber = !isNaN(parseInt(rjs, 10));\n\n      // do not try to load /null image!\n      if (rjs === null) {\n        return;\n      }\n\n      /*\n       * If the user provided a number, dynamically swap out the image.\n       * If the user provided a url, do it manually.\n       */\n      if (rjsIsNumber) {\n        dynamicSwapImage(img, src, rjs);\n      } else {\n        manualSwapImage(img, src, rjs);\n      }\n    }\n  });\n}\n\n/*\n * If this environment has `window`, activate the plugin.\n */\nif (hasWindow) {\n  window.addEventListener('load', () => {\n    retina();\n  });\n  window.retinajs = retina;\n}\n\nexport default retina;\n"],"names":[],"mappings":"AAeA,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAMhD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,gBAAgB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAK7E,MAAM,UAAU,GAAG,2BAA2B,CAAC;AAC/C,MAAM,aAAa,GAAG,+BAA+B,CAAC;AAKtD,MAAM,QAAQ,GAAG,YAAY,CAAC;AAK9B,MAAM,aAAa,GAAG,oBAAoB,CAAC;AAS3C,SAAS,QAAQ,CAAC,MAAM,EAAE;EACxB,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;CAC3C;AAWD,SAAS,SAAS,CAAC,GAAG,EAAE;EACtB,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;EAMrC,IAAI,WAAW,GAAG,UAAU,EAAE;IAC5B,OAAO,WAAW,CAAC;GAMpB,MAAM;IACL,OAAO,UAAU,CAAC;GACnB;CACF;AAUD,SAAS,uBAAuB,CAAC,KAAK,EAAE;EACtC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE;IACzC,IAAI,KAAK,CAAC,WAAW,KAAK,CAAC,IAAI,KAAK,CAAC,YAAY,KAAK,CAAC,EAAE;MACvD,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;MAChD,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;KACnD,MAAM;MACL,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;MAC/C,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;KAClD;GACF;EACD,OAAO,KAAK,CAAC;CACd;AAYD,SAAS,oBAAoB,CAAC,KAAK,EAAE,SAAS,EAAE;EAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;EAO7C,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAChD,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM;IAMvC,IAAI,OAAO,KAAK,KAAK,EAAE;MACrB,uBAAuB,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;KAC/D,MAAM;MACL,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;KACnD;GACF,CAAC,CAAC;EAMH,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;EAKzC,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;CACzC;AAWD,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,EAAE;EAC7C,MAAM,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;EAK3B,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC,EAAE;IAClB,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IACrD,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;GACrC;CACF;AAWD,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE;EAC1C,IAAI,WAAW,GAAG,CAAC,EAAE;IACnB,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;GACpC;CACF;AAWD,SAAS,SAAS,CAAC,MAAM,EAAE;EACzB,IAAI,CAAC,MAAM,EAAE;IACX,OAAO,OAAO,QAAQ,KAAK,WAAW,GAAG,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;GAC7F,MAAM;IACL,OAAO,OAAO,MAAM,CAAC,OAAO,KAAK,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;GACzE;CACF;AASD,SAAS,UAAU,CAAC,GAAG,EAAE;EACvB,OAAO,GAAG,CAAC,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;CAC/D;AAcD,SAAS,MAAM,CAAC,MAAM,EAAE;EACtB,SAAS,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI;IAC/B,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE;MACpC,MAAM,KAAK,GAAG,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;MACnD,MAAM,GAAG,GAAG,KAAK,GAAG,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;MAC9D,MAAM,GAAG,GAAG,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;MACzC,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;MAG9C,IAAI,GAAG,KAAK,IAAI,EAAE;QAChB,OAAO;OACR;MAMD,IAAI,WAAW,EAAE;QACf,gBAAgB,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;OACjC,MAAM;QACL,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;OAChC;KACF;GACF,CAAC,CAAC;CACJ;AAKD,IAAI,SAAS,EAAE;EACb,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM;IACpC,MAAM,EAAE,CAAC;GACV,CAAC,CAAC;EACH,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC;CAC1B;;;;"}

data/_assets/yarn/retinajs/es/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/es/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/gulpfile.babel.js

@@ -0,0 +1,154 @@
+'use strict';
+
+import gulp from 'gulp';
+import pkg from './package.json';
+import load from 'gulp-load-plugins';
+import inject from 'gulp-inject-string';
+import del from 'del';
+import runSequence from 'run-sequence';
+import browsersync from 'browser-sync';
+
+const $ = load();
+const head = '/*!\n' +
+           ' * Retina.js v<%= pkg.version %>\n' +
+           ' *\n' +
+           ' * Copyright 2016 Axial, LLC\n' +
+           ' * Released under the MIT license\n' +
+           ' *\n' +
+           ' * Retina.js is an open source script that makes it easy to serve\n' +
+           ' * high-resolution images to devices with retina displays.\n' +
+           ' */\n';
+
+
+const entry = './src/retina.js';
+const scssEntry = './src/_retina.scss';
+const sassEntry = './src/_retina.sass';
+const lessEntry = './src/retina.less';
+const stylEntry = './src/retina.styl';
+const server = browsersync.create();
+
+
+function cleanTask() {
+  return del(['dist']);
+}
+
+function buildJsTask() {
+  return gulp.src(entry)
+    // Distribute unminified file
+    .pipe($.babel())
+    .pipe($.banner(head, { pkg: pkg }))
+    .pipe(gulp.dest('./dist/'))
+
+    // Minify it, distribute it, drop it in the test dir
+    .pipe($.uglify({ preserveComments: 'license' }))
+    .pipe($.rename('retina.min.js'))
+    .pipe($.size())
+    .pipe(gulp.dest('./dist/'))
+    .pipe(gulp.dest('./test/functional/public/'));
+}
+
+function lintTask() {
+  return gulp.src(entry)
+    .pipe($.eslint())
+    .pipe($.eslint.format());
+}
+
+function serveTask() {
+  return server.init({
+    server: './test/functional/public',
+    port: 8080
+  });
+}
+
+function cssDistTask() {
+  return gulp.src([sassEntry, scssEntry, lessEntry, stylEntry])
+    .pipe(gulp.dest('./dist/'));
+}
+
+function scssPrepTask() {
+  return gulp.src(scssEntry).pipe(gulp.dest('./test/functional/public/styles/'));
+}
+
+function sassPrepTask() {
+  return gulp.src(sassEntry).pipe(gulp.dest('./test/functional/public/styles/'));
+}
+
+function lessPrepTask() {
+  return gulp.src(lessEntry).pipe(gulp.dest('./test/functional/public/styles/'));
+}
+
+function stylusPrepTask() {
+  return gulp.src(stylEntry).pipe(gulp.dest('./test/functional/public/styles/'));
+}
+
+function scssCompileTask() {
+  return gulp.src('./test/functional/public/styles/scss-base.scss')
+       .pipe($.sass().on('error', $.sass.logError))
+       .pipe($.rename('retina.scss.css'))
+       .pipe(gulp.dest('./test/functional/public/styles/'));
+}
+
+function sassCompileTask() {
+  return gulp.src('./test/functional/public/styles/sass-base.sass')
+       .pipe($.sass().on('error', $.sass.logError))
+       .pipe($.rename('retina.sass.css'))
+       .pipe(gulp.dest('./test/functional/public/styles/'));
+}
+
+function lessCompileTask() {
+  return gulp.src('./test/functional/public/styles/less-base.less')
+       .pipe($.less())
+       .pipe($.rename('retina.less.css'))
+       .pipe(gulp.dest('./test/functional/public/styles/'));
+}
+
+function stylusCompileTask() {
+  return gulp.src('./test/functional/public/styles/styl-base.styl')
+       .pipe($.stylus())
+       .pipe($.rename('retina.styl.css'))
+       .pipe(gulp.dest('./test/functional/public/styles/'));
+}
+
+function cssBuildTask() {
+  return runSequence(
+    ['prep-scss', 'prep-sass', 'prep-less', 'prep-stylus'],
+    ['compile-scss', 'compile-sass', 'compile-less', 'compile-stylus']
+  );
+}
+
+gulp.task('clean', cleanTask);
+gulp.task('build-js', buildJsTask);
+gulp.task('dist-css', cssDistTask);
+gulp.task('serve', serveTask);
+gulp.task('lint', lintTask);
+gulp.task('prep-scss', scssPrepTask);
+gulp.task('prep-sass', sassPrepTask);
+gulp.task('prep-less', lessPrepTask);
+gulp.task('prep-stylus', stylusPrepTask);
+gulp.task('compile-scss', scssCompileTask);
+gulp.task('compile-sass', sassCompileTask);
+gulp.task('compile-less', lessCompileTask);
+gulp.task('compile-stylus', stylusCompileTask);
+gulp.task('build-css', cssBuildTask);
+
+
+// The dist task will clean and lint files, it will
+// then build for the browser and build for node.
+gulp.task('dist', ['clean', 'lint'], (cb) => {
+  runSequence('dist-css', 'build-js', cb);
+});
+
+// The dev task will build the code, then start the server.
+// It will also watch for changes in the source and in the
+// public dir. If it sees changes it will run build again
+// and then refresh the server.
+gulp.task('dev', ['clean', 'lint'], () => {
+  runSequence(['build-js', 'build-css'], 'serve', () => {
+    gulp.watch(['./test/functional/public/index.html', './src/**/*'], () => {
+      runSequence('lint', ['build-js', 'build-css'], () => server.reload());
+    });
+    gulp.watch('./test/functional/public/styles/*', () => {
+      runSequence('build-css', () => server.reload());
+    });
+  });
+});