Improve terms list

3 files changed, 31 insertions, 2 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.