From e844cc5f0759b18ed4142d2cb00d715595381fc4 Mon Sep 17 00:00:00 2001
From: Eric Arellano <14852634+Eric-Arellano@users.noreply.github.com>
Date: Wed, 10 May 2023 10:10:39 -0600
Subject: [PATCH] Fix Furo side bars & improve footer styling (#294)

Before, the left table of contents and the right page of contents would
not render properly on mobile. They would not show the whole content for
example. This is because they were not accounting for our top nav bar.

--

This PR also fixes the "Was this page helpful?" question not properly
having lines above and below it.
<img width="841" alt="Screenshot 2023-05-03 at 8 56 29 AM"
src="https://user-images.githubusercontent.com/14852634/235955023-16bba857-86cb-4620-9c46-471707e8331e.png">

--

Finally, this improves mobile to not show the project name at the top of
the page. We don't render it for desktop, and don't want to for mobile.

<img width="700" alt="Screenshot 2023-05-03 at 8 56 54 AM"
src="https://user-images.githubusercontent.com/14852634/235955160-8ffcc6e5-6e77-4c76-b5ee-ed600e577d66.png">
---
 qiskit_sphinx_theme/furo/base/page.html       |  4 +-
 .../base/static/styles/qiskit_changes.css     | 43 ++++++++++++++++---
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/qiskit_sphinx_theme/furo/base/page.html b/qiskit_sphinx_theme/furo/base/page.html
index d64d47f8..996c7db9 100644
--- a/qiskit_sphinx_theme/furo/base/page.html
+++ b/qiskit_sphinx_theme/furo/base/page.html
@@ -36,7 +36,9 @@
       </label>
     </div>
     <div class="header-center">
-      <a href="{{ pathto(master_doc) }}"><div class="brand">{{ docstitle if docstitle else project }}</div></a>
+      {#- QISKIT CHANGE: start. Don't show the project title on mobile. -#}
+      {#- <a href="{{ pathto(master_doc) }}"><div class="brand">{{ docstitle if docstitle else project }}</div></a> -#}
+      {#- QISKIT CHANGE: end -#}
     </div>
     <div class="header-right">
       <div class="theme-toggle-container theme-toggle-header">
diff --git a/qiskit_sphinx_theme/furo/base/static/styles/qiskit_changes.css b/qiskit_sphinx_theme/furo/base/static/styles/qiskit_changes.css
index 77d44e0b..97430ad2 100644
--- a/qiskit_sphinx_theme/furo/base/static/styles/qiskit_changes.css
+++ b/qiskit_sphinx_theme/furo/base/static/styles/qiskit_changes.css
@@ -1,26 +1,54 @@
 /* Define some Furo variables. See
  *  https://github.com/pradyunsg/furo/tree/main/src/furo/assets/styles/variables
- *  for all options. */
+ *  for all options.
+ *
+ * Variables that start with `--qiskit-` are new values we use in this file; they are not overrides.
+ */
 body {
     --color-brand-primary: #8A3FFC;
     --color-brand-content: #8A3FFC;
     --font-stack: 'IBM Plex Sans', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
     --font-stack--monospace: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
+    /* This value is duplicated from `top-nav-bar.js`. Its definition of the variable is not
+     * exposed globally. Keep in sync. */
+    --qiskit-top-nav-bar-height: 3.5rem;
 }
 
 /* ------------------------------
-* User analytics in the footer
+* Top nav bar
 * ------------------------------ */
 
-/* TODO: why won't the border render?? */
-footer .helpful-hr {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+/* Fix Qiskit top nav bar hiding Furo's top nav bar when scrolled down. */
+.mobile-header,
+.sidebar-sticky,
+.toc-sticky {
+  top: var(--qiskit-top-nav-bar-height);
+}
+
+/* Show the whole contents of the mobile expandable menus.
+*  `box-sizing: border-box` ensures padding is included in the height calculations. */
+@media (max-width: 67em) {
+  .sidebar-drawer {
+    padding-top: var(--qiskit-top-nav-bar-height);
+    box-sizing: border-box;
+  }
+}
+@media (max-width: 82em) {
+  .toc-drawer {
+    padding-top: var(--qiskit-top-nav-bar-height);
+    box-sizing: border-box;
+  }
 }
 
+/* ------------------------------
+* User analytics in the footer
+* ------------------------------ */
+
 footer .helpful-container {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
+  border-top: 1px solid var(--color-background-border);
+  border-bottom: 1px solid var(--color-background-border);
+  color: var(--color-foreground-secondary);
 }
 
 footer .helpful-container .helpful-question,
@@ -36,6 +64,7 @@ footer .helpful-container .was-helpful-thank-you {
 .helpful-container .helpful-question.no-link {
   color: #8B34FC;
   cursor: pointer;
+  text-decoration: none;
 }
 
 .helpful-container .helpful-question.yes-link:hover,