Docs redesign - new navigation structure + theming

[ghost]

New designs

Sidebar changes:

• a nicer experience for mobile and tablet users - a collapsable menu you can summon from anywhere on the page (instead of scrolling back to the top)
• new section headings to better surface our pages
• a nicer a e s t h e t i c in keeping with our retro theme 😎

Primary nav changes:

• a new purple background to match our new theme

Documentation content changes:

• a dull purple background to match our new theme

Mobile and tablet breakpoints

Note: These should match with the breakpoint(mobile) and breakpoint(tablet) values under our SCSS functions

• Link to Figma mobile mockup
• Link to Figma tablet mockup

Desktop and above

• Link to Figma desktop mockup

Code changes

• we'll likely need a new mixin to represent those nav section headings. I say "mixin" since it'll be a combo of font-family, text-transform to all caps, and wider letter-spacing. I'm open to any naming scheme here; maybe subheading or decorative-heading?
• we currently assume all visitors have the Monaco font on their device, but this probably isn't sustainable! We should probably find this font face and add it to our assets/fonts directory.
• the docs.11tydata.js will need a new data structure to support section headings. The section headings shown in the mockup are intended for production (it's not dummy data!), so structure our data to support that. i18n is out of scope.

[ghost]

To be completed after #102

[brycewray]

@Holben888 Re your second bullet under "Code changes," you could try something similar to what Tailwind uses for monospaced type, unless you require that code will look exactly the same regardless of OS or device (e.g., so all zeroes will look the same):

font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

[ghost]

@brycewray Ah that's fair! But we are using Monaco as a heading font as well, so not just code snippets. I'd prefer to get the same look across device now that it's a decorative font.

[nachtfunke]

I think after merging #167, everything described in this issue is done! I meant to reference this issue in my PR but I referenced the wrong issue.

[ghost]

No prob! I agree 😁