tweak style of icon hover

kjk · Jun 27, 2024 · 2afeb6e · 2afeb6e
1 parent d50eb6c
commit 2afeb6e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/frontend/src/Main.svelte b/frontend/src/Main.svelte
@@ -13,23 +13,23 @@
 <div class="flex items-center justify-between mx-4 mt-2 fixed right-0">
   <div class="flex">
     <a
-      class="px-1 py-1 mr-1 hover:bg-gray-100"
+      class="px-1 py-1 mr-1 icon-link"
       href="https://github.com/kjk/tools.arslexis.io"
       target="_blank"
       rel="noreferrer"
     >
       <GitHub></GitHub>
     </a>
     <a
-      class="px-1 py-1 mr-2 hover:bg-gray-100"
+      class="px-1 py-1 mr-2 icon-link"
       href="https://twitter.com/kjk"
       target="_blank"
       rel="noreferrer"
     >
       <Twitter></Twitter>
     </a>
     <a
-      class="mr-1 hover:bg-gray-100"
+      class="mr-1"
       href="https://blog.kowalczyk.info"
       target="_blank"
       rel="noreferrer"

diff --git a/frontend/src/base.css b/frontend/src/base.css
@@ -49,3 +49,8 @@ body {
 .gradient-bg-3 {
   background: linear-gradient(to right, #d1e9ff, #a8d8ff);
 }
+
+.icon-link {
+  @apply hover:ring-blue-700 hover:ring-2 hover:rounded-lg;
+  /* @apply hover:bg-gray-100; */
+}