Skip to content

Fix 'on this page' widget #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Sep 25, 2024
Merged

Fix 'on this page' widget #96

merged 8 commits into from
Sep 25, 2024

Conversation

Rich-Harris
Copy link
Member

@Rich-Harris Rich-Harris commented Sep 25, 2024

WIP, needs a bit more CSS attention. But this is a bit nicer than what we have now:

  • works without JS. no flash of content
  • no gratuitous box shadow (we really overdo it with these)
  • way less code
  • on mobile, menu behaves like a <details> element. no modal background, no obscuring the content beneath
  • no gratuitous motion

This also tweaks the layout — instead of the padding growing between the main content and the sidebars, the sidebars grow. This is the first step towards aligning the edges of the header with the content, per #61.

TODO

  • only render on mobile if there are subheadings
  • add to blog pages as well?
  • decide whether it should default to open or closed on mobile
  • don't render backticks or HTML entities

Copy link

vercel bot commented Sep 25, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
omnisite ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 25, 2024 1:02pm

@Rich-Harris Rich-Harris linked an issue Sep 25, 2024 that may be closed by this pull request
@Rich-Harris Rich-Harris merged commit a725bc1 into main Sep 25, 2024
3 checks passed
@Rich-Harris Rich-Harris deleted the fix-on-this-page branch September 25, 2024 13:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

'on this page' doesn't work without JS
1 participant