Implement retina versions of the header navigation background and site logo, and add auto-switching retinajs library.
This commit is contained in:
Buster Silver
parent
4d9a13df65
commit
497a7e73c3
|
|
@ -31,14 +31,14 @@ if (APP_APPLICATION_ENV != "production")
|
|||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/jquery/dist/jquery.min.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
|
||||
|
||||
<script>
|
||||
<script type="text/javascript">
|
||||
var APP_AppEnv = '<?=(defined('APP_APPLICATION_ENV') ? APP_APPLICATION_ENV : '') ?>';
|
||||
var APP_BaseUrl = '<?=$url->named('home') ?>';
|
||||
var APP_ContentPath = '<?=$url->content('') ?>';
|
||||
</script>
|
||||
</head>
|
||||
<body class="<?=$page_class ?> <?php if (!empty($station)): ?>toggled sw-toggled<?php endif; ?>">
|
||||
<header id="header" class="clearfix" data-current-skin="blue">
|
||||
<header id="header" class="clearfix" data-current-skin="blue" style="background-image: url('<?=$url->content('img/header_bg.png') ?>');" data-rjs="3">
|
||||
<ul class="header-inner">
|
||||
<?php if (!empty($station)): ?>
|
||||
<li id="menu-trigger" data-trigger="#sidebar">
|
||||
|
|
@ -52,7 +52,7 @@ var APP_ContentPath = '<?=$url->content('') ?>';
|
|||
|
||||
<li class="logo">
|
||||
<a href="<?=$url->named('home') ?>">
|
||||
<img src="<?=$url->content('img/logo.png') ?>" alt="<?=$config->application->name ?>">
|
||||
<img src="<?=$url->content('img/logo.png') ?>" alt="<?=$config->application->name ?>" data-rjs="3">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
|
@ -167,6 +167,7 @@ var APP_ContentPath = '<?=$url->content('') ?>';
|
|||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/bootstrap-sweetalert/lib/sweet-alert.min.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/autosize/dist/autosize.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bootgrid/jquery.bootgrid.updated.js') ?>"></script>
|
||||
|
||||
<script type="text/javascript" src="<?=$url->content('js/functions.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?=$url->content('js/app.js') ?>"></script>
|
||||
|
||||
|
|
@ -179,5 +180,8 @@ var APP_ContentPath = '<?=$url->content('') ?>';
|
|||
});
|
||||
</script>
|
||||
<? endif; ?>
|
||||
|
||||
<script type="text/javascript" src="<?=$url->content('js/retinajs/retina.min.js') ?>"></script>
|
||||
<script type="text/javascript">retinajs();</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,38 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<?php
|
||||
if ($title)
|
||||
$page_title = $title.' - '.$config->application->name;
|
||||
else
|
||||
$page_title = $config->application->name;
|
||||
<?php
|
||||
if ($title)
|
||||
$page_title = $title.' - '.$config->application->name;
|
||||
else
|
||||
$page_title = $config->application->name;
|
||||
|
||||
if (APP_APPLICATION_ENV != "production")
|
||||
$page_title = '('.ucfirst(APP_APPLICATION_ENV).') '.$page_title;
|
||||
?>
|
||||
<title><?=$page_title ?></title>
|
||||
if (APP_APPLICATION_ENV != "production")
|
||||
$page_title = '('.ucfirst(APP_APPLICATION_ENV).') '.$page_title;
|
||||
?>
|
||||
<title><?=$page_title ?></title>
|
||||
|
||||
<?=$this->fetch('partials/icons') ?>
|
||||
<?=$this->fetch('partials/icons') ?>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/animate.css/animate.min.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/components-font-awesome/css/font-awesome.min.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('css/app.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/animate.css/animate.min.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/components-font-awesome/css/font-awesome.min.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('css/app.css') ?>">
|
||||
|
||||
<?=$this->section('custom_css') ?>
|
||||
<?=$this->section('custom_css') ?>
|
||||
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/jquery/dist/jquery.min.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/jquery/dist/jquery.min.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
|
||||
|
||||
<script>
|
||||
var APP_AppEnv = '<?=(defined('APP_APPLICATION_ENV') ? APP_APPLICATION_ENV : '') ?>';
|
||||
var APP_BaseUrl = '<?=$url->named('home') ?>';
|
||||
var APP_ContentPath = '<?=$url->content('') ?>';
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var APP_AppEnv = '<?=(defined('APP_APPLICATION_ENV') ? APP_APPLICATION_ENV : '') ?>';
|
||||
var APP_BaseUrl = '<?=$url->named('home') ?>';
|
||||
var APP_ContentPath = '<?=$url->content('') ?>';
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="<?=$page_class ?>">
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
/*!
|
||||
* Retina.js v2.1.0
|
||||
*
|
||||
* Copyright 2016 Axial, LLC
|
||||
* Released under the MIT license
|
||||
*
|
||||
* Retina.js is an open source script that makes it easy to serve
|
||||
* high-resolution images to devices with retina displays.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
/*
|
||||
* Determine whether or not `window` is available.
|
||||
*/
|
||||
var hasWindow = typeof window !== 'undefined';
|
||||
|
||||
/*
|
||||
* Get the device pixel ratio per our environment.
|
||||
* Default to 1.
|
||||
*/
|
||||
var environment = hasWindow ? window.devicePixelRatio || 1 : 1;
|
||||
|
||||
/*
|
||||
* Define a pattern for capturing src url suffixes.
|
||||
*/
|
||||
var srcReplace = /(\.[A-z]{3,4}\/?(\?.*)?)$/;
|
||||
var inlineReplace = /url\(('|")?([^\)'"]+)('|")?\)/i;
|
||||
|
||||
/*
|
||||
* Define our selectors for elements to target.
|
||||
*/
|
||||
var selector = '[data-rjs]';
|
||||
|
||||
/*
|
||||
* Define the attribute we'll use to mark an image as having been processed.
|
||||
*/
|
||||
var processedAttr = 'data-rjs-processed';
|
||||
|
||||
/**
|
||||
* Shortcut for turning some iterable object into an array.
|
||||
*
|
||||
* @param {Iterable} object Any iterable object.
|
||||
*
|
||||
* @return {Array}
|
||||
*/
|
||||
function arrayify(object) {
|
||||
return Array.prototype.slice.call(object);
|
||||
}
|
||||
|
||||
/**
|
||||
* Chooses the actual image size to fetch, (for example 2 or 3) that
|
||||
* will be used to create a suffix like "@2x" or "@3x".
|
||||
*
|
||||
* @param {String|Number} cap The number the user provided indicating that
|
||||
* they have prepared images up to this size.
|
||||
*
|
||||
* @return {Number} The number we'll be using to create a suffix.
|
||||
*/
|
||||
function chooseCap(cap) {
|
||||
var numericCap = parseInt(cap, 10);
|
||||
|
||||
/*
|
||||
* If the environment's device pixel ratio is less than what the user
|
||||
* provided, we'll only grab images at that size.
|
||||
*/
|
||||
if (environment < numericCap) {
|
||||
return environment;
|
||||
|
||||
/*
|
||||
* If the device pixel ratio is greater than or equal to what the
|
||||
* user provided, we'll use what the user provided.
|
||||
*/
|
||||
} else {
|
||||
return numericCap;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Makes sure that, since we are going to swap out the source of an image,
|
||||
* the image does not change size on the page.
|
||||
*
|
||||
* @param {Element} image An image element in the DOM.
|
||||
*
|
||||
* @return {Element} The same element that was passed in.
|
||||
*/
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines whether the retina image actually exists on the server.
|
||||
* If so, swaps out the retina image for the standard one. If not,
|
||||
* leaves the original image alone.
|
||||
*
|
||||
* @param {Element} image An image element in the DOM.
|
||||
* @param {String} newSrc The url to the retina image.
|
||||
*
|
||||
* @return {undefined}
|
||||
*/
|
||||
function setSourceIfAvailable(image, retinaURL) {
|
||||
var imgType = image.nodeName.toLowerCase();
|
||||
|
||||
/*
|
||||
* Create a new image element and give it a load listener. When the
|
||||
* load listener fires, it means the URL is correct and we will then
|
||||
* attach it to the user's image.
|
||||
*/
|
||||
var testImage = document.createElement('img');
|
||||
testImage.addEventListener('load', function () {
|
||||
/*
|
||||
* If we're dealing with an image tag, force it's dimensions
|
||||
* and set the source attribute. If not, go after the background-image
|
||||
* inline style.
|
||||
*/
|
||||
if (imgType === 'img') {
|
||||
forceOriginalDimensions(image).setAttribute('src', retinaURL);
|
||||
} else {
|
||||
image.style.backgroundImage = 'url(' + retinaURL + ')';
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* Attach the retina URL to our proxy image to load in the new
|
||||
* image resource.
|
||||
*/
|
||||
testImage.setAttribute('src', retinaURL);
|
||||
|
||||
/*
|
||||
* Mark our image as processed so that it won't be processed again.
|
||||
*/
|
||||
image.setAttribute(processedAttr, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Attempts to do an image url swap on a given image.
|
||||
*
|
||||
* @param {Element} image An image in the DOM.
|
||||
* @param {String} src The original image source attribute.
|
||||
* @param {String|Number} rjs The pixel density cap for images provided.
|
||||
*
|
||||
* @return {undefined}
|
||||
*/
|
||||
function dynamicSwapImage(image, src) {
|
||||
var rjs = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];
|
||||
|
||||
var cap = chooseCap(rjs);
|
||||
|
||||
console.log(cap);
|
||||
|
||||
/*
|
||||
* Don't do anything if the cap is less than 2 or there is no src.
|
||||
*/
|
||||
if (src && cap > 1) {
|
||||
var newSrc = src.replace(srcReplace, '@' + cap + 'x$1');
|
||||
setSourceIfAvailable(image, newSrc);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Performs an image url swap on a given image with a provided url.
|
||||
*
|
||||
* @param {Element} image An image in the DOM.
|
||||
* @param {String} src The original image source attribute.
|
||||
* @param {String} hdsrc The path for a 2x image.
|
||||
*
|
||||
* @return {undefined}
|
||||
*/
|
||||
function manualSwapImage(image, src, hdsrc) {
|
||||
if (environment > 1) {
|
||||
setSourceIfAvailable(image, hdsrc);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Collects all images matching our selector, and converts our
|
||||
* NodeList into an Array so that Array methods will be available to it.
|
||||
*
|
||||
* @param {Iterable} images Optional. An Array, jQuery selection, or NodeList
|
||||
* of elements to affect with retina.js.
|
||||
*
|
||||
* @return {Iterable} Contains all elements matching our selector.
|
||||
*/
|
||||
function getImages(images) {
|
||||
if (!images) {
|
||||
return typeof document !== 'undefined' ? arrayify(document.querySelectorAll(selector)) : [];
|
||||
} else {
|
||||
return typeof images.forEach === 'function' ? images : arrayify(images);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a string like "url(hello.png)" into "hello.png".
|
||||
*
|
||||
* @param {Element} img An HTML element with a background image.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
function cleanBgImg(img) {
|
||||
return img.style.backgroundImage.replace(inlineReplace, '$2');
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all participating images and dynamically swaps out each one for its
|
||||
* retina equivalent taking into account the environment capabilities and
|
||||
* the densities for which the user has provided images.
|
||||
*
|
||||
* @param {Iterable} images Optional. An Array, jQuery selection, or NodeList
|
||||
* of elements to affect with retina.js. If not
|
||||
* provided, retina.js will grab all images on the
|
||||
* page.
|
||||
*
|
||||
* @return {undefined}
|
||||
*/
|
||||
function retina(images) {
|
||||
getImages(images).forEach(function (img) {
|
||||
if (!img.getAttribute(processedAttr)) {
|
||||
var isImg = img.nodeName.toLowerCase() === 'img';
|
||||
var src = isImg ? img.getAttribute('src') : cleanBgImg(img);
|
||||
var rjs = img.getAttribute('data-rjs');
|
||||
var rjsIsNumber = !isNaN(parseInt(rjs, 10));
|
||||
|
||||
/*
|
||||
* If the user provided a number, dynamically swap out the image.
|
||||
* If the user provided a url, do it manually.
|
||||
*/
|
||||
if (rjsIsNumber) {
|
||||
dynamicSwapImage(img, src, rjs);
|
||||
} else {
|
||||
manualSwapImage(img, src, rjs);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* If this environment has `window`, activate the plugin.
|
||||
*/
|
||||
if (hasWindow) {
|
||||
window.addEventListener('load', retina);
|
||||
window.retinajs = retina;
|
||||
}
|
||||
|
||||
exports.default = retina;
|
||||
|
|
@ -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();
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
!function(){function t(t){return Array.prototype.slice.call(t)}function e(t){var e=parseInt(t,10);return e>f?f:e}function r(t){return t.hasAttribute("data-no-resize")||(0===t.offsetWidth&&0===t.offsetHeight?(t.setAttribute("width",t.naturalWidth),t.setAttribute("height",t.naturalHeight)):(t.setAttribute("width",t.offsetWidth),t.setAttribute("height",t.offsetHeight))),t}function n(t,e){var n=t.nodeName.toLowerCase(),i=document.createElement("img");i.addEventListener("load",function(){"img"===n?r(t).setAttribute("src",e):t.style.backgroundImage="url("+e+")"}),i.setAttribute("src",e),t.setAttribute(h,!0)}function i(t,r){var i=arguments.length<=2||void 0===arguments[2]?1:arguments[2],o=e(i);if(r&&o>1){var a=r.replace(c,"@"+o+"x$1");n(t,a)}}function o(t,e,r){f>1&&n(t,r)}function a(e){return e?"function"==typeof e.forEach?e:t(e):"undefined"!=typeof document?t(document.querySelectorAll(g)):[]}function u(t){return t.style.backgroundImage.replace(l,"$2")}function d(t){a(t).forEach(function(t){if(!t.getAttribute(h)){var e="img"===t.nodeName.toLowerCase(),r=e?t.getAttribute("src"):u(t),n=t.getAttribute("data-rjs"),a=!isNaN(parseInt(n,10));a?i(t,r,n):o(t,r,n)}})}"undefined"==typeof exports&&(exports={}),Object.defineProperty(exports,"__esModule",{value:!0});var s="undefined"!=typeof window,f=s?window.devicePixelRatio||1:1,c=/(\.[A-z]{3,4}\/?(\?.*)?)$/,l=/url\(('|")?([^\)'"]+)('|")?\)/i,g="[data-rjs]",h="data-rjs-processed";s&&(window.addEventListener("load",d),window.retinajs=d),exports["default"]=d}();
|
||||
|
|
@ -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
|
||||
|
|
@ -182,7 +182,10 @@
|
|||
*/
|
||||
#header {
|
||||
|
||||
background: @m-blue url('../img/header_bg.png') left center no-repeat;
|
||||
background: @m-blue;
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 500px 100px;
|
||||
|
||||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
|
||||
min-height: @header-height;
|
||||
|
|
|
|||
Loading…
Reference in New Issue