Docs design refresh fixes

[kylegach]

What I did

• Fix flash of default renderer in RendererSelector
• Style fixes
  • Optically align sidebar icons with header logo
  • Ensure focus outline of sidebar links don't overflow scroll viewport
    • While maintaining correct gutter width between sidebar & content
  • Decreased sidebar width to minimum necessary
  • Narrowed the scroll channel width to minimum necessary
  • Bottom padding of sidebar and right rail matches content
  • Decreased breakpoint width at which "On this page" appears
    • Still maintains the 600px minimum width of main content
  • Extracted a bunch of styling constants to communicate intent and express relationships
• Fix sidebar links
  • Use correct path
  • Use Gatsby Link instead of a
  • Ensure future heading type TOC items are processed correctly
  • Simplify logic

This screenshot illustrates a number of fixes:

1. Optical alignment of logo and sidebar icons (and the rest of the sidebar with them)
2. Un-clipped focus outline on sidebar item
3. Non-overlapping anchor link icon and sidebar scrollbar
4. Reduced scrollbar channel

How to test

1. Open the deploy preview
2. Choose a non-React renderer, if you haven't already
3. Hard-refresh the page and watch the renderer pills closely
   1. Confirm that it the highlighted pill no longer flashes React first, then your choice
4. Focus a sidebar link
   1. Confirm that the focus outline is no longer clipped
5. Click a sidebar link
   1. Confirm you are navigated to the correct page
6. (at default zoom level) Confirm sidebar items do not wrap
7. Hover over a heading in the content
   1. Confirm that the anchor link icon does not overlap the sidebar's scrollbar
8. Confirm that the "On this page" now appears when viewport is >= 1510px
9. Confirm sidebar and "On this page" scroll bars have adequate room
10. Scroll all the way to the bottom of a page and also scroll the sidebar all the way to the bottom
    1. Confirm that the bottom edges of the content are aligned

[netlify[bot]]

✅ Deploy Preview for storybook-frontpage ready!

Name	Link
🔨 Latest commit	8720b329ef820c159902da039a8958bd89a4ff51
🔍 Latest deploy log	https://app.netlify.com/sites/storybook-frontpage/deploys/6556f3ec92912f0008cc22a1
😎 Deploy Preview	https://deploy-preview-629--storybook-frontpage.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 configuration.