feat(ux): adapt post list layout to small devices

mateusfg7 · Jun 20, 2023 · 088ab9e · 088ab9e
1 parent 838ce70
commit 088ab9e
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/shared/components/post-list/index.tsx b/src/shared/components/post-list/index.tsx
@@ -22,18 +22,18 @@ export function PostList({ posts, separateByYear = false }: Props) {
       <div className="flex flex-col gap-7">
         {postsByYear.map(postsOfYear => (
           <div key={postsOfYear.year}>
-            <h1 className="mb-5 rounded-xl bg-neutral-50 p-3 text-2xl font-bold dark:bg-neutral-900">
+            <h1 className="mb-5 text-center md:text-left rounded-xl bg-neutral-50 p-3 text-2xl font-bold dark:bg-neutral-900">
               {postsOfYear.year}
             </h1>
-            <div className="flex flex-col gap-3">
+            <div className="flex flex-col my-5 md:my-0 gap-4 md:gap-3">
               {postsOfYear.posts.map((post, key) => (
                 <PostLink key={key} post={post} hideYear />
               ))}
             </div>
           </div>
         ))}
         <div>
-          <h1 className="mb-5 rounded-xl bg-neutral-50 p-3 text-2xl font-bold dark:bg-neutral-900">
+          <h1 className="mb-5 rounded-xl text-center md:text-left bg-neutral-50 p-3 text-2xl font-bold dark:bg-neutral-900">
             Others
           </h1>
           <div className="flex flex-col gap-3">