Skip to content

feat: Hover states on interactive elements

stephen requested to merge hover-states into main

As per #55 (closed), interactive page elements should have hover and active states, to communicate to the user that they can be interacted with. This commit makes the following changes to that end:

  • Standard body-copy links should hide their underline on hover or active states
  • Underlines should be added to header and footer text links on hover and active states
  • (Though, for footer links which are pre-underlined, remove underline on hover and active states)
  • Show bottom border on subnav items on hover and active states - as implied by the issue ticket, this should not change copy color to match "you are here" link, which provides helpful differentiation
  • Show active state when hovering or clicking on preset donation-amount buttons - I regret that we won't have time to re-implement these as per #30 for launch, but this implementation looks very nice to me

In the spirit of #55 (closed), this commit additionally adds underlines on hover and active states for FAQ sidebar navigation links, even though these were not mentioned. It felt very awkward to have those links not react on hover when all other text links did - so now they do as well. (Naturally, please let me know if a different hover approach would be preferred here.)

Additionally, a slight amount of padding to certain text links whose tap targets were very small - just the size of the copy and no more. These tiny link targets make navigation on mobile devices difficult, especially for those with difficulty exercising fine motor control, so some padding on the top and bottom has been added to the a elements, increasing their tap/click area without affecting the site layout.

Closes #55 (closed).

Merge request reports