Rainfall: address header and footer improvements

[mikachan]

Changes proposed in this Pull Request:

This addresses most of the feedback in #6245.

I haven't been able to address all of it as I've tried to stick with what's currently available from GB, but let me know if we should manually add anything.

1. Header and footer are now full width

2. Footer text is now uppercase by default (I also made the links a navigation block)
   

3. Styled the mobile menu further:

We are currently able to swap the hamburger menu for text that says 'menu', but there is currently no option for replacing the 'X' with text (issue here: WordPress/gutenberg#42848).

This is how the overlay looks now:

I haven't included the social menu in the overlay as this currently isn't possible in GB (I don't think?)

I've also styled the current menu item, but it looks like there's a bug with the current-menu-item class. Fix here: WordPress/gutenberg#42849

5. Fixed how the footer menu wraps at mobile
   

Related issue(s):

#6245

[scruffian]

I added a commit to remove the link color from the header group as it was breaking the overlay colors.

[mikachan]

I added a commit to remove the link color from the header group as it was breaking the overlay colors.

Nice, thanks!

[beafialho]

Thank you! Header and footer alignments and letter case look good.

I've also styled the current menu item, but it looks like there's a bug with the current-menu-item class.

I notice there's a tiny misplacement of the current menu item, is that the bug?

We are currently able to swap the hamburger menu for text that says 'menu', but there is currently no option for replacing the 'X' with text (issue here: WordPress/gutenberg#42848).

Thanks for opening that one!

I haven't included the social menu in the overlay as this currently isn't possible in GB (I don't think?)

Ok, let's leave it like that for now.

I'm not sure this is the step to address this but the navigation links currently have no hover states. Those are specified here.

[mikachan]

Thanks @beafialho!

I notice there's a tiny misplacement of the current menu item, is that the bug?

I think this is due to the font-weight. We could probably fix it by specifying a different line-height for the current item.. I can take a proper look into it.

I'm not sure this is the step to address this but the navigation links currently have no hover states.

Ah yeah, we can address this next!