change hover color on blog tags

AndrewDTR · Oct 21, 2024 · 1083ca7 · 1083ca7
1 parent 37086e4
commit 1083ca7
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/layouts/Blog.astro b/src/layouts/Blog.astro
@@ -27,7 +27,7 @@ const imgLink = `${Astro.site.origin}/og${Astro.url.pathname.replace(/\/$/, "")}
           Tags:
           {frontmatter.tags.map((tag) => (
             <a href={`/tags/${tag}`}>
-              <code>{tag}</code>
+              <code class="tag-code">{tag}</code>
             </a>
           ))}
         </p>
@@ -95,5 +95,13 @@ const imgLink = `${Astro.site.origin}/og${Astro.url.pathname.replace(/\/$/, "")}
     .tags a {
       text-decoration: none;
     }
+
+    .tag-code {
+      transition: background-color 0.2s;
+    }
+
+    .tag-code:hover {
+      background-color: #555f6a;
+    }
   </style>
 </BaseLayout>