Merge pull request #69 from nypublicradio/jkeen/background

Add background images

app/styles/app.scss

@@ -27,7 +27,32 @@ body.ember-application{
  font-family: $font-body;
  font-weight: normal;
  line-height: 1.0;
- background-color: $water-blue;
+
+ background: $water-blue url(/images/backgrounds/background-desktop.png) no-repeat scroll left top;
+ background-size: 100% 700px;
+
+ @include media("retina2x") {
+ background: $water-blue url(/images/backgrounds/background-desktop@2x.png) no-repeat scroll left top;
+ background-size: 100% 700px;
+ }
+ @include media("retina3x") {
+ background: $water-blue url(/images/backgrounds/background-desktop@3x.png) no-repeat scroll left top;
+ background-size: 100% 700px;
+ }
+
+ @include media("<medium") {
+ background: $water-blue url(/images/backgrounds/background-mobile.png) no-repeat scroll left top;
+ background-size: 100% auto;
+
+ @include media("retina2x") {
+ background: $water-blue url(/images/backgrounds/background-mobile@2x.png) no-repeat scroll left top;
+ background-size: 100% auto;
+ }
+ @include media("retina3x") {
+ background: $water-blue url(/images/backgrounds/background-mobile@3x.png) no-repeat scroll left top;
+ background-size: 100% auto;
+ }
+ }
 }
 
 button {

app/styles/vars/_tools.sg-updates.scss

@@ -136,6 +136,15 @@ $breakpoints: (
  'xxxlarge': $xxxlarge
 );
 
+$media-expressions: (
+ 'screen': 'screen',
+ 'print': 'print',
+ 'handheld': 'handheld',
+ 'landscape': '(orientation: landscape)',
+ 'portrait': '(orientation: portrait)',
+ 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
+ 'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi)'
+);
 
 /**
  * Animation