From b33a942766ce80e15f0a0b457d5562fb084563f2 Mon Sep 17 00:00:00 2001
From: welpo <welpo@users.noreply.github.com>
Date: Wed, 1 Mar 2023 00:57:44 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20use=20cards/boxes=20for?=
 =?UTF-8?q?=20tag=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sass/parts/_tags.scss            | 54 ++++++++++++++++++++++++++++++++
 templates/macros/list_title.html | 14 ++++-----
 templates/tags/list.html         | 34 ++++++++------------
 3 files changed, 74 insertions(+), 28 deletions(-)
 create mode 100644 sass/parts/_tags.scss

diff --git a/sass/parts/_tags.scss b/sass/parts/_tags.scss
new file mode 100644
index 0000000..9e5125a
--- /dev/null
+++ b/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
+    }
+}
diff --git a/templates/macros/list_title.html b/templates/macros/list_title.html
index 0964727..e0d4ae1 100644
--- a/templates/macros/list_title.html
+++ b/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 %}
diff --git a/templates/tags/list.html b/templates/tags/list.html
index b20b537..02dc0e3 100644
--- a/templates/tags/list.html
+++ b/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 %}