<%= render '_sidebar_navigation.rhtml' %>
<%= render '_sidebar_search.rhtml' %>
diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index 2cc55e03b1..00045abb58 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -19,12 +19,12 @@ body {
font-weight: 300;
/* Layout */
- display: grid;
- grid-template-columns: auto 1fr;
+ display: flex;
+ flex-wrap: wrap;
}
body > :last-child {
- grid-column: 1 / 3;
+ width: 100%;
}
h1 span,
@@ -203,24 +203,38 @@ nav {
font-family: Helvetica, sans-serif;
font-size: 14px;
border-right: 1px solid #ccc;
- position: sticky;
+ position: fixed;
top: 0;
overflow: auto;
+ z-index: 10;
/* Layout */
- width: 260px; /* fallback */
- width: max(50px, 20vw);
- min-width: 50px;
- max-width: 80vw;
- height: calc(100vh - 100px); /* reduce the footer height */
- resize: horizontal;
+ width: 300px;
+ min-height: 100vh;
+ background: white;
+}
+
+@media (min-width: 1024px) {
+ nav {
+ min-height: unset;
+ height: calc(100vh - 100px); /* reduce the footer height */
+ }
}
main {
display: block;
- margin: 1em;
+ margin: 3em 1em 1em;
min-width: 340px;
font-size: 16px;
+ width: 100%;
+ max-width: 64em;
+}
+
+@media (min-width: 1024px) {
+ main {
+ margin-left: auto;
+ margin-right: auto;
+ }
}
main h1,
@@ -232,8 +246,10 @@ main h6 {
font-family: Helvetica, sans-serif;
}
-.table-of-contents main {
- margin-left: 2em;
+@media (min-width: 1024px) {
+ .table-of-contents main {
+ margin-left: 20em;
+ }
}
#validator-badges {
@@ -280,6 +296,38 @@ nav p {
list-style: none;
}
+.navigation-toggle {
+ position: fixed;
+ left: 4px;
+ z-index: 100;
+
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ padding: 4px;
+ font-size: 24px;
+}
+.navigation-toggle[aria-expanded="true"] {
+ left: 260px;
+}
+
+/* Adds a suble gradient to help the toggle stand out from the background */
+.navigation-toggle::before {
+ content: "";
+ background: linear-gradient(180deg, rgba(250,250,250,1) 40%, rgba(250,250,250,0.8) 70%, rgba(250,250,250,0) 100%);
+ display: block;
+ z-index: -1;
+ pointer-events: none;
+ position: fixed;
+ top: 0;
+ height: 50px;
+ width: 100vw;
+}
+
+.navigation-toggle[aria-expanded="true"]::before {
+ height: 0;
+}
+
#project-navigation .nav-section {
margin: 0;
border-top: 0;
@@ -684,4 +732,3 @@ pre {
}
/* @end */
-
diff --git a/lib/rdoc/generator/template/darkfish/index.rhtml b/lib/rdoc/generator/template/darkfish/index.rhtml
index 423e225b68..b3eede6c00 100644
--- a/lib/rdoc/generator/template/darkfish/index.rhtml
+++ b/lib/rdoc/generator/template/darkfish/index.rhtml
@@ -1,5 +1,7 @@
-