retina-resolution GitHub "fork me" banner

_layouts/main.html

@@ -183,7 +183,7 @@ href="http://beets.radbox.org/"></g:plusone>
             </div>
         </div>
 
-        <a href="http://github.com/sampsyo/beets" class="hidden-phone"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+        <a id="fork-me" href="https://github.com/sampsyo/beets">Fork me on GitHub</a>
         <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
     </body>
 </html>

beets.css

@@ -114,3 +114,22 @@ ul, ol {
     display: block;
     margin: 0.5em auto;
 }
+
+/* GitHub "fork me" banner */
+/* https://github.com/philwareham/github-ribbons-retina */
+#fork-me {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 9999;
+    width: 140px;
+    height: 140px;
+    text-indent: -9999px;
+    background-image: url("/images/fork-me.png");
+}
+@media (-webkit-min-device-pixel-ratio: 2) {
+    #fork-me {
+        background-image: url("/images/fork-me@2x.png") !important;
+        -webkit-background-size: 140px 140px;
+    }
+}