Update tag styling, add links

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'

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 %}