adds retina display support for hero background

updates logo to include 2.0 beta text
updates hero background image
This commit is contained in:
Robert Messerle 2015-12-14 22:00:17 -08:00 committed by Naomi Black
parent ab90d68240
commit 64f63167de
6 changed files with 19 additions and 5 deletions

View File

@ -1,5 +1,5 @@
header(class="background-sky")
.hero.background-lon-paper.is-large
.hero.background-superhero-paper.is-large
h1.text-headline.hero-logo #{title}<br>#{subtitle}
.hero-cta

View File

@ -41,6 +41,14 @@
background-size: 100%;
background-position: fixed;
}
.background-superhero-paper {
background: url('/resources/images/backgrounds/superhero-paper.png') bottom center no-repeat;
background-size: 100%;
background-position: fixed;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url('/resources/images/backgrounds/superhero-paper-large.png');
}
}

View File

@ -53,16 +53,22 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 5);
// LARGE SHEILD LOGO
.hero-logo {
background: url('/resources/images/logos/standard/shield-large.png') top center no-repeat;
position: relative;
padding-top: 224px;
opacity: 1;
width: $unit * 70;
margin: ($unit * 3) auto ($unit * 5) auto;
font-weight: 400;
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
background: url('/resources/images/logos/standard/shield-large@2x.png') top center no-repeat;
background-size: 184px 200px;
&:after {
content: '';
background: url('/resources/images/logos/angular2/shield-with-beta.png') top center no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: 0;
right: 0;
height: 224px;
}
@media handheld and (max-width: $phone-breakpoint),

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB