Styling of links not in paragraphs

[robredpath]

In some cases, there are links which aren't inline in paragraph text. They might be part of a larger component (e.g. a table of contents, or the breadcrumbs, or a menu) or part of an ad-hoc creation.

Here's some examples:

I have heard from the d-portal developers that it's not clear how such links should be displayed, and from looking around it seems that we largely make decisions case-by-case. I don't know how much of an issue it is that we make different decisions in different cases, but I do think we should help people make that decision.

[robredpath]

#46 (comment) discusses this as well

[codemacabre]

I'd be inclined to lean towards fewer options to ensure that links remain consistent across the site(s). From what I can see, the following cases should be enough:

• Links in paragraphs (on light backgrounds)
• Links in paragraphs (on dark backgrounds)
• Links not in paragraphs (on light backgrounds)
• Links not in paragraphs (on dark backgrounds)

[codemacabre]

In adding the above styles, I also needed to add a .iati-dark-background class which can be applied to any element, ideally divs and paragraphs.

For the standalone links, I've inverted the text-decoration style, so it is by default not underlined, but becomes underlined on :active, :focus and :hover. Paragraph styles remain unchanged (so underlined by default). The .light links (to be used on dark backgrounds) are as follows:

[github-actions]

🎉 This issue has been resolved in version 3.11.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀