Improve sticky TOC on mobile devices and medium viewports

[hippotastic]

What kind of changes does this PR include?

• Changes to the docs site code

Description

• Improves the sticky TOC on mobile devices like iOS Safari:

  • The TOC was not sticky on iOS Safari before, now it is
  • Scroll anchors are no longer obscured by sticky elements
  • You can now tap on top of the screen to go to the beginning of the page again
  • The dynamically resizing Safari tab bar now works again instead of being stuck in the expanded state

• Improves the sticky TOC on all devices with medium viewports:

  • Instead of the TOC being below the article heading and scrolling/stopping out of sync with the left sidebar, it is now always at the top of the main column (as discussed on Discord) and scrolls in sync with the left sidebar.

• Cleanup: Reduced magic numbers across the CSS code by moving them to clearly named variables in public/theme.css.

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	2a00cff
🔍 Latest deploy log	https://app.netlify.com/sites/astro-docs-2/deploys/62c46fe21cdb4d000954c78e
😎 Deploy Preview	https://deploy-preview-927--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[hippotastic]

@delucis @Yan-Thomas PTAL :)

[sarah11918]

I don't know why my evil phone was not also pinged for a PTAL, but fwiw, you have appeased even Sarah's phone with this upgrade, Hippo! I have none of my earlier issues re: completely disappearing TOC if you clicked on a section to navigate there.

[hippotastic]

I don't know why my evil phone was not also pinged for a PTAL, but fwiw, you have appeased even Sarah's phone with this upgrade, Hippo! I have none of my earlier issues re: completely disappearing TOC if you clicked on a section to navigate there.

Oops, my bad! I wanted to ping you, too. I just talked to Chris earlier today that I was really curious what issues your phone could come up with!

Really glad to hear that there are none. I was expecting some epic final boss battle to make your phone happy, too! 😄

[yanthomasdev]

LGTM! Thanks for all the improvements! 💯🦛💜

[delucis]

Looks really good! A couple of small things and one bigger question that isn’t a complete blocker, but would be good to investigate.

[delucis]

LGTM! Thanks so much Hippo! A great improvement 🚀