From e80c15bea0c8c68bc29d3677cab21ea0bfe86155 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 21 May 2018 23:15:54 +0100
Subject: [PATCH] Update tag styling, add links

---
 assets/sass/site.sass                |  8 ++++++++
 source/_includes/post/tags.html.twig | 21 ++++++++++++---------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/assets/sass/site.sass b/assets/sass/site.sass
index 8b15e899..c3983d1f 100644
--- a/assets/sass/site.sass
+++ b/assets/sass/site.sass
@@ -58,6 +58,14 @@ main ul
 svg
     fill: currentColor
 
+.element-invisible
+    position: absolute !important
+    clip: rect(1px, 1px, 1px, 1px)
+    overflow: hidden
+    height: 1px
+    width: 1px
+    word-wrap: normal
+
 @import 'components/listing'
 @import 'components/table'
 @import 'components/talk/slides'
diff --git a/source/_includes/post/tags.html.twig b/source/_includes/post/tags.html.twig
index d1cb6619..266b7238 100644
--- a/source/_includes/post/tags.html.twig
+++ b/source/_includes/post/tags.html.twig
@@ -1,13 +1,16 @@
 {% if page.tags %}
-    <div>
-        <p>
-            Tags:
-            {% for tag in page.tags|sort %}
-                <a href="{{ site.url }}/blog/tags/{{ tag|url_encode(true) }}" class="blue">
+    <h2 class="element-invisible">Tags</h2>
+
+    <ul class="list-reset flex flex-wrap">
+        {% for tag in page.tags|sort %}
+            <li>
+                <a
+                    href="/blog/tags/{{ tag }}"
+                    class="text-xs py-1 px-2 mr-1 mb-1 bg-grey-lighter text-grey leading-none no-underline hover:underline focus:underline"
+                >
                     {{- tag -}}
                 </a>
-                {%- if not loop.last %},{% endif %}
-            {% endfor %}
-        </p>
-    </div>
+            </li>
+        {% endfor %}
+    </ul>
 {% endif %}