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]
This commit is contained in:
parent
af6dbcf1ed
commit
8990921ba9
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
After Width: | Height: | Size: 3.0 KiB |
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue