From 5c733563b2f9156e400ad3d1669cbf6cc498b488 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 25 Dec 2022 19:54:31 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/matery/LayoutBase.js | 2 +-
 themes/matery/LayoutSlug.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/themes/matery/LayoutBase.js b/themes/matery/LayoutBase.js
index bb4ea147..fded7106 100644
--- a/themes/matery/LayoutBase.js
+++ b/themes/matery/LayoutBase.js
@@ -50,7 +50,7 @@ const LayoutBase = props => {
   }
 
   return (
-        <div id="outer-wrapper" className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full overflow-hidden">
+        <div id="outer-wrapper" className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
 
             <CommonHead meta={meta} siteInfo={siteInfo} />
 
diff --git a/themes/matery/LayoutSlug.js b/themes/matery/LayoutSlug.js
index 0d872286..b0e775a5 100644
--- a/themes/matery/LayoutSlug.js
+++ b/themes/matery/LayoutSlug.js
@@ -45,12 +45,12 @@ export const LayoutSlug = props => {
             showTag={false}
         >
 
-            <div id='inner-wrapper' className='flex'>
-                <div className={'drop-shadow-xl max-w-4xl 2xl:ml-36'}>
+            <div id='inner-wrapper'>
+                <div className={`drop-shadow-xl max-w-4xl  ${show ? '2xl:ml-36' : ''}`}>
                     <div className="-mt-32 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
                         {lock && <ArticleLock validPassword={validPassword} />}
 
-                        {!lock && <div id="container" className="overflow-x-auto flex-grow md:w-full ">
+                        {!lock && <div id="container" className="overflow-x-auto md:w-full px-3 ">
                             {post?.type === 'Post' && <>
                                 <div className='px-10'>
                                     <ArticleInfo post={post} />

From 8b717ad209977d0c8ddcde6e0bbeebddc7211719 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 25 Dec 2022 20:57:00 +0800
Subject: [PATCH 2/2] =?UTF-8?q?toc=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/matery/LayoutSlug.js | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/themes/matery/LayoutSlug.js b/themes/matery/LayoutSlug.js
index b0e775a5..f11a2703 100644
--- a/themes/matery/LayoutSlug.js
+++ b/themes/matery/LayoutSlug.js
@@ -18,7 +18,6 @@ export const LayoutSlug = props => {
   const scrollListener = () => {
     const scrollY = window.pageYOffset
     const shouldShow = scrollY > 220 && post?.toc?.length > 0
-
     if (shouldShow !== show) {
       switchShow(shouldShow)
     }
@@ -46,7 +45,7 @@ export const LayoutSlug = props => {
         >
 
             <div id='inner-wrapper'>
-                <div className={`drop-shadow-xl max-w-4xl  ${show ? '2xl:ml-36' : ''}`}>
+                <div className={'drop-shadow-xl max-w-4xl'}>
                     <div className="-mt-32 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
                         {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -91,17 +90,23 @@ export const LayoutSlug = props => {
                         </div>}
                     </div>
                     {post.type === 'Post' && <ArticleAdjacent {...props} />}
+
+                    {post?.toc?.length > 0 && <div id='toc-wrapper' className='absolute top-0 w-full h-full xl:block hidden' >
+                        <div className='relative h-full'>
+                            <div className='float-right -mr-72 h-full mt-40'>
+                                <div className='sticky top-24'>
+                                    <Catalog toc={post.toc} />
+                                </div>
+                            </div>
+                        </div>
+                    </div>}
+
                 </div>
 
                 <div className='fixed bottom-28 right-4'>
                     <JumpToCommentButton />
                 </div>
 
-                <div id='toc-widget' className='w-60 hidden xl:block '>
-                    <div className='fixed top-24 overflow-auto'>
-                        {show && <Catalog toc={post.toc} />}
-                    </div>
-                </div>
             </div>
 
         </LayoutBase>