Use new documentation layout on Vanilla site

[bartaz]

Done

Apply new documentation layout to Vanilla website.
This mostly affects docs section, but the whole site now uses paper background as well.

Fixes WD-6055

QA

• Open demo
• Review the docs, make sure layout is fine and components look good on new background

[webteam-app]

Demo starting at https://vanilla-framework-4863.demos.haus

[lyubomir-popov]

Looks great, and the accordion helps a lot I think. A few niggles I noticed:

• clicking on any sidenav item leads to the scrollbar becoming visible for a fraction of a second

• resizing from smaller width to bigger leaves the codepen examples at the earlier height, with a lot of white space underneath. Can we resize them onresize?
  

• the sidenav highlight goes under the scrollbar
  

• the footer should use the dark theme link colours:
  

• I know we have a separate issue for this, but just pointing out it is still protruding. We discussed making menu item padding same as grid gutter padding to solve this. Can it be a driveby here or something we merge before this pr?
  

• we should be using the paper colour to stay consistent with the new branding

[bartaz]

Looks great, and the accordion helps a lot I think. A few niggles I noticed:

• clicking on any sidenav item leads to the scrollbar becoming visible for a fraction of a second

I can't reproduce it and don't really know what we could do about it. If it is a visible issue we can address it separately.

• resizing from smaller width to bigger leaves the codepen examples at the earlier height, with a lot of white space underneath. Can we resize them onresize?

Done.

• the sidenav highlight goes under the scrollbar

macOS shows scrollbar over the content, not much we can do about it.

• the footer should use the dark theme link colours:

Done

• I know we have a separate issue for this, but just pointing out it is still protruding. We discussed making menu item padding same as grid gutter padding to solve this. Can it be a driveby here or something we merge before this pr?

I made a quick hack for it (shifted the items to make them aligned). Adjusting padding is a separate issue and it turned out not to be quick (because of legacy of old navigation styles), so I'll address it separately later.

• we should be using the paper colour to stay consistent with the new branding

Done