💄 style: redesign tag pages

sass/parts/_tags.scss

@@ -6,7 +6,6 @@
     .taglist-table-row {
         padding: 2%;
         background-color: var(--navbar-color);
-        transition: 300ms;
         width: 28%;
         margin-right: 1%;
         margin-top: 1%;
@@ -52,3 +51,16 @@
         margin: 0
     }
 }
+
+.tag-cloud {
+    margin-top: 4vmin;
+
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    .tags-item {
+        margin-top: 1rem;
+    }
+}

templates/macros/list_title.html

@@ -1,16 +0,0 @@
-{% macro list_title(pages, tag_name=false) %}
-{% if tag_name %}
-    <div class="title-container section-title">Tag {{ term.name }}</div>
-{% else %}
-    <h1 class="page-title">All articles</h1>
-{% endif %}
-
-<ul class="posts">
-    {% for page in pages %}
-        <li class="post">
-            <div><a href="{{ page.permalink }}">{{ page.title }}</a></div>
-            <span class="meta">{{ macros_format_date::format_date(date=page.date) }}</span>
-        </li>
-    {% endfor %}
-</ul>
-{% endmacro list_title %}

templates/macros/set_title.html

@@ -16,7 +16,7 @@
     {% set suffix = page.title %}
 {% elif term.name %}
     {# Individual tags. #}
-    {% set suffix = term.name ~ " tag" %}
+    {% set suffix = term.name %}
 {% elif taxonomy.name %}
     {# List of tags. #}
     {% set suffix = taxonomy.name | capitalize %}

templates/tags/list.html

@@ -2,20 +2,19 @@
 
 {% block main_content %}
 
-{{ macros_page_header::page_header(title="Tags") }}
+{{ macros_page_header::page_header(title="All tags")}}
 
-<ul class="taglist-container">
-    {% for term in terms -%}
-        <section class="taglist-table-row">
-            <div class="bloglist-title">
-                <a href="{{ term.permalink }}"> {{ term.name }}</a>
+<div class="tag-cloud">
+    <ul class="tags">
+        {% for term in terms %}
+            <div class="tags-item">
+                <li id "{{ term.name }}"><a href="{{ term.permalink | safe }}">
+                    {{ term.name }}</a>
+                    <span> – {{ term.pages | length }} post{{ term.pages | length | pluralize }}</span>
+                </li>
             </div>
-
-            <div class="card-meta">
-                {{ term.pages | length }} post{{ term.pages | length | pluralize }}
-            </div>
-        </section>
-    {% endfor %}
-</ul>
+        {% endfor %}
+    </ul>
+</div>
 
 {% endblock main_content %}

templates/tags/single.html

@@ -2,6 +2,15 @@
 
 {% block main_content %}
 
-{{ macros_list_title::list_title(pages=term.pages, tag_name=term.name) }}
+{{ macros_page_header::page_header(title=term.name | title) }}
+
+{% set max = section.extra.max_posts | default(value=999999) %}
+{{ macros_list_posts::list_posts(posts=term.pages, max=max) }}
+
+<ul class="pagination">
+    <li class="page-item">
+        <a class="all-tags" href="{{ get_url(path="/tags/") }}">← All tags</a>
+    </li>
+</ul>
 
 {% endblock main_content %}