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;

4
components/episode-cards.tsx
View file

@ -74,7 +74,8 @@ 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">
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
@ -112,7 +113,6 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
<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>