Hacker News Reader

Comment by squidfunk | Hacker News Reader

Thanks!

> I think the tablet viewport (aka desktop-not-maximized) could use bit more love

IMHO, layouts for tablet viewports are often quite frankensteiny and hard to get really great. Is there anything in particular you feel could be improved?

> it's strange to include a dark mode slider and not respect my system dark mode setting

Material for MkDocs can do that [1], but I've disabled it for the documentation as I like the actual documentation for this tool to have the what I'd call "canonical" styling.

[1]: https://squidfunk.github.io/mkdocs-material/setup/changing-t...

View on HN

Sure, when I open the page in my browser window (1223px), I have left and right sidebars. Now I zoom in so the font is a size that I like (new viewport is 980px) and I only have a right-hand sidebar. So far so good. Except, if I refresh the page, now the right hand sidebar goes away for some reason. Zooming back out now results in the right-hand sidebar appearing but the left-hand sidebar staying hidden.

So there's some weird inconsistency in the layout, but the upshot is if I bookmark the page and return to it (or open a link in a new tab), I don't get a right-hand sidebar.

If I did get a sidebar, I'd prefer it to be the left-hand sidebar than the right-hand sidebar, but that's more personal preference.

Just to clarify: the left-hand sidebar is the navigation, which collapses into the drawer behind the hamburger menu icon on breakpoints below 1220px. The right-hand sidebar is the table of contents which lists all anchor links specific to the page.

> Except, if I refresh the page, now the right hand sidebar goes away for some reason.

That is very weird and not intended. I just tried to reproduce the behavior (macOS, Chrome), but to no avail. If you have the time, it'll be great to have an issue with steps to reproduce (and possibly a screen capture), so we can fix it!

You know, I just tried and can't reproduce in Chrome either. I'm able to reproduce in Safari, and now having successfully nerd-sniped myself I'm pretty confident it's actually a bug in Safari. The `@media screen and (min-width: 60em)` doesn't update its definition of an `em` when the page is zoomed in or out, so zooming the page gives more pixels for the "min-width" part, but the "60em" is still being treated as the original zoom level.

Jup, that's sadly a still unfixed bug in Safari [1]. Super annoying, but if we would use px for media queries, we would have to swap out all rem units with px, thus not respecting your default font size.

[1]: https://adamwathan.me/dont-use-em-for-media-queries/

Reply on news.ycombinator.com