From 5614c15b060c1c0242b6bd92e1e16039d0781d18 Mon Sep 17 00:00:00 2001
From: rubenwardy <rw@rubenwardy.com>
Date: Fri, 20 Jul 2018 19:50:19 +0100
Subject: [PATCH] Add notice macro

---
 README.md                         |  8 +++++++
 _en/basics/lua.md                 |  4 +---
 _en/items/nodes_items_crafting.md |  4 ++--
 _en/players/sfinv.md              |  7 +-----
 _includes/notice.html             | 21 +++++++++++++++++
 _sass/_content.scss               | 39 +++++++++++++++++++++++++++++--
 6 files changed, 70 insertions(+), 13 deletions(-)
 create mode 100644 _includes/notice.html

diff --git a/README.md b/README.md
index 0cb7e7e..e503b9f 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,12 @@ title: Chapter Name
 layout: default
 root: ..
 idx: 4.5
+long_notice:
+  level: tip
+  title: This is a long tip!
+  message: This is a very long tip, so it would be unreadable if
+           placed in the main body of the chapter. Therefore,
+           it is a good idea to put it in the frontmatter instead.
 ---
 
 ## Chapter Name
@@ -57,6 +63,8 @@ Explain why/how these concepts are useful in modding
 
 ## List the
 
+{% include notice.html notice=page.long_notice %}
+
 Paragraphs
 
 {% highlight lua %}
diff --git a/_en/basics/lua.md b/_en/basics/lua.md
index 15ea0d3..485c12e 100644
--- a/_en/basics/lua.md
+++ b/_en/basics/lua.md
@@ -71,9 +71,7 @@ One such IDE is Eclipse with the Koneki Lua plugin:
 
 ## Coding in Lua
 
-<div class="notice">
-    This section is a Work in Progress. May be unclear.
-</div>
+{% include notice.html level="warning" message="This section is a Work in Progress. May be unclear." %}
 
 Programs are a series of commands that run one after another.
 We call these commands "statements."
diff --git a/_en/items/nodes_items_crafting.md b/_en/items/nodes_items_crafting.md
index 9d5a796..85b3f75 100644
--- a/_en/items/nodes_items_crafting.md
+++ b/_en/items/nodes_items_crafting.md
@@ -116,8 +116,8 @@ minetest.register_craftitem("mymod:mudpie", {
     description = "Alien Mud Pie",
     inventory_image = "myfood_mudpie.png",
     on_use = function(itemstack, user, pointed_thing)
-        hp_change = 20
-        replace_with_item = nil
+        local hp_change = 20
+        local replace_with_item = nil
 
         minetest.chat_send_player(user:get_player_name(), "You ate an alien mud pie!")
 
diff --git a/_en/players/sfinv.md b/_en/players/sfinv.md
index 8bec0ab..5ccf590 100644
--- a/_en/players/sfinv.md
+++ b/_en/players/sfinv.md
@@ -233,9 +233,4 @@ end,
 
 ## Adding to an existing page
 
-<div class="notice">
-    <h2>To Do</h2>
-
-    This section will be added soon&trade;.
-    This placeholder is just to let you know that it is possible!
-</div>
+{% include notice.html level="warning" title="To Do" message="This section will be added soon&trade;. This placeholder is just to let you know that it is possible!" %}
diff --git a/_includes/notice.html b/_includes/notice.html
new file mode 100644
index 0000000..3a6863f
--- /dev/null
+++ b/_includes/notice.html
@@ -0,0 +1,21 @@
+{% if include.notice %}
+	{% assign notice=include.notice %}
+{% else %}
+	{% assign notice=include %}
+{% endif %}
+
+<div class="notice notice-{{ notice.level }}">
+	{% if notice.level == "warning" %}
+		<span>⚠</span>
+	{% else if notice.level == "tip" %}
+		<span>i</span>
+	{% else %}
+		<span>?</span>
+	{% endif %}
+	<div>
+		{% if notice.title %}
+			<h2>{{ notice.title }}</h2>
+		{% endif %}
+		{{ notice.message }}
+	</div>
+</div>
diff --git a/_sass/_content.scss b/_sass/_content.scss
index 8b6958a..e78d9c9 100644
--- a/_sass/_content.scss
+++ b/_sass/_content.scss
@@ -27,19 +27,54 @@ figure {
 	padding: 0 0 0 6px;
 }
 
+
+.notice-danger {
+	background: #933 !important;
+	border: 1px solid #c44 !important;
+}
+
+.notice-warning {
+	background: #FED;
+	border: 1px solid #fc9;
+}
+
+.notice-tip {
+	background: #ccf;
+	border: 1px solid #66a;
+}
+
+.notice-green {
+	background: #161;
+	border: 1px solid #393;
+}
+
 .notice {
 	margin: 10px;
 	display: block;
 	padding: 5px;
-	border: 1px solid orange;
 	border-radius: 5px;
-	background: #FFEEDD;
+	position: relative;
+}
 
+.notice > span {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 40px;
+	font-size: 24px;
+	text-align: center;
+	display: block;
+}
+
+.notice > div {
+	margin-left: 35px;
 }
 
 .notice h2 {
 	margin: 0 0 5px 0;
 	padding: 0 0 2px 0;
+	font-size: 110%;
 }
 
 .header-link, .anchor {