Add ability to add notice blocks to markdown

Add Hugo shortcodes and CSS to Hugo theme to allow notice blocks to be
added to the markdown. There are 4 types available:

- warning
- info
- note
- tip

By adding the following hugo shortcode around some text a formatted box is
added to the HTML output:

    {{% notice info %}}
    Text for notice
    {{% /notice %}}

This will be useful for highlighting important information.

Signed-off-by: Martyn Welch <martyn.welch@collabora.com>

themes/beautifulhugo/layouts/shortcodes/notice.html

+{{ $_hugo_config := `{ "version": 1 }` }}
+<div class="notices {{ .Get 0 }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>{{ .Inner }}</div>

themes/beautifulhugo/static/css/main.css

@@ -715,3 +715,90 @@ input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gs
   box-sizing: content-box;
   line-height: normal;
 }
+
+/* --- Notices --- */
+div.notices {
+    margin: 2rem 0;
+    position: relative;
+}
+
+div.notices p {
+    border-width: 1px;
+    border-style: solid;
+    border-color: 414141;
+    border-radius: 4px;
+    border-left-width: 6px;
+    border-left-style: solid;
+    position: relative;
+    display: block;
+    padding: 15px;
+    padding-top: 30px;
+    margin-top: 0rem;
+    margin-bottom: 0rem;
+    background: #FFF;
+}
+
+div.notices p:first-child:before {
+    position: absolute;
+    top: 2px;
+    color: #5a5a5a;
+    font-family: "Font Awesome 5 Free";
+    font-weight: 800;
+    left: 10px;
+}
+
+div.notices p:first-child:after {
+    position: absolute;
+    top: 2px;
+    left: 3.5rem;
+    font-weight: 800;
+}
+
+div.notices.warning p {
+    border-left-color: #e67d1e;
+}
+div.notices.warning p:first-child:before {
+    content: "\f071";
+    color: #e67d1e;
+}
+div.notices.warning p:first-child:after {
+    content: 'Warning';
+    color: #e67d1e;
+}
+
+div.notices.info p {
+    border-left-color: #3a5a80;
+}
+div.notices.info p:first-child:before {
+    content: "\f05a";
+    color: #3a5a80;
+}
+div.notices.info p:first-child:after {
+    content: 'Info';
+    color: #3a5a80;
+}
+
+div.notices.note p {
+    border-left-color: #5a5a5a;
+}
+div.notices.note p:first-child:before {
+    content: "\f14b";
+    color: #5a5a5a;
+}
+div.notices.note p:first-child:after {
+    content: 'Note';
+    color: #5a5a5a;
+}
+
+div.notices.tip p {
+    border-left-color: #33b540;
+
+}
+div.notices.tip p:first-child:before {
+    content: "\f0eb";
+    color: #33b540;
+}
+div.notices.tip p:first-child:after {
+    content: 'Tip';
+    color: #33b540;
+}