jekyll-theme-chalk 0.1.1

data/_assets/yarn/retinajs/test/functional/public/styles/_retina.sass

@@ -0,0 +1,68 @@
+// retina.sass
+// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
+
+// Submitted by Nathan Crank
+// nathancrank.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  {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)
+
+  // 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
+
+  @else
+    background: url("#{$path}") $extras
+    background-size: $size

data/_assets/yarn/retinajs/test/functional/public/styles/_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/test/functional/public/styles/less-base.less

@@ -0,0 +1,13 @@
+@import 'retina.less';
+
+.bg {
+  background: url('../ipad.png') center center no-repeat;
+}
+
+.bg2 {
+  .retina('../ipad.png', 2, 300px 149px, center center no-repeat);
+}
+
+.bg3 {
+  .retina('../ipad.png', 3, 300px 149px, center center no-repeat);
+}

data/_assets/yarn/retinajs/test/functional/public/styles/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/test/functional/public/styles/retina.less.css

@@ -0,0 +1,73 @@
+/**
+ * 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.
+ */
+.bg {
+  background: url('../ipad.png') center center no-repeat;
+}
+.bg2 {
+  /*
+   * Set a base background for 1x environments.
+   */
+  background: url('../ipad.png') center center no-repeat;
+  background-size: 300px 149px;
+  /*
+   * Create an @2x-ish media query.
+   */
+  /*
+   * Create media queries for all environments that the user has
+   * provided images for.
+   */
+}
+@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) {
+  .bg2 {
+    background: url(../ipad@2x.png) center center no-repeat;
+    background-size: 300px 149px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2 * 96dpi) {
+  .bg2 {
+    background: url(../ipad@2x.png) center center no-repeat;
+    background-size: 300px 149px;
+  }
+}
+.bg3 {
+  /*
+   * Set a base background for 1x environments.
+   */
+  background: url('../ipad.png') center center no-repeat;
+  background-size: 300px 149px;
+  /*
+   * Create an @2x-ish media query.
+   */
+  /*
+   * Create media queries for all environments that the user has
+   * provided images for.
+   */
+}
+@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) {
+  .bg3 {
+    background: url(../ipad@2x.png) center center no-repeat;
+    background-size: 300px 149px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2 * 96dpi) {
+  .bg3 {
+    background: url(../ipad@2x.png) center center no-repeat;
+    background-size: 300px 149px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3 * 96dpi) {
+  .bg3 {
+    background: url(../ipad@3x.png) center center no-repeat;
+    background-size: 300px 149px;
+  }
+}

data/_assets/yarn/retinajs/test/functional/public/styles/retina.sass.css

@@ -0,0 +1,42 @@
+/**
+ * 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.
+ */
+.bg {
+  background: url("../ipad.png") center center no-repeat; }
+
+.bg2 {
+  background: url("../ipad.png") center center no-repeat;
+  background-size: 300px 149px; }
+  @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) {
+    .bg2 {
+      background: url("../ipad@2x.png") center center no-repeat;
+      background-size: 300px 149px; } }
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    .bg2 {
+      background: url("../ipad@2x.png") center center no-repeat;
+      background-size: 300px 149px; } }
+
+.bg3 {
+  background: url("../ipad.png") center center no-repeat;
+  background-size: 300px 149px; }
+  @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) {
+    .bg3 {
+      background: url("../ipad@2x.png") center center no-repeat;
+      background-size: 300px 149px; } }
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    .bg3 {
+      background: url("../ipad@2x.png") center center no-repeat;
+      background-size: 300px 149px; } }
+  @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
+    .bg3 {
+      background: url("../ipad@3x.png") center center no-repeat;
+      background-size: 300px 149px; } }

data/_assets/yarn/retinajs/test/functional/public/styles/retina.scss.css

@@ -0,0 +1,96 @@
+/**
+ * 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.
+ */
+.bg {
+  background: url("../ipad.png") center center no-repeat; }
+
+.bg2 {
+  /*
+   * Set a counter and get the length of the image path.
+   */
+  /*
+   * Loop ver the image path and figure out the
+   * position of the dot where the extension begins.
+   */
+  /*
+   * 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.
+   */
+  /*
+     * Set a base background for 1x environments.
+     */
+  background: url("../ipad.png") center center no-repeat;
+  background-size: 300px 149px;
+  /*
+     * Create an @2x-ish media query.
+     */
+  /*
+     * Create media queries for all environments that the user has
+     * provided images for.
+     */
+  /*
+   * If anything went wrong trying to separate the file from its
+   * extension, set a background value without doing anything to it.
+   */ }
+  @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) {
+    .bg2 {
+      background: url("../ipad@2x.png") center center no-repeat;
+      background-size: 300px 149px; } }
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    .bg2 {
+      background: url("../ipad@2x.png") center center no-repeat;
+      background-size: 300px 149px; } }
+
+.bg3 {
+  /*
+   * Set a counter and get the length of the image path.
+   */
+  /*
+   * Loop ver the image path and figure out the
+   * position of the dot where the extension begins.
+   */
+  /*
+   * 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.
+   */
+  /*
+     * Set a base background for 1x environments.
+     */
+  background: url("../ipad.png") center center no-repeat;
+  background-size: 300px 149px;
+  /*
+     * Create an @2x-ish media query.
+     */
+  /*
+     * Create media queries for all environments that the user has
+     * provided images for.
+     */
+  /*
+   * If anything went wrong trying to separate the file from its
+   * extension, set a background value without doing anything to it.
+   */ }
+  @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) {
+    .bg3 {
+      background: url("../ipad@2x.png") center center no-repeat;
+      background-size: 300px 149px; } }
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    .bg3 {
+      background: url("../ipad@2x.png") center center no-repeat;
+      background-size: 300px 149px; } }
+  @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
+    .bg3 {
+      background: url("../ipad@3x.png") center center no-repeat;
+      background-size: 300px 149px; } }