From 8990921ba95e82b2d9e77730cf37ebdc6772aa63 Mon Sep 17 00:00:00 2001 From: Olivier Lacan Date: Fri, 19 Oct 2018 19:08:42 -0400 Subject: Replace outdated Rails Guides logo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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/images/rails_guides_logo_1x.png | Bin 0 -> 2340 bytes guides/assets/images/rails_guides_logo_2x.png | Bin 0 -> 3107 bytes guides/assets/stylesheets/main.css | 15 ++++++++++++++- 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 guides/assets/images/rails_guides_logo_1x.png create mode 100644 guides/assets/images/rails_guides_logo_2x.png (limited to 'guides/assets') diff --git a/guides/assets/images/rails_guides_logo_1x.png b/guides/assets/images/rails_guides_logo_1x.png new file mode 100644 index 0000000000..8c6810c312 Binary files /dev/null and b/guides/assets/images/rails_guides_logo_1x.png differ diff --git a/guides/assets/images/rails_guides_logo_2x.png b/guides/assets/images/rails_guides_logo_2x.png new file mode 100644 index 0000000000..accc6bbfa4 Binary files /dev/null and b/guides/assets/images/rails_guides_logo_2x.png differ 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; -- cgit v1.2.3