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]

1 files changed, 34 insertions, 11 deletions

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;