💄 style: use cards/boxes for tag list

sass/parts/_tags.scss

@@ -0,0 +1,54 @@
+.taglist-container {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+
+    .taglist-table-row {
+        padding: 2%;
+        background-color: var(--navbar-color);
+        transition: 300ms;
+        width: 28%;
+        margin-right: 1%;
+        margin-top: 1%;
+
+        .card-meta {
+            margin-bottom: 2.3rem;
+        }
+
+        &:hover {
+            box-shadow: 0.5rem 0.5rem 0 var(--border-color);
+        }
+    }
+
+    @media only screen and (max-width: 600px) {
+        .taglist-table-row {
+            width: 100%;
+        }
+    }
+}
+
+.posts {
+    padding: 0;
+    margin-top: 1.2rem;
+
+    .post {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 0.5rem;
+    }
+
+    .title {
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+
+    .date {
+        display: block;
+    }
+
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0
+    }
+}

templates/macros/list_title.html

@@ -1,16 +1,16 @@
 {% macro list_title(pages, tag_name=false) %}
 {% if tag_name %}
-    <h1 class="title-container">Entries tagged - "{{ term.name }}"</h1>
+    <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">
-    <a href="{{ page.permalink }}">{{ page.title }}</a>
-    <span class="meta">{{ macros_format_date::format_date(date=page.date) }}</span>
-</li>
-{% endfor %}
+    {% 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/tags/list.html

@@ -4,26 +4,18 @@
 
 {{ macros_page_header::page_header(title="Tags") }}
 
-<div class="tags">
-    <ul class="list-with-title">
-        {% for term in terms -%}
-        <li>
-            <h2 class="listing-title"><a href="#{{ term.name }}">{{ term.name }}</a></h2>
-            <ul class="listing">
-                {% for page in term.pages -%}
-                <li class="listing-item">
-                    <a href="{{ page.permalink }}" title="{{ page.title }}">{{ page.title }}</a>
-                    <div class="post-time">
-                        <span class="date">
-                            {{ macros_format_date::format_date(date=page.date) }}
-                        </span>
-                    </div>
-                </li>
-                {% endfor %}
-            </ul>
-            {% endfor %}
-        </li>
-    </ul>
-</div>
+<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>
+
+            <div class="card-meta">
+                {{ term.pages | length }} post{{ term.pages | length | pluralize }}
+            </div>
+        </section>
+    {% endfor %}
+</ul>
 
 {% endblock main_content %}