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 {