From c15320ef5beaab83a4ae97d275b7f9dd5a016b1b Mon Sep 17 00:00:00 2001
From: Stan Lo <stan.lo@shopify.com>
Date: Sun, 4 Aug 2024 13:43:57 +0100
Subject: [PATCH 1/3] Fix darkfish responsiveness issue on screens between
 1024px and ~1650px

In that range, the sidebar would be displayed and cover part of the content.
This commit fixes that by adding a left margin to the content when the
screen size is greater than 1024px.
---
 lib/rdoc/generator/template/darkfish/css/rdoc.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index 00045abb58..d011874d4d 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -223,7 +223,8 @@ nav {
 
 main {
   display: block;
-  margin: 3em 1em 1em;
+  margin: 3em auto 1em;
+  padding: 0 1em; /* Add padding to keep space between main content and sidebar/right side of the screen */
   min-width: 340px;
   font-size: 16px;
   width: 100%;
@@ -232,8 +233,7 @@ main {
 
 @media (min-width: 1024px) {
   main {
-    margin-left: auto;
-    margin-right: auto;
+    margin-left: 300px;
   }
 }
 

From c1535cd189fb450dc28c90cc95ca4e0db297e9c7 Mon Sep 17 00:00:00 2001
From: Stan Lo <stan.lo@shopify.com>
Date: Sun, 4 Aug 2024 14:49:50 +0100
Subject: [PATCH 2/3] Fix footer display

Currently, sidebar's height is reduced to avoid covering up the footer.
But this cuts the sidebar short even before the footer is reached.
Alternatively, we can achieve the same effect by increasing the footer's
z-index to make it appear on top of the sidebar.
---
 lib/rdoc/generator/template/darkfish/css/rdoc.css | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index d011874d4d..052ba9b525 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -214,13 +214,6 @@ nav {
   background: white;
 }
 
-@media (min-width: 1024px) {
-  nav {
-    min-height: unset;
-    height: calc(100vh - 100px); /* reduce the footer height */
-  }
-}
-
 main {
   display: block;
   margin: 3em auto 1em;
@@ -731,4 +724,8 @@ pre {
   font-family: "Source Code Pro", Monaco, monospace;
 }
 
+footer {
+  z-index: 20;
+}
+
 /* @end */

From 9a8ae3ec320105161e439f3ff2b4cda98b5532b1 Mon Sep 17 00:00:00 2001
From: Stan Lo <stan.lo@shopify.com>
Date: Mon, 5 Aug 2024 17:37:50 +0100
Subject: [PATCH 3/3] Use css variable to declare sidebar's width

---
 lib/rdoc/generator/template/darkfish/css/rdoc.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index 052ba9b525..d0f14067ab 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -9,6 +9,10 @@
 /* vim: ft=css et sw=2 ts=2 sts=2 */
 /* Base Green is: #6C8C22 */
 
+:root {
+  --sidebar-width: 300px;
+}
+
 .hide { display: none !important; }
 
 * { padding: 0; margin: 0; }
@@ -209,7 +213,7 @@ nav {
   z-index: 10;
 
   /* Layout */
-  width: 300px;
+  width: var(--sidebar-width);
   min-height: 100vh;
   background: white;
 }
@@ -226,7 +230,7 @@ main {
 
 @media (min-width: 1024px) {
   main {
-    margin-left: 300px;
+    margin-left: var(--sidebar-width);
   }
 }