⚡ fix: categories

layout/categories.ejs

@@ -1,17 +1,8 @@
 <section class="outer">
   <% if (site.categories.length){ %>
     <h1 class="page-type-title"><%= __('categories') %></h1>
-    <!-- <%- list_categories({show_count: theme.show_count}) %> -->
+    <div class="categories-box">
-    <ul class="category-list">
+      <%- list_categories() %>
-      <% site.categories.map(function(item){ %>
+    </div>
-        <% if(item.posts.length){ %> 
-          <a class="category-list-link" href="<%- config.root %><%- item.path %>" title="<%= item.name %>">
-            <li class="category-list-item">
-            <%= item.name %><i><%= item.posts.length %></i>
-            </li>
-          </a>
-        <% } %>
-      <% }); %>
-      </ul>
   <% } %>
 </section>

source-src/css/_partial/categories.styl

@@ -1,30 +1,25 @@
 // Categories
-
+.categories-box
-.category-list
+  max-width 320px
-  list-unstyled()
   margin-right -.5rem
   margin-left -.5rem
-  .category-list-item
+  border-left 1px solid #eee
-    margin: 10px 10px;
+  span
-    padding: 0 14px;
+    padding-left: 5px;
-    display: inline-block;
+    color: #aaa;
-    text-align: center;
+    font-size: 14px
-    height: 38px;
+  ul li, ol li
-    min-width: 80px;
+    list-unstyled()
-    line-height: 38px;
+    margin: 15px 0;
-    font-size: 1.5rem;
+    padding-left: 15px;
+    padding-bottom: 12px;
+    font-size: 16px;
     font-weight: 500;
-    border-radius: 5px;
     word-wrap: break-word;
-    cursor: pointer;
+    border-bottom: 1px solid #eee;
-    box-shadow: 0px 3px 5px rgba(0,0,0,0.08);
+    &:last-child
-    border: 1px solid #e7e7eb
+      margin-bottom 0
-    &:before
+      border-bottom 0 solid #000
-      content "\efde"
-      font-family remixicon
-      margin-right .5rem
-      display inline-block
-      vertical-align middle
     i 
       font-style normal
       margin-left 10px
@@ -35,10 +30,23 @@
     text-decoration: none 
     color: body-color
     &:hover
-      .category-list-item
+      opacity .8
-        border: 1px solid darken(water,20%)
+    &:before
-        box-shadow:  0 3px 5px water
+      content "\efde"
-        color: darken(water,50%);
+      font-family remixicon
-      &:before
+      margin-right .5rem
-        color: darken(water,50%);
+      display inline-block
-    
+      vertical-align middle
+  ul ul,ol ul,ul ol,ol ol
+    list-unstyled()
+    margin 0 20px
+  ul ul li,ol ul li,ul ol li,ol ol li
+    list-unstyled()
+    border: none;
+    padding-bottom: 0;
+.category-list-count:before, .tag-list-count:before, .archive-list-count:before
+  content: "(";
+.category-list-count:after, .tag-list-count:after, .archive-list-count:after
+  content: ")";
+ 
+