Skip to content

Fix: Article title disappears on hover in dark mode #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sameezy667 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix: Article title disappears on hover in dark mode #55

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions components/blog-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ interface BlogCardProps {
export default function BlogCard({ post }: BlogCardProps) {
return (
<Link href={`/a/${post.slug}`} className="group h-full">
<article className="flex flex-col h-full bg-white shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10 relative rounded-lg">
<article className="flex flex-col h-full bg-white dark:bg-gray-800 shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10 relative rounded-lg">
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

git ls-files components/blog-card.tsx

Repository: StabilityNexus/StableViewpoints

Length of output: 99

🏁 Script executed:

# Get file size first
wc -l components/blog-card.tsx

Repository: StabilityNexus/StableViewpoints

Length of output: 102

🏁 Script executed:

# Read the blog-card.tsx file
cat -n components/blog-card.tsx | head -60

Repository: StabilityNexus/StableViewpoints

Length of output: 2971

🏁 Script executed:

# Search for Tailwind config files
fd -e config.ts -e config.js -e tailwind.config.ts -e tailwind.config.js

Repository: StabilityNexus/StableViewpoints

Length of output: 93

🏁 Script executed:

# Search for any custom utility definitions for border-gradient
rg "border-gradient" -A 2 -B 2

Repository: StabilityNexus/StableViewpoints

Length of output: 4560

🏁 Script executed:

cat -n tailwind.config.ts

Repository: StabilityNexus/StableViewpoints

Length of output: 3708

Remove non-functional border-gradient-to-r classes; use standard Tailwind border styling instead.

The border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10 classes on line 22 are not standard Tailwind CSS utilities and are not defined in the project's tailwind.config.ts. These classes will be ignored by Tailwind and provide no styling. Replace with a standard Tailwind border color utility (e.g., border-gray-200 dark:border-gray-700) or implement gradient borders using CSS if gradient borders are intentional.

🤖 Prompt for AI Agents 
In components/blog-card.tsx around line 22, the classes "border-gradient-to-r
from-[#228B22]/10 to-[#FFBF00]/10" are not valid Tailwind utilities in this
project and are ignored; replace them with a standard Tailwind border utility
such as "border-gray-200 dark:border-gray-700" to apply a visible border, or if
a gradient border is required implement it via a custom CSS class (defined in a
stylesheet or tailwind.config.ts) and apply that class instead.


{post.featured && (
<div className="absolute top-3 right-3 z-20">
Expand All @@ -44,14 +44,14 @@ export default function BlogCard({ post }: BlogCardProps) {
</div>

<div className="flex flex-col flex-grow p-6">
<h2 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:bg-gradient-to-r group-hover:from-[#228B22] group-hover:to-[#91A511] group-hover:bg-clip-text group-hover:text-transparent transition-all duration-300">
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-3 line-clamp-2 group-hover:bg-gradient-to-r group-hover:from-[#228B22] group-hover:to-[#91A511] dark:group-hover:from-[#32CD32] dark:group-hover:to-[#FFD700] group-hover:bg-clip-text group-hover:text-transparent transition-all duration-300">
{post.title}
</h2>

<p className="text-gray-600 mb-4 line-clamp-3">{post.excerpt}</p>
<p className="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">{post.excerpt}</p>

<div className="mt-auto flex items-center justify-between text-sm text-gray-500">
<div className="flex items-center gap-1 group-hover:text-[#228B22] transition-colors">
<div className="mt-auto flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
<div className="flex items-center gap-1 group-hover:text-[#228B22] dark:group-hover:text-[#32CD32] transition-colors">
<User className="w-4 h-4" />
<span>{post.author}</span>
</div>
Expand Down