diff --git a/layouts/shortcodes/notice.html b/layouts/shortcodes/notice.html
new file mode 100644
index 0000000..35ea5f5
--- /dev/null
+++ b/layouts/shortcodes/notice.html
@@ -0,0 +1,13 @@
+{{- .Scratch.Set "type" "note" -}}
+{{- with .Get 0 }}{{ $.Scratch.Set "type" . }}{{ end -}}
+
diff --git a/static/css/styles.css b/static/css/styles.css
index df956ef..0e48f9d 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -74,6 +74,57 @@ code {
padding-right: 0.4em;
}
+/* Formatting for "notice" shortcodes */
+
+.notice {
+ margin: 1.5em 0;
+ width: 70%;
+ margin-left: auto;
+ margin-right: auto;
+ background-color: #E9E9E9;
+}
+
+@media only screen and (max-width: 500pt) {
+ .notice {
+ width: 100%;
+ }
+}
+
+.notice > hr {
+ display: none; /* only want the child hr elements to appear if css is disabled */
+}
+
+.notice .notice-title {
+ margin: 0;
+ padding: 0.4em;
+ line-height: 1em;
+ background-color: #D5D5D5;
+}
+
+.notice .notice-title span {
+ vertical-align: -10%; /* we don't want the font descender space to be centered as well */
+}
+
+.notice .notice-title .notice-title-icon {
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 0.15em;
+ margin-right: 0.25em;
+ height: 0.85em;
+}
+
+.notice .notice-body {
+ padding: 0.6em;
+}
+
+.notice .notice-body p:first-child {
+ margin-top: 0;
+}
+
+.notice .notice-body p {
+ margin: 0.8em 0;
+}
+
/* ************************ */
blockquote {
diff --git a/static/css/themes/dark.css b/static/css/themes/dark.css
index a05523e..9b06ad3 100644
--- a/static/css/themes/dark.css
+++ b/static/css/themes/dark.css
@@ -58,6 +58,43 @@ blockquote {
background-color: #1A1A1A;
}
+.notice {
+ border-width: 2px;
+ border-style: solid;
+ border-top: 0;
+}
+
+.notice .notice-title .notice-title-icon {
+ filter: invert(80%);
+}
+
+.notice.note {
+ background-color: #001320;
+ border-color: #00487B;
+}
+
+.notice.note .notice-title {
+ background-color: #00487B;
+}
+
+.notice.tip {
+ background-color: #132000;
+ border-color: #105600;
+}
+
+.notice.tip .notice-title {
+ background-color: #105600;
+}
+
+.notice.warning {
+ background-color: #200000;
+ border-color: #700000;
+}
+
+.notice.warning .notice-title {
+ background-color: #700000;
+}
+
@media only screen and (max-width: 400pt) {
.links {
background-color: rgb(30, 30, 30);
diff --git a/static/css/themes/light.css b/static/css/themes/light.css
index 93c5796..0bd0d8c 100644
--- a/static/css/themes/light.css
+++ b/static/css/themes/light.css
@@ -42,3 +42,39 @@ blockquote {
border-color: #E0E0E0;
background-color: #FAFAFA;
}
+
+.notice {
+ color: #404040;
+}
+
+.notice .notice-title {
+ color: white;
+}
+
+.notice .notice-title .notice-title-icon {
+ filter: invert(1);
+}
+
+.notice.note {
+ background-color: #E7F2FA;
+}
+
+.notice.note .notice-title {
+ background-color: #6AB0DE;
+}
+
+.notice.tip {
+ background-color: #e6f9e6;
+}
+
+.notice.tip .notice-title {
+ background-color: #77c577;
+}
+
+.notice.warning {
+ background-color: #fae2e2;
+}
+
+.notice.warning .notice-title {
+ background-color: #df6f6c;
+}
diff --git a/static/images/exclamation.svg b/static/images/exclamation.svg
new file mode 100644
index 0000000..c575fc5
--- /dev/null
+++ b/static/images/exclamation.svg
@@ -0,0 +1,70 @@
+
+
+
+