Admonition shortcodes for note, tip and warning

[Sieboldianus]

I've pulled together shortcodes for note, tip and warning and used those for a while now in my blog:

The base code comes from the gohugoio-theme (e.g. used in the docs) from where I updated to match the Hermit Theme.

To produce the above, the following code in a markdown/content file is used:

{{% note %}}
Here is a piece of information I would like to draw your **attention** to.
{{% /note %}}

{{% warning %}}
This is a warning, which should be reserved for *important* information like breaking changes.
{{% /warning %}}

{{% tip %}}
Here's a bit of advice to improve your productivity with Hugo.
{{% /tip %}}

I've also added three svg-icons from the fontawesome, among others, explained in a blog post here.

I tried to include it in the most flexible way: fontawesome icons are only included as svg, and only those three (not the full library). There're 3 new colors added to _predefined.scss:

$admonition-note :#F8E45C;
$admonition-tip : #0594CB;
$admonition-warning :#ff725c;

Any admonition scss is stored in a separate file, admonition.scss.

Happy to discuss the colors or style, if anyone is interested in this feature. E.g.: I decided against round-corners, since I found that the theme has already so many round corners.

[Sieboldianus]

Some more tests: switching colors for note and tip - I think this may look better:

[Sieboldianus]

Another option with reduced colors, perhaps with a cleaner look: