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

blog readingList is responsive now

Browse Source
This commit is contained in:
parsa aghaei 2024-10-02 16:28:52 +03:30
parent 162100b1a4
commit d5f6b3ba5a
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(routes)/blog/components/home/new/new.tsx
View File

@ -3,7 +3,7 @@ import Image from "next/image";
export default function New() { export default function New() {
return ( return (
<div className="flex w-full max-w-[95%] flex-wrap justify-between gap-5"> <div className="flex w-full max-w-[95%] flex-wrap justify-between gap-5">
<div className="relative flex h-[300px] sm:h-[400px] w-full flex-col justify-center overflow-hidden rounded-md border md:h-auto md:w-[60%]"> <div className="relative flex h-[300px] w-full flex-col justify-center overflow-hidden rounded-md border sm:h-[400px] md:h-auto md:w-[60%]">
<Image <Image
src={"/images/blog/posts/1.jpg"} src={"/images/blog/posts/1.jpg"}
alt="parsaaghayi's blog logo" alt="parsaaghayi's blog logo"
@ -39,7 +39,7 @@ export default function New() {
</div> </div>
<div className="flex w-full flex-col md:w-[35%] md:gap-2 lg:gap-2 xl:gap-5"> <div className="flex w-full flex-col md:w-[35%] md:gap-2 lg:gap-2 xl:gap-5">
<div className="flex w-full items-center justify-between border-b-2 pb-2 md:pb-5 lg:pb-6 xl:pb-10 lg:gap-8"> <div className="flex w-full items-center justify-between border-b-2 pb-2 md:pb-5 lg:gap-8 lg:pb-6 xl:pb-10">
<h2 className="text-[24px] font-[700] text-blog-text-default">New</h2> <h2 className="text-[24px] font-[700] text-blog-text-default">New</h2>
<p className="text-[16px] font-[400] text-blog-text-passive"> <p className="text-[16px] font-[400] text-blog-text-passive">
View all new View all new

14
src/app/(routes)/blog/components/home/reading-lists/readingList.tsx
View File

@ -2,7 +2,7 @@ import Image from "next/image";
export default function ReadingList() { export default function ReadingList() {
return ( return (
<div className="mb-5 flex w-full flex-wrap gap-10 max-w-[95%]"> <div className="mb-5 flex w-full max-w-[95%] flex-wrap gap-10">
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<h2 className="text-[36px] font-[700] text-blog-text-default"> <h2 className="text-[36px] font-[700] text-blog-text-default">
ReadingList ReadingList
@ -12,8 +12,8 @@ export default function ReadingList() {
</p> </p>
</div> </div>
<div className="flex w-full flex-wrap justify-center items-center gap-5"> <div className="flex w-full flex-wrap items-center justify-center gap-5">
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]"> <div className="flex w-[45%] 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%]">
<div className="h-[200px] w-[200px] overflow-hidden"> <div className="h-[200px] w-[200px] overflow-hidden">
<Image <Image
src={"/images/blog/reading-list/readinglist-1.jpg"} src={"/images/blog/reading-list/readinglist-1.jpg"}
@ -27,7 +27,7 @@ export default function ReadingList() {
</h3> </h3>
</div> </div>
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]"> <div className="flex w-[45%] 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%]">
<div className="h-[200px] w-[200px] overflow-hidden"> <div className="h-[200px] w-[200px] overflow-hidden">
<Image <Image
src={"/images/blog/reading-list/readinglist-2.jpg"} src={"/images/blog/reading-list/readinglist-2.jpg"}
@ -41,7 +41,7 @@ export default function ReadingList() {
</h3> </h3>
</div> </div>
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]"> <div className="flex w-[45%] 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%]">
<div className="h-[200px] w-[200px] overflow-hidden"> <div className="h-[200px] w-[200px] overflow-hidden">
<Image <Image
src={"/images/blog/reading-list/readinglist-3.jpg"} src={"/images/blog/reading-list/readinglist-3.jpg"}
@ -53,7 +53,7 @@ export default function ReadingList() {
<h3 className="text-[24px] font-[600] text-blog-text-default">SEO</h3> <h3 className="text-[24px] font-[600] text-blog-text-default">SEO</h3>
</div> </div>
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]"> <div className="flex w-[45%] 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%]">
<div className="h-[200px] w-[200px] overflow-hidden"> <div className="h-[200px] w-[200px] overflow-hidden">
<Image <Image
src={"/images/blog/reading-list/readinglist-4.jpg"} src={"/images/blog/reading-list/readinglist-4.jpg"}
@ -67,7 +67,7 @@ export default function ReadingList() {
</h3> </h3>
</div> </div>
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]"> <div className="flex w-[45%] 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%]">
<div className="h-[200px] w-[200px] overflow-hidden"> <div className="h-[200px] w-[200px] overflow-hidden">
<Image <Image
src={"/images/blog/reading-list/readinglist-5.jpg"} src={"/images/blog/reading-list/readinglist-5.jpg"}

2
src/app/(routes)/blog/page.tsx
View File

@ -5,7 +5,7 @@ import ReadingList from "./components/home/reading-lists/readingList";
export default async function Blog() { export default async function Blog() {
return ( return (
<div className="flex w-[1280px] items-center flex-col gap-[50px] md:gap-[100px]"> <div className="flex w-[1280px] flex-col items-center gap-[50px] md:gap-[100px]">
<New /> <New />
<ReadingList /> <ReadingList />
{/* <FilteredPosts /> {/* <FilteredPosts />