jrnl/_static/less/retina.less

// A helper mixin for applying high-resolution background images (http://www.retinajs.com)

@highdpi: ~"(-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)";

.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;
  background-size: @w @h;

  @media @highdpi {
    background-image: url("@{at2x_path}");
  }
}

// Sprite mixin, see https://coderwall.com/p/oztebw

.sprite (@path, @size, @w, @h, @pad: 0) when (isstring(@path))
    {
    background-image: url(@path);
    width: @size;
    height: @size;
    display: inline-block;
    @at2x_path: ~`@{path}.replace(/\.[\w\?=]+$/, function(match) { return "@2x" + match; })`;
    font-size: @size + @pad;
    background-size: (@size + @pad) * @w   (@size + @pad) * @h;
    @media @highdpi
        {
        background-image: url("@{at2x_path}");
        }
    }

.sprite(@x, @y)
    {
    background-position: -@x * 1em -@y * 1em;
    }