[styling] Consider enabling different semantic classes for the HTML header tags.

[springcomp]

This is part of a series or minor issues that aim to enable support for flexible styling and theming of the JMESPath site.

Multiple semantically distinct captions all share the same HTML h1 tag.

Please, consider adding a CSS class to differentiate those semantic usages of the captions.

For instance, each website section – like the Tutorial section shown in the screenshot above – has both an h1 tag with the section heading (i.e 'Tutorial') and a h1 tag with chapter headings (i.e 'Basic Expressions').

I think we may need to distinguish between:

• The website welcome header
• Each website main section (Tutorial, Examples, Libraries, Syntax and Functions)
• Each website section’s HTML tags like h2, h3 and so on might also need to be mapped to the same CSS class.

[innovate-invent]

I use the parent/ancestor to distinguish the h1 tag: https://github.com/jmespath-community/jmespath.site/blob/80b63b747dd9b5d52c8f9b7c0b5fc67777b22be1/themes/jmespath/assets/main.scss#L132

https://github.com/jmespath-community/jmespath.site/blob/80b63b747dd9b5d52c8f9b7c0b5fc67777b22be1/themes/jmespath/assets/main.scss#L61

for each section you would target it as:

#tutorial {
  &>h1 {}
}
#examples {
  &>h1 {}
}
#libraries {
  &>h1 {}
}

Do you feel this is bad practice or limiting?

[springcomp]

I use the parent/ancestor to distinguish the h1 tag: https://github.com/jmespath-community/jmespath.site/blob/80b63b747dd9b5d52c8f9b7c0b5fc67777b22be1/themes/jmespath/assets/main.scss#L132 https://github.com/jmespath-community/jmespath.site/blob/80b63b747dd9b5d52c8f9b7c0b5fc67777b22be1/themes/jmespath/assets/main.scss#L61 Do you feel this is bad practice or limiting?

That seems to cover the requirements well.