Gutenboarding: Update Template Selector Styling

[ockham]

Changes proposed in this Pull Request

WIP.

• Centered 960px
• 2 columns
• No template captions
• High-res thumbnails
• Enable scrolling
• Heading
• Keep verticalized background from intent gathering step

Mockup

Current Status

Testing instructions

http://calypso.localhost:3000/gutenboarding

Fill in verticals and site title, click next.

[matticbot]

Test live: https://calypso.live/?branch=update/gutenboarding-template-selector-styling

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~3 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-gutenboarding       +221 B  (+0.0%)       +3 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[simison]

No template captions

I saw some back-forth discussion about this actually another day on Slack — let's double check on Monday. Easy enough to them back after the fact anyway.

[ockham]

Closing in favor of #38456.