From b098f9bbcc73942fe2d263530295a730339cee57 Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Fri, 6 Dec 2024 10:07:50 +0900
Subject: [PATCH] design: adjust breakpoints to concise layout

---
 src/layouts/BlogPost.astro | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 9ab7c0b..ba14006 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -76,7 +76,7 @@ const toc = buildToc(headings);
         <section
                 class="self-center flex justify-center items-stretch w-full p-8 xl:p-0"
         >
-            <article class="self-center w-full max-w-screen-md pb-16">
+            <article class="self-center w-full lg:max-xl:max-w-screen-sm max-w-screen-md pb-16">
                 <section class="mb-4 image min-h-[20rem] w-full bg-cover bg-no-repeat bg-center" style={{ ...(thumbnail && { backgroundImage: `url("${thumbnail.src}")` }) }}>
 
                 </section>
@@ -121,8 +121,8 @@ const toc = buildToc(headings);
                         <Series posts={allPosts} series={series} selectedSlug={slug}/>}
                 <Comments client:only="solid-js"/>
             </article>
-            <section class="hidden self-stretch lg:block pt-[20rem] max-w-xs">
-                <div class="py-8 pl-8 sticky top-0">
+            <aside class="hidden self-stretch lg:block pt-[20rem] max-w-xs">
+                <div class="py-8 pl-4 sticky top-0">
                     <TableOfContents tocHeadings={toc} client:only="solid-js"/>
                 </div>
             </section>