12 ms·

This actually looks quite nice. Works perfectly without JavaScript, looks good on mobile, and uses just plain Markdown files. For comparison, the official MkDoc

This actually looks quite nice. Works perfectly without JavaScript, looks good on mobile, and uses just plain Markdown files. For comparison, the official MkDocs page doesn't work well without JavaScript. I think the tablet viewport (aka desktop-not-maximized) could use bit more love, and it's strange to include a dark mode slider and not respect my system dark mode setting, but these are both pretty minor overall. Good job.

squidfunk 5y ago
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-the-colors/#system-preference https://squidfunk.github.io/mkdocs-material/setup/changing-t...
- CGamesPlay 5y ago
  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.
  - squidfunk 5y ago
    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!
    - CGamesPlay 5y ago
      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.
      - squidfunk 5y ago
        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/ https://adamwathan.me/dont-use-em-for-media-queries/

squidfunk 5y ago

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-the-colors/#system-preference https://squidfunk.github.io/mkdocs-material/setup/changing-t...

CGamesPlay 5y ago
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.
- squidfunk 5y ago
  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!
  - CGamesPlay 5y ago
    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.
    - squidfunk 5y ago
      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/ https://adamwathan.me/dont-use-em-for-media-queries/