💄 style: list tags redesign

sass/main.scss

@@ -32,6 +32,7 @@
 @import 'parts/home-banner.scss';
 @import 'parts/footer.scss';
 @import 'parts/theme-switch.scss';
+@import 'parts/tags.scss';
 @import 'syntax/syntax-ayu-dark.scss';
 
 :root {

sass/parts/_cards.scss

@@ -66,7 +66,7 @@
     padding-bottom: 1rem;
 }
 .bloglist-table-row:hover {
-    box-shadow: 10px 10px 0px var(--border-color);
+    box-shadow: 0.5rem 0.5rem 0 var(--border-color);
 }
 .bloglist-links {
     text-decoration: none;

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

@@ -2,23 +2,20 @@
 
 {% block main_content %}
 
-{{ macros_page_header::page_header(title="Tags")}}
+{{ macros_page_header::page_header(title="Tags") }}
 
-<div class="tag-cloud">
-    <ul class="tags">
-        {% for term in terms %}
-        <div class="tags-item" id="{{ term.name }}">
-            <svg class="tags-item-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
-                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
-                <line x1="7" y1="7" x2="7.01" y2="7"></line>
-            </svg>
-            <a href="{{ term.permalink | safe }}">
-                {{ term.name }} ({{ term.pages | length }} post{{ term.pages | length | pluralize }})
-            </a>
-        </div>
-            {% endfor %}
-    </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 %}