404: Offset "oops" to match design

[iandunn]

Fixes #311

Follow up to #314.

• Moves "oops" to be partially off screen.
• removes an invalid margin-top that wasn't affecting anything
• standardizes the local header height var
• adds specificity to the search form styles, to prevent them bleeding into the global header search

The black footer logo is just something off in my environment (also on trunk). I don't think it'll affect staging/prod.

[ryelle]

The footer logo isn't just your env, it's an issue from the logo change yesterday. See WordPress/wporg-mu-plugins#162

[beafialho]

Thank you, on mobile it looks good 👍

On desktop, it looks like there's too much space below the content, can we match that with the design? Also, the search field seems to be too high, let's make it 40px high, as shown on Figma.

Screenshot	Mockups

[iandunn]

I reduced the gap a bit in 74ca6fa (not deployed yet), but it's difficult to get it exact at every breakpoint, because of the dynamic font size.

I don't think most of the extra gap is coming from that, though. When the viewport is bigger than the page content, the footer sticks to the bottom, so the extra gap is expected to some degree.

[iandunn]

a9fd18e fixes the search spacing. i'm going into a meeting, but will deploy it after that

[iandunn]

Looks like @ryelle synced and deployed it, thanks!

@beafialho , you can see this on production now. LMK if you'd like any other changes.

[beafialho]

Thank you @iandunn, there's still too much space between the content and the footer, let's try to make the content sit in the middle of the page so that there's similar space above and below:

[iandunn]

Ah, ok, I didn't realize you wanted it vertically centered. I'll look into that.

[iandunn]

I got that mostly working in 388a4f0. It stops working once the viewport is 1050px tall, because of the sticky footer issue mentioned above. I couldn't find a good way around that. It still looks good at those sizes, though, just different.