style: add hover effect to blog post list card

jonathanyeong · jonathanyeong · commit 3f600efc00f5 · 2026-02-05T22:43:25.000-05:00
diff --git a/app/components/BlogPostListCard.vue b/app/components/BlogPostListCard.vue
@@ -25,7 +25,7 @@ const emit = defineEmits<{
 
 <template>
   <article
-    class="group relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
+    class="group relative hover:bg-bg-subtle transition-colors duration-150 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 -mx-4 px-4 -my-2 py-2 sm:-mx-6 sm:px-6 sm:-my-3 sm:py-3 sm:rounded-md"
   >
     <NuxtLink
       :to="`/blog/${path}`"

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ const emit = defineEmits<{`
`25`	`25`
`26`	`26`	`<template>`
`27`	`27`	`<article`
`28`		`- class="group relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"`
	`28`	`+ class="group relative hover:bg-bg-subtle transition-colors duration-150 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 -mx-4 px-4 -my-2 py-2 sm:-mx-6 sm:px-6 sm:-my-3 sm:py-3 sm:rounded-md"`
`29`	`29`	`>`
`30`	`30`	`<NuxtLink`
`31`	`31`	:to="`/blog/${path}`"