So far the links on Next are unstyled. I’ve had a look into best practices; it’s one of those things that’s easy to do poorly and surprisingly tricky to do well. I won’t bore you with all that, but I’d like to use the following CSS:
a {
color: inherit;
text-decoration: none;
background: linear-gradient(to top, rgba(223, 153, 10, 0) 1.5px, rgba(223, 153, 10, 1) 1.5px, rgba(223, 153, 10, 1) 2.5px, rgba(223, 153, 10, 0) 2.5px)
}
a:hover {
background: linear-gradient(to top, rgba(223, 153, 10, 0) 1px, rgba(223, 153, 10, 1) 1px, rgba(223, 153, 10, 1) 3px, rgba(223, 153, 10, 0) 3px)
}
The color should adapt to the color of the toolbar.
I’ve added this, together styles for :active and :visited, to static-styles.html and sc-text-styles.html. In the latter case I added p for added specificity so it doesn’t affect headings.
A couple of things I’m unsure about.
- How to define the color to match the toolbar. I guess there’s a mixin for this, but I can’t find it. As you can see, this effect depends on using colors of 100% transparency, so not sure if there is a nice way to do this. But anyway, it works okay as is, defining the colors manually.
- How to scope it. This is not meant for all links, only to links that are part of running text. So far as I can see, this does not apply to the nav drawer, suttaplex, or text pages. It does apply to static pages, and the “Tools and Information” overlay (in the metadata section). It may also apply to some things on the search result pages, but let’s leave that for now. Again, so far it’s working okay, but it’s probably not the slickest way to do it. I added it to sc-text-styles.html because I couldn’t figure out how to apply it to just the dialogue.