colors.

fezcode · fezcode · commit 65b4767033e4 · 2025-10-16T21:26:48.000+03:00
diff --git a/src/components/PostItem.js b/src/components/PostItem.js
@@ -19,9 +19,10 @@ const PostItem = ({ slug, title, date, updatedDate, category }) => {
 
   const categoryBadgeColorStyle = { backgroundColor: category === 'dev' ? 'var(--color-dev-badge)' : 'var(--color-takes-badge)' };
   const postBackgroundColorClass = category === 'dev' ? 'bg-dev-card-bg' : 'bg-takes-card-bg';
+  const postHoverBackgroundColorClass = category === 'dev' ? 'hover:bg-dev-card-bg-hover' : 'hover:bg-takes-card-bg-hover';
 
   return (
-    <Link to={`/blog/${slug}`} className={`block p-8 my-4 border border-gray-700/50 rounded-lg shadow-lg cursor-pointer transition-colors group ${postBackgroundColorClass} hover:bg-red-500/10`}>
+    <Link to={`/blog/${slug}`} className={`block p-8 my-4 border border-gray-700/50 rounded-lg shadow-lg cursor-pointer transition-colors group ${postBackgroundColorClass} ${postHoverBackgroundColorClass}`}>
       <article>
         <div className="flex items-center">
           <p className="text-sm text-gray-400">{formattedDate}</p>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -28,8 +28,10 @@ module.exports = {
         music: '#a855f7',
         series: '#ec4899',
         'title-hover': '#fdd4a6',
-        'dev-card-bg': 'rgba(68, 64, 60, 0.1)',
-        'takes-card-bg': 'rgba(6, 95, 70, 0.15)',
+        'dev-card-bg': 'rgba(68, 64, 60, 0.1)', // stone-900/10
+        'dev-card-bg-hover': 'rgba(120, 113, 108, 0.2)', // stone-500/20
+        'takes-card-bg': 'rgba(6, 95, 70, 0.15)', // emerald-900/15
+        'takes-card-bg-hover': 'rgba(16, 185, 129, 0.2)', // emerald-500/20
       },
       typography: (theme) => ({
         dark: {
