YAML options for colour and other customisations

[jimjam-slam]

If the user specifies, for example:

---
title: Test
format:
  closeread-html:
    cr-section:
      sidebar-background-color: orangered
      trigger-background-color: darkgrey
      # note the quoting for hex values
      trigger-text-color: "#efefef"
---

Propogate these options down to the style attribute of all .cr-sections (unless those CSS properties are already defined in the style attribute of that section — eg. if the user has tried to customise themselves).

• [ ] Which properties?

  • Sidebar background color
  • Trigger/narrative background color
  • Trigger/narrative text color
  • Trigger/narrative border radius?

• [ ] Add documentation on these options

[andrewpbray]

See #48 for an early attempt at this.

[jimjam-slam]

Good spotting! The version currently in #48 applies a Bootstrap class, .bg-light, that effectively does the same thing as applying background-color: --bs-light. Though it looks like we had some trouble with it competing with NYTimes styles (maybe a class specificity fight?).

The more comprehensive version we proposed would inject styles directly on the section, except where a style attribute already existed with a competing property. That doesn't take into account the NYTimes case where a user has customised the document with a CSS stylesheet.

This is the appeal of using SCSS: you can supply a default colour using !default and then allow it to be overwritten elsewhere. But that's not on the table right now.

We could also make sensible defaults in closeread.css that broadly follow the Bootstrap theme (and which can be overridden). We only inject styles into the style attributes to sections _if+ a YAML option is specified, since those would override any user-supplied CSS stylesheets (and it's unlikely that a user would pursue both). We can make it clear in documentation that these YAML options override supplied CSS.