Optional font and background color

[smddzcy]

About

There should be a set of web-safe colors to choose from and one should be able to change the font and background color easily, without changing the CSS code.

[abettermap]

I can give this a try. Just a few questions/suggestions:

1. Do the colors have to be web-safe? Sounds like it may not be relevant anymore, and allowing other colors would allow for some nice theming.
2. Are you looking to change all the text, or maybe more selectively such as headings, sub-headings, body text, icons, etc.? For example (but hopefully with a better color scheme, ha):
   
3. For background, what is your opinion on allowing a repeating image as an alternative to single colors? Subtle Patterns has some nice ones. User would just need a URL, or we could include a few images with the repo.
4. Does my approach to this issue sound logical?
   1. Create a src/html/contents/styles.json file for user's color settings.
   2. Insert a <style></style> block after <link rel="stylesheet" href="dist/css/main.min.less.css"> line in _head.html.
   3. Use grunt bake task for template strings inside <style> block.

[smddzcy]

@abettermap

1. You are right, it is not that relevant anymore, but; average user is not good at picking colors. IMO giving them a set of good-looking colors is the best for them. Also since it is a cv/resume template, I don't think that anyone would need millions of colors to choose.
2. What I thought was choosing colors of headings, body texts etc. seperately.
3. It's OK but not necessary. You can do this if you want, and it'd be really cool.
4. It's totally logical 👍

Thanks!

[abettermap]

Cool, I'll use this as a reference then. I don't know if they are all web-safe, but it will still serve the purpose of limiting user choices. Plus with this list I can preserve the names and give the user something tangible to read so that they won't need to translate any hex or RGB.

[abettermap]

Ok, made some progress: https://github.com/abettermap/cv/tree/colors

Among other highlights:

• Used inline SVG for HackReport logo to permit matched styling of other non-raster icons.
• Included reference chart for colors (in README, we should probably credit Wikipedia link, which is in the commit).

Ideally I wanted to use the user-friendly color name rather than hex, but I couldn't think of how to do it without some extra JS in the Gruntfile. Could technically just use the name as-is, but it's not always the same result across browsers. But if that's important and you have ideas, let me know!

[smddzcy]

@abettermap I've made some minor changes in the HTML to obey the HTML5 standards (at least as much as we can). It'd be better if you git pull --rebase my changes and fix the conflicts if there is any. I've changed my usage of section and div. It may conflict with some of your CSS.

Ideally I wanted to use the user-friendly color name rather than hex, but I couldn't think of how to do it without some extra JS in the Gruntfile.

Some extra JS is not a problem. As long as we solve the problem and the code is clean and readable, it's OK. We can simplify/improve it later on.

Could technically just use the name as-is, but it's not always the same result across browsers.

Mapping user-friendly names to hex codes should be our way to go IMO.

Also, I've checked out the colors, and I think there are too many colors to choose. What do you think, should we restrict it more (like, to ~20-30 colors) or leave it like that?

[abettermap]

@smddzcy I'm still learning Git/GitHub, so I'm not sure if I did the rebase correctly since I did not have your original repo as a remote, I only had my fork that I cloned from. Once I added your original as a remote and ran it again, it seemed to work fine, but let me know if you see anything odd in my fork.

Some extra JS is not a problem.

Ok, it might take me a little to figure out, but I agree that is the easiest for users if we are limiting them to certain colors.

Also, I've checked out the colors, and I think there are too many colors to choose. What do you think, should we restrict it more (like, to ~20-30 colors) or leave it like that?

Yeah it's a lot of colors, but my vote is still to let users pick any color rather than restrict it to a list, but it's your repo so it's your call 😉 I just feel that if your concern is to minimize the chance of users choosing a poor color scheme (which I agree may be the case with many folks, myself included!), that's on them since they have resources for color palette suggestions online. Additionally, it is still very possible to pick a poor color scheme even given only 20-30 colors!

Whatever you decide, let me know and I can whittle the palette down as needed and figure out the JS if we are going that route. And FYI I have other commitments that unfortunately have priority over these fun little side projects, so you might have to wait a bit if you're in a hurry to finish this!