Improve terms list

4 files changed, 38 insertions, 9 deletions

diff --git a/assets/css/components/_posts_list.scss b/assets/css/components/_posts_list.scss
index 2fe0cf0..fd9eea7 100644
--- a/assets/css/components/_posts_list.scss
+++ b/assets/css/components/_posts_list.scss
@@ -4,14 +4,14 @@
 
 .posts-list-item {
   list-style: none;
+  padding: 0.4em 0;
+
   &:not(:last-child) {
     border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
   }
-  padding: 0.4em 0;
 }
 
 .posts-list-item-description {
   display: block;
   font-size: 0.8em;
 }
-
diff --git a/assets/css/components/_tags_list.scss b/assets/css/components/_tags_list.scss
new file mode 100644
index 0000000..0b8b331
--- /dev/null
+++ b/assets/css/components/_tags_list.scss
@@ -0,0 +1,28 @@
+.tags-list {
+  padding: 0;
+}
+
+.tags-list-item {
+  list-style: none;
+  padding: 0.4em 0;
+  &:not(:last-child) {
+    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
+  }
+}
+
+@media (min-width: 450px) {
+  .tags-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .tags-list-item {
+    width: calc(50% - 1em);
+    &:nth-child(even) {
+      margin-left: 1em;
+    }
+    &:nth-last-child(2) {
+      border: none;
+    }
+  }
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 51712e1..502fdee 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -13,6 +13,7 @@ $primary-color: {{ .Site.Params.style.primaryColor | default "#57cc8a" }};
 @import 'components/post';
 @import 'components/posts_list';
 @import 'components/tag';
+@import 'components/tags_list';
 
 // The last 'extra' import can optionally be overridden on a per project
 // basis by creating a <HUGO_PROJECT>/assets/css/_extra.scss file.
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index efce125..86519b6 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -1,16 +1,16 @@
 {{ define "main" }}
   <article>
     <h1>{{ .Title }}</h1>
-    <ul class="posts-list">
-      {{ range .Data.Terms.Alphabetical }}
-        <li class="posts-list-item">
-            <a class="posts-list-item-title" href="{{ .Page.Permalink }}">
+    <ul class="tags-list">
+      {{ range .Data.Terms.ByCount }}
+        <li class="tags-list-item">
+            {{ partial "icon.html" (dict "ctx" $ "name" "tag") }}
+            <a class="tags-list-item-title" href="{{ .Page.Permalink }}">
+              ({{ .Count }})
               {{ .Page.Title }}
-            </a> 
-            {{ .Count }}
+            </a>
         </li>
       {{ end }}
     </ul>
-    {{ partial "pagination.html" $ }}
   </article>
 {{ end }}