Find original css file and expose/document how to customize

[ceball]

No description provided.

[philippjfr]

The original CSS was built by modifying the bokehplots.com template and is available on my fork of the repo (https://github.com/philippjfr/bokehplots.com). Note the CSS is compiled from SCSS files, adding an additional build step.

[ceball]

From holoviz/geoviews#106 (comment)

Is there a good place to record how to go about building the CSS with a new color scheme. My process is this:

1. Pick primary (dark) color (usually from the project logo)
2. Go to Paletton and add the primary color, choosing a three color palette
3. Find the closest HTML color names for the three colors: http://chir.ag/projects/name-that-color/
4. Add the named colors to the variables.scss file: https://github.com/philippjfr/bokehplots.com/blob/master/theme/static/scss/base/_variables.scss
5. Replace the three colors throughout the scss files like in this commit
6. Compile the SCSS with compass and grunt

[jbednar]

Nice use of Paletton. I'm not sure where to document it, but wherever it is nbsite should presumably link to that discussion.

If you first did:

1. Pick names for the three site colors that best describe how they are used (something like "nbsite-primary", "nbsite-secondary", "nbsite-tertiary", or perhaps "dominant", "accent1", "accent2")?
2. Define colors by those names in the variables.scss file as in step 4.
3. Do step 5 above, but only once for all time.

would it now be possible to make the process be more like the following?

1. Pick three coordinated site colors "dominant", "accent1", "accent2" . There are many ways one could choose colors, but one way we've found is:
   a. Pick the "dominant" color as a fairly dark color from the project logo (if any) or otherwise thematically associated with the project.
   b. Go to Paletton and add the primary color, choosing a three color palette
   c. Find the closest HTML color names for the three colors: http://chir.ag/projects/name-that-color/
2. Update the definitions of "dominant", "accent1", and "accent2" in the variables.scss file to your new colors instead.
   https://github.com/philippjfr/bokehplots.com/blob/master/theme/static/scss/base/_variables.scss
3. Compile the SCSS with compass and grunt

I.e., (a) be careful to separate this particular method of choosing 3 colors from the need to have 3 colors, and (b) avoid replacing named colors throughout files if you are already declaring new colors anyway? And is step 3 required, or optional? If it's optional, state what it provides (presumably smaller files/faster loading).

[ceball]

See also holoviz-dev/nbsite#82