Make darkfish more responsive and readable on mobile devices (ruby#1162)

- 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,19 +219,17 @@ nav a:hover {
 #navigation-toggle {
   z-index: 1000;
   font-size: 2em;
-  position: absolute;
+  display: block;
+  position: fixed;
+  top: 10px;
+  left: 20px;
 }
 
 #navigation-toggle[aria-expanded="true"] {
   top: 10px;
   left: 250px;
 }
 
-#navigation-toggle[aria-expanded="false"] {
-  top: 10px;
-  left: 20px;
-}
-
 nav ul li details {
   position: relative;
   padding-right: 1.5em;  /* Add space for the marker on the right */
@@ -265,6 +263,7 @@ main {
   font-size: 16px;
   line-height: 1.6;
   color: var(--text-color);
+  box-sizing: border-box;
 }
 
 @media (min-width: 1024px) {
@@ -715,4 +714,31 @@ main .attribute-access-type {
   font-family: var(--font-code);
 }
 
+@media (max-width: 480px) {
+  nav {
+    width: 100%;
+  }
+
+  main {
+    margin: 1em auto;
+    padding: 0 1em;
+    max-width: 100%;
+  }
+
+  #navigation-toggle {
+    right: 10px;
+    left: auto;
+  }
+
+  #navigation-toggle[aria-expanded="true"] {
+    left: auto;
+  }
+
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+}
 /* @end */
+