parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

blog homepage responsive updated

Browse Source
This commit is contained in:
parsa aghaei 2024-10-20 10:11:23 +03:30
parent b0b3deb359
commit 6d83f43310
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(routes)/blog/components/home/Categories/Categories.tsx
View File

@ -26,7 +26,7 @@ export default function Categories({ data }: CategoriesProps) {
<Link
key={category.id}
href={`/blog/categories/${category.slug}`}
className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
className="flex flex-col w-[45%] items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
>
<div className="h-[200px] w-[200px] overflow-hidden">
<Image

8
src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
View File

@ -21,12 +21,12 @@ export default function FilteredPosts({ data }: FilteredPostsProps) {
</Link>
</div>
<div className="flex w-full flex-wrap justify-center gap-5">
<div className="flex w-full flex-wrap justify-center gap-5 lg:w-[37%]">
<div className="flex w-full flex-wrap justify-center gap-5 items-center">
<div className="flex w-full flex-wrap justify-center gap-5 md:w-[50%]">
{data.slice(1).map((post) => (
<div
key={post.id}
className="flex h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg md:w-[48%] lg:w-[45%]"
className="flex min-h-[200px] p-5 w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg"
>
<Link
href={`/blog/categories/${post.category.slug}`}
@ -44,7 +44,7 @@ export default function FilteredPosts({ data }: FilteredPostsProps) {
))}
</div>
<div className="relative flex h-[300px] w-full flex-col justify-center overflow-hidden rounded-md border sm:h-[400px] lg:h-auto lg:w-[60%]">
<div className="relative flex h-[300px] w-full flex-col justify-center overflow-hidden rounded-md border sm:h-[400px] md:w-[45%]">
<Image
src={data[0].featured_image}
alt={`${data[0].title} post featured_image`}