Replace outdated Rails Guides logo

The previous version wasn’t matching the Rails Guides logo source file
listed at https://github.com/rails/homepage/blob/master/materials/rails_guides_logo.psd
somehow. It was also a GIF when an 8-bit PNG results in a smaller file (2KB vs 4KB) which
should be just as widely compatible with browsers.

And that’s just for the 1x version. I added a new 2x version for “retina” or high-density
displays and a CSS @media query to progressively enhance with this high density
version of the logo. I’ve ensured that this query is supported across browsers by
using vendor-specific versions when necessary. See:
https://caniuse.com/#feat=css-media-resolution

[ci skip]

guides/assets/stylesheets/main.css

@@ -538,13 +538,26 @@ h6 {
 
 #header h1 {
   float: left;
-  background: url(../images/rails_guides_logo.gif) no-repeat;
+  background: url(../images/rails_guides_logo_1x.png) no-repeat;
   width: 297px;
   text-indent: -9999em;
   margin: 0;
   padding: 0;
 }
 
+@media
+only screen and (-webkit-min-device-pixel-ratio: 2),
+only screen and (   min--moz-device-pixel-ratio: 2),
+only screen and (     -o-min-device-pixel-ratio: 2/1),
+only screen and (        min-device-pixel-ratio: 2),
+only screen and (                min-resolution: 192dpi),
+only screen and (                min-resolution: 2dppx) {
+  #header h1 {
+    background: url(../images/rails_guides_logo_2x.png) no-repeat;
+    background-size: 160%;
+  }
+}
+
 @media screen and (max-width: 480px) {
   #header h1 {
     float: none;