Consider CSS refactor

[tuurep]

• [x] split up the current styles.css into a dedicated markdown.css file and another one that has everything else that's more general
• [x] extract all the colors into variables and remove the media query for light mode there
• [x] add two files colors-dark.css and colors-light.css where we do have media queries and just define all the color variables

Original description

Followup from discussion https://github.com/jannis-baum/Vivify/pull/118#discussion_r1687058052

Regarding color variables like this:

:root {
    --color-alert-note: #a5d5fe;
    --color-alert-tip: #b4fa72;
    --color-alert-important: #ff8ffd;
    --color-alert-warning: #fefdc2;
    --color-alert-caution: #ff8272;
}

I would prefer if we could refactor and do this for everything then🙈 Would you mind looking into that? It would make the CSS much easier to read and use

Ideas about adding more tooling for CSS:

Since we're already talking about refactoring CSS: We could also consider to start using something like https://lesscss.org/ or some other compiler for the CSS to make it even easier to work with. What do you think? If you like this or another one I can add it to the dev and build infrastructures

[jannis-baum]

Hey @tuurep I think you are mainly in charge of CSS and styling here ^^ so what do you think about the question of the compiler?

[tuurep]

Honestly I know absolutely nothing about that

But I can start looking at it after getting everything else out of the way

[jannis-baum]

Honestly I know absolutely nothing about that

But I can start looking at it after getting everything else out of the way

Okay, no worries! If you think we don't need it we can also forget about it. Let me know when the time comes :)

[tuurep]

Yeah lets keep this at the backburner, non-urgent

[jannis-baum]

So since no one was excited about a compiler I would not add one and stay with Vanilla CSS, just refactoring the following:

• split up the current styles.css into a dedicated markdown.css file and another one that has everything else that's more general
• extract all the colors into variables and remove the media query for light mode there
• add two files colors-dark.css and colors-light.css where we do have media queries and just define all the color variables

@tuurep what do you think?

[tuurep]

Yes, that sounds good to me!

But do I understand correctly that every single color should be used as a variable instead of straight hex colors in tags?

[jannis-baum]

But do I understand correctly that every single color should be used as a variable instead of straight hex colors in tags?

Yes, that's what I was thinking. So that the dark vs. light mode is just a matter of changing the color variables' values and making other color-only adjustments is easy for users in customization.

[tuurep]

Yeah, lets go with that. Did you wanna do this, as you've self-assigned? :smile:

[jannis-baum]

Yes, I was thinking to do this before the Notebook colors so that we don't touch everything twice ^^

[tuurep]

Ok, thanks!