It should be easier to customize the color scheme

[ranger6]

Currently, the colors used in Noteworthy are defined in assets/css/main.scss. First, variables with the color names are defined (e.g. $teal: #63BDA2;), then these variables are used in the CSS ruleset. That is, one finds rules spread out over the 500+ line file.

So, if one wanted to, for example, use shades of muddy brown instead of shades of gray but otherwise keep the style conventions; one could override main.scss, define different color variables, and then search and edit 10's of rules trying not make mistakes. This is not so hard because you can do some global substitutions. But what if you want to change only part of the color scheme (e.g. how links are colored)? It starts to get messy.

Then, of course, when the theme's main.scss changes, you need to re-do the editing process in order to take advantage of the update.

It should be possible to change the color palette and the color usage in a straightforward manner and without overriding the main CSS file and applying dozens of edits.

I have prototyped one approach to attack this problem. It basically abstracts out the color and usage definitions from the main.scss file into two files containing only variable definitions. These new files get included into main.scss. Too change the color definitions and usage, one only needs to override one or another or both of these files and change the definitions. See: https://github.com/ranger6/noteworthy-example/commits/colors/assets/css. Especially, see the commit log: it explains the approach in detail.

I am sure that there are other approaches, problems with this approach, improvements, etc. So, comments on this issue are encouraged! I'd be willing to move this (including reasonable alternatives and suggested improvements) towards a PR.