Adjust Dark Mode Styles for Home Page

This commit is contained in:
aftabrehan
2024-02-02 16:24:59 +05:00
parent f87e81c4d7
commit e96577e60e
7 changed files with 20 additions and 15 deletions

View File

@@ -11,7 +11,7 @@ interface cardProps {
export const Card = ({ link, imageUrl, title, description }: cardProps) => (
<Link
href={link}
className="w-full sm:max-w-[300px] h-[156px] xs:h-[168px] sm:h-[200px] flex flex-col justify-start items-start gap-3 sm:gap-4 p-4 sm:p-6 bg-white rounded-xl border border-gray-200 hover:shadow-card transition-all duration-200"
className="w-full sm:max-w-[300px] h-[156px] xs:h-[168px] sm:h-[200px] flex flex-col justify-start items-start gap-3 sm:gap-4 p-4 sm:p-6 rounded-xl dark:hover:bg-zinc-600/5 border border-gray-200 dark:border-opacity-15 dark:hover:border-opacity-30 hover:shadow-card outline-none transition-all duration-200"
>
<Image
alt={title}
@@ -22,10 +22,10 @@ export const Card = ({ link, imageUrl, title, description }: cardProps) => (
/>
<div className="flex flex-col justify-start items-start gap-2 sm:gap-3">
<h2 className="text-black text-md xs:text-lg sm:text-xl font-bold">
<h2 className="text-black dark:text-white text-md xs:text-lg sm:text-xl font-bold">
{title}
</h2>
<p className="text-zinc-700 text-opacity-60 text-sm font-medium line-clamp-2">
<p className="text-zinc-700 dark:text-neutral-400 text-opacity-60 text-sm line-clamp-2">
{description}
</p>
</div>