From a91b413e4a8697e6998b479853ea8dbedf535c08 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 30 Jun 2021 08:00:00 +0100
Subject: [PATCH] Link hover and focus styling

---
 assets/css/components.pcss        | 12 +++++++++---
 source/_partials/footer.html.twig |  2 +-
 source/_partials/navbar.html.twig |  2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/assets/css/components.pcss b/assets/css/components.pcss
index eff65c35..31833979 100644
--- a/assets/css/components.pcss
+++ b/assets/css/components.pcss
@@ -1,10 +1,16 @@
 @layer components {
   .link {
-    @apply text-blue-800 dark:text-blue-400;
-    @apply text-decoration-blue-800 dark:text-decoration-blue-400;
-    text-decoration-line: underline;
+    @apply underline text-blue-800 hover:text-blue-900 dark:text-blue-400 dark:hover:text-white;
     text-decoration-thickness: 1px;
     text-underline-offset: 0.1em;
+
+
+    &:focus {
+      @apply no-underline;
+      outline-color: currentColor;
+      outline-offset: 2px;
+      outline-style: solid;
+    }
   }
 
   .markdown {
diff --git a/source/_partials/footer.html.twig b/source/_partials/footer.html.twig
index e6c25c25..e6ad9b1b 100644
--- a/source/_partials/footer.html.twig
+++ b/source/_partials/footer.html.twig
@@ -1,7 +1,7 @@
 <footer class="mt-20">
     <nav class="flex flex-wrap justify-center -mb-3">
         {% for link in site.menus.footer %}
-            <a class="mx-3 mb-3 text-base md:text-lg dark:text-white dark:text-decoration-white link" href="{{ link.href }}">{{ link.title }}</a>
+            <a class="mx-3 mb-3 text-base md:text-lg dark:text-white hover:text-gray-900 dark:hover:text-blue-400 link" href="{{ link.href }}">{{ link.title }}</a>
         {% endfor %}
     </nav>
 </footer>
diff --git a/source/_partials/navbar.html.twig b/source/_partials/navbar.html.twig
index bcb7cd27..e154d649 100644
--- a/source/_partials/navbar.html.twig
+++ b/source/_partials/navbar.html.twig
@@ -21,7 +21,7 @@
                 <nav class="flex items-center mt-4 space-x-6 md:mt-0 md:flex-row">
                     {% for item in site.menus.main %}
                         {% set is_active = page.url matches '#' ~ item.is_active ~ '#' %}
-                        <a class="text-black dark:text-white border-b-3 py-2 {{ is_active ? 'border-blue-800 dark:border-blue-400' : 'border-transparent' }}" href="{{ item.href }}">{{ item.title }}</a>
+                        <a class="text-black dark:text-white border-b-3 py-2 hover:border-gray-300 {{ is_active ? 'border-blue-800 dark:border-blue-400' : 'border-transparent' }}" href="{{ item.href }}">{{ item.title }}</a>
                     {% endfor %}
                 </nav>
             </div>