Almanac.httparchive.org: Add hover/focus states for interactive elements

[rviscomi]

It should be easy to navigate the website using only a keyboard. Some UI like the header links don't have focus states, so it's not clear when they receive focus. This is for desktop only.

Links could have an underline on hover and/or an outline on focus. Open to ideas.

cc @HTTPArchive/developers

[MSakamaki]

I am interested task.

If the UI that is the target of this hover focus is already on the home page, it seems that it can be unified with the following concept.

1. White background: black (#1A2B49) to white or white to black
2. Gray background: yellow (#F7F779) transparent or transparent yellow

-The design of ghost buttons should be unified on home page.
-Just add text color and underline according to the above rules when text is on focus.

And, Should this issues discuss the following?

• index of methodology page.
• Toggle button and social icon on contributors page.
• I not find the user-action that returns to the home page now from the methodology page or the contributors page.
  Is return home page with a click on the logo?
  And in that case, does the logo need hover/focus?

[rviscomi]

No need to focus on specific pages (yet). We can implement the styles in the global 2019.css stylesheet and the pages should inherit them.

I not find the user-action that returns to the home page now from the methodology page or the contributors page. Is return home page with a click on the logo? And in that case, does the logo need hover/focus?

I recently merged a change for this into the master branch: https://github.com/HTTPArchive/almanac.httparchive.org/pull/211/files#diff-0279dada08cf23c3de510939650b3555R11