Website: Add admonitions support

Initial work by Mark Phillips <mark@freebsdfoundation.org>

website/themes/beastie/layouts/_partials/site-head.html

@@ -10,6 +10,7 @@
   <link rel="shortcut icon" href="{{ absLangURL ($.Site.BaseURL) }}favicon.ico">
 
   <link rel="stylesheet" href="{{ absLangURL ($.Site.BaseURL) }}css/fixed.css">
+  <link rel="stylesheet" href="{{ absLangURL ($.Site.BaseURL) }}css/font-awesome-min.css">
 
   <link rel="search" type="application/opensearchdescription+xml" href="{{ absLangURL ($.Site.BaseURL) }}opensearch/man.xml" title="FreeBSD Man">
   <link rel="search" type="application/opensearchdescription+xml" href="{{ absLangURL ($.Site.BaseURL) }}opensearch/man-freebsd-release-ports.xml" title="FreeBSD Man+P">

website/themes/beastie/static/css/global.css

@@ -86,3 +86,117 @@ strong, b {
 form textarea {
   text-align: left;
 }
+
+.fa {
+  font-family: FontAwesome;
+  font-style: normal;
+}
+
+.admonitionblock {
+  margin: 1.4rem 0;
+  padding: 1rem;
+  color: #444;
+}
+
+.admonitionblock table {
+  table-layout: fixed;
+  position: relative;
+  width: 100%;
+}
+
+.admonitionblock table tbody tr td.icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  line-height: 1;
+  padding-bottom: .5rem;
+}
+
+.admonitionblock table tbody tr td.icon i {
+  display: inline-flex;
+  align-items: center;
+  width: auto;
+  background-position-x: .5em;
+  vertical-align: initial;
+  font-style: normal;
+}
+
+.admonitionblock table tbody tr td.icon i:after {
+  content: attr(title);
+  font-family: 'Inter var', sans-serif;
+  font-weight: bolder;
+  padding: 0 .5em;
+  margin: -.05em;
+}
+
+.admonitionblock table tbody tr td.icon .icon-note::before {
+  content: "\f05a";
+  color: #19407C;
+}
+
+.admonitionblock table tbody tr td.icon .icon-tip::before {
+  content: "\f0eb";
+  color: #43B929;
+}
+
+.admonitionblock table tbody tr td.icon .icon-warning::before {
+  content: "\f071";
+  color: #BF6900;
+}
+
+.admonitionblock table tbody tr td.icon .icon-caution::before {
+  content: "\f06d";
+  color: #BF3400;
+}
+
+.admonitionblock table tbody tr td.icon .icon-important::before {
+  content: "\f06a";
+  color: #BF0000;
+}
+
+.admonitionblock table tbody tr td.icon [class^="fa icon-"] {
+  font-size: 1.2rem;
+  cursor: default;
+}
+
+.admonitionblock table tbody tr td.content {
+  width: 100%;
+  word-wrap: anywhere;
+}
+
+.admonitionblock table tbody tr td.content .title {
+  margin-top: 2rem;
+}
+
+.admonitionblock table tbody tr td.content .paragraph {
+  padding-top: .5rem;
+}
+
+.admonitionblock table tbody tr td.content a {
+  color: #0645AD;
+}
+
+.note {
+  border-left: 5px solid #19407C;
+  background-color: #EAF1FB;
+}
+
+.warning {
+  border-left: 5px solid #BF6900;
+  background-color: #FFF4E6;
+}
+
+.important {
+  border-left: 5px solid #BF0000;
+  background-color: #FFE6E6;
+}
+
+.caution {
+  border-left: 5px solid #BF3400;
+  background-color: #FFECE6;
+}
+
+.tip {
+  border-left: 5px solid #43B929;
+  background-color: #EDFAEA;
+}