search

joernweissenborn / lcars

CSS Framework to style web pages like the fictional computer operating system of a popular sci-fi franchise.
http://joernweissenborn.github.io/lcars/
MIT License
333 stars 80 forks source link

Hyperlink Anchor tags need styling #22

Closed jrwarwick closed 4 years ago

jrwarwick commented 4 years ago

Hyperlinks should have new default styling. Recommend including the pseudo classes

joernweissenborn commented 4 years ago

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

jrwarwick commented 4 years ago

The "a" tag, like 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 notifications@github.com 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 https://github.com/joernweissenborn/lcars/issues/22?email_source=notifications&email_token=AALAR5CF2YGZ2N3Q57HQO5DQUB4PZA5CNFSM4JNT2CZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEH4VVY#issuecomment-554683095, or unsubscribe https://github.com/notifications/unsubscribe-auth/AALAR5BVD6FBCPHDWVTC4QDQUB4PZANCNFSM4JNT2CZA .

joernweissenborn commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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:

image

but I think it would be better to have this:

image