Option to customize each cr-section

[trangdata]

Currently, if I want to adjust, say, narrative-sidebar-width, for a particular cr-section, I have to wrap it in a div like below. It would be neat if I could specify this like how I would layout, so something like ::::{.cr-section narrative-sidebar-width="3fr"}.

---
title: My First Closeread
format: closeread-html
---

Hello World!

<div style="--cr-narrative-sidebar-width: 3fr;">
::::{.cr-section}
This is trigger 1.
@cr-mpg

:::{#cr-mpg}
```{r mpg}
library(ggplot2)
ggplot(mtcars, aes(x = mpg, y = hp)) +
  geom_point()
```
:::
::::
</div>

[jimjam-slam]

I like this idea, @trangdata, and it was our original intent that the YAML styling options be overridable on a per-section basis!

In the mean time, your instinct to rescope the underlying custom CSS property within the section is the right one. You should be able to apply it directly to the .cr-section, but I can reproduce your problem — the style attribute is being lost. We do a bit of reorganising the .cr-section on render, so it's possible that we're not properly retaining the style attribute.

As you've done, wrapping the section (or several sections, if you wish) in another div and rescoping the custom CSS property there is the way to go. I would recommend using a Pandoc fenced div rather than raw HTML — it works here, but Quarto doesn't make any guarantees about raw HTML not being processed or altered on render (and if you use a raw HTML block, I believe it needs to be a valid HTML fragment, so you can't put the opening and closing dividers tags in separate raw HTML blocks).

---
title: My First Closeread
format: closeread-html
---

Hello World!

:::::{style="--cr-narrative-sidebar-width: 3fr;"}
::::{.cr-section}
This is trigger 1.
@cr-mpg

:::{#cr-mpg}
```{r mpg}
library(ggplot2)
ggplot(mtcars, aes(x = mpg, y = hp)) +
  geom_point()
```
:::
::::
:::::

I'll leave this issue open until we figure out why the style attribute isn't carrying (and possibly split the ability to use styling attributes on sections directly)!