Merge branch 'feature/3-styling--retina-image-are-not-implemented-cor…

…rectly' * feature/3-styling--retina-image-are-not-implemented-correctly: (#3) Changelog (#3) Styling: Added support for retina images
LaxarJS · Oct 8, 2014 · c1d2e2a · c1d2e2a
2 parents 53daa62 + 60461dc
commit c1d2e2a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Last Changes
 
+   - [#3] (https://github.com/LaxarJS/shop_demo/issues/3): Styling: Added support for retina images
    - [#2] (https://github.com/LaxarJS/shop_demo/issues/2): Styling: Fixed add button is not usable for small viewports. Some further improvements."
 
 

diff --git a/application/layouts/application/default.theme/css/application.css b/application/layouts/application/default.theme/css/application.css
@@ -125,7 +125,7 @@ a:focus {
   display: block;
   height: 60px;
   width: 257px;
-  background: url("../images/laxarjs_logo.png") no-repeat right;
+  background: url("../images/laxarjs_logo.png") no-repeat right/100%;
 }
 
 .app-no-selection,
@@ -135,11 +135,13 @@ a:focus {
 }
 
 .app-flower {
+  float: right;
   margin-top: 40px;
   margin-right: 20px;
   margin-bottom: 40px;
   height: 300px;
-  background: url("../images/pot_flower.png") no-repeat right;
+  width: 127px;
+  background: url("../images/pot_flower.png") no-repeat right/100%;
 }
 
 .app-footer {
@@ -207,12 +209,10 @@ a,
   }
 }
 
-@media only screen and (-webkit-min-device-pixel-ratio: 2) {
-  .app-logo {
-    background: url("../images/laxarjs_logo@2x.png") no-repeat right;
-  }
+.app-logo {
+  background: url("../images/laxarjs_logo@2x.png") no-repeat right/100%;
+}
 
-  .app-flower {
-    background: url("../images/pot_flower@2x.png") no-repeat right;
-  }
+.app-flower {
+  background: url("../images/pot_flower@2x.png") no-repeat right/100%;
 }
diff --git a/application/layouts/application/default.theme/scss/_base.scss b/application/layouts/application/default.theme/scss/_base.scss
@@ -49,7 +49,7 @@ a:focus {
    display: block;
    height: image-height( "../images/laxarjs_logo.png" );
    width: image-width( "../images/laxarjs_logo.png" );
-   background: url( "../images/laxarjs_logo.png" ) no-repeat right;
+   background: url( "../images/laxarjs_logo.png" ) no-repeat right/100%;
 }
 
 .app-no-selection,
@@ -59,11 +59,13 @@ a:focus {
 }
 
 .app-flower {
+   float: right;
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 40px;
    height: image-height( "../images/pot_flower.png" );
-   background: url( "../images/pot_flower.png" ) no-repeat right;
+   width: image-width( "../images/pot_flower.png" );
+   background: url( "../images/pot_flower.png" ) no-repeat right/100%;
 }
 
 .app-footer {
@@ -131,11 +133,11 @@ a,
    }
 }
 
-@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+// @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .app-logo {
-      background: url( "../images/laxarjs_logo@2x.png" ) no-repeat right;
+      background: url( "../images/laxarjs_logo@2x.png" ) no-repeat right/100%;
    }
    .app-flower {
-      background: url( "../images/pot_flower@2x.png" ) no-repeat right;
+      background: url( "../images/pot_flower@2x.png" ) no-repeat right/100%;
    }
-}
+// }