Navigation: Update focus style, Get WordPress button mobile style

[ryelle]

Fixes #372, fixes #363. This updates the focus style across the header, and removes the special styling on the mobile "Get WordPress" button.

I'm using the "current item" color for the focus state, which is --wp--preset--color--blueberry-2 on the black background, --wp--preset--color--deep-blueberry on the white background, and --wp--preset--color--white on the blue background.

	Default	Blue bg	White bg
Top level item focus
Menu open, submenu item focus
Get WordPress focus
Small screen, logo focus
Small screen, menu open, top level item focus
Small screen, menu open, submenu item focus

The spacing around the small screen menu items have also been tweaked, but I've kept the highlight at the edge of the screen

[StevenDufresne]

I don't think i see another issue for this, but can we address the fact that the focus indicator is cut off and not aligned on the bottom (off by a couple pixels?):

Seems to be related to a border bottom on the li.

I would also prefer if the outline was closer to the text, but that could probably be done later.

[jasmussen]

Thanks for the PR, and excellent catch Steve! The box shadow needs to be inset, that also corrects the border radius. So instead of:

box-shadow: 0 0 0 1.5px var(--wp-global-header--link-color--active);

it should be

box-shadow: inset 0 0 0 1.5px var(--wp-global-header--link-color--active);

That should fix the crop.

[ryelle]

I've switched the box-shadow to inset, so it's not cut off anymore:

Will merge this now to keep things moving, but if we need to iterate more we can.