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

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

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 */
+