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

@@ -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">

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,