Added "notice" shortcodes

These notices have three types: note, tip, and warning.

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 {

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);

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;
+}