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

16 files changed, 411 insertions, 3 deletions

diff --git a/theme/admin/html/category/delete.php b/theme/admin/html/category/delete.php
new file mode 100644
index 0000000..635e9a8
--- /dev/null
+++ b/theme/admin/html/category/delete.php
@@ -0,0 +1,6 @@
+<main id="main-content">
+<h1><i class="fa fa-trash-o"></i><?=$Language->text('delete_category')?></h1>
+<p><?=$Language->text('delete_category_desc')?></p>
+
+<?=$HTML?>
+</main>
diff --git a/theme/admin/html/category/form.php b/theme/admin/html/category/form.php
new file mode 100644
index 0000000..2cb7b20
--- /dev/null
+++ b/theme/admin/html/category/form.php
@@ -0,0 +1,112 @@
+<?php
+function categorySelectList($category_tree, $selected = NULL, $current = NULL, $prefix = '') {
+	foreach($category_tree as $category) {
+		$option = '<option value="%s"%s>%s%s [%d]</option>';
+		$select = ($category['ID'] == $selected) ? ' selected' : '';
+		$select = ($category['ID'] == $current) ? ' disabled' : $select;
+
+		printf($option, $category['ID'], $select, $prefix, escapeHTML($category['NAME']), $category['ID']);
+
+		if(isset($category['CHILDS'])) {
+			# If there are children, call self and pass children array.
+			(__FUNCTION__)($category['CHILDS'], $selected, $current, $prefix.'– ');
+		}
+	}
+}
+?>
+<?php if($FORM['INFO']): ?>
+	<div id="message-list-wrapper">
+		<ul id="message-list">
+			<?php foreach($FORM['INFO'] as $message): ?>
+				<li><?=$message?></li>
+			<?php endforeach ?>
+		</ul>
+	</div>
+<?php endif ?>
+
+<form action="" method="POST">
+	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
+
+<?php if($FORM['TYPE'] !== 'DELETE'): ?>
+	<div class="form-grid">
+		<label for="form_name">
+			<i class="fa fa-tag"></i><?=$Language->text('label_name')?></label>
+
+		<div class="form-grid-item first">
+			<input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" />
+		</div>
+
+		<label for="form_slug">
+			<i class="fa fa-link"></i><?=$Language->text('label_slug')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" />
+		</div>
+
+		<label for="form_category_parent">
+			<i class="fa fa-tags"></i><?=$Language->text('label_category_parent')?></label>
+
+		<div class="form-grid-item">
+			<select id="form_category_parent" name="parent">
+				<option value="">[ –– <?=$Language->text('label_category')?> –– ]</option>
+				<?=categorySelectList($FORM['CATEGORY_TREE'], $FORM['DATA']['PARENT'], $FORM['DATA']['ID']);?>
+			</select>
+		</div>
+
+		<label for="form_time_insert">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_insert')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" />
+		</div>
+
+		<label for="form_time_update">
+			<i class="fa fa-pencil"></i><?=$Language->text('label_update')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ?: 'CURRENT_TIMESTAMP')?>" value="" />
+		</div>
+	</div>
+
+	<div id="content-editor-wrapper" class="form-border-box">
+		<div id="button-list-wrapper">
+			<ul id="markdown-list" class="button-list markdown">
+				<li data-markdown="bold" class="fa fa-bold" title="<?=$Language->text('markdown_bold')?>"></li>
+				<li data-markdown="italic" class="fa fa-italic" title="<?=$Language->text('markdown_italic')?>"></li>
+				<li data-markdown="heading" class="fa fa-header" title="<?=$Language->text('markdown_heading')?>"></li>
+				<li data-markdown="link" class="fa fa-link" title="<?=$Language->text('markdown_link')?>"></li>
+				<li data-markdown="image" class="fa fa-picture-o" title="<?=$Language->text('markdown_image')?>"></li>
+				<li data-markdown="code" class="fa fa-code" title="<?=$Language->text('markdown_code')?>"></li>
+				<li data-markdown="quote" class="fa fa-quote-right" title="<?=$Language->text('markdown_quote')?>"></li>
+				<li data-markdown="list_ul" class="fa fa-list-ul" title="<?=$Language->text('markdown_list_ul')?>"></li>
+				<li data-markdown="list_ol" class="fa fa-list-ol" title="<?=$Language->text('markdown_list_ol')?>"></li>
+			</ul>
+		</div>
+		<textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea>
+	</div>
+	<div id="emoticon-list-wrapper" class="form-border-box background padding">
+		<ul id="emoticon-list" class="button-list emoticons">
+			<?php foreach(getUnicodeEmoticons() as $emoticon => $explanation):?>
+				<li data-emoticon="<?=$emoticon?>" title="<?=$explanation?>"><?=$emoticon?></li>
+			<?php endforeach; ?>
+		</ul>
+	</div>
+	<div class="form-border-box background padding">
+		<input id="form_argv" name="argv" maxlength="250" placeholder="[ARGUMENT_ONE=foo|ARGUMENT_TWO=bar …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" />
+	</div>
+<?php else: ?>
+	<div class="form-border-box background padding">
+		<?=$HTML?>
+	</div>
+<?php endif; ?>
+
+	<div class="form-border-box background padding">
+		<?php if($FORM['TYPE'] === 'INSERT'): ?>
+			<input id="insert-button" type="submit" name="insert" value="<?=$Language->text('insert')?>" />
+		<?php elseif($FORM['TYPE'] === 'UPDATE'): ?>
+			<input id="update-button" type="submit" name="update" value="<?=$Language->text('update')?>" />
+		<?php elseif($FORM['TYPE'] === 'DELETE'): ?>
+			<input id="delete-button" type="submit" name="delete" value="<?=$Language->text('delete')?>" data-text="<?=$Language->text('sure')?>" />
+		<?php endif; ?>
+	</div>
+</form>
diff --git a/theme/admin/html/category/index.php b/theme/admin/html/category/index.php
new file mode 100644
index 0000000..e2c35a4
--- /dev/null
+++ b/theme/admin/html/category/index.php
@@ -0,0 +1,15 @@
+<main id="main-content" class="wide">
+<h1><i class="fa fa-tags"></i><?=$Language->text('category_overview')?></h1>
+<p class="actions-before"><?=$Language->text('overview_category_desc')?></p>
+<ul class="actions">
+	<li><a href="<?=Application::getAdminURL('category/insert.php')?>" title="<?=$Language->text('insert_category')?>"><i class="fa fa-plus"></i><?=$Language->text('insert')?></a></li>
+</ul>
+
+<div class="item-container category grid">
+	<?php foreach($LIST['CATEGORIES'] as $category): ?>
+		<?php echo $category; ?>
+	<?php endforeach; ?>
+</div>
+
+<?=$PAGINATION['HTML']?>
+</main>
diff --git a/theme/admin/html/category/insert.php b/theme/admin/html/category/insert.php
new file mode 100644
index 0000000..be9fdfe
--- /dev/null
+++ b/theme/admin/html/category/insert.php
@@ -0,0 +1,6 @@
+<main id="main-content">
+<h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('insert_category')?></h1>
+<p><?=$Language->text('insert_category_desc')?></p>
+
+<?=$HTML?>
+</main>
diff --git a/theme/admin/html/category/item.php b/theme/admin/html/category/item.php
new file mode 100644
index 0000000..05212e7
--- /dev/null
+++ b/theme/admin/html/category/item.php
@@ -0,0 +1,33 @@
+<article class="item">
+	<header>
+		<h2><i class="fa fa-tag"></i><?=escapeHTML($CATEGORY['ATTR']['NAME'])?></h2>
+		<div>
+			<span class="brackets item-id">#<?=$CATEGORY['ATTR']['ID']?></span>
+			<time class="brackets" datetime="<?=$CATEGORY['ATTR']['TIME_INSERT']?>"><?=parseDatetime($CATEGORY['ATTR']['TIME_INSERT'], $Language->text('date_format'))?></time>
+			<span class="brackets"><?=$Language->text('posts')?>: <?=$COUNT['POST']?></span>
+			<span class="brackets"><?=$Language->text('categories')?>: <?=$COUNT['CHILDREN']?></span>
+		</div>
+	</header>
+	<blockquote cite="<?=$CATEGORY['URL']?>">
+		<?php if(isset($CATEGORY['FILE']['LIST'][0])): ?>
+			<img class="item-image" src="<?=$CATEGORY['FILE']['LIST'][0]?>" alt="" />
+		<?php endif; ?>
+		<p><?=excerpt($CATEGORY['BODY']['HTML']())?></p>
+	</blockquote>
+
+	<?php if($CATEGORY['ARGV']): ?>
+		<ul class="arguments">
+			<?php foreach($CATEGORY['ARGV'] as $argument => $value): ?>
+				<li><strong><?=$argument?>:</strong> <span><?=escapeHTML($value)?></span></li>
+			<?php endforeach; ?>
+		</ul>
+	<?php endif; ?>
+
+	<footer>
+		<ul>
+			<li><a href="<?=$CATEGORY['URL']?>" target="_blank" title="<?=$Language->text('select_category')?>"><i class="fa fa-external-link"></i><span class="hidden"><?=$Language->text('select_category')?></span></a></li>
+			<li><a href="<?=Application::getAdminURL("category/update.php?id={$CATEGORY['ATTR']['ID']}")?>" title="<?=$Language->text('update_category')?>"><i class="fa fa-pencil-square-o"></i><span class="hidden"><?=$Language->text('update_category')?></span></a></li>
+			<li><a href="<?=Application::getAdminURL("category/delete.php?id={$CATEGORY['ATTR']['ID']}")?>" title="<?=$Language->text('delete_category')?>"><i class="fa fa-trash-o"></i><span class="hidden"><?=$Language->text('delete_category')?></span></a></li>
+		</ul>
+	</footer>
+</article>
diff --git a/theme/admin/html/category/update.php b/theme/admin/html/category/update.php
new file mode 100644
index 0000000..fefaa18
--- /dev/null
+++ b/theme/admin/html/category/update.php
@@ -0,0 +1,6 @@
+<main id="main-content">
+<h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('update_category')?></h1>
+<p><?=$Language->text('update_category_desc')?></p>
+
+<?=$HTML?>
+</main>
diff --git a/theme/admin/html/main.php b/theme/admin/html/main.php
index 9a5de23..45cdc41 100644
--- a/theme/admin/html/main.php
+++ b/theme/admin/html/main.php
@@ -26,6 +26,7 @@
 					<?php if(Application::isAuthenticated()): ?>
 						<li><a href="<?=Application::getAdminURL()?>" title="<?=$Language->text('overview_dashboard_text')?>"><i class="fa fa-dashboard"></i><span>Dashboard</span></a></li>
 						<li><a href="<?=Application::getAdminURL('post/')?>" title="<?=$Language->text('post_overview')?>"><i class="fa fa-newspaper-o"></i><span><?=$Language->text('posts')?></span></a></li>
+						<li><a href="<?=Application::getAdminURL('category/')?>" title="<?=$Language->text('category_overview')?>"><i class="fa fa-tags"></i><span><?=$Language->text('categories')?></span></a></li>
 						<li><a href="<?=Application::getAdminURL('page/')?>" title="<?=$Language->text('page_overview')?>"><i class="fa fa-folder-open"></i><span><?=$Language->text('pages')?></span></a></li>
 						<li><a href="<?=Application::getAdminURL('user/')?>" title="<?=$Language->text('user_overview')?>"><i class="fa fa-users"></i><span><?=$Language->text('users')?></span></a></li>
 						<li><a href="<?=Application::getAdminURL('database.php')?>" title="<?=$Language->text('overview_database_text')?>"><i class="fa fa-database"></i><span><?=$Language->text('overview_database_text')?></span></a></li>
diff --git a/theme/admin/html/post/form.php b/theme/admin/html/post/form.php
index 346d6f4..4ae07bd 100644
--- a/theme/admin/html/post/form.php
+++ b/theme/admin/html/post/form.php
@@ -1,3 +1,18 @@
+<?php
+function categorySelectList($category_tree, $selected = NULL, $prefix = '') {
+	foreach($category_tree as $category) {
+		$option = '<option value="%s"%s>%s%s [%d]</option>';
+		$select = ($category['ID'] == $selected) ? ' selected' : '';
+
+		printf($option, $category['ID'], $select, $prefix, escapeHTML($category['NAME']), $category['ID']);
+
+		if(isset($category['CHILDS'])) {
+			# If there are children, call self and pass children array.
+			(__FUNCTION__)($category['CHILDS'], $selected, $prefix.'– ');
+		}
+	}
+}
+?>
 <?php if($FORM['INFO']): ?>
 	<div id="message-list-wrapper">
 		<ul id="message-list">
@@ -16,7 +31,7 @@
 		<label for="form_name">
 			<i class="fa fa-newspaper-o"></i><?=$Language->text('label_name')?></label>
 
-		<div class="form-grid-item first">
+		<div class="form-grid-item">
 			<input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" />
 		</div>
 
@@ -27,6 +42,16 @@
 			<input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" />
 		</div>
 
+		<label for="form_category">
+			<i class="fa fa-tag"></i><?=$Language->text('label_category')?></label>
+
+		<div class="form-grid-item">
+			<select id="form_category" name="category">
+				<option value="">[ –– <?=$Language->text('label_category')?> –– ]</option>
+				<?=categorySelectList($FORM['CATEGORY_TREE'], $FORM['DATA']['CATEGORY']);?>
+			</select>
+		</div>
+
 		<label for="form_user">
 			<i class="fa fa-user"></i><?=$Language->text('label_user')?></label>
 
diff --git a/theme/admin/html/post/item.php b/theme/admin/html/post/item.php
index ae06752..41991d5 100644
--- a/theme/admin/html/post/item.php
+++ b/theme/admin/html/post/item.php
@@ -4,6 +4,9 @@
 		<div>
 			<span class="brackets item-id">#<?=$POST['ATTR']['ID']?></span>
 			<a class="brackets" href="<?=Application::getAdminURL("user/update.php?id={$USER['ATTR']['ID']}")?>" title="<?=$Language->text('update_user')?>"><?=escapeHTML($USER['ATTR']['FULLNAME'])?></a>
+			<?php if($CATEGORY): ?>
+				<a class="brackets" href="<?=Application::getAdminURL("category/update.php?id={$CATEGORY['ATTR']['ID']}")?>" title="<?=$Language->text('update_category')?>"><?=escapeHTML($CATEGORY['ATTR']['NAME'])?></a>
+			<?php endif ?>
 			<time class="brackets" datetime="<?=$POST['ATTR']['TIME_INSERT']?>"><?=parseDatetime($POST['ATTR']['TIME_INSERT'], $Language->text('date_format'))?></time>
 		</div>
 	</header>
diff --git a/theme/default/html/category/item.php b/theme/default/html/category/item.php
new file mode 100644
index 0000000..9435581
--- /dev/null
+++ b/theme/default/html/category/item.php
@@ -0,0 +1,27 @@
+<?php
+#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
+# Category Item Template                     [Thomas Lange <code@nerdmind.de>] #
+#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
+#                                                                              #
+# [see documentation]                                                          #
+#                                                                              #
+#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
+?>
+<article class="item">
+	<header>
+		<h2 class="fa fa-tag">
+			<a title="<?=$Language->text('select_category')?>: »<?=escapeHTML($CATEGORY['ATTR']['NAME'])?>«" href="<?=$CATEGORY['URL']?>">
+				<?=escapeHTML($CATEGORY['ATTR']['NAME'])?>
+			</a>
+		</h2>
+		<span class="brackets info">
+			<?=$Language->text('posts')?>: <?=$COUNT['POST']?> –
+			<?=$Language->text('categories')?>: <?=$COUNT['CHILDREN']?>
+		</span>
+	</header>
+	<?php if($IS_ROOT): ?>
+	<blockquote cite="<?=$CATEGORY['URL']?>">
+		<?=$CATEGORY['BODY']['HTML']()?>
+	</blockquote>
+	<?php endif ?>
+</article>
diff --git a/theme/default/html/category/list.php b/theme/default/html/category/list.php
new file mode 100644
index 0000000..9fffb2b
--- /dev/null
+++ b/theme/default/html/category/list.php
@@ -0,0 +1,23 @@
+<?php
+#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
+# Category List Template                     [Thomas Lange <code@nerdmind.de>] #
+#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
+#                                                                              #
+# [see documentation]                                                          #
+#                                                                              #
+#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
+?>
+<h1><i class="fa fa-tags"></i><?=$Language->text('category_overview')?></h1>
+<p><?=$Language->text('category_list_title', $PAGINATION['THIS'])?></p>
+
+<?php if($LIST['CATEGORIES']): ?>
+	<div class="item-container category">
+		<?php foreach($LIST['CATEGORIES'] as $category): ?>
+			<?php echo $category; ?>
+		<?php endforeach; ?>
+	</div>
+<?php else: ?>
+	<p><?=$Language->text('category_list_empty')?></p>
+<?php endif ?>
+
+<?=$PAGINATION['HTML']?>
diff --git a/theme/default/html/category/main.php b/theme/default/html/category/main.php
new file mode 100644
index 0000000..86b50e0
--- /dev/null
+++ b/theme/default/html/category/main.php
@@ -0,0 +1,44 @@
+<?php
+#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
+# Category Main Template                     [Thomas Lange <code@nerdmind.de>] #
+#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
+#                                                                              #
+# [see documentation]                                                          #
+#                                                                              #
+#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
+?>
+<h1 id="category-heading"><i class="fa fa-tag"></i><?=escapeHTML($CATEGORY['ATTR']['NAME'])?></h1>
+<?php if($CATEGORIES && array_pop($CATEGORIES)): ?>
+	<ul class="category-heading-list">
+		<?php foreach($CATEGORIES as $category): ?>
+			<li><a href="<?=$category['URL']?>"><?=escapeHTML($category['ATTR']['NAME'])?></a></li>
+		<?php endforeach ?>
+	</ul>
+<?php endif ?>
+
+<div id="category-body">
+	<?=$CATEGORY['BODY']['HTML']()?>
+</div>
+
+<?php if(!empty($LIST['CATEGORIES'])): ?>
+	<div class="item-container category">
+		<?php foreach($LIST['CATEGORIES'] as $category): ?>
+			<?php echo $category; ?>
+		<?php endforeach; ?>
+	</div>
+<?php endif ?>
+
+<h2 id="category-posts-heading"><i class="fa fa-newspaper-o"></i><?=$Language->text('posts')?></h2>
+<div id="category-posts-page"><?=$Language->text('category_posts_page', $PAGINATION['THIS'])?></div>
+<?php if($LIST['POSTS']): ?>
+	<div class="item-container post">
+		<?php foreach($LIST['POSTS'] as $post): ?>
+			<?php echo $post; ?>
+		<?php endforeach; ?>
+	</div>
+	<?=$PAGINATION['HTML']?>
+<?php else: ?>
+	<div class="item-container post">
+		<?=$Language->text('category_empty')?>
+	</div>
+<?php endif ?>
diff --git a/theme/default/html/main.php b/theme/default/html/main.php
index e84618b..5a067ef 100644
--- a/theme/default/html/main.php
+++ b/theme/default/html/main.php
@@ -74,6 +74,11 @@ $BLOGMETA_DESC = escapeHTML($BLOGMETA['DESC']);
 						</a>
 					</li>
 					<li>
+						<a href="<?=Application::getCategoryURL()?>" title="<?=$Language->text('category_overview')?>">
+							<i class="fa fa-tags"></i><?=$Language->text('categories')?>
+						</a>
+					</li>
+					<li>
 						<a href="<?=Application::getPageURL()?>" title="<?=$Language->text('page_overview')?>">
 							<i class="fa fa-file-text-o"></i><?=$Language->text('pages')?>
 						</a>
diff --git a/theme/default/html/post/main.php b/theme/default/html/post/main.php
index 4b84ed9..328a614 100644
--- a/theme/default/html/post/main.php
+++ b/theme/default/html/post/main.php
@@ -17,6 +17,14 @@ $time = "<time datetime=\"{$POST['ATTR']['TIME_INSERT']}\" title=\"".parseDateti
 	<?=$POST['BODY']['HTML']()?>
 </div>
 
+<?php if($CATEGORIES): ?>
+	<ul class="category-list fa fa-tag">
+		<?php foreach($CATEGORIES as $category): ?>
+			<li><a href="<?=$category['URL']?>"><?=escapeHTML($category['ATTR']['NAME'])?></a></li>
+		<?php endforeach ?>
+	</ul>
+<?php endif ?>
+
 <section id="site-navi">
 
 	<?php if($POST['PREV']): ?>
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 {