From 98bbc014a3ef992a9d8d51ddc51cbef0f85dcc79 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 27 Sep 2021 15:47:01 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9C=20=E9=80=82=E9=85=8D=E5=A4=9C?=
 =?UTF-8?q?=E9=97=B4=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPost.js   | 4 ++--
 components/RightAside.js | 2 +-
 components/SideBar.js    | 6 +++---
 layouts/DefaultLayout.js | 2 +-
 styles/globals.css       | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/BlogPost.js b/components/BlogPost.js
index 8c40735a..53cc018f 100644
--- a/components/BlogPost.js
+++ b/components/BlogPost.js
@@ -3,11 +3,11 @@ import BLOG from '@/blog.config'
 const BlogPost = ({ post }) => {
   return (
     <article key={post.id}
-             className='md:mx-2 w-full md:max-w-md duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-600 overflow-hidden'>
+             className='md:mx-2 w-full md:max-w-md duration-200 transform hover:scale-105 hover:shadow-2xl rounded-3xl bg-white dark:bg-gray-800 dark:hover:bg-gray-600 overflow-hidden'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
           <a href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>
-            <img className='w-full max-h-60 object-cover p-3 cursor-pointer' src={post.page_cover} alt={post.title} />
+            <img className='w-full max-h-60 object-cover cursor-pointer' src={post.page_cover} alt={post.title} />
           </a>
         )}
 
diff --git a/components/RightAside.js b/components/RightAside.js
index 475630e2..f32339c8 100644
--- a/components/RightAside.js
+++ b/components/RightAside.js
@@ -5,7 +5,7 @@ const RightAside = ({ toc }) => {
   // 无目录就直接返回空
   if (toc.length < 1) return <></>
 
-  return <aside className='bg-gray-800 px-5 hidden lg:block py-5 hover:shadow-2xl duration-200'>
+  return <aside className='bg-gray-700 px-5 hidden lg:block py-5 hover:shadow-2xl duration-200'>
       <div className='sticky top-8 w-60 overflow-x-auto'>
       <Toc toc={toc}/>
       </div>
diff --git a/components/SideBar.js b/components/SideBar.js
index 6a4b67bf..c53f1db2 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -21,13 +21,13 @@ const SideBar = ({ tags, currentTag }) => {
   const [collapse, changeCollapse] = useState(false)
 
   return <aside
-    className={(collapse ? '' : '') + ' z-50 bg-gray-100 dark:bg-gray-800 dark:border-black duration-500 ease-in-out'}
+    className={(collapse ? '' : '') + ' z-10 bg-white dark:bg-gray-800 dark:border-black duration-500 ease-in-out'}
   >
 
-    <div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' sidebar bg-gray-100 h-full w-60 md:w-80 duration-500 ease-in-out'}>
+    <div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' sidebar h-full w-60 md:w-80 duration-500 ease-in-out'}>
 
       {/* 搜索框 */}
-      <div className='flex justify-center items-center py-5 pr-5 pl-2 bg-gray-200'>
+      <div className='flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'>
         <input
           type='text'
           placeholder={
diff --git a/layouts/DefaultLayout.js b/layouts/DefaultLayout.js
index 22a5c6f6..c4bd16ef 100644
--- a/layouts/DefaultLayout.js
+++ b/layouts/DefaultLayout.js
@@ -59,7 +59,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
       {/* <TopNav tags={tags} currentTag={currentTag} /> */}
       {/* <Header navBarTitle={meta.title} fullWidth={true}/> */}
 
-      <div className={`${BLOG.font} flex bg-gray-50`}>
+      <div className={`${BLOG.font} flex bg-gray-100 dark:bg-black`}>
         <SideBar tags={tags} currentTag={currentTag} />
 
         <main className='md:pb-10 md:px-24 p-5 flex-grow'>
diff --git a/styles/globals.css b/styles/globals.css
index 630012d1..2e826ef0 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -106,7 +106,7 @@ nav {
 }
 
 #waifu {
-  @apply left-auto right-0 hidden lg:block !important
+  @apply right-auto left-0 hidden lg:block z-10 !important
 }
 
 @media (max-width: 1300px){