Improve callouts

[salim-b]

Summary

Tweak Callouts to

• yield optimal result with all possible input combinations.
• support Markdown formatting in title.
• generate predictable markup (text always wrapped in <p></p> etc.).
• not attempt to set stroke-width on the SVG (cannot work).
• consistently use Bootstrap's utility classes for margins and padding.

Before, for a callout with icon, the layout differed depending on whether a title was supplied or not. Margins also weren't optimal.

I thoroughly tested the overhauled callouts!

Example screenshots

Screenshots are based on (a subset of) the following shortcode invocation:

{{< callout context="tip" icon="viewfinder" title="Attention is `all` u need" >}}
  Caution and danger callouts are helpful for drawing a user’s attention to details that may trip them up. If you find yourself using these a lot, it may also be a sign that the thing you are documenting could benefit from being redesigned.

  Caution and danger callouts are helpful for drawing a user’s attention to details that may trip them up. If you find yourself using these a lot, it may also be a sign that the thing you are documenting could benefit from being redesigned.
  
  Caution and danger callouts are helpful for drawing a user’s attention to details that may trip them up. If you find yourself using these a lot, it may also be a sign that the thing you are documenting could benefit from being redesigned.
{{< /callout >}}

(The last one ist just an empty callout, i.e. {{< callout context="tip" >}}{{< /callout >}}.)

Checks

• Read Create a Pull Request
• Supports all screen sizes (if relevant)
• Supports both light and dark mode (if relevant)
• Passes npm run test

[h-enk]

🤩 Thanks!