New playground design

[aomarks]

• Made some tweaks to the mocks
  • Examples drawer is open by default. I think this pretty much solves the "why would I click the examples button?" problem.
  • Changed editor/result layout to be vertical, matching the style of the tutorial. I think this is a better default when the examples drawer is open. We could add a "switch layout" button for wider screens (or a media query).
  • Examples drawer icon (after closing) is now a book, instead of a hamburger.
  • Download/Share buttons have text labels -- I thought the pure icons were just a bit too minimal, and there's no shortage of space.
  • Examples drawer section headings are preserved
  • Played around with examples drawer styles
    • Distinguish section headings using text style, instead of indentation
    • Made it more clear which item is currently active (vs the docs nav)
    • Added sticky header

Fixes #225

[github-actions]

A live preview of this PR will be available at the URL(s) below.
The latest URL will be appended to this comment on each push.
Each build takes ~5-10 minutes, and will 404 until finished.

https://pr226-a5cae3c---lit-dev-5ftespv5na-uc.a.run.app/playground/
https://pr226-0a333a9---lit-dev-5ftespv5na-uc.a.run.app/

[sorvell]

LGTM. I kind of like the vertical split better. Maybe we could add a toggle on the toolbar?

[justinfagnani]

I don't know about this. I basically prefer everything about the current playground:

1. The dark gray on the nav is too weighty and distracts from the code
2. The bright blue tool bar is blue for no apparent reason and distracts from the code
3. The vertical split between code and preview is less space efficient, crops longer examples more, and different from basically every jsbin-like editor out there with the exception of Codepen which I dislike because of this very layout.
4. The examples drawer button isn't as clear without the label text

If this goes in I'd at least like a way to preserve the current version for a comparison. Has Ocupop seen the current styling?

[aomarks]

If this goes in I'd at least like a way to preserve the current version for a comparison.

The old versions will be accessible at older PR links, is that good enough?

Has Ocupop seen the current styling?

Do you mean this PR, or the original version? They've seen the original version, but not this PR.

[aomarks]

• The vertical split between code and preview is less space efficient, crops longer examples more, and different from basically every jsbin-like editor out there with the exception of Codepen which I dislike because of this very layout.

I made this change, and explained it in the PR description. I think it works better on narrower screens when you have the examples drawer open -- my suggestion above was to have a toggle or a media query.

[aomarks]

LGTM. I kind of like the vertical split better. Maybe we could add a toggle on the toolbar?

• The vertical split between code and preview is less space efficient, crops longer examples more, and different from basically every jsbin-like editor out there with the exception of Codepen which I dislike because of this very layout.

This is now responsive: side-by-side on wider screens, above-below on narrower screens.

[aomarks]

• The dark gray on the nav is too weighty and distracts from the code
• The bright blue tool bar is blue for no apparent reason and distracts from the code
• The examples drawer button isn't as clear without the label text

Don't disagree with these points. Going to land this with the current styles that are fairly close to the mocks, but will iterate in a followup sometime this week.