TwentyTwentyOne: Add bottom-border to hover states in pagination links

[allancole]

Fixes: #868

Summary

This PR simply adds bottom-borders to the hover state on pagination links to make them match the current page bottom-border.

Test instructions

This PR can be tested by following these steps:

1. Visit any post archive page (search, category, etc.)
2. Scroll to the bottom and hover over the pagination links.
3. You should see a thin underline beneath the hovered link that matches the bottom-border for the current page text. (see screenshots below)

Screenshots

Before:

After:

Quality assurance

• I have thought about any security implications this code might add.
• I have checked that this code doesn't impact performance (greatly).
• I have tested this code to the best of my abilities
• I have checked that this code does not affect the accessibility negatively

[melchoyce]

LGTM 👍

[carolinan]

I don't think these borders would match any other link hover styles? I don't think it looks bad but it will be inconsistent?

[melchoyce]

Oh, you're right — I had them reversed in my head 😵 💫 Ideally the post navigation styles would match the menu styles: solid action, dotted hover:

[allancole]

Ahhh, I didn’t catch that! I’ll reverse this so it matches the menu styles.

[allancole]

Should be good to go now @melchoyce & @carolinan:

Header Nav:

Pagination:

[allancole]

Also just noticed the font-sizes don’t match between the header navigation and pagination links:

20px header nav	24px pagination

Since the hover actions are the same, should the font-sizes also the same @melchoyce ?

[melchoyce]

I think I want to leave them as-is. Thanks for checking!

[ryelle]

I noticed that the current item has the hover state too, but it's not a link. That could be confusing, I'm not sure if it's technically an a11y issue or not. Could .current also be excluded from the hover state?

[carolinan]

Just a note that with this change we have solid underlines for next and previous posts (single view), but dotted underlines for the newer/older post pagination. @melchoyce Is that what you want?

[allancole]

Could .current also be excluded from the hover state?

Ahh, good call. I’ll correct that :-)

[allancole]

Just a note that with this change we have solid underlines for next and previous posts (single view), but dotted underlines for the newer/older post pagination. @melchoyce Is that what you want?

I went ahead and corrected this in that last batch of commits. Feels more consistent this way but happy to change it back if you prefer, @melchoyce. Cc: @carolinan

[melchoyce]

Can you add another gif for comparison @allancole?

[allancole]

No prob, @melchoyce. See below:

Archive View

Before:

After:

Singular View

Before:

After:

[pattonwebz]

The after gifs look real nice to me ❤️

[melchoyce]

Same, thanks @allancole 👍

[allancole]

I think this is good to merge then, @carolinan—if you’d like to do the honors ;-)

[carolinan]

I am very confused about why one of the after gifs have both a dotted and solid underline?