adding custom admonitions classes

[choldgraf]

This replaces our Bootstrap admonition styles with some custom ones that are heavily influenced by mkdocs-materials. It removes all of the admonition translator code, so our admonitions will now behave just like any other Sphinx theme's admonitions (which I think is good).

Also adds some colors and icons for the major admonitions that I found in the RTD theme docs.

Here's how they look on my machine:

What do you think?

closes #182 closes #181

[choldgraf]

this is nice - we don't need to use our hacky extra code to achieve this effect now - this is functionality that "already works" in Sphinx

[jorisvandenbossche]

This is looking really great !!

One thing I am wondering: maybe we could still use bootstrap's color variables, since they basically define those same 4 colors (success, danger, warning, info + primary as fall back when no class is given): https://getbootstrap.com/docs/4.5/getting-started/theming/#theme-colors
That way we don't hardcode those colors, and you can customize them by overriding those set of colors.

[jorisvandenbossche]

Suggested change

	.. admonition:: If you add a name flag, it will be styled
	.. admonition:: If you add a class flag, it will be styled

[jorisvandenbossche]

maybe directly put this in a separate file _admonitions.scss ?

[choldgraf]

good points @jorisvandenbossche - I think I've addressed your comments!

The colors look more "bootstrap-y" now :-)

I also made "hint" be yellow, since I believe that's what other themes have used. But let me know if you'd really prefer green.

[choldgraf]

anything else to do on this one?

[jorisvandenbossche]

I actually was thinking of the success/danger/warning/info colors, but I suppose those are not available with a -light variant? (but could maybe also use a function to lighten it: https://stackoverflow.com/questions/1625681/dynamically-change-color-to-lighter-or-darker-by-percentage-css-javascript)

Anyway, that can certainly be done as a follow up as well. So merge away if you are happy with it!

Some other possible follow-up thoughts:

• It would be nice to use variables here in a way they are still overrideable by theme users (but that's probably covered by Make primary color (navigation hightlight, section titles) configurable #138. I also don't know if you can use css variables in sass and have them preserved in the css output)
• We are adding some custom styling here (like the shadow), while some of those things are also covered by bootstrap classes. I am wondering if we can't make more use of that (like the sphinx-panels). Althought that then goes back somewhat to how it was before .. as that would need a custom translator to add those classes to the admonition node

cc @hoetmaaiers

[choldgraf]

Mmm - if you can give me a very specific look that you'd like for these admonitions colors, then I can try to achieve that via some transparency...but otherwise I'd prefer we tackle in follow-up PRs because I see that as being tricky doing back-and-forth over a PR.

For the custom classes stuff, I don't see it as too much of a hassle to just have our own CSS for some of this stuff. Or put another way, adding 5 lines of CSS seems way less-complex than creating a custom HTML5 translator to manually add bootstrap classes to things.

[choldgraf]

ok cool - I'm gonna merge this so we have time to get a feel for it, I also opened up #187 to track the suggestions you made @jorisvandenbossche 👍

[jorisvandenbossche]

Thanks!