Improve category design

2 files changed, 13 insertions, 4 deletions

diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index b3e76af..b34ae88 100755
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -12,10 +12,11 @@
     <ul>
     {{ $baseurl := .Site.BaseURL }}
     {{ $data := .Data }}
-    {{ range $key,$value := .Data.Terms.ByCount }}
+    {{ range $key,$value := .Data.Terms.Alphabetical }}
       <li>
         <a href="{{ $baseurl }}{{ $data.Plural }}/{{ $value.Name | urlize }}">
-          {{ $value.Name }}
+          <i class="fa fa-angle-right icon" aria-hidden="true"></i>
+          {{ humanize $value.Name }}
           <div class="count">{{ $value.Count }} posts</div>
         </a>
       </li>
diff --git a/static/css/styles.css b/static/css/styles.css
index 4267190..2a0dc74 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -316,17 +316,25 @@ dt {
 */
 .categories {
   padding: 0px 10px 0px 10px;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
+}
+
+.categories ul {
+  list-style-type: none;
+  margin: 0px;
 }
 
 .categories li {
-  padding: 12px;
+  padding: 10px;
 }
 
 .categories li:hover {
   background-color: #e3e3e3;
 }
 
+.categories .icon {
+  margin-right: 15px;
+}
 
 .categories .count {
   float: right;