diff options
| author | Olivier Lacan <hi@olivierlacan.com> | 2018-10-19 19:08:42 -0400 |
|---|---|---|
| committer | Olivier Lacan <hi@olivierlacan.com> | 2018-10-19 19:27:04 -0400 |
| commit | 8990921ba95e82b2d9e77730cf37ebdc6772aa63 (patch) | |
| tree | 932daf939ce0b2e9ef6959f25aa8e34c078f7d9b /guides/assets | |
| parent | af6dbcf1ed61ee089bfd22a67d9888ed72061d3f (diff) | |
| download | rails-8990921ba95e82b2d9e77730cf37ebdc6772aa63.tar.gz rails-8990921ba95e82b2d9e77730cf37ebdc6772aa63.tar.bz2 rails-8990921ba95e82b2d9e77730cf37ebdc6772aa63.zip | |
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]
Diffstat (limited to 'guides/assets')
| -rw-r--r-- | guides/assets/images/rails_guides_logo_1x.png | bin | 0 -> 2340 bytes | |||
| -rw-r--r-- | guides/assets/images/rails_guides_logo_2x.png | bin | 0 -> 3107 bytes | |||
| -rw-r--r-- | guides/assets/stylesheets/main.css | 15 |
3 files changed, 14 insertions, 1 deletions
diff --git a/guides/assets/images/rails_guides_logo_1x.png b/guides/assets/images/rails_guides_logo_1x.png Binary files differnew file mode 100644 index 0000000000..8c6810c312 --- /dev/null +++ b/guides/assets/images/rails_guides_logo_1x.png diff --git a/guides/assets/images/rails_guides_logo_2x.png b/guides/assets/images/rails_guides_logo_2x.png Binary files differnew file mode 100644 index 0000000000..accc6bbfa4 --- /dev/null +++ b/guides/assets/images/rails_guides_logo_2x.png diff --git a/guides/assets/stylesheets/main.css b/guides/assets/stylesheets/main.css index d6897aae03..bdc3e21977 100644 --- a/guides/assets/stylesheets/main.css +++ b/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; |
