Style AsciiDoc admonition boxes.

cf. cntrump/hugo-notepadium#82

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "themes/hugo-notepadium"]
 	path = themes/hugo-notepadium
 	url = https://github.com/cntrump/hugo-notepadium.git
+[submodule "themes/asciidoctor-skins"]
+	path = themes/asciidoctor-skins
+	url = [email protected]:darshandsoni/asciidoctor-skins.git

asciidoctor

@@ -15,4 +15,8 @@ ad="$(
 
 "${ad}" \
     --attribute=experimental=true \
+    --attribute=icons=font \
     "$@"
+
+# TODO: Disable web fonts? Is that even effective?
+#    --attribute=webfonts! \

assets/css/admonitions.css

@@ -0,0 +1,50 @@
+/* Generated by themes/extract_admonition_style.sh */
+
+/* From asciidoctor by github.com/darshandsoni/asciidoctor-skins */
+.admonitionblock td.content>.title {line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
+.admonitionblock td.content>.title {text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
+.admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
+.admonitionblock>table td.icon{text-align:center;width:80px}
+.admonitionblock>table td.icon img{max-width:none}
+.admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
+.admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
+.admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
+.admonitionblock td.icon [class^="fa icon-"] {font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
+.admonitionblock td.icon .icon-note:before {content:"\f05a";color:#19407c}
+.admonitionblock td.icon .icon-tip:before {content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
+.admonitionblock td.icon .icon-warning:before {content:"\f071";color:#bf6900}
+.admonitionblock td.icon .icon-caution:before {content:"\f06d";color:#bf3400}
+.admonitionblock td.icon .icon-important:before {content:"\f06a";color:#bf0000}
+
+/* Use custom icon font 
+   Note: Generated with fontello.com using Unicode encoding.
+   Thank you, Font Awesome! */
+@font-face {
+    font-family: "admonition_icons";
+    src: url('../admonition_icons.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.admonitionblock td.icon [class^="fa icon-"] {
+    font-family: "admonition_icons" !important;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-style: normal;
+}
+
+.admonitionblock td.icon .icon-note:before {content:"\e801" !important} /* info circled */
+.admonitionblock td.icon .icon-tip:before {content:"\f0eb" !important} /* lightbulb */
+.admonitionblock td.icon .icon-warning:before {content:"\e802" !important} /* attention */
+.admonitionblock td.icon .icon-caution:before {content:"\e804"!important} /* fire */
+.admonitionblock td.icon .icon-important:before {content:"\e803" !important} /* attention circled */
+
+/* Override general table styling for admonition boxes */
+.admonitionblock td.icon {
+    border: none !important;
+}
+.admonitionblock td.content {
+    border-right: none !important;
+    border-bottom: none !important;
+    border-top: none !important;
+}

config.toml

@@ -36,4 +36,7 @@ use = "hljs"
 theme = "github"
 
 [params.assets]
-css = ["css/fixes.css"]
+css = [
+    "css/fixes.css", 
+    "css/admonitions.css"
+]

themes/extract_admonition_style.sh

@@ -0,0 +1,58 @@
+#!/usr/bin/env bash
+
+set -eu
+
+skin="asciidoctor"
+
+themes_path="$(realpath "${0}" | xargs dirname)"
+css_assets_path="$(realpath "${themes_path}/../assets/css/")"
+admonitions_css_path="${css_assets_path}/admonitions.css"
+
+
+echo -e "/* Generated by ${0} */\n" \
+    > "${admonitions_css_path}"
+
+# Copy style from chosen skin
+echo "/* From ${skin} by github.com/darshandsoni/asciidoctor-skins */" \
+    >> "${admonitions_css_path}"
+grep .admonitionblock \
+      "${themes_path}/asciidoctor-skins/css/${skin}.css" \
+    | sed -e 's/^.*\(\.admonitionblock [^,{]*\)[^{]*{/\1 {/' \
+    >> "${admonitions_css_path}"
+
+# Integrate into Notepadium
+cat >> "${admonitions_css_path}" <<STYLE
+
+/* Use custom icon font 
+   Note: Generated with fontello.com using Unicode encoding.
+   Thank you, Font Awesome! */
+@font-face {
+    font-family: "admonition_icons";
+    src: url('../admonition_icons.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.admonitionblock td.icon [class^="fa icon-"] {
+    font-family: "admonition_icons" !important;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-style: normal;
+}
+
+.admonitionblock td.icon .icon-note:before {content:"\e801" !important} /* info circled */
+.admonitionblock td.icon .icon-tip:before {content:"\f0eb" !important} /* lightbulb */
+.admonitionblock td.icon .icon-warning:before {content:"\e802" !important} /* attention */
+.admonitionblock td.icon .icon-caution:before {content:"\e804"!important} /* fire */
+.admonitionblock td.icon .icon-important:before {content:"\e803" !important} /* attention circled */
+
+/* Override general table styling for admonition boxes */
+.admonitionblock td.icon {
+    border: none !important;
+}
+.admonitionblock td.content {
+    border-right: none !important;
+    border-bottom: none !important;
+    border-top: none !important;
+}
+STYLE