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

Refactor global styles and episode card components for improved responsiveness; update border-radius and margin properties, and enhance button styles in podcast hero.

Browse source
This commit is contained in:
Mobin 2025-03-31 13:37:54 +03:30
parent 6c517172a0
commit e1e3aeb748
3 changed files with 52 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

15
app/globals.css
View file

@ -178,8 +178,6 @@ body {
position: relative;
overflow: hidden;
background: linear-gradient(var(--background), var(--background));
/* border-radius = border-parch-inner(padding + border-radius), we can also use variable, but im to lazy for that :))*/
border-radius: 1.15rem;
z-index: 1;
&:hover {
transition: 0.5s;
@ -189,13 +187,24 @@ body {
animation-play-state: running;
}
}
@apply rounded-xl;
}
.border-parch-inner {
overflow: hidden;
background: linear-gradient(var(--background), var(--background));
position: relative;
margin: 0.15rem;
margin: 0.05rem;
z-index: 1;
border-radius: 1rem;
@apply md:gap-6 gap-3;
}
.border-parch-inner-btn {
overflow: hidden;
background: linear-gradient(var(--background), var(--background));
position: relative;
margin: 0.1rem;
z-index: 1;
border-radius: 1rem;
@apply md:gap-6 gap-3;

76
components/episode-cards.tsx
View file

@ -74,45 +74,45 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
{episodes.map((episode) => (
<Card
key={episode.id}
className="flex relative justify-center items-center cursor-pointer border-parch">
<div className="flex flex-col md:gap-6 gap-3 border-parch-inner">
<div className="aspect-video w-full overflow-hidden">
<Image
src={episode.image || "/placeholder.svg"}
alt={episode.title}
width={200}
height={200}
className="h-full w-full object-cover transition-all hover:scale-105"
/>
</div>
<CardHeader className="md:px-6 px-2">
<CardTitle className="text-sm md:text-base">
{episode.title}
</CardTitle>
<CardDescription className="text-xs md:text-sm">
{episode.date}
</CardDescription>
</CardHeader>
<CardContent className="md:px-6 px-2 text-xs md:text-sm">
<p className="line-clamp-3 text-sm text-muted-foreground">
{episode.description}
</p>
</CardContent>
<CardFooter className="flex items-center justify-between md:px-6 px-2">
<div className="flex items-center text-muted-foreground text-xs md:text-sm">
<Clock className="ml-1 md:h-4 md:w-4 h-3.5 w-3.5" />
{episode.duration}
className="border-0 flex relative justify-center items-center cursor-pointer border-parch"
>
<div className="flex flex-col md:gap-6 gap-3 border-parch-inner">
<div className="aspect-video w-full overflow-hidden">
<Image
src={episode.image || "/placeholder.svg"}
alt={episode.title}
width={200}
height={200}
className="h-full w-full object-cover transition-all hover:scale-105"
/>
</div>
<Button
size="sm"
variant="ghost"
className="gap-1 text-xs md:text-sm"
>
پخش
<Play className="md:h-4 md:w-4 h-3.5 w-3.5" />
</Button>
</CardFooter>
<CardHeader className="md:px-6 px-2">
<CardTitle className="text-sm md:text-base">
{episode.title}
</CardTitle>
<CardDescription className="text-xs md:text-sm">
{episode.date}
</CardDescription>
</CardHeader>
<CardContent className="md:px-6 px-2 text-xs md:text-sm">
<p className="line-clamp-3 text-sm text-muted-foreground">
{episode.description}
</p>
</CardContent>
<CardFooter className="flex items-center justify-between md:px-6 px-2">
<div className="flex items-center text-muted-foreground text-xs md:text-sm">
<Clock className="ml-1 md:h-4 md:w-4 h-3.5 w-3.5" />
{episode.duration}
</div>
<Button
size="sm"
variant="ghost"
className="gap-1 text-xs md:text-sm"
>
پخش
<Play className="md:h-4 md:w-4 h-3.5 w-3.5" />
</Button>
</CardFooter>
</div>
</Card>
))}

4
components/podcast-hero.tsx
View file

@ -35,9 +35,9 @@ export function PodcastHero() {
<div className="flex flex-col gap-2 min-[400px]:flex-row">
<Button
size="lg"
className="border-parch [&::before]:!size-[12rem] cursor-pointer"
className="!rounded-md border-parch [&::before]:!size-[12rem] cursor-pointer"
>
<div className="border-parch-inner !bg-white text-blue-parch flex items-center p-2 !text-black ![background:white]">
<div className="!rounded-md !gap-2.5 border-parch-inner-btn !bg-white text-blue-parch flex items-center p-2 !text-black ![background:white]">
<span>اکنون گوش کن</span>
<Play className="h-4 w-4" />
</div>