Last active
February 18, 2016 11:23
-
-
Save jdelia/7bb5c8616410cc4935bc to your computer and use it in GitHub Desktop.
Retina Image for Utility Pro using Sass
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Logo, hide text */ | |
.header-image .site-title > a { | |
@include imgRetina(images/logo, png, 300px, 60px, center); | |
float: left; | |
min-height: 80px; | |
width: 100%; | |
@include media($medium-screen-up) { | |
@include imgRetina(images/logo, png, 300px, 60px, left); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* mixins | |
* Generates the image in either standard size or retina display version | |
*/ | |
@mixin imgRetina($image, $extension, $width, $height, $position: center, $repeat: no-repeat) { | |
background: url($image + '.' + $extension) $repeat $position; | |
@media | |
screen and (-webkit-min-device-pixel-ratio: 2), | |
screen and ( min--moz-device-pixel-ratio: 2), | |
screen and ( -moz-min-device-pixel-ratio: 2), | |
screen and ( -o-min-device-pixel-ratio: 2/1), | |
screen and ( min-device-pixel-ratio: 2), | |
screen and ( min-resolution: 192dpi), | |
screen and ( min-resolution: 2dppx) { | |
background: url($image + '@2x' + '.' + $extension) $repeat $position; | |
background-size: $width $height; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Logo, hide text */ | |
.header-image .site-title > a { | |
background: url(images/logo.png) no-repeat center; | |
float: left; | |
min-height: 80px; | |
width: 100%; | |
} | |
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { | |
.header-image .site-title > a { | |
background: url(images/logo@2x.png) no-repeat center; | |
background-size: 300px 60px; | |
} | |
} | |
@media screen and (min-width: 1023px) { | |
.header-image .site-title > a { | |
background: url(images/logo.png) no-repeat left; | |
} | |
} | |
@media screen and (min-width: 1023px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 1023px) and (min--moz-device-pixel-ratio: 2), screen and (min-width: 1023px) and (-moz-min-device-pixel-ratio: 2), screen and (min-width: 1023px) and (min-device-pixel-ratio: 2), screen and (min-width: 1023px) and (min-resolution: 192dpi), screen and (min-width: 1023px) and (min-resolution: 2dppx) { | |
.header-image .site-title > a { | |
background: url(images/logo@2x.png) no-repeat left; | |
background-size: 300px 60px; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Logo, hide text */ | |
.header-image .site-title > a { | |
background: url(images/logo.png) no-repeat center; | |
float: left; | |
min-height: 60px; | |
width: 100%; | |
@include media($medium-screen-up) { | |
background: url(images/logo.png) no-repeat left; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Resets | |
---------------------------------------------------------------------------------------------------- */ | |
@import "partials/reset"; | |
/* # Variables | |
---------------------------------------------------------------------------------------------------- */ | |
@import "partials/variables"; | |
/* Mixins | |
---------------------------------------------------------------------------------------------------- */ | |
@import "partials/mixins"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment