coloring

fezcode · fezcode · commit 9226059523dc · 2025-11-03T21:15:20.000+03:00
diff --git a/src/components/LogCard.js b/src/components/LogCard.js
@@ -30,38 +30,47 @@ const categoryStyles = {
   Book: {
     backgroundColor: colors['book-alpha-10'],
     borderColor: colors['book-alpha-50'],
+    textColor: colors.book,
   },
   Movie: {
     backgroundColor: colors['movie-alpha-10'],
     borderColor: colors['movie-alpha-50'],
+    textColor: colors.movie,
   },
   Game: {
     backgroundColor: colors['game-alpha-10'],
     borderColor: colors['game-alpha-50'],
+    textColor: colors.game,
   },
   Article: {
     backgroundColor: colors['article-alpha-10'],
     borderColor: colors['article-alpha-50'],
+    textColor: colors.article,
   },
   Music: {
     backgroundColor: colors['music-alpha-10'],
     borderColor: colors['music-alpha-50'],
+    textColor: colors.music,
   },
   Series: {
     backgroundColor: colors['series-alpha-10'],
     borderColor: colors['series-alpha-50'],
+    textColor: colors.series,
   },
   Food: {
     backgroundColor: colors['food-alpha-10'],
     borderColor: colors['food-alpha-50'],
+    textColor: colors.food,
   },
   Websites: {
     backgroundColor: colors['websites-alpha-10'],
     borderColor: colors['websites-alpha-50'],
+    textColor: colors.websites,
   },
   Tools: {
     backgroundColor: colors['tools-alpha-10'],
     borderColor: colors['tools-alpha-50'],
+    textColor: colors.tools,
   },
 };
 
@@ -83,6 +92,7 @@ const LogCard = ({ log, index, totalLogs }) => {
   } = log;
 
   const cardStyle = categoryStyles[category] || {};
+  const detailTextColor = colors[category.toLowerCase() + '-light'];
 
   const renderStars = (rating) => {
     const stars = [];
@@ -120,15 +130,16 @@ const LogCard = ({ log, index, totalLogs }) => {
         <div>
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center">
-              <div className="text-2xl mr-4">{categoryIcons[category]}</div>
+              <div className="text-2xl mr-4" style={{ color: detailTextColor }}>{categoryIcons[category]}</div>
               <h2
-                className={`text-xl font-normal group-hover:text-${category.toLowerCase()}`}
+                className={`text-xl font-normal`}
+                style={{ color: cardStyle.textColor }}
               >
                 {title}
               </h2>
             </div>
           </div>
-          <div className="text-sm text-gray-400 mb-4">
+          <div className="text-sm mb-4" style={{ color: detailTextColor }}>
             {author && <div>Author: {author}</div>}
             {director && <div>Director: {director}</div>}
             {platform && <div>Platform: {platform}</div>}
diff --git a/src/config/colors.js b/src/config/colors.js
@@ -16,6 +16,15 @@ module.exports = {
   food: '#84cc16', // lime-500
   websites: '#f472b6', // pink-400
   tools: '#facc15', // yellow-400
+  'book-light': '#93c5fd', // blue-300
+  'movie-light': '#fca5a5', // red-300
+  'game-light': '#86efac', // green-300
+  'article-light': '#fdba74', // orange-300
+  'music-light': '#d8b4fe', // purple-300
+  'series-light': '#fbcfe8', // pink-300
+  'food-light': '#bef264', // lime-300
+  'websites-light': '#f9a8d4', // pink-300
+  'tools-light': '#fde047', // yellow-300
   'title-hover': '#fdd4a6', // orange-200
   'markdown-title-color': '#fed7aa', // orange-200
   'markdown-hx-color': '#ffedd5', // orange-100
diff --git a/src/index.css b/src/index.css
@@ -72,10 +72,17 @@ code {
   --color-takes-badge: #065f46; /* emerald-800 */
   --color-series-badge: #e11d48; /* rose-600 */
   --color-dnd-badge: #583fa3; /* violet-400 */
+  --fzcdx-background: #ffffff;
+  --fzcdx-text-primary: #2d2d2d;
+  --fzcdx-text-secondary: #4b5563;
+  --fzcdx-primary: #f87171;
+  --fzcdx-secondary: #fb923c;
+  --fzcdx-accent: #34d399;
+  --fzcdx-spanner: #e89b5d;
 }
 
 @media (max-width: 768px) {
   body {
     font-family: serif !important;
   }
-}
+}
diff --git a/src/pages/BlogPage.js b/src/pages/BlogPage.js
@@ -150,7 +150,7 @@ const BlogPage = () => {
             <ArrowLeftIcon className="text-xl" /> Back to Home
           </Link>
           <h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl">
-            From the Blog
+            From the <span style={{ color: 'var(--fzcdx-spanner)' }}>Blog</span>
           </h1>
           <p className="mt-6 text-lg leading-8 text-gray-300">
             Catch up on the latest news and insights.
