qmd-lab / closeread

https://closeread.dev
MIT License
128 stars 5 forks source link

YAML options for colour and other customisations #99

Closed jimjam-slam closed 3 weeks ago

jimjam-slam commented 1 month ago

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).

andrewpbray commented 1 month ago

See #48 for an early attempt at this.

jimjam-slam commented 1 month ago

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.

jimjam-slam commented 4 weeks ago

See https://github.com/qmd-lab/closeread/pull/113 for a new approach that I think is more flexible!

jimjam-slam commented 3 weeks ago

Merged!