Add category system to categorize posts (readme)

This commit implements a new category system to categorize posts. Each
category can have an unlimited number of nested children categories. A
single post don't necessarily need to be in a category, but it can.

Each category can have a full content body like posts or pages, so you
have enough space to describe the content of your categories.

Please note that you need to have at least the following MySQL/MariaDB
versions to use the category system, because it uses "WITH RECURSIVE"
database queries, the so-called "Common-Table-Expressions (CTE)".

MariaDB: 10.2.2
MySQL: 8.0

See: https://mariadb.com/kb/en/with/
See: https://dev.mysql.com/doc/refman/8.0/en/with.html

2 files changed, 96 insertions, 2 deletions

diff --git a/theme/default/rsrc/css/main.css b/theme/default/rsrc/css/main.css
index 11cae12..e49412b 100644
--- a/theme/default/rsrc/css/main.css
+++ b/theme/default/rsrc/css/main.css
@@ -281,9 +281,11 @@ a.brackets:before, a.brackets:after {
   overflow: hidden;
   margin: 0.5rem 0;
 }
+.item-container {
+  clear: both;
+}
 .item header {
   padding: 0.25rem 1rem;
-  border-bottom: 0.05rem solid #AAA;
   overflow: hidden;
   text-transform: uppercase;
 }
@@ -303,6 +305,7 @@ a.brackets:before, a.brackets:after {
   margin: 0;
   padding: 0 1rem;
   font-family: inherit;
+  border-top: 0.05rem solid #AAA;
 }
 .item blockquote img {
   display: block;
@@ -322,6 +325,49 @@ a.brackets:before, a.brackets:after {
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Category list
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#category-heading,
+#category-posts-heading {
+  float: left;
+}
+
+#category-posts-page {
+  float: right;
+  font-size: 0.6rem;
+}
+
+#category-body {
+  clear: both;
+}
+
+.category-list,
+.category-heading-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.6rem;
+  text-align: center;
+}
+.category-list li,
+.category-heading-list li {
+  display: inline-block;
+}
+.category-list li + li:before,
+.category-heading-list li + li:before {
+  content: " ➜ ";
+}
+.category-list a,
+.category-heading-list a {
+  text-decoration: underline;
+}
+
+.category-heading-list {
+  text-align: left;
+  float: right;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Responsive
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 #toogle-nav {
diff --git a/theme/default/rsrc/css/main.scss b/theme/default/rsrc/css/main.scss
index ba6e823..4ea6a2b 100644
--- a/theme/default/rsrc/css/main.scss
+++ b/theme/default/rsrc/css/main.scss
@@ -303,9 +303,12 @@ a.brackets:before, a.brackets:after {
 	overflow: hidden;
 	margin: 0.5rem 0;
 
+	&-container {
+		clear: both;
+	}
+
 	header {
 		padding: 0.25rem 1rem;
-		border-bottom: 0.05rem solid #AAA;
 		overflow: hidden;
 		text-transform: uppercase;
 
@@ -329,6 +332,7 @@ a.brackets:before, a.brackets:after {
 		margin: 0;
 		padding: 0 1rem;
 		font-family: inherit;
+		border-top: 0.05rem solid #AAA;
 
 		img {
 			display: block;
@@ -351,6 +355,50 @@ a.brackets:before, a.brackets:after {
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Categories
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#category-heading,
+#category-posts-heading {
+	float: left;
+}
+
+#category-posts-page {
+	float: right;
+	font-size: 0.6rem;
+}
+
+#category-body {
+	clear: both;
+}
+
+.category-list,
+.category-heading-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	font-size: 0.6rem;
+	text-align: center;
+
+	li {
+		display: inline-block;
+
+		+ li:before {
+			content: ' ➜ ';
+		}
+	}
+
+	a {
+		text-decoration: underline;
+	}
+}
+
+.category-heading-list {
+
+	text-align: left;
+	float: right;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Responsive
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 #toogle-nav {