Improve display of IG color variables

[ElliotSilver]

The current approach with numbers for each color leads to a messy diagram, and makes adding new variables in an organized manner difficult since they would be added at the end of the list, not with the other variables for the visual element.

Rather than the unordered list of color variables currently presented, consider tables:

Area	Text	Background	Border	Link	Hover
1. IG Title	--ig-status-text-color	--ig-header-container-color
2. Breadcrumb	--breadcrumb-text-color	--breadcrumb-bg-color
3. Table of Contents	--toc-text-color	--toc-box-bg-color	--toc-box-border	--toc-link-color	--toc-link-hover-color
etc.

We probably need 3 tables:

• content (sample above)
  • columns: text, background, border, link and hover
  • rows: IG title, breadcrumb, publication box, body, table of contents, stu note (and stu headline), dragon, footer nave footer container
• side stripe colors
• menu
  • columns: text, background
  • rows: menu, hover, active, dropdown, dropdown hover

Also separator text color (and any other "1 offs")

Number the rows in the tables. Replace the diagram with one that shows only the areas. That is, replace current numbers 1 and 22 with the number for the new "IG title" area; replace current number 17 and 18 with the new number for the TOC area.

The page source, or at least the included diagram (perhaps diagrams) should show all defined styles, which should be listed in the tables.

Since the variables will be listed in the table, reduce the existing "CSS color definitions" section to only an example of overriding a couple of colors.