From 95b6cfb64fba1b26d735d59a6fe0b59e623eb61c Mon Sep 17 00:00:00 2001
From: Stan Lo <stan001212@gmail.com>
Date: Mon, 26 Aug 2024 23:02:29 +0100
Subject: [PATCH] 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
---
 .../generator/template/darkfish/css/rdoc.css  | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index f8d1bc3df0..0032ac172a 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -219,7 +219,10 @@ 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"] {
@@ -227,11 +230,6 @@ nav a:hover {
   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 */
+