feat: much better mobile view design (#11)

src/pages/page/[page].astro

@@ -15,7 +15,7 @@ const {page} = Astro.props;
 ---
 
 <MainGridLayout>
-    <div class="flex flex-col gap-4 mb-4">
+    <div class="transition flex flex-col rounded-[var(--radius-large)] bg-[var(--card-bg)] py-1 md:py-0 md:bg-transparent md:gap-4 mb-4">
         {page.data.map((entry: { data: { draft: boolean; title: string; tags: string[]; category: string; published: Date; image: string; description: string; }; slug: string; }) => {
             return (
                 <TitleCard
@@ -29,9 +29,8 @@ const {page} = Astro.props;
                     description={entry.data.description}
                     draft={entry.data.draft}
                 ></TitleCard>
-
             );
         })}
     </div>
     <Pagination class="mx-auto" page={page}></Pagination>
-</MainGridLayout>
+</MainGridLayout>

src/pages/posts/[...slug].astro

@@ -30,7 +30,7 @@ const { remarkPluginFrontmatter } = await entry.render();
 ---
 <MainGridLayout banner={entry.data.image} title={entry.data.title}>
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
-        <div class:list={["card-base z-10 px-4 md:px-9 pt-6 pb-4 relative w-full ",
+        <div class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
             {}
         ]}>
             <!-- word count and reading time -->