[WIP] Responsive nav

[shawnbot]

:warning: :construction: Work in Progress :construction: :warning:

This PR heavily refactors the navigation styles and institutes pixel-length responsive breakpoints throughout. See below for screenshots. This needs a few things before being merged:

• [ ] design help from @ericadeahl
• [ ] review from @vz3
• [ ] fix the alignment of the openFOIA logo with the left gutter below, before:
• [ ] move the search bar into the collapsed navigation on small screens
• [ ] fix search popup positioning on smaller screens (see below)

[shawnbot]

:warning: :high_heel: :horse:

Incidentally, I think this PR is a great example of how mobile-first design, and progressive enhancement more generally, can save us a lot of time. Preserving the styles so as not to break the wide-screen layout was tricky, and I may have introduced a regression or two in the process. In a perfect world, these styles would be further refactored so that:

1. The "initial" styles (i.e. not grouped under any @media blocks) would establish a reasonable-looking site that flows well on smaller screens and looks passable on larger ones.
2. @media blocks with min-width: breakpoint would group together progressive enhancements for progressively larger breakpoint lengths (screen sizes).

What we've got right now is kind of Frankenstein's Responsive Web Design Monster, with a bunch of "initial" styles, a chunk of styles in an @media block that only apply to smaller screens, then @media blocks that undo things done either initially or under a smaller breakpoint. I've tried to get close to the ideal, but I would've had to unravel the whole thing to get all the way there, and that didn't seem worth the time.

[shawnbot]

Here's what it looks like on the iOS simulator (and at screen widths < 480px):

[shawnbot]

Under 980px the nav links drop below the logo and the search bar floats right:

[shawnbot]

Things to fix:

• [x] wrong link color for nav links (should be gray)
• [x] USA banner stays centered on two lines rather than stretching out when there's room
• [x] ditch the gray border-bottom on #topnav on the home page to avoid this:

[shawnbot]

Fix search popup positioning on smaller screens:

[shawnbot]

Fix the alignment of the openFOIA logo with the left gutter below, before:

after:

[shawnbot]

Moving the tasks from comments into the description...

[khandelwal]

Should this pull request be closed?

[shawnbot]

Yes, it should!