1 files changed, 55 insertions, 7 deletions

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index ebe2e93af6..2cc55e03b1 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,
@@ -79,6 +87,17 @@ pre {
   border-radius: 0.2em;
 }
 
+em {
+  text-decoration-color: rgba(52, 48, 64, 0.25);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+}
+
+strong,
+em {
+  background-color: rgba(158, 178, 255, 0.1);
+}
+
 table {
   margin: 0;
   border-spacing: 0;
@@ -181,17 +200,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;
 }
@@ -210,7 +237,6 @@ main h6 {
 }
 
 #validator-badges {
-  clear: both;
   margin: 1em 1em 2em;
   font-size: smaller;
 }
@@ -305,6 +331,28 @@ dl.note-list dt {
   background: url(../images/arrow_up.png) no-repeat right center;
 }
 
+.nav-section details > summary {
+  display: block;
+}
+
+.nav-section details > summary::-webkit-details-marker {
+  display: none;
+}
+
+.nav-section details > summary::before {
+  content: "";
+}
+
+.nav-section details > summary::after {
+  content: "\25B6"; /* BLACK RIGHT-POINTING TRIANGLE */
+  font-size: 0.8em;
+  margin-left: 0.4em;
+}
+
+.nav-section details[open] > summary::after {
+  content: "\25BD"; /* WHITE DOWN-POINTING TRIANGLE */
+}
+
 /* @end */
 
 /* @group Documentation Section */
@@ -482,7 +530,7 @@ main header h3 {
 
 main .method-source-code {
   max-height: 0;
-  overflow: hidden;
+  overflow: auto;
   transition-duration: 200ms;
   transition-delay: 0ms;
   transition-property: all;
@@ -530,7 +578,7 @@ main .method-click-advice {
   line-height: 20px;
   background: url(../images/zoom.png) no-repeat right top;
 }
-main .method-heading:hover .method-click-advice {
+main .method-header:hover .method-click-advice {
   visibility: visible;
 }