Update tag style and tag icon

src/components/Tag.astro

@@ -11,27 +11,31 @@ const { name, size = "sm" } = Astro.props;
 const slug = slugify(name);
 ---
 
-<li class={`inline-block ${size === "sm" ? "my-1" : "my-3 mx-1"}`}>
+<li
+  class={`inline-block ${
+    size === "sm" ? "my-1 underline-offset-4" : "my-3 mx-1 underline-offset-8"
+  }`}
+>
   <a
     href={`/tags/${slug}`}
-    class={`${size === "sm" ? "py-1 px-2 text-sm" : "p-2 text-lg"}`}
+    class={`${size === "sm" ? "pr-1 text-sm" : "pr-2 text-lg"} group`}
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      class={`${size === "sm" ? " scale-75" : "scale-125"}`}
+      class={`${size === "sm" ? " scale-75" : "scale-110"}`}
       ><path
-        d="M20 4H8.515a2 2 0 0 0-1.627.838l-4.701 6.581a.997.997 0 0 0 0 1.162l4.701 6.581A2 2 0 0 0 8.515 20H20c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 14H8.515l-4.286-6 4.286-6H20v12z"
+        d="M16.018 3.815 15.232 8h-4.966l.716-3.815-1.964-.37L8.232 8H4v2h3.857l-.751 4H3v2h3.731l-.714 3.805 1.965.369L8.766 16h4.966l-.714 3.805 1.965.369.783-4.174H20v-2h-3.859l.751-4H21V8h-3.733l.716-3.815-1.965-.37zM14.106 14H9.141l.751-4h4.966l-.752 4z"
       ></path>
     </svg>
-    <span>{name}</span>
+    &nbsp;<span>{name}</span>
   </a>
 </li>
 
 <style>
   a {
-    @apply bg-skin-card hover:bg-skin-card-muted rounded;
+    @apply underline decoration-dashed hover:text-skin-accent relative hover:-top-0.5 focus-visible:p-1;
   }
   a svg {
-    @apply w-6 h-6 text-skin-base scale-75;
+    @apply w-6 h-6 text-skin-base scale-95 opacity-80 -mr-5 group-hover:fill-skin-accent;
   }
 </style>