Fix Furo side bars & improve footer styling

[Eric-Arellano]

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.

--

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.

[Eric-Arellano]

This turns off underlining so that we match the Pytorch theme.

[Eric-Arellano]

While working on #293, I realized this is not working how I thought. I thought that var(--header-height) refers to the header height defined by the top-nav-bar.js web component. But it does not. The web component does not export its CSS variables globally.

Instead, var(--header-height) refers instead to the Furo value set here:

https://github.com/pradyunsg/furo/blob/e7f732ea5133d29fc6ca62af0455b16ffaab00dc/src/furo/assets/styles/variables/_spacing.scss#L6-L18

It so happens that my CSS changes to use var(--header-height) generally work well.

I suspect that a better fix is for us to update the definition of --header-height to incorporate our top nav bar's height. So, we ideally only need to define the variable in qiskit_changes.css and can remove the custom CSS rules.

Turns out, even with the above insights, we still need the same CSS rules. Only, we should not be redefining the variable --header-height. This PR now uses a unique CSS variable name.

[Eric-Arellano]

#295 resulted in a tweak. But now ready for review :)

[Eric-Arellano]

See #295 for an explanation of why we take this approach.

Unlike #295, this uses a more unique variable name so that we don't override Furo's --header-height.

[Eric-Arellano]

These should not be necessary. According to https://caniuse.com/?search=inline-flex, inline-flex has been supported by all browsers since 2014.

[coruscating]

I tested on mobile and this works as expected, but I want to note that I find these three menu icons confusing:

Without labels, I don't really know what each one corresponds to.

[javabster]

Without labels, I don't really know what each one corresponds to.

Agreed, I think the biggest issue is the similarity between the qiskit top menu hamburger icon and the furo left side hamburger, as they are basically the same icon. Is there a way to add a label to the furo one? or replace it with text? Something like "Documentation Contents" would work, and matches how we currently do the mobile view so its less of a big change for users

[Eric-Arellano]

Is there a way to add a label to the furo one? or replace it with text? Something like "Documentation Contents" would work, and matches how we currently do the mobile view so its less of a big change for users

Thanks for the suggestions! Tracked by #300. I want to keep that fix as a dedicated PR so that we can properly discuss its design because we can choose from multiple options.

This PR is still some progress (that makes follow-up PRs easier). So it's fine to land on its own.

[techtolentino]

These changes look good, thanks @Eric-Arellano

🚀

[techtolentino]

These changes look good, thanks @Eric-Arellano

🚀