Create a more visual home page for demo gallery

[wwwillchen]

Fixes #366

Added instructions for re-generating screenshots in demo/README.md

[wwwillchen]

@richard-to ignoring the performance overhead (there's some ways to make it better), WDYT about the overall design of this as our demo home page?

[richard-to]

It's nice that someone can scroll through and view what the demos look like without clicking each one of them. So I think that's good.

Still doesn't fit in mobile even on an iphone pro max screen:

A few minor things. The rounded borders on the top edges of the cards look cut off. Would be nice if there was a bit more padding around some of the demos themselves. But it makes sense why there is no padding in the demos since we want to show the simplest code example for the components.

[richard-to]

LGTM

[wwwillchen]

It's nice that someone can scroll through and view what the demos look like without clicking each one of them. So I think that's good.

Still doesn't fit in mobile even on an iphone pro max screen:

A few minor things. The rounded borders on the top edges of the cards look cut off. Would be nice if there was a bit more padding around some of the demos themselves. But it makes sense why there is no padding in the demos since we want to show the simplest code example for the components.

Yeah, we need to use proper media query to hide the sidenav I think.

Re: borders, I noticed it too and yep, it's tough to make it look good vs. keeping the code minimal (although we might've gone too far with the minimalist code). I've noticed for example in angular material components, they will do some basic CSS styling just to make sure the example looks good, and oftentimes it's pretty helpful to copy those stylings as well.

[wwwillchen]

I've updated this to be mobile friendly both on the home page and the demo/embed page.