Files
freeCodeCamp/client/less/lib/bootstrap/mixins/image.less
Berkeley Martinez 306c441ae7 add revisioning to js/css files to break caching
This moves the location of javascript files, commonFramework,
iFrameScript, sandbox, plugin, and all the less files.
On gulp or gulp build these files are moved and revisioned.
Places where they are references in jade/html are now removed and
replaced with the use of a helper function `rev`. This function will
take the required file and return a string referencing the revisioned
file. This should alleviate the need for hard refreshing and will break
caches when files change, so fixes for firefox caching issue as well.

NOTE: @benmcmahon @quincylarson, This means files will need to be build
on the server in production before doing a server restart/reload
In production: 'npm run build' To build and revision js/css files

`gulp` and `gulp build` will used in development

npm install also needs to be run in production on initial deploy
2015-08-26 23:30:33 -07:00

34 lines
1.0 KiB
Plaintext
Executable File

// Image Mixins
// - Responsive image
// - Retina image
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
.img-responsive(@display: block) {
display: @display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
// Retina image
//
// Short retina mixin for setting background-image and -size. Note that the
// spelling of `min--moz-device-pixel-ratio` is intentional.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}