reserved ID "#resources" causes sections called "Resources" to be displayed differently

[zkamvar]

Problem

In the CSS, we display #chapters and #resources to have 24px font:

https://github.com/carpentries/varnish/blob/05491120472f179fc93fb3acb3ac2bb331c190a8/source/stylesheets/sidenav.scss#L95-L99

These IDs were initially created by a contractor who built the initial templates from the wireframes (see https://carpentries.github.io/workbench-dev/varnish/intro.html). I am not an expert in CSS, but it feels a bit wrong to use reserved IDs from common words as selectors for manipulating style.

We saw this appear in https://github.com/LibraryCarpentry/lc-spreadsheets/issues/143, where they had a section at the bottom of an episode called "Resources" which provided links to external resources.

Solution

The solution for the lesson developer is to change the name of that section from "Resources" to something else (e.g. "Further Resources" or "More Resources").

The solution in {varnish} is to do something with all these reserved IDs used to change style. They should be removed and replaced with either less-likely IDs or a more robust mechanism for styling.

[froggleston]

By renaming the .resources CSS class and #resources ID (to .lesson-resources and #lesson-resources, respectively), this should be fixed in an upcoming release:

[ErinBecker]

Fixed with https://github.com/carpentries/varnish/pull/147