Patterns: Update the WP20 banner, use Link Wrapper block

[ryelle]

This PR switches the large banner on the homepage to a smaller banner, wrapped in a link. This also updates the content of the banner to highlight the WP20 website, instead of the swag.

Fixes #258, See WordPress/wporg-mu-plugins#398 (required before this can be merged)

cc @DanSoschin

Screenshots

Size	Screenshot
400px
600px
960px
1400px
Focus state
Hover state

How to test the changes in this Pull Request:

1. Make sure New Block: Link Wrapper to add a link to a group of blocks. wporg-mu-plugins#398 is applied or already merged
2. Check out this PR, build the CSS
3. View the homepage, it should have the smaller banner.

[adamwoodnz]

Works for me but doesn't quite match design:

1. Height in design is 60px
2. Confetti looks like it's lower opacity (can't see any full color orange or white discs)
3. The 'View Events' link is missing (maybe intentional due to the whole banner being clickable?)

[ryelle]

Most of that was intentional, but I'll let @marko-srb chime in if I should change anything

Height in design is 60px

This size worked better on smaller screens, otherwise it felt like there wasn't enough space when the text wrapped to additional lines.

Confetti looks like it's lower opacity (can't see any full color orange or white discs)

I put the overlay up to 50% based on feedback from @annezazu, "the dots in the background image make it hard to read the text" — maybe a different background image designed for this size would be better?

The 'View Events' link is missing (maybe intentional due to the whole banner being clickable?)

Yeah, intentional because the whole line is a link now.

[marko-srb]

@ryelle

All the updates are fine. One suggestion/question.

• Can we reduce text size on mobile only? (in original design I went with 13 for mobile)

If not, can we reduce the space from logo to the text, to about half of what's done. See screenshot:

Other than that, we can push this change.

P.S. It is fine to narrow that space on both responsive and desktop.

Thanks!

[ryelle]

I've tweaked the spacing & updated the font size on small (<500px) screens:

Large	Small