add separate css class to overlay-center?

[mic-wypych]

I think adding different backgrounds to the narrative column in sidebar and overlay-center layouts would be nice.

Adding a background to the narrative column is pretty straightforward but when you do it it gets added both in the sidebar (which makes sense) and in the overlay-center (which makes it unreadable because it obscures the graphic behind it). Is it possible to add a new css class to the narrative column in the ovarlay-center layout so that it can have a separate background?

[jimjam-slam]

Hey @mic-wypych! For Closeread, we do indeed have a class for the layout — but we put it on the section as a whole, not the narrative column.

Nevertheless, you can target the narrative column in a layout-dependent way like this in CSS:

.cr-section.sidebar-left .narrative-col {
  background-color: orangered;
}

This is essentially "target .narrative-col inside a .cr-section.sidebar-left".

One complication you should be aware of is that Closeread uses overlay-center regardless of what you specify (and what CSS class is attached) at mobile widths. So if you're using CSS to make the background of the narrative column visible, you should include this to make it invisible on mobile (otherwise the sticky content won't be visible):

@media (max-width: 575.98px) {
  .cr-section.sidebar-left .narrative-col {
    background-color: transparent;
  }
}

The 575.98px is the current "breakpoint" width at which we automatically switch from your chosen layout to overlay-center (going down). I've half a mind to change this for sidebar layouts (they're a little squashed just above this), so keep in mind that if you do this kind of customisation and then upgrade Closeread in the future, it's possible you may need to tweak this value.

[jimjam-slam]

(What do you think about adjusting the breakpoint width for sidebar layouts, @andrewpbray?)

[andrewpbray]

By adjust are you thinking of increasing the breakpoint? I think that makes sense! Sidebar layout is only really effect if you've got plenty of width to play with.

[jimjam-slam]

Yeah, that's it! The sidebar demos are a little tight just above the breakpoint currently. I'll put a PR together for you!

[jimjam-slam]

Happy to provide any additional help you need in this thread, @mic-wypych, but for now I'll mark the issue closed!