WordPress / wporg-main-2022

A block-based child theme for WordPress.org, plus local environment
72 stars 26 forks source link

Patterns: Update the WP20 banner, use Link Wrapper block #265

Closed ryelle closed 1 year ago

ryelle commented 1 year ago

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 https://github.com/WordPress/wporg-mu-plugins/pull/398 (required before this can be merged)

cc @DanSoschin

Screenshots

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

How to test the changes in this Pull Request:

  1. Make sure https://github.com/WordPress/wporg-mu-plugins/pull/398 is applied or already merged
  2. Check out this PR, build the CSS
  3. View the homepage, it should have the smaller banner.
ryelle commented 1 year ago

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.

ryelle commented 1 year ago

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

Large Small
large screen small screen