Merge pull request #155 from XhmikosR/home-sprite

Home sprite

css/application.css

@@ -176,6 +176,18 @@ strong {
   margin-top: 20px;
 }
 
+.triptych-sprite {
+  background-image: url(../img/home-sprite.png);
+  background-repeat: no-repeat;
+  display: inline-block;
+}
+
+.three-arrows { background-position: 0 0;      width: 72px; height: 57px; }
+.lightbulb    { background-position: 0 -57px;  width: 43px; height: 72px; }
+.circular     { background-position: 0 -129px; width: 72px; height: 69px; }
+
+
+
 .license-family {
   clear: both;
   margin-bottom: 50px;
@@ -468,3 +480,17 @@ strong {
 }
 
 .with-love { float: right; clear: right; }
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
+ only screen and (min--moz-device-pixel-ratio: 2.0),
+ only screen and (-o-min-device-pixel-ratio: 200/100),
+ only screen and (min-device-pixel-ratio: 2.0) {
+  .three-arrows,
+  .lightbulb,
+  .circular {
+    background-image: url(../img/home-sprite@2x.png);
+    -webkit-background-size: 72px 198px;
+    -moz-background-size: 72px 198px;
+    background-size: 72px 198px;
+  }
+}

index.html

@@ -14,7 +14,7 @@ description: A site to provide non-judgmental guidance on choosing a license for
 <ul class="triptych situations clearfix">
   <li class="whatever">
     <a href="licenses/mit">
-      <img src="img/three-arrows@2x.png" alt="three arrows" width="72" height="57">
+      <span class="triptych-sprite three-arrows"></span>
       <h3>I want it simple and permissive.</h3>
     </a>
     <p>
@@ -26,7 +26,7 @@ description: A site to provide non-judgmental guidance on choosing a license for
   </li>
   <li class="patents">
     <a href="licenses/apache">
-      <img src="img/lightbulb@2x.png" alt="light bulb" width="43" height="72">
+      <span class="triptych-sprite lightbulb"></span>
       <h3>I’m concerned about patents.</h3>
     </a>
     <p>
@@ -38,7 +38,7 @@ description: A site to provide non-judgmental guidance on choosing a license for
   </li>
   <li class="copyleft">
     <a href="licenses/gpl-v2">
-      <img src="img/circular@2x.png" alt="circular arrows" width="72" height="69">
+      <span class="triptych-sprite circular"></span>
       <h3>I care about sharing improvements.</h3>
     </a>
     <p>