Skip to content

Fix Furo side bars & improve footer styling #294

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 10, 2023
Merged

Fix Furo side bars & improve footer styling #294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3aab8c9
Fix our custom footer styling
Eric-Arellano Apr 18, 2023
066ab73
Improve top nav bar:
Eric-Arellano Apr 18, 2023
d19374d
Hide theme selection
Eric-Arellano Apr 19, 2023
19adeab
Don't hide dark mode toggle yet
Eric-Arellano May 3, 2023
4f0e025
Use a unique variable name
Eric-Arellano May 3, 2023
5be4084
Improve comment about CSS variables1
Eric-Arellano May 3, 2023
f17dfc1
Merge branch 'main' into improve-furo
Eric-Arellano May 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion qiskit_sphinx_theme/furo/base/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
43 changes: 36 additions & 7 deletions qiskit_sphinx_theme/furo/base/static/styles/qiskit_changes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Comment on lines +12 to +14
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

}

/* ------------------------------
* 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;
Comment on lines -21 to -22
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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,
Expand All @@ -36,6 +64,7 @@ footer .helpful-container .was-helpful-thank-you {
.helpful-container .helpful-question.no-link {
color: #8B34FC;
cursor: pointer;
text-decoration: none;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

}

.helpful-container .helpful-question.yes-link:hover,
Expand Down