style / layout (CSS) improvements

[justinmk]

How to help:

1. make changes to gen_help_html.lua
   • html
   • css
2. create a PR with your changes at https://github.com/neovim/neovim
3. include a screenshot in the PR description.

Problems with layout of user docs

• ✅ the right-side menu (table of contents) is too far away from the main content
  • DONE: remove float property and set position: fixed; left: 67%;
• for narrow devices (mobile phone) the right-side menu should move to the top of page. currently it kinda just squishes.
• missing header / footer from main site: https://neovim.io/

Problems with style of user docs

• ✅ normal text is smaller than code ("preformatted") text
  • DONE: use same font-size as bootstrap <pre>
• default font is hard / uncomfortable to read. Appears to be --serif-fonts: Lato, Cambria, Garamon, Palatino, P052, serif; from main.css.
  • Disabling that falls back to the bootstrap default, maybe that's good enough?
• for user docs we need:
  • a <code> style that stands out while still keeping with the theme.
    • meanwhile could use the bootstrap default (which is a pinkish-red color)?
  • a color for :help tags (*foo* tags in the vimdocs) that stands out while still fitting into a normal sentence.
  • a "deemphasize" color for things like footer text

[justinmk]

Related:

• Update help-tag-right CSS for HTML docs neovim#25858

[dogue]

One thing I ran into is that in the API docs, it's hard to visually pick out functions due to them being the same color as the rest of the text and nestled between the previous function's Return and their own Parameters sections, which are colored.

This makes it very easy to scroll past a function without realizing it while browsing what's available.