From da31e9d5a4fc69636a8f8774c43424c594a2f95d Mon Sep 17 00:00:00 2001
From: Stuart Langridge <sil@kryogenix.org>
Date: Sat, 2 Sep 2023 20:25:02 +0100
Subject: [PATCH] A few CSS overrides to make the documentation useful on small
 screens, such as phones

---
 docs/docs-assets/Navigation.css | 37 ++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/docs/docs-assets/Navigation.css b/docs/docs-assets/Navigation.css
index cb13e33812..8b0dd88fec 100644
--- a/docs/docs-assets/Navigation.css
+++ b/docs/docs-assets/Navigation.css
@@ -148,4 +148,39 @@ nav[role="navigation"] h1 {
 	nav[role="navigation"] {
 		display: none;
 	}
-}
\ No newline at end of file
+}
+
+/* A few overrides to make the documentation useful on small screens, such as phones */
+
+@media (max-width: 700px) {
+    /* tighten up the margins and allow putting the nav menu at the end of the page */
+    body {
+        display: flex;
+        flex-direction: column;
+        margin: 5px 0 !important;
+    }
+    /* nav menu at the end of the page, not a floating sidebar over the top of the content */
+    nav[role="navigation"] {
+        position: static;
+        overflow: auto;
+        order: 2;
+    }
+    /* full-width main without big indent to leave space for the nav menu */
+    main {
+        width: 100%;
+        margin: 0;
+        padding-left: 5px;
+        padding-right: 5px;
+        box-sizing: border-box;
+    }
+    /* constrain to screen width on narrow screens, rather than explicitly overflowing */
+    main p.commentary, main p.purpose {
+        width: auto;
+    }
+    div.breadcrumbs {
+        position: static;
+    }
+    div.contentspage .chapterlist .sectionlist li {
+        padding-left: 1.5em;
+    }
+}