From 8982cdcf3c0fd34dbb177fb788d3aec4254f7c06 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 19 Dec 2018 21:34:19 +0000
Subject: [PATCH] Update button and tag styling

---
 assets/sass/components/button.sass              | 8 ++++++--
 source/_partials/pages/blog/read-more.html.twig | 8 +++-----
 source/_partials/post/tags.html.twig            | 5 +----
 tailwind.js                                     | 2 +-
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/assets/sass/components/button.sass b/assets/sass/components/button.sass
index 318dac97..c42256ca 100644
--- a/assets/sass/components/button.sass
+++ b/assets/sass/components/button.sass
@@ -1,6 +1,10 @@
 .button
-  @apply bg-blue inline-block rounded text-white px-4 py-2
+  @apply bg-blue border-blue border-2 inline-block rounded-lg text-white no-underline px-4 py-2
 
   &:active,
+  &:focus,
   &:hover
-    @apply bg-blue-dark
+    @apply bg-white text-blue
+
+  &:focus
+    @apply px-4 py-2 m-0
diff --git a/source/_partials/pages/blog/read-more.html.twig b/source/_partials/pages/blog/read-more.html.twig
index d791dc19..c8f917d0 100644
--- a/source/_partials/pages/blog/read-more.html.twig
+++ b/source/_partials/pages/blog/read-more.html.twig
@@ -1,6 +1,4 @@
-<a
-    href="{{ post.url }}"
-    class="inline-block bg-blue hover:bg-blue-dark focus:bg-blue-dark px-5 py-2 rounded-full no-underline hover:underline focus:underline text-white text-sm">
-        Read more
-        <span class="visuallyhidden">about {{ post.title }}</span>
+<a href="{{ post.url }}" class="button">
+    Read more
+    <span class="visuallyhidden">about {{ post.title }}</span>
 </a>
diff --git a/source/_partials/post/tags.html.twig b/source/_partials/post/tags.html.twig
index 1b8e7aaa..fc1b6f2c 100644
--- a/source/_partials/post/tags.html.twig
+++ b/source/_partials/post/tags.html.twig
@@ -4,10 +4,7 @@
     <ul class="list-reset flex flex-wrap">
         {% for tag in page.tags|sort %}
             <li>
-                <a
-                    href="/blog/tags/{{ tag }}"
-                    class="text-sm py-1 px-2 mr-1 mb-1 bg-grey-lighter text-grey-darker leading-none no-underline hover:underline focus:underline"
-                >
+                <a href="/blog/tags/{{ tag }}" class="text-sm py-1 px-2 mr-1 mb-1 bg-grey-lighter text-grey-darker leading-none no-underline hover:underline focus:bg-grey-darker focus:text-white">
                     {{- tag -}}
                 </a>
             </li>
diff --git a/tailwind.js b/tailwind.js
index 8df2d470..9b3aff36 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -282,7 +282,7 @@ module.exports = {
   modules: {
     appearance: ['responsive'],
     backgroundAttachment: ['responsive'],
-    backgroundColors: ['responsive', 'hover'],
+    backgroundColors: ['responsive', 'hover', 'focus'],
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],