Link styling tweaks #1413
Link styling tweaks #1413
Conversation
There was a problem hiding this comment.
I don't think adding the dotted underlines with JavaScript is a good move. It adds overhead on every page load, linear in the number of links (which is most of the content), and the resulting separation is still pretty easy to miss IMO. The more scalable solution would be to try and phrase things in such a way that you don't get runs of links (like the original |transitive| |well-founded relation| got reworded into |relation| that is |transitive| and |well-founded|).
theme/css/general.css
Outdated
| .content dt > a[href^='https']::after, | ||
| .content dd > a[href^='http']::after, | ||
| .content dd > a[href^='https']::after { | ||
| content: '⇱'; |
There was a problem hiding this comment.
All external link icons point to the upper right. Since there's no unicode symbol for this icon specifically, I think it'd be better to use an inline SVG, as explained e.g. here: https://christianoliff.com/blog/styling-external-links-with-an-icon-in-css/
There was a problem hiding this comment.
Thanks for the link! Here's the new styling following your cited guide
theme/css/general.css
Outdated
| text-decoration: none; | ||
| } | ||
| /* External link indicator */ | ||
| .content p > a[href^='http']::after, |
There was a problem hiding this comment.
What are all those selectors trying to exclude? From my testing only the on-page TOC uses absolute links, so you could do .content a[href^="https://"] and remove the icon in nav.pagetoc a
There was a problem hiding this comment.
Did I implement your suggestion correctly?
I have to disagree that it's not an improvement, but let's not fight about this now. The issue is very minor anyways, and I've reverted the relevant changes. |
theme/css/general.css
Outdated
| background-repeat: no-repeat; | ||
| background-size: contain; | ||
| display: inline-block; | ||
| color: var(--fg); |
There was a problem hiding this comment.
This doesn't actually affect the color of the symbol, which is always black, even on dark backgrounds, rendering it invisible.
What should work is replacing all the background-* properties with mask-* properties, and setting the color with background-color: var(--fg);. This works at least for me on Firefox, but Safari browsers might need duplicating all those properties with --webkit-
There was a problem hiding this comment.
Turns out the exclusion selector for the navigation pane does not work on firefox
There was a problem hiding this comment.
I'm really out of my depth here, but I've implemented your suggestion
There was a problem hiding this comment.
I'll try to take a closer look later this week
Summary
Add dotted underlines under links that are adjacent making it possible to tell them apart, e.g.:
The styling does not apply to code, or concept paragraph symbols, and it only applies to links with another link directly adjacent to it.
vs old: