From e6cef37e0c782fe770db20888d99c17d10e2c479 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Thu, 1 Jul 2021 20:11:34 +0200
Subject: 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
---
 theme/default/rsrc/css/main.css  | 48 +++++++++++++++++++++++++++++++++++++-
 theme/default/rsrc/css/main.scss | 50 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 96 insertions(+), 2 deletions(-)

(limited to 'theme/default/rsrc')

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;
@@ -321,6 +324,49 @@ a.brackets:before, a.brackets:after {
   display: block;
 }
 
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# 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
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
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;
@@ -350,6 +354,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
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
-- 
cgit v1.2.3