Revisit navbar appearance

[seeM]

• Could the show/hide animation be made smoother?¹
• Is the hover effect on nav items too subtle - could it benefit from a brighter color or an underline?
• Should we consider an svg logo instead of png?
• Is the nav item font size too large?² Perhaps try ~14px?
• Is the horizontal spacing between nav items too small?³ Perhaps try ~26px?

Footnotes

1. Quarto's navbar animates when it hides as the user scrolls down, and when it shows as the user scrolls back up. The animation causes the navbar to clip the main content, and the left navigation sidebar and right ToC to jump down, which can be distracting. Material has an interesting approach which results in a smoother animation. ↩

2. Referenced designs have a ratio of nav item to body font size of >= 0.8. I've compiled these in a spreadsheet. ↩

3. Referenced designs have an average spacing ~26px, which is around what I'd try for Quarto. See spreadsheet. ↩

[seeM]

Quarto navbar animation

At a certain point, scrolling up/down by a single tick triggers the animation, causing the navbar to clip content and the left and right sidebar content to jump.

quarto-navbar-animation.mov

Material navbar animation

Smooth scrolling on every tick. Only the nav items are hidden/shown with animations.

material-navbar-animation.mov

Thanks for posting and providing these suggestions.