SuttaCentral

Styling links so as to maximize inherent coolness


#1

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.

  1. 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.
  2. 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.

#2

I won’t be doing anything with Next until after Ajahn Brahmali’s retreat in any case: too many other things to do right now but I can have a look afterwards or you can play around with it yourself.


#3

Okay, see changed entry above, i have pushed this.


#4

Looks like you also styled the Textual Information i.e. paragraph numbers on the right side.
Note that with the introduction of app-layout also TI on segmented texts is broken. It is on my to-do-list.


#5

Oops, yes, The link style scope should really be restricted to the dialogue.

I’ve just pushed another minor style change.

re the segment view, there’s another issue we need to discuss before making any changes. I’m around for a chat if you want to call.