- changed milestone to blue sky
Docs: responsive sphinx theme
Hi,
Been trying to read the docs on a mobile device and it is quite difficult because the sidebar takes up most of the viewport. Happens on a narrow desktop window also, when trying to work on code and have docs open at the same time.
A few lines of responsive css could move or hide the sidebar for narrow viewports. Alternatively there are responsive Sphinx themes, like Alabaster.
Thanks for the hard work,
Comments (6)
-
repo owner -
repo owner - attached Screenshot_20170613-222752.png
FTR on my phone, the sidebar isn't ideal but certainly doesn't take up "much of the viewport", text is pretty readable.
-
repo owner also if you want to PR on the CSS you can play with that at https://bitbucket.org/zzzeek/zzzeeksphinx
-
reporter Well, the standard and RTD sphinx themes have been responsive for a few years. I know that this is an older project, and so understand.
I used phones as an example, and it's true I don't read long-form docs there a lot, but it was easier than explaining about my portrait monitor setup.
On my phone and desktop however, the font size of the side bar and body text are the same size, so the sidebar is almost half of the viewport, which makes the code samples unreadable without lots of scrolling.
I'll look into hacking the css a bit and see what I come up with.
-
reporter On the iPhone the page is tiny and body needs to be zoomed into to read.
-
reporter Well, I couldn't completely fix the sidebar because there is a script moving it into position. So, I hid it but that is sub optimal. It should come after the text I guess:
@media only screen and (max-device-width: 736px) and (orientation : portrait) { #docs-body { margin-left: 0; } #docs-body pre { font-size: .9em; /* still too big */ } #fixed-sidebar { display: none; } }
Then I noticed the readability button, sigh.
- Log in to comment
shrugs, not much I can do on that front. contributions welcome. I dont think most software library documentation sites are very readable on phones in general, try some others for comparison.