Option to pin the top navbar and make it semitransparent/blurry

[mosra]

Something that's been bothering me lately is that on very long pages it takes a lot of effort to get back to the top. On desktop one has to press the Home key (unless on Mac, heh heh, and unless some other UI element is active), on mobile the only way is to frantically scroll like a madman.

One option would be to introduce "^ Top" links in section headings, at the bottom of the page, and random other places, but that's a lot of noise for a single feature and Murphy's law says that when needed most, frantic scrolling would still be faster than looking for a "Top" link.

Another option is to have the top navbar always present, pinned to the top of the window, and have a consistent yet unobtrusive way to get back to the top (for example by clicking the empty space). It'd be especially useful in case of documentation or larger websites where people often need to get back to search (especially on mobile) or to another section. This however reduces the screen space and may be seen as an antipattern (can't find the hilarious navbar-hating article right now, but there was one), so it's probably best to have it an option (possibly a page-wide CSS class, similarly to making it semi-transparent on jumbo articles?).

Re styling, I kinda like the backdrop-filter: blur(...) that's used for example on Twitter, although apparently Firefox doesn't have it widely enabled yet so this would be a Chrome-only chrome for the time being.

Things to do:

• [ ] figure out a way to have the "empty space" act as a link to the top
  • [ ] I suppose there's no builtin HTML "top" anchor, so what's the commonly used one? #!?
  • [ ] or maybe have a link to the top appear if the user scrolls down? is that doable w/o JS?
• [ ] check how pinning the navbar behaves (is it still so damn jaggy during scroll like it used to be in old IE?)
• [ ] create a CSS class that turns this behavior on/off
  • [ ] make it possible to override this on a per-page basis in Pelican, with a default to either
• [ ] check if the CSS blur has some downsides (perf, different rendering like mentioned on the FF bug, CPU use with videos or WebGL context underneath)
• [ ] check if unblurred transparency as a fallback looks acceptable here (probably not?)
  • [ ] if not, is there a way to have it transparent only if blur is supported?

Opinions?

[marzer]

Opinions?

I'm all for it. So much so that I have a prototype for you to peruse already: https://marzer.github.io/tomlplusplus/

I've also floated the ToC for wide-ish resolutions, too, since I was finding that for long documents it's useful to have handy for context.

[mosra]

Haha, I just discovered Poxy completely by accident after I saw you opened a PR on the meshoptimizer repo (and then went looking around in case you have also some Magnum-based project I'm not aware of yet, heh heh).

Yep, when checking out that page earlier I had a feeling something's different and better but couldn't quite pin it down. Now I know :D

Floating TOC is also cool, and also something I'm thinking about doing. But even on smaller widths, pushing the page content the other way. My browser is about 100px too narrow to trigger that TOC floating and yet there's plenty of space for it to fit.

[marzer]

But even on smaller widths, pushing the page content the other way. My browser is about 100px too narrow to trigger that TOC floating and yet there's plenty of space for it to fit.

Yeah. Pushing the actual page content would be the right way to go. I fiddled with the widths for a while before eventually deciding "eh this'll do". I toyed with the idea of adding more cases to the media queries but it seemed like I was going about it the wrong way so I bailed on that idea, heh. I am a lot of things, but possessed of patience for webdev I am not 😅