Merge pull request #1278 from CPAN-API/haarg/retina-logo

Use double resolution logo for retina screens
metacpan · Aug 14, 2014 · 6cb462f · 6cb462f
2 parents 58d8c8e + 4d44924
commit 6cb462f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 13 deletions.
diff --git a/root/static/css/style.css b/root/static/css/style.css
@@ -70,18 +70,29 @@ label input[type="text"], label select {
 .big-logo {
     margin: 42px auto 44px auto;
     display: block;
-    width: 322px;
-    height: 58px;
-    background: transparent url('/static/images/logo.png') no-repeat -1px -1px;
+    width: 326px;
+    height: 59px;
+    background: transparent url('/static/images/metacpan-logo.png') no-repeat;
 }
 
 .small-logo {
     position: relative;
-    margin: 0 12px 0 0;
+    margin: 1px 13px 0 0;
     float: left;
     width: 180px;
-    height: 34px;
-    background: transparent url('/static/images/logo.png') no-repeat -1px -68px;
+    height: 33px;
+    background: transparent url('/static/images/metacpan-logo.png') no-repeat 0px -59px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+       (-moz-min-device-pixel-ratio: 2),
+       (-o-min-device-pixel-ratio: 2/1),
+       (min-device-pixel-ratio: 2) {
+
+    .big-logo, .small-logo {
+        background-image: url('/static/images/metacpan-logo@2x.png');
+        background-size: 326px;
+    }
 }
 
 button.favorite, a.favorite {
@@ -343,4 +354,4 @@ div.qtip-github table th {
 
 #icon-rss {
     background: url('/static/icons/icon-rss.png');
-}
+}
diff --git a/root/static/images/logo.png b/root/static/images/logo.png
diff --git a/root/static/images/logo@2x.png b/root/static/images/logo@2x.png
diff --git a/root/static/less/responsive.less b/root/static/less/responsive.less
@@ -142,14 +142,24 @@
     }
 
     .big-logo {
-        margin: 20px 0 30px 0;
-        width: 161px;
-        height: 28px;
-        background: transparent url('/static/images/logo.png') no-repeat -1px -1px;
-        background-size: 151px 47.25px;
-        background-repeat: no-repeat;
+        margin: 20px 0 25px 0;
+        width: 180px;
+        height: 33px;
+        background: transparent url('/static/images/logo.png') no-repeat 0px -59px;
     }
 
+    @media (-webkit-min-device-pixel-ratio: 2),
+          (-moz-min-device-pixel-ratio: 2),
+          (-o-min-device-pixel-ratio: 2/1),
+          (min-device-pixel-ratio: 2) {
+
+        .big-logo {
+            background-image: url('/static/images/logo@2x.png');
+            background-size: 326px;
+        }
+    }
+
+
     .home img {
         width: 137px;
         height: 27px;