[ruby/rdoc] Improve layout CSS

- Use the `grid` property for the page layout.
  - https://caniuse.com/css-grid
- Adjust the `<main>` margin.
- Make the sidebar responsive and resizable.
  - https://caniuse.com/css-math-functions
  - https://caniuse.com/css-resize

Note all modern browsers support the new CSS properties and functions used by this change.

https://github.com/ruby/rdoc/commit/2db5097c41

1 files changed, 16 insertions, 5 deletions

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index 1be815f503..d277bfdf35 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -17,6 +17,14 @@ body {
   background: #fafafa;
   font-family: Lato, sans-serif;
   font-weight: 300;
+
+  /* Layout */
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+body > :last-child {
+  grid-column: 1 / 3;
 }
 
 h1 span,
@@ -181,21 +189,25 @@ table tr:nth-child(even) td {
 /* @group Top-Level Structure */
 
 nav {
-  float: left;
-  width: 260px;
   font-family: Helvetica, sans-serif;
   font-size: 14px;
   border-right: 1px solid #ccc;
   position: sticky;
   top: 0;
   overflow: auto;
+
+  /* Layout */
+  width: 260px; /* fallback */
+  width: max(50px, 20vw);
+  min-width: 50px;
+  max-width: 80vw;
   height: calc(100vh - 100px); /* reduce the footer height */
+  resize: horizontal;
 }
 
 main {
   display: block;
-  margin: 0 2em 5em 260px;
-  padding-left: 20px;
+  margin: 1em;
   min-width: 340px;
   font-size: 16px;
 }
@@ -214,7 +226,6 @@ main h6 {
 }
 
 #validator-badges {
-  clear: both;
   margin: 1em 1em 2em;
   font-size: smaller;
 }