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:

varnish/source/stylesheets/sidenav.scss

Lines 95 to 99 in 0549112

	#chapters, #resources, .accordion-header.chapters {
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.2px;
	}

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 LibraryCarpentry/lc-spreadsheets#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 #147