Skip to content

Instantly share code, notes, and snippets.

@donaldallen
Last active December 30, 2015 13:09
Show Gist options
  • Save donaldallen/7833997 to your computer and use it in GitHub Desktop.
Save donaldallen/7833997 to your computer and use it in GitHub Desktop.
// From this
section.divisions:not(.hero) {
padding:3em 3em;
background-color:$greyLighter;
text-align:center;
a {
display:block;
color:$greyDark;
font-size:em(14);
line-height:1.5;
@media #{$small-only} {
padding:0;
}
span {
display:block;
width:90%;
height:120px;
margin:0 auto;
background-position:center;
background-size:contain;
background-repeat:no-repeat;
&.enterprise { @include retina-img('assets/public/img/logo-enterprise-edmonton', 180px 79px) }
&.build { @include retina-img('assets/public/img/logo-build-edmonton', 187px 87px) }
&.tourism { @include retina-img('assets/public/img/logo-edmonton-tourism', 172px 84px) }
&.shaw { @include retina-img('assets/public/img/logo-shaw-conference-centre', 153px 63px) }
}
}
}
// To this
section.divisions:not(.hero) {
padding: 3em 3em;
background-color: #e2e2e2;
text-align: center; }
section.divisions:not(.hero) a {
display: block;
color: #464646;
font-size: 0.875em;
line-height: 1.5; }
section.divisions:not(.hero) a span {
display: block;
width: 90%;
height: 120px;
margin: 0 auto;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }
section.divisions:not(.hero) a span.enterprise {
background-image: url("assets/public/img/logo-enterprise-edmonton.png");
background-repeat: no-repeat;
background-position: top center;
background-color: none; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
section.divisions:not(.hero) a span.enterprise {
background-image: url("assets/public/img/logo-enterprise-edmonton@2x.png");
background-size: 180px 79px; } }
section.divisions:not(.hero) a span.build {
background-image: url("assets/public/img/logo-build-edmonton.png");
background-repeat: no-repeat;
background-position: top center;
background-color: none; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
section.divisions:not(.hero) a span.build {
background-image: url("assets/public/img/logo-build-edmonton@2x.png");
background-size: 187px 87px; } }
section.divisions:not(.hero) a span.tourism {
background-image: url("assets/public/img/logo-edmonton-tourism.png");
background-repeat: no-repeat;
background-position: top center;
background-color: none; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
section.divisions:not(.hero) a span.tourism {
background-image: url("assets/public/img/logo-edmonton-tourism@2x.png");
background-size: 172px 84px; } }
section.divisions:not(.hero) a span.shaw {
background-image: url("assets/public/img/logo-shaw-conference-centre.png");
background-repeat: no-repeat;
background-position: top center;
background-color: none; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
section.divisions:not(.hero) a span.shaw {
background-image: url("assets/public/img/logo-shaw-conference-centre@2x.png");
background-size: 153px 63px; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment