Skip to content

Commit fbef5c2

Browse files
wuttinanhiwuttinanhi
committed
update layout for responsive
1 parent 8ea4ba6 commit fbef5c2

File tree

2 files changed

+31
-27
lines changed

2 files changed

+31
-27
lines changed

‎src/pages/blog/index.astro‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,41 +26,43 @@ const posts = (await getCollection("blog")).sort(
2626
<Navbar />
2727

2828
<main class="flex flex-col w-full">
29-
<section class="flex flex-row w-full justify-center mt-20">
30-
<ul class="flex flex-col justify-center items-center basis-4/12">
29+
<section class="flex flex-row w-full justify-center mt-20 px-3">
30+
<ul class="flex flex-col justify-center items-center md:basis-4/12">
3131
{
3232
posts.map((post) => (
33-
<li class="py-5 mx-0 px-2 md:mx-0 min-w-[800px] max-w-[800px]">
33+
<li class="py-5 md:mx-0 md:min-w-[800px] md:max-w-[800px]">
3434
<a href={`/blog/${post.id}/`}>
35-
<div class="flex flex-row border-[1px] rounded-2xl p-5 items-start">
36-
<div class="pr-10 grow flex flex-col h-full">
37-
<h1 class="title text-2xl">{post.data.title}</h1>
35+
<div class="flex flex-row border-[1px] rounded-2xl items-start p-3 md:p-5">
36+
<div class="flex grow flex-col h-full basis-3/4 pr-3">
37+
<h1 class="title text-lg md:text-2xl">
38+
{post.data.title}
39+
</h1>
3840

39-
<p class="text-lg text-gray-500 grow">
41+
<p class="md:text-lg text-gray-500 grow hidden md:block">
4042
{post.data.description}
4143
</p>
4244

43-
<p class="shrink align-bottom mt-auto">
45+
<p class="align-bottom mt-auto">
4446
<FormattedDate date={post.data.pubDate} />
4547
</p>
4648
</div>
4749

48-
<div class="shrink">
50+
<div class="flex basis-1/4">
4951
{post.data.heroImage ? (
5052
<Image
5153
width={300}
5254
height={150}
5355
src={post.data.heroImage}
5456
alt=""
55-
class="rounded-2xl min-w-[300px]"
57+
class="rounded-2xl min-w-[180px] md:min-w-[300px]"
5658
/>
5759
) : (
5860
<Image
5961
width={300}
6062
height={150}
6163
src={DefaultHeroImage}
6264
alt=""
63-
class="rounded-2xl min-w-[300px]"
65+
class="rounded-2xl min-w-[180px] md:min-w-[300px]"
6466
/>
6567
)}
6668
</div>

‎src/pages/index.astro‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,24 +16,26 @@ import ThumbnailImage from "../assets/blog/first-post/thumbnail.png";
1616
<body>
1717
<Navbar />
1818

19-
<main class="px-10 md:px-[40rem] mt-20 mb-16">
20-
<h1 class="text-4xl pb-10">📖 Welcome to The Dream Book!</h1>
19+
<main class="flex flex-row p-5 justify-center mt-10">
20+
<div class="flex flex-col basis-11/12 w-full md:basis-4/12">
21+
<h1 class="text-4xl pb-10">📖 Welcome to The Dream Book!</h1>
2122

22-
<p class="text-lg mt-10">
23-
I wrote about what I do and what I learn here so that I don't forget it.
24-
I also want to share this knowledge with others. By documenting my
25-
experiences and insights, I hope to inspire and help those who may
26-
benefit from my journey. It's a wonderful opportunity to reflect on my
27-
growth and connect with others who share similar interests.
28-
</p>
23+
<p class="text-lg mt-10">
24+
I wrote about what I do and what I learn here so that I don't forget
25+
it. I also want to share this knowledge with others. By documenting my
26+
experiences and insights, I hope to inspire and help those who may
27+
benefit from my journey. It's a wonderful opportunity to reflect on my
28+
growth and connect with others who share similar interests.
29+
</p>
2930

30-
<Image
31-
width={1020}
32-
height={510}
33-
src={ThumbnailImage}
34-
alt=""
35-
class="rounded-2xl mt-20"
36-
/>
31+
<Image
32+
width={1020}
33+
height={510}
34+
src={ThumbnailImage}
35+
alt=""
36+
class="rounded-2xl mt-20"
37+
/>
38+
</div>
3739
</main>
3840

3941
<div class="mt-20">

0 commit comments

Comments
 (0)