-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
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.
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
Issue #12290 - Docs using Furo Theme W/ Dark Mode #12326
Issue #12290 - Docs using Furo Theme W/ Dark Mode #12326
Conversation
Quick link to preview: https://pytest--12326.org.readthedocs.build/en/12326/contents.html Looks pretty nice to me. I noticed that in the API reference furo shows a warning about the table of contents: https://pytest--12326.org.readthedocs.build/en/12326/reference/reference.html |
Ah, good find. When I get the chance today, I can go in a fix that. Edit: cleaned up that error + one more page that had the same problem 🙂 |
To me this looks good. Can you compare this PR with #9788 from @pradyunsg, in case that PR had something that's worth bringing over to this PR? |
@@ -9,3 +9,4 @@ sphinxcontrib-svg2pdfconverter | |||
# is the version that is assigned to the docs. | |||
# See https://github.com/pytest-dev/pytest/pull/10578#issuecomment-1348249045. | |||
packaging <22 | |||
furo |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should also remove the pallets-sphinx-themes
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Definitely. Will remove this. + removing some extras based on #9788
Overall I like the new theme! The code highlighting for the light mode looks a bit off to me, but the highlighting for dark mode looks great. Perhaps that's something we can adjust later.
Perhaps a small site-wide announcement? https://pradyunsg.me/furo/customisation/#announcement I do not mean putting the entire information in the announcement, perhaps the announcement could be just a one liner "Next training/sprint: June 11th" with a link to a page with full details? |
definitely a good callout. Im pretty new to rst, so I'll see if we can get it to be more prominent. The solution may be something like that announcement banner referenced above: #12326 (comment) |
@nicoddemus @The-Compiler Did some experimenting with using that announcement bar but was having some problems with that static url. I reverted the sidebar for the trainings, here's a quick example of how that looks: |
I'd suggest also unsetting the pygments theme (I think it's called sphinx) in conf.py as well. |
doc/en/requirements.txt
Outdated
@@ -9,3 +8,4 @@ sphinxcontrib-svg2pdfconverter | |||
# is the version that is assigned to the docs. | |||
# See https://github.com/pytest-dev/pytest/pull/10578#issuecomment-1348249045. | |||
packaging <22 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should be able to unpin this too since this was pinned due to the existing theme: #10578 (comment)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
unpinned it + removed sphinx theme. This will affected only the light mode code snippets.
Ahh the syntax highlight for the light theme is now much better. ❤️ Thanks! I'm approving, pending @The-Compiler's opinion on how the training looks (however this is of course something we can tweak/improve later). |
SidebarsOne difference with the new theme: The layout breakpoints are all expressed in For example, with the old theme (on an unscaled desktop display, with the browser windowed), the left-hand sidebar only collapses itself when the window is less than With this theme, the sidebar doesn't open until the window is more than Training & Events boxI also think the "Trainings and events" sidebar could be wider — 50% (instead of the default 30%) seems to strike a much better balance. It's got an ID, so that should be as easy as sticking some custom CSS in with: #features { width: 50%; } 30%50%Bulleted listsOh, last but not least: The new theme shows unordered lists with no bullet style at all, just an indent. It's arguably cleaner, but it does change the look of many elements. Including the two date lines in the training & events box. (And makes their indentation kind of excessive, considering the Old themeNew theme |
Ah, I see now that that part, at least, is not the theme, as it's done locally in the |
doc/en/_templates/style.html
Outdated
@@ -0,0 +1,4 @@ | |||
<style> | |||
ul {list-style: none;} | |||
li {margin: 5px 0}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
CSS syntax nit, and because the theme measurements are all in em
s:
li {margin: 5px 0}; | |
li {margin: 0.4em 0;} |
<style> | ||
ul {list-style: none;} | ||
li {margin: 5px 0}; | ||
</style> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
</style> | |
@media (min-width: 46em) { | |
#features {width: 50%;} | |
} | |
</style> |
(To widen the trainings & events sidebar. At 46em the width becomes 100%
, messing with that looks weird.)
@ferdnyc Great callouts. Implemented those changes you suggested. I think that definitely makes that training section look a lot nicer 🙂 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking great, and seems to be a big improvement! Now the box also doesn't make the next heading look awkward anymore either.
Big fan of this, thanks a lot for tackling it!
@nicoddemus @bluetech What do you think about backporting this to 8.2.x so it appears on pytest.org already? |
I think it's good to backport |
Agreed, backporting now. |
Light Mode:
Dark Mode: