Hyperlink Anchor tags need styling about lcars

[joernweissenborn]

Hi, can you elaborate on this? I am not a WebDev so I am not up to date with CSS best practices.

[jrwarwick]

The "a" tag, like <a href="xyz.html"> is originally known as the "anchor"tag. So text hyper links should have color more subtly different than plain text, and perhaps a color other than blue. Also the "pseudo"classes refer to situational variations like when hovering. Each of these have a specific CSS selector. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes So maybe golden-tanoi for links And neon-carrot for hover and active links And something a little darker for visited. --Justin

…

On Sat, Nov 16, 2019, 15:08 Jörn Weißenborn ***@***.***> wrote: Hi, can you elaborate on this? I am not a WebDev so I am not up to date with CSS best practices. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#22?email_source=notifications&email_token=AALAR5CF2YGZ2N3Q57HQO5DQUB4PZA5CNFSM4JNT2CZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEH4VVY#issuecomment-554683095>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AALAR5BVD6FBCPHDWVTC4QDQUB4PZANCNFSM4JNT2CZA> .

[joernweissenborn]

OK, I see, but only within the text, not in navigation or buttons. so I guess the changes need to made here.

Can you suggest defaults?

[jrwarwick]

I suggest this:

a{
    text-decoration: none;
    display: inline;
}
a:link{
    color: #fc6; //lcars-golden-tanoi-color;
    font-weight: 400;
}
a:visited{
    color: #fc6; //lcars-golden-tanoi-color;
    font-weight: normal;
}
a:focus{
    color: #fc6; //lcars-golden-tanoi-color;
    background-color: #080602;
    font-weight: 400;
}
a:hover{
    color: #fc6; //lcars-golden-tanoi-color;
    background-color: #090703;
    font-weight: 400;
}
a:active{
    color: #ff9; //lcars-canary-color;
    font-weight: 500;
    background-color: #0C0806;
}

I do not know how to put that into Stylus.
A couple of helpful supplementary references on anchors and CSS:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links
https://stackoverflow.com/a/10510353/537243

[joernweissenborn]

Can you share a picture of what you want to achieve?

I have an idea of just creating a rule that every child of a row or column will get this properties as defined by the closest parent.

It is as complicated as it sounds, because, you might what to define this things like you want to only have it in text boxes, but what about the elbow bars, they will pick it up.

Sorry for the Wesleying ;)

In the end, I think it is the easiest to make ti such, that you simply can give a div a lcars-text-box properties with some options to style it with real color name (I am grateful for having found a website to help me translate the values in to human readable :D ).

So, do you you need this feature outside a text-box?

[jrwarwick]

Now that I have read the index doc more carefully, I am not thinking about text-box, which says that it is not for longer texts. I am indeed thinking of the longer texts. Imagine someone reading the on-board copy of the Federation Encyclopedia. The inline hyperlinks to other related articles is what I'm thinking about. Mostly within <p> paragraph tags.
Right now we have this:

but I think it would be better to have this: