Section permalinks: fix hover styling #813
Conversation
- Remove `text-decoration` from the permalink icons, because it's barely visible and looks odd. - To ensure they still have some hover-responsiveness, define a new brand color (`--color-brand-highlight`) — which in the default themes is simply `--color-brand` with the `L` value dialed up a bunch in the HSL colorspace — and set it as the permalink hover color. - Also override visited-link coloring from permalinks, as a special case, and have them always use the brand / brand-highlight color.
|
|
|
They really shouldn't be referred to as permalinks, because they're not, they're merely section links. But they were called that way in the code, so now I've started doing it too. Worse, I named the new variables |
|
Screencasts demonstrating the change, in both themes, converted to animated GIF courtesy of ezgif.com: Before
After
|
This is platform-specific and depends on the fonts available on the system being used. My guess is that you're on a Linux host where it's falling back to a font with a really tall symbol for that character. Screen.Recording.2024-07-07.at.11.49.29.movI don't think permalinks should be special-cased as done in this PR though, since they're still links so don't really need custom colours. |
|
You're definitely right about it being platform-specific... here's how things look in Google Chrome on Android, I just discovered:
On the bright side, you do see more of the underline decoration... |
|
Well, the Android thing is still somewhat concerning, and I do think the hover response of section links could be improved, but this doesn't seem to be the way to do it. Closing. |
text-decorationfrom the permalink icons, because it's barely visible and looks odd.--color-brand-highlight) — which in the default themes is simply--color-brand-contentwith theLvalue dialed up a bunch in the HSL colorspace — and set it as the permalink hover color.Additional info
This was inspired by the fact that every time I hover over a section title, the section link icon appears, accompanied by a tiny dot in the lower-left corner that gets marginally more visible when the icon is hovered over. It took me forever to figure out that it even was the tiny bit of the text-decoration-line that's actually visible around the icon's descender. But once I did work that out, it seemed really pointless for it to be there, doing nothing useful.
Adding an additional brand color is a big flex just for this tiny feature, I realize. Alternatives would be to have the permalink icon hover to the text color, or to reverse that and have it initially appear text-colored, but hover to link color. I didn't try either of those, but they're options if adding the "special" highlight color seems too drastic.
Regarding the visited-link override: I normally hate when sites disable visited-link coloring, and will typically userstyle it back in with extreme prejudice. But I didn't want to have to define a second highlight color for the permalink hovers when they're also visited links, and permalinks are enough of a special case that I think not having them turn purple when used seems valid.