Link styling

[carlfairclough]

Added a glyph to external links. Resolves #759

Description

All external links (anchor tags) now show a north east glyph by default, which can be disabled with a hide-icon class. It has been disabled in navigation, and in the build-page cards.

It is shown under the following conditions via CSS

:not([href^="https://ethereum.org"])
:not([href^="http://ethereum.org"])
:not([href^="/"])
:not([href^="#"])
:not(.hide-icon)

It should be noted that this doesn't enforce complete parity with the Figma file (underlines), as the existing lists may become unwieldy.

Related Issue

#759

Screenshots (if appropriate):

[samajammin]

This looks great! A couple small things:

1. The default & hover position of the arrows - in the style guide, the default arrow position aligns with the top of the text vs. your changes which align at the bottom. The hover effect should extend even beyond that. I believe this should be an easy adjustment of translateY.

2. Underlining links - the style guide also adds underline to links. Let's add that in as well (unless you think we shouldn't do that?).

[carlfairclough]

I put the icon in line with the lowercase letters cause I felt it worked slightly better there, but have switched it to match the style guide 🎉

I believe this is ready to merge

[samajammin]

Looks great! Just delete that commented code & we should be good to merge.

Regarding the change to reflect the style guide, FYI I'm generally open to if you do decide to stray from the style guide, just please note that you're doing so. Otherwise I'll think you just overlooked something.

On that point, is your choice to not underline links a deliberate change from the style guide? See my 2nd point in my original review.

[samajammin]

@carlfairclough you didn't address my questions re: underlining links 😄 but this looks good, we can sort that out separately.