Make darkfish more responsive and readable on mobile devices

- Make the sidebar toggle fixed on all devices
- Prevent default zooming on mobile devices
- Improve sidebar opening on mobile devices

Author: st0012

lib/rdoc/generator/template/darkfish/css/rdoc.css

@@ -219,7 +219,8 @@ nav a:hover {
 #navigation-toggle {
   z-index: 1000;
   font-size: 2em;
-  position: absolute;
+  display: block;
+  position: fixed;
 }
 
 #navigation-toggle[aria-expanded="true"] {
@@ -264,6 +265,7 @@ main {
   font-size: 16px;
   line-height: 1.6;
   color: var(--text-color);
+  box-sizing: border-box;
 }
 
 @media (min-width: 1024px) {
@@ -714,4 +716,50 @@ main .attribute-access-type {
   font-family: var(--font-code);
 }
 
+@media (max-width: 1023px) {
+  body {
+    font-size: 14px;
+  }
+
+  nav {
+    width: 100%;
+  }
+
+  main {
+    margin: 1em auto;
+    padding: 0 1em;
+    max-width: 100%;
+  }
+
+  #navigation-toggle {
+    top: 10px;
+    right: 10px;
+    z-index: 1001;
+  }
+
+  #navigation-toggle[aria-expanded="true"] {
+    left: auto;
+  }
+
+  #navigation-toggle[aria-expanded="false"] {
+    left: auto;
+  }
+
+  #search-field {
+    font-size: 16px; /* Prevents zoom on focus in iOS */
+  }
+}
+
+@media (max-width: 480px) {
+  pre, code {
+    font-size: 14px;
+  }
+
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+}
 /* @end */
+