Various layout & styling changes

[aliialpaca]

Changes

• Split the bad ideas page into two separate pages (bad exercises and bad terminology) to avoid multiple uses of <h1>.
• Reduced the labels for the bad exercises & terminology lists to one per term, and changed the colour to be unique to that label's text (as to not overload the colour meaning and make it slightly easier to read).
• On some pages, labels now show beside headers rather than under.
• Made <h2> headers collapsible on the Glossary and Vocal Examples pages.
• Added a bar to below <h2> headers and changed some spacing regarding headers.
• Shuffled header hierarchy up one on a few pages.
• Added a figure template (image.html) so that images can have captions.
• Workaround the theme issue with multiple successive labels when the labels are before the first paragraph of a heading.
  • Labels were having <p> applied (which is a consequence of Kramdown's parsing, not so much a real bug), which made the first one in a list of multiple below a heading move below the others due to the theme's CSS rules. Wrapped labels with <div> to prevent this.
  • (This change isn't really visible though as the only pages that had the labels wrapped with <div> had the labels moved to the side of the header anyway; see the terminology entries under the original Bad Ideas page to see the original issue.)

Things that need fixing/improvement

• Any links that go to the previous bad ideas page need to be fixed.
• Only some pages have the added figure template for images used, this would need to be applied to other pages.
• Colour-related styling could probably be moved into darkOverride.scss.
• The CSS additions were probably added a little messily and could probably be cleaned up.
• I'm not sure if moving the labels on the Vocal Exercises page to be by the headers was an improvement. This can be changed back if you want.
• The spacing between the <h2> header, the bar below it, and the text may be off. Let me know if you want it tweaked.
• The <h2> headers on the Bad Exercises and Bad Terminology pages weren't made collapsible due to the size of the pages not being very large, but this can be done if you want.

Previews

• List of Bad Ideas (Original, New: Bad Terms, Bad Exercises)
• Glossary (Original, New)
• Voice Examples (Original, New)
• FVF (Original, New)
• Acoustic Resonance (Original, New)

Other pages apart from the ones listed above haven't been changed.

(Most images are broken in the previews since the custom domain URLs don't apply cleanly to the Github Pages domain, the images shouldn't be broken when merged.)

It's not much apart from styling things, but I think it's a slight improvement. Let me know if there's any changes to the PR you want made before merging this.

[SumianVoice]

Thanks for the well organized and written PR!

It's best to avoid language like "Bad Terminology" especially as some teachers use those terms in their appropriate way. I can't think of something else that would be appropriate though apart from "Questionable Methods" and "Questionable Terminology" or something to that effect. Those two names are still not great. The original name had the same problem but only when read literally and not as a single expression "bad idea" but instead a descriptive "(bad) idea". It might be best to keep these on the same page, since it's a small topic. The \<details> tags are useful in glossary / dictionary type pages where there are huge lists (or later-to-be huge lists) so I think those should stay on the terminology headings.

Notes:

• we should avoid using bias like "Bad Exercises" since it's more complicated, and not all (see glottal stop slides) exercises are necessarily bad all the time, just questionable or risky
• might be better to keep bad methods and terms on the same page since it's a small topic, and most people looking at one section of it will be wanting to look at the other section
• details tags in glossary sections are for future use as those pages expand so we should keep those (maybe just reduce to main headings)
• \<h1> can have multiple instances, since the title of the page should be the overall topic, the first heading can be the major subsections of that topic, and this cleans up the TOC a little since h3 and h4 are useless (they have the same size as \<p>). See vocal weight for an example of that. h1 for the intro, main section, exercises, and notes is a good formula.
• using heading tags in \<summary> for dropdowns is great, I'll apply that universally.

Changes requested:

• either rename the bad ideas files to be less absolute or merge them back to the original file
• add details tags back to the main headings of the bad ideas sections

[aliialpaca]

Changes

• Changed "List of Bad..." to "Questionable" as you suggested.
• Added the <details> tags back to the <h2> headers questionable pages as suggested.
• Added summary > h3 styling so <h3> can be used in <summary>.
• Tweaked <h4> styling to try and differentiate it from the text more.

Notes

Might be better to keep bad methods and terms on the same page since it's a small topic, and most people looking at one section of it will be wanting to look at the other section

I split them partially so that the labels don't get confusing having the same colours with different text on the same page, although since now the labels have been generally reduced and are sort of closer in terms of meaning across both pages (e.g. red generally meaning "avoid") maybe it's less of a concern.

The other aim was to try and solve having to use <h1> to separate the two sections... I felt having to do so for the list pages might suggest the page could benefit from being split (but also because using <h1> for other sections of the page seemed a bit large). But I tweaked the <h4> styling and added summary>h3 styling rules so maybe <h1> could be used again. Let me know if you still want me to merge them again (under "Questionable Ideas" or something else).

\<h1> can have multiple instances, since the title of the page should be the overall topic, the first heading can be the major subsections of that topic and this cleans up the TOC a little since h3 and h4 are useless (they have the same size as \<p>). See vocal weight for an example of that. h1 for the intro, main section, exercises, and notes is a good formula.

I decided to look around and see if there's any precedent for using <h1> more than once in the document... in general it seems <h1> is typically used for the title at the top of the page and <h2> is used for major subsections (e.g. Wikipedia).

I ended up trying to tweak the <h4> styling to try and separate it a little more from the source text (increased font-size), here's an example of a <h4> (this test page isn't in the PR, it's in a separate test branch).

(Links to updated pages: Questionable Terms, Questionable Exercises)