From 068413431cd2b247c084ffd567a29f1abe5c41ff Mon Sep 17 00:00:00 2001
From: Olivier Lacan <hi@olivierlacan.com>
Date: Fri, 19 Oct 2018 18:41:32 -0400
Subject: Use CSS flexbox for Guides index menu

This notably allows us to tile each category without pushing the page down vertically
as much as we previously did on any viewport wider than mobile sizes.

It also means we can fit more guides which will become useful in the future since
we have several new guides in the work.

Finally the new layout allows three clearly distinct columns to emerge:
- Start Here and Rails basics: Models, Views, Controllers, Other Components
- Digging Deeper, Extending Rails, Contributing, Maintenance
- Release Notes

Having Release Notes shoot back up to the top of the third column is great
because that makes finding the latest released version and its associated
release notes much easier without having to scroll down a bunch.

[ci skip]
---
 guides/assets/stylesheets/main.css | 45 ++++++++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 11 deletions(-)

(limited to 'guides/assets/stylesheets')

diff --git a/guides/assets/stylesheets/main.css b/guides/assets/stylesheets/main.css
index 2657a84a91..d6897aae03 100644
--- a/guides/assets/stylesheets/main.css
+++ b/guides/assets/stylesheets/main.css
@@ -401,14 +401,10 @@ a, a:link, a:visited {
 }
 
 #guides {
-  width: 27em;
+  width: 37em;
   display: block;
   background: #980905;
   border-radius: 1em;
-  -webkit-border-radius: 1em;
-  -moz-border-radius: 1em;
-  -webkit-box-shadow: 0.25em 0.25em 1em rgba(0,0,0,0.25);
-  -moz-box-shadow: rgba(0,0,0,0.25) 0.25em 0.25em 1em;
   color: #f1938c;
   padding: 1.5em 2em;
   position: absolute;
@@ -422,17 +418,44 @@ a, a:link, a:visited {
   display: block !important;
 }
 
-#guides dt, #guides dd {
+.guides-section dt, .guides-section dd {
   font-weight: normal;
   font-size: 0.722em;
   margin: 0;
   padding: 0;
 }
-#guides dt {padding:0; margin: 0.5em 0 0;}
-#guides a {color: #FFF; background: none !important; text-decoration: none;}
-#guides a:hover {text-decoration: underline;}
-#guides .L, #guides .R {float: left; width: 50%; margin: 0; padding: 0;}
-#guides .R {float: right;}
+.guides-section dt {
+  margin: 0.5em 0 0;
+  padding:0;
+}
+#guides a {
+  background: none !important;
+  color: #FFF;
+  text-decoration: none;
+}
+#guides a:hover {
+  text-decoration: underline;
+}
+.guides-section-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 100%;
+  max-height: 35em;
+}
+
+.guides-section {
+  min-width: 5em;
+  margin: 0 2em 0.5em 0;
+  flex: auto;
+  max-width: 12em;
+}
+
+.guides-section dd {
+  line-height: 1.3;
+  margin-bottom: 0.5em;
+}
+
 #guides hr {
   display: block;
   border: none;
-- 
cgit v1.2.3


From 8990921ba95e82b2d9e77730cf37ebdc6772aa63 Mon Sep 17 00:00:00 2001
From: Olivier Lacan <hi@olivierlacan.com>
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/stylesheets/main.css | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

(limited to 'guides/assets/stylesheets')

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