web/parch-cast
9
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Enhance styles for footer and episode cards, add transition effects, and adjust header layout for improved responsiveness

Browse source
This commit is contained in:
Mobin 2025-03-19 15:30:24 +03:30
parent ef3b0c9997
commit 8f5e28e6fb
4 changed files with 14 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/globals.css
View file

@ -165,6 +165,7 @@ body {
} }
.border-parch:hover { .border-parch:hover {
transition: 0.5s;
background: linear-gradient(var(--background), var(--background)) padding-box, background: linear-gradient(var(--background), var(--background)) padding-box,
linear-gradient(to right, #21c796, #0385ce, #0d40bf) border-box; linear-gradient(to right, #21c796, #0385ce, #0d40bf) border-box;
border: 1px solid transparent; border: 1px solid transparent;

2
components/episode-cards.tsx
View file

@ -74,7 +74,7 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
{episodes.map((episode) => ( {episodes.map((episode) => (
<Card <Card
key={episode.id} key={episode.id}
className="flex flex-col overflow-hidden pt-0 border-parch" className="flex flex-col overflow-hidden pt-0 border-parch cursor-pointer"
> >
<div className="aspect-video w-full overflow-hidden"> <div className="aspect-video w-full overflow-hidden">
<Image <Image

8
components/footer-section.tsx
View file

@ -51,25 +51,25 @@ export default function FooterSection() {
<div className="flex gap-4"> <div className="flex gap-4">
<Link <Link
href={"/"} href={"/"}
className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition" className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 border-parch transition"
> >
<Github size={16} /> <Github size={16} />
</Link> </Link>
<Link <Link
href={"/"} href={"/"}
className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition" className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 border-parch transition"
> >
<Twitter size={16} /> <Twitter size={16} />
</Link> </Link>
<Link <Link
href={"/"} href={"/"}
className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition" className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 border-parch transition"
> >
<Instagram size={16} /> <Instagram size={16} />
</Link> </Link>
<Link <Link
href={"/"} href={"/"}
className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition" className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 border-parch transition"
> >
<Youtube size={16} /> <Youtube size={16} />
</Link> </Link>

10
components/header.tsx
View file

@ -10,7 +10,8 @@ import ToggleLanguage from "./toggle-language";
export default function Header() { export default function Header() {
return ( return (
<div className="mx-auto backdrop-blur-xs left-1/2 -translate-x-1/2 fixed w-full z-10"> <div className="mx-auto backdrop-blur-xs left-1/2 -translate-x-1/2 fixed w-full z-10">
<header className="px-4 md:px-6 flex p-3 md:p-4 w-full shrink-0 items-center justify-between"> <header className="px-4 md:px-6 flex p-3 md:p-4 w-full shrink-0 items-center justify-between relative">
{/* Left Section */}
<div className="flex gap-2"> <div className="flex gap-2">
<Button variant="ghost" className="px-2 py-1"> <Button variant="ghost" className="px-2 py-1">
<Menu /> <Menu />
@ -23,12 +24,17 @@ export default function Header() {
<ModeToggle /> <ModeToggle />
<ToggleLanguage /> <ToggleLanguage />
</div> </div>
<Link href={"/"} className="hidden sm:flex items-center"> <Link
href={"/"}
className="absolute left-1/2 -translate-x-1/2 hidden sm:flex items-center"
>
<Image src={"/logo.png"} width={30} height={30} alt="logo" /> <Image src={"/logo.png"} width={30} height={30} alt="logo" />
<h1 className="font-bold tracking-tighter leading-normal pe-2 text-xl text-parch"> <h1 className="font-bold tracking-tighter leading-normal pe-2 text-xl text-parch">
پارچ کست پارچ کست
</h1> </h1>
</Link> </Link>
{/* Right Section */}
<div className="flex gap-2"> <div className="flex gap-2">
<Button variant="outline" className="px-2 py-1"> <Button variant="outline" className="px-2 py-1">
ورود ورود