From 9fc45f288d12ab0d0e54b58d151673b62706fd81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=93scar=20Fern=C3=A1ndez?=
 <welpo@users.noreply.github.com>
Date: Sat, 30 Dec 2023 17:42:26 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(tags):=20dynamically=20adjust?=
 =?UTF-8?q?=20tag=20list=20columns=20based=20on=20tag=20count=20(#233)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sass/parts/_tags.scss    | 32 ++++++++++++++++++++++++++++++--
 templates/tags/list.html |  3 ++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/sass/parts/_tags.scss b/sass/parts/_tags.scss
index c5774a4..077ac5f 100644
--- 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
index 0243353..a42dc50 100644
--- 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">