From f57e804bcf3cd362486ede49374e48ea0ecb9ddd Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Tue, 27 Dec 2022 11:28:20 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=B8=80=E7=82=B9=E5=8A=A8=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ThemeSwitch.js                 |  2 +-
 themes/matery/LayoutSlug.js               | 25 ++++++++++++++++++++---
 themes/matery/components/HeaderArticle.js |  8 +++++++-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index 4e84f36f..fe9b1de7 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -19,7 +19,7 @@ export function ThemeSwitch() {
                 <div className="p-2 flex items-center">
                     <i className='fas fa-arrows cursor-move px-2' />
                     {/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */}
-                    <select onChange={onSelectChange} name="cars" className='text-white bg-black uppercase'>
+                    <select onChange={onSelectChange} name="cars" className='text-white bg-black uppercase cursor-pointer'>
                         {ALL_THEME.map(t => {
                           const selected = t === theme
                           return <option key={t} value={t} selected={selected}>{t}</option>
diff --git a/themes/matery/LayoutSlug.js b/themes/matery/LayoutSlug.js
index 1eb6e978..db78b172 100644
--- a/themes/matery/LayoutSlug.js
+++ b/themes/matery/LayoutSlug.js
@@ -51,7 +51,13 @@ export const LayoutSlug = props => {
 
                         {!lock && <div id="container" className="overflow-x-auto md:w-full px-3 ">
                             {post?.type === 'Post' && <>
-                                <div className='px-10'>
+                                <div
+                                    data-aos="fade-down"
+                                    data-aos-duration="500"
+                                    data-aos-easing="ease-in-out"
+                                    data-aos-once="false"
+                                    data-aos-anchor-placement="top-center"
+                                    className='px-10'>
                                     <ArticleInfo post={post} />
                                 </div>
                                 <hr />
@@ -60,7 +66,14 @@ export const LayoutSlug = props => {
                             <div className='lg:px-10 '>
                                 <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased" >
                                     {/* Notion文章主体 */}
-                                    <section id='notion-article' className='justify-center mx-auto max-w-2xl lg:max-w-full'>
+                                    <section id='notion-article'
+                                        data-aos-delay="200"
+                                        data-aos="fade-down"
+                                        data-aos-duration="500"
+                                        data-aos-easing="ease-in-out"
+                                        data-aos-once="false"
+                                        data-aos-anchor-placement="top-center"
+                                        className='justify-center mx-auto max-w-2xl lg:max-w-full'>
                                         {post && <NotionPage post={post} />}
                                     </section>
 
@@ -92,7 +105,13 @@ export const LayoutSlug = props => {
                     {post.type === 'Post' && <ArticleAdjacent {...props} />}
 
                     {post?.toc?.length > 0 && <div id='toc-wrapper' style={{ zIndex: '-1' }} className='absolute top-0 w-full h-full xl:block hidden' >
-                        <div className='relative h-full'>
+                        <div data-aos-delay="200"
+                            data-aos="fade-down"
+                            data-aos-duration="500"
+                            data-aos-easing="ease-in-out"
+                            data-aos-once="false"
+                            data-aos-anchor-placement="top-center"
+                            className='relative h-full'>
                             <div className='float-right -mr-72 h-full mt-40'>
                                 <div className='sticky top-24'>
                                     <Catalog toc={post.toc} />
diff --git a/themes/matery/components/HeaderArticle.js b/themes/matery/components/HeaderArticle.js
index f7c7379d..4b0b2a20 100644
--- a/themes/matery/components/HeaderArticle.js
+++ b/themes/matery/components/HeaderArticle.js
@@ -2,7 +2,13 @@ export default function HeaderArticle({ post, siteInfo }) {
   const headerImage = post?.page_cover ? post?.page_cover : siteInfo?.pageCover
   const title = post?.title
   return (
-        <div id='header' className="flex h-96 justify-center align-middle items-center w-full relative duration-200 bg-black">
+        <div
+            data-aos="fade-down"
+            data-aos-duration="500"
+            data-aos-easing="ease-in-out"
+            data-aos-once="false"
+            data-aos-anchor-placement="top-center"
+            id='header' className="flex h-96 justify-center align-middle items-center w-full relative duration-200 bg-black">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
                 src={headerImage}

From 9da258c8495d5a5186902619236ea80375ea9445 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Tue, 27 Dec 2022 11:31:13 +0800
Subject: [PATCH 2/2] header-article -> disRounded

---
 themes/matery/components/HeaderArticle.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/matery/components/HeaderArticle.js b/themes/matery/components/HeaderArticle.js
index 4b0b2a20..e48160cb 100644
--- a/themes/matery/components/HeaderArticle.js
+++ b/themes/matery/components/HeaderArticle.js
@@ -13,7 +13,7 @@ export default function HeaderArticle({ post, siteInfo }) {
             <img
                 src={headerImage}
                 alt={title}
-                className="opacity-50 dark:opacity-40 h-full w-full rounded-t-md object-cover"
+                className="opacity-50 dark:opacity-40 h-full w-full object-cover"
             />
             <span className='absolute text-white p-6 text-3xl'>{title}</span>
         </div>