feat: optimized blog layout

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "astro-erudite",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "astro-erudite",
-      "version": "1.1.5",
+      "version": "1.1.6",
       "dependencies": {
         "@astrojs/check": "^0.7.0",
         "@astrojs/markdown-remark": "^5.2.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-erudite",
   "type": "module",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "private": true,
   "scripts": {
     "dev": "astro dev",

src/components/Breadcrumbs.astro

@@ -17,12 +17,13 @@ export interface BreadcrumbItem {
 
 interface Props {
   items: BreadcrumbItem[]
+  class?: string
 }
 
-const { items } = Astro.props
+const { items, class: className } = Astro.props
 ---
 
-<Breadcrumb>
+<Breadcrumb className={className}>
   <BreadcrumbList>
     <BreadcrumbItem>
       <BreadcrumbLink href="/">

src/components/PostNavigation.astro

@@ -7,7 +7,7 @@ import { Icon } from 'astro-icon/components'
 const { prevPost, nextPost } = Astro.props
 ---
 
-<div class="flex flex-col gap-4 sm:flex-row">
+<div class="col-start-2 flex flex-col gap-4 sm:flex-row">
   <Link
     href={prevPost ? `/blog/${prevPost.slug}` : '#'}
     class={cn(

src/components/TableOfContents.astro

@@ -37,7 +37,10 @@ function buildToc(headings: Heading[]): Heading[] {
 }
 ---
 
-<details open class="group block rounded-xl border p-4 xl:hidden">
+<details
+  open
+  class="group col-start-2 mx-4 block rounded-xl border p-4 xl:hidden"
+>
   <summary
     class="flex cursor-pointer items-center justify-between text-xl font-semibold"
   >
@@ -47,7 +50,11 @@ function buildToc(headings: Heading[]): Heading[] {
       class="size-5 transition-transform group-open:rotate-180"
     />
   </summary>
-  <ScrollArea client:load className="flex max-h-64 flex-col overflow-y-auto" type="always">
+  <ScrollArea
+    client:load
+    className="flex max-h-64 flex-col overflow-y-auto"
+    type="always"
+  >
     <nav>
       <ul class="pt-3">
         {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
@@ -57,12 +64,12 @@ function buildToc(headings: Heading[]): Heading[] {
 </details>
 
 <nav
-  class="sticky top-[5.5rem] hidden h-0 w-[calc(50vw-50%-4rem)] translate-x-[calc(-100%-2em)] text-xs leading-4 xl:block"
+  class="sticky top-[5.5rem] col-start-1 hidden h-[calc(100vh-5.5rem)] text-xs leading-4 xl:block"
 >
-  <div class="flex justify-end pr-6">
+  <div class="flex justify-end">
     <ScrollArea client:load className="max-h-[calc(100vh-8rem)]" type="always">
       <ul
-        class="flex flex-col justify-end gap-y-2 overflow-y-auto pr-8"
+        class="flex flex-col justify-end gap-y-2 overflow-y-auto px-8"
         id="toc-container"
       >
         <li>

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

@@ -1,6 +1,5 @@
 ---
 import Breadcrumbs from '@/components/Breadcrumbs.astro'
-import Container from '@/components/Container.astro'
 import Link from '@/components/Link.astro'
 import PostNavigation from '@/components/PostNavigation.astro'
 import TableOfContents from '@/components/TableOfContents.astro'
@@ -59,14 +58,16 @@ const authors = await parseAuthors(post.data.authors ?? [])
   description={post.data.description}
   image={post.data.image?.src ?? '/static/1200x630.png'}
 >
-  <Container class="flex flex-col gap-y-6">
+  <section
+    class="grid grid-cols-[minmax(0px,1fr)_min(768px,100%)_minmax(0px,1fr)] gap-y-6 *:px-4"
+  >
     <Breadcrumbs
       items={[
         { href: '/blog', label: 'Blog', icon: 'lucide:archive' },
         { label: post.data.title, icon: 'lucide:file-text' },
       ]}
+      class="col-start-2"
     />
-
     {
       post.data.image && (
         <Image
@@ -74,14 +75,13 @@ const authors = await parseAuthors(post.data.authors ?? [])
           alt={post.data.title}
           width={1200}
           height={630}
-          class="object-cover"
+          class="col-span-full mx-auto w-full max-w-[1000px] object-cover"
         />
       )
     }
-
-    <section class="flex flex-col gap-6 text-center">
-      <div>
-        <h1 class="mb-4 text-4xl font-bold leading-tight sm:text-5xl">
+    <section class="col-start-2 flex flex-col gap-y-6 text-center">
+      <div class="flex flex-col gap-y-4">
+        <h1 class="text-4xl font-bold leading-tight sm:text-5xl">
           {post.data.title}
         </h1>
 
@@ -125,7 +125,7 @@ const authors = await parseAuthors(post.data.authors ?? [])
             <span>{readingTime(post.body)}</span>
           </div>
         </div>
-        <div class="mt-4 flex flex-wrap justify-center gap-2">
+        <div class="flex flex-wrap justify-center gap-2">
           {
             post.data.tags && post.data.tags.length > 0 ? (
               post.data.tags.map((tag) => (
@@ -151,12 +151,14 @@ const authors = await parseAuthors(post.data.authors ?? [])
 
     {headings.length > 0 && <TableOfContents headings={headings} />}
 
-    <article class="prose prose-neutral max-w-none dark:prose-invert">
+    <article
+      class="prose prose-neutral col-start-2 max-w-none dark:prose-invert"
+    >
       <Content />
     </article>
 
     <PostNavigation prevPost={prevPost} nextPost={nextPost} />
-  </Container>
+  </section>
 
   <Button
     variant="outline"