From b0101a0a1a80bc74697548b0a51e1b0a6e1850f4 Mon Sep 17 00:00:00 2001
From: Steven Engler <sengler@uwaterloo.ca>
Date: Fri, 13 Sep 2019 16:12:16 -0400
Subject: [PATCH] Added "notice" shortcodes

These notices have three types: note, tip, and warning.
---
 layouts/shortcodes/notice.html | 13 +++++++
 static/css/styles.css          | 51 +++++++++++++++++++++++++
 static/css/themes/dark.css     | 37 ++++++++++++++++++
 static/css/themes/light.css    | 36 +++++++++++++++++
 static/images/exclamation.svg  | 70 ++++++++++++++++++++++++++++++++++
 5 files changed, 207 insertions(+)
 create mode 100644 layouts/shortcodes/notice.html
 create mode 100644 static/images/exclamation.svg

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 -}}
+<aside class="notice {{ .Scratch.Get "type" }}">
+	<hr>
+	<div class="notice-title">
+		<img class="notice-title-icon" src="{{ "images/exclamation.svg" | relURL }}" height="15">
+		<span>{{ with .Get 1 }}{{ . }}{{ else }}{{ .Scratch.Get "type" | humanize }}{{ end }}</span>
+	</div>
+	<div class="notice-body">
+{{ .Inner | markdownify }}
+	</div>
+	<hr>
+</aside>
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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="18.441597mm"
+   height="18.441597mm"
+   viewBox="0 0 18.441597 18.441597"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="exclamation.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="23.53253"
+     inkscape:cy="-1.8454934"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-95.779202,-139.2792)">
+    <path
+       style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10.66666698;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="M 34.849609 0 A 34.850262 34.850262 0 0 0 0 34.849609 A 34.850262 34.850262 0 0 0 34.849609 69.701172 A 34.850262 34.850262 0 0 0 69.701172 34.849609 A 34.850262 34.850262 0 0 0 34.849609 0 z M 33.720703 11.71875 L 36.048828 11.71875 C 37.266264 11.71875 38.268886 12.159718 39.056641 13.042969 C 39.939916 13.902333 40.333777 14.940767 40.238281 16.158203 L 39.126953 37.607422 C 39.055344 38.729387 38.625645 39.660384 37.837891 40.400391 C 37.002388 41.140422 36.024309 41.509766 34.902344 41.509766 C 33.756517 41.509766 32.76519 41.140422 31.929688 40.400391 C 31.165795 39.660384 30.736121 38.729387 30.640625 37.607422 L 29.53125 16.158203 C 29.483502 14.940767 29.877388 13.902333 30.712891 13.042969 C 31.500645 12.159718 32.503242 11.71875 33.720703 11.71875 z M 34.902344 45.771484 C 36.644958 45.723862 38.077253 46.308055 39.199219 47.525391 C 40.416655 48.718965 41.000848 50.164484 40.953125 51.859375 C 41.000747 53.554241 40.416554 54.986537 39.199219 56.15625 C 38.077253 57.373686 36.644958 57.982422 34.902344 57.982422 C 33.231339 57.982422 31.787774 57.373686 30.570312 56.15625 C 29.352876 54.986537 28.744141 53.554241 28.744141 51.859375 C 28.744141 50.18837 29.352876 48.742852 30.570312 47.525391 C 31.787774 46.307954 33.231339 45.723762 34.902344 45.771484 z "
+       id="path815"
+       transform="matrix(0.26458333,0,0,0.26458333,95.779202,139.2792)" />
+    <g
+       aria-label="!"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.40277863px;line-height:1.25;font-family:Dyuthi;-inkscape-font-specification:'Dyuthi, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       id="text819" />
+  </g>
+</svg>