✨ feat(tags): dynamically adjust tag list columns based on tag count (#…

…233)
welpo · Dec 30, 2023 · 9fc45f2 · 9fc45f2
1 parent d257e02
commit 9fc45f2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/sass/parts/_tags.scss b/sass/parts/_tags.scss
@@ -1,4 +1,4 @@
-.tag-cloud {
+#tag-cloud {
     margin-top: 4vmin;
 
     ul {
@@ -8,6 +8,34 @@
     }
 
     .tags-item {
-        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+}
+
+@mixin column-count($count) {
+    -webkit-column-count: $count;
+    -moz-column-count: $count;
+    column-count: $count;
+}
+
+.two-columns ul {
+    @include column-count(2);
+}
+
+.three-columns ul {
+    @include column-count(3);
+}
+
+@media (max-width: 1000px) {
+    .three-columns ul {
+        @include column-count(2);
+    }
+}
+
+@media (max-width: 600px) {
+
+    .two-columns ul,
+    .three-columns ul {
+        @include column-count(1);
     }
 }
diff --git a/templates/tags/list.html b/templates/tags/list.html
@@ -6,7 +6,8 @@
 
 {{ macros_page_header::page_header(title=title)}}
 
-<div class="tag-cloud">
+{% set tag_count = terms | length %}
+<div id="tag-cloud" class="{% if tag_count > 16 %}three-columns{% elif tag_count > 8 %}two-columns{% endif %}">
     <ul class="tags">
         {%- for term in terms -%}
             <li class="tags-item">