From bca046cf03fef5ca8f9c1b564b64856900ee918d Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 8 Dec 2021 17:21:07 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E8=B0=83=E6=95=B4=E5=AD=97=E4=BD=93?=
 =?UTF-8?q?=EF=BC=8C=E9=87=8D=E6=96=B0=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostCard.js       | 18 +++++++++---------
 components/BlogPostListScroll.js |  2 +-
 components/CategoryGroup.js      |  4 ++--
 components/InfoCard.js           | 10 +++++-----
 components/LatestPostsGroup.js   | 19 +++++++++----------
 components/MenuButtonGroup.js    |  4 ++--
 components/SearchInput.js        |  4 ++--
 components/SideBar.js            | 31 ++++++++++++++++---------------
 components/Toc.js                |  6 +++---
 components/TocDrawer.js          |  2 +-
 components/TopNav.js             |  2 +-
 layouts/BaseLayout.js            |  6 ++++--
 pages/archive/index.js           |  2 +-
 pages/article/[slug].js          | 10 +++++-----
 pages/category/[category].js     |  2 +-
 pages/category/index.js          |  2 +-
 pages/index.js                   |  2 +-
 pages/search.js                  |  2 +-
 pages/tag/[tag].js               |  2 +-
 pages/tag/index.js               |  2 +-
 tailwind.config.js               | 20 --------------------
 21 files changed, 67 insertions(+), 85 deletions(-)

diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index dfc22be6..8bb7533f 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -8,34 +8,34 @@ import { faFolder } from '@fortawesome/free-solid-svg-icons'
 
 const BlogPostCard = ({ post, tags }) => {
   return (
-    <div key={post.id} className='md:grid md:grid-cols-5 animate__animated animate__fadeIn animate__faster shadow-lg rounded border dark:border-gray-600 mb-6
+    <div key={post.id} className='hover:shadow-2xl shadow-md mb-14 duration-300 md:grid md:grid-cols-5 rounded-xl dark:border-gray-600 animate__animated animate__fadeIn animate__faster
      w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
       <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-        <div className='w-full h-60 hover:scale-105 duration-200 cursor-pointer transform col-span-2 border-r border-dashed'>
-          <Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
+        <div className='w-full h-60 duration-200 cursor-pointer transform col-span-2 overflow-hidden rounded-l-2xl'>
+          <Image className='hover:scale-105 transform duration-500' src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
         </div>
       </Link>
 
-      <div className='px-4 py-4 col-span-3'>
+      <div className='p-8 col-span-3'>
         <div>
           <Link href={`/category/${post.category}`} passHref>
-            <span className='cursor-pointer dark:text-gray-200 text-gray-400 text-sm hover:underline hover:text-blue-500 dark:hover:text-blue-400 transform'>
+            <span className='cursor-pointer dark:text-gray-200  font-light text-gray-500 text-sm hover:underline hover:text-blue-500 dark:hover:text-blue-400 transform'>
               <FontAwesomeIcon icon={faFolder} size='sm' className='mr-1 w-5 text-sm' />{post.category}
             </span>
           </Link>
-          <span className='mx-1 dark:text-gray-400'>|</span>
+          <span className='mx-2 dark:text-gray-400 text-gray-500'>|</span>
           <Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
-            <span className='mt-2 mx-2 text-gray-400 hover:text-blue-400 hover:underline cursor-pointer dark:text-gray-300 dark:hover:text-blue-400 text-sm leading-4'>{post.date.start_date}</span>
+            <span className='mt-2  font-light text-gray-500 hover:text-blue-400 hover:underline cursor-pointer dark:text-gray-300 dark:hover:text-blue-400 text-sm leading-4'>{post.date.start_date}</span>
           </Link>
         </div>
 
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-          <p className='cursor-pointer my-3 text-lg leading-tight font-bold text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 hover:underline'>
+          <p className='cursor-pointer my-3 text-2xl leading-tight text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
             {post.title}
           </p>
         </Link>
 
-        <p className='mt-2 text-gray-400 dark:text-gray-400 text-sm'>{post.summary}</p>
+        <p className='mt-2 text-gray-600 dark:text-gray-300 text-sm font-light'>{post.summary}</p>
 
         <div className='flex md:flex-nowrap flex-wrap md:justify-start justify-between pt-5'>
           <div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js
index 8d0d76c4..7b027d42 100644
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -51,7 +51,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
   if (!postsToShow || postsToShow.length === 0) {
     return <BlogPostListEmpty currentSearch={currentSearch} />
   } else {
-    return <div id='post-list-wrapper' className='mt-20 mx-2 lg:mx-20' ref={targetRef}>
+    return <div id='post-list-wrapper' className='mt-20 mx-2 lg:mx-20 xl:mx-52' ref={targetRef}>
 
       {/* 文章列表 */}
       <div className='flex flex-wrap'>
diff --git a/components/CategoryGroup.js b/components/CategoryGroup.js
index 3d2b8dbd..f182b9d6 100644
--- a/components/CategoryGroup.js
+++ b/components/CategoryGroup.js
@@ -4,7 +4,7 @@ import Link from 'next/link'
 import React from 'react'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
-  return <div>
+  return <div className='mt-3'>
     <div id='category-list' className='dark:border-gray-600 dark:bg-gray-900'>
       {Object.keys(categories).map(category => {
         const selected = currentCategory === category
@@ -12,7 +12,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
           <div className={(selected
             ? 'bg-gray-200 dark:bg-black text-black dark:text-white'
             : 'dark:text-gray-400 text-gray-500') +
-            ' duration-300 hover:text-blue-500 dark:hover:text-blue-400 hover:underline px-5 cursor-pointer py-2'}>
+            ' duration-300 hover:text-blue-500 dark:hover:text-blue-400 hover:underline px-5 cursor-pointer pt-2 font-serif'}>
             <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-black dark:text-white' : 'text-gray-400'} mr-2 w-5`} />{category}({categories[category]})</div>
         </Link>
       })}
diff --git a/components/InfoCard.js b/components/InfoCard.js
index 94e9b625..57c391cd 100644
--- a/components/InfoCard.js
+++ b/components/InfoCard.js
@@ -5,18 +5,18 @@ import Router from 'next/router'
 
 const InfoCard = () => {
   return <>
-    <div className='flex text-center pb-3 pl-4 cursor-pointer' onClick={ () => { Router.push('/') }}>
-        <div className='hover:rotate-45 hover:scale-125 transform duration-200'>
+    <div className='flex flex-col align-middle justify-center cursor-pointer' onClick={ () => { Router.push('/') }}>
+        <div className='hover:rotate-45 hover:scale-125 transform duration-200 mx-auto'>
           <Image
           alt={BLOG.title}
-          width={60}
-          height={60}
+          width={120}
+          height={120}
           loading='lazy'
           src='/avatar.svg'
           className='rounded-full border-black'
         />
         </div>
-        <div className='text-3xl dark:text-white ml-5 py-3 hover:scale-105 transform duration-200'>{BLOG.title}</div>
+        <div className='text-3xl font-serif dark:text-white mx-auto py-4 hover:scale-105 transform duration-200'>{BLOG.title}</div>
     </div>
   </>
 }
diff --git a/components/LatestPostsGroup.js b/components/LatestPostsGroup.js
index 80047da1..175ec24b 100644
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -26,26 +26,25 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
   // 获取当前路径
   const currentPath = useRouter().asPath
 
-  return <div>
+  return <>
       {postsSortByDate.map(post => {
         const selected = currentPath === `${BLOG.path}/article/${post.slug}`
         return (
           <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
-            <div className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' leading-5 py-1 px-5 flex'}>
-              <div className='mr-2 text-gray-500 text-xs leading-5'>
-                {formatDateFmt(post.lastEditedTime, 'MM/dd')}
-              </div>
-              <div
-                className={
-                  (selected ? 'dark:text-white text-black ' : 'text-gray-500') +
-                  ' text-sm flex w-50 overflow-x-hidden whitespace-nowrap  hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline'
+            <div className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' my-1 px-5 flex justify-between'}>
+              <div className={ ' text-xs py-1 flex w-44 overflow-x-hidden whitespace-nowrap overflow-hidden pt-1 ' +
+                'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline' +
+                  (selected ? 'dark:text-white text-black ' : 'text-gray-500 dark:text-gray-300')
                 }>
                 {post.title}
               </div>
+              <div className='mr-2 text-gray-500 text-xs py-1'>
+                {formatDateFmt(post.lastEditedTime, 'yyyy/MM/dd')}
+              </div>
             </div>
           </Link>
         )
       })}
-    </div>
+    </>
 }
 export default LatestPostsGroup
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index 788b864d..48b13581 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -27,8 +27,8 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
           return <Link key={link.id + link.icon} title={link.to} href={link.to} >
-            <a className={'py-2 px-5 hover:text-white hover:bg-blue-500 cursor-pointer duration-100 flex flex-nowrap align-middle ' +
-              (selected ? 'font-bold bg-gray-200 dark:bg-black dark:text-white text-black ' : '')} >
+            <a className={'py-2 px-5 text-lg hover:bg-blue-400 hover:text-white cursor-pointer duration-100 flex flex-nowrap align-middle ' +
+              (selected ? 'bg-blue-500 text-white ' : ' ')} >
               <div className='my-auto w-5 justify-center flex'>
                 <FontAwesomeIcon icon={link.icon} />
               </div>
diff --git a/components/SearchInput.js b/components/SearchInput.js
index 94c162dc..8648aa09 100644
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -42,12 +42,12 @@ const SearchInput = ({ currentTag, currentSearch }) => {
       ref={searchInputRef}
       type='text'
       placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-      className={'w-full pl-2 transition leading-10 border-gray-300 bg-white text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+      className={'w-full pl-2 transition leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
       onChange={e => updateSearchKey(e.target.value)}
       defaultValue={currentSearch}
     />
-    {(searchKey && searchKey.length && <FontAwesomeIcon icon={faTimes} className='text-gray-300 float-right m-4 cursor-pointer' onClick={cleanSearch} />)}
+    {(searchKey && searchKey.length && <FontAwesomeIcon icon={faTimes} className='text-gray-300 float-right m-3 cursor-pointer' onClick={cleanSearch} />)}
 
     <div className='p-3 text-xl bg-gray-50 flex border-l dark:border-gray-700 dark:hover:bg-gray-800 dark:bg-gray-600 justify-center align-middle cursor-pointer'
       onClick={() => { handleSearch(searchKey) }}>
diff --git a/components/SideBar.js b/components/SideBar.js
index fd00fd34..5ad963fb 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -27,21 +27,22 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
   const { locale } = useGlobal()
   return <aside id='sidebar' className='pt-5 bg-white dark:bg-gray-900 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
     <InfoCard />
+    <hr className='dark:border-gray-700 mt-6 py-1' />
 
     <div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-900 pb-4'}>
 
-        {/* <hr className='dark:border-gray-700' /> */}
-        <MenuButtonGroup allowCollapse={true} />
-        <section className='p-5'>
-          <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
-        </section>
-        <hr className='dark:border-gray-700' />
+      {/* <hr className='dark:border-gray-700' /> */}
+      <MenuButtonGroup allowCollapse={true} />
+
+      <section className='p-5'>
+        <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
+      </section>
 
       {/* 最新文章 */}
       {posts && (
         <section className='mt-4'>
-          <div className='text-sm py-2 px-5  flex flex-nowrap justify-between'>
-            <div className='font-bold text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4 w-5' />{locale.COMMON.LATEST_POSTS}</div>
+          <div className='text-sm pb-4 px-5  flex flex-nowrap justify-between'>
+            <div className='font-light text-gray-600  dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-2 w-5' />{locale.COMMON.LATEST_POSTS}</div>
           </div>
           <LatestPostsGroup posts={posts} />
         </section>
@@ -50,8 +51,8 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {/* 分类  */}
       {categories && (
         <section className='mt-8'>
-          <div className='text-sm py-2 px-5  flex flex-nowrap justify-between'>
-            <div className='font-bold text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-4 w-5' />{locale.COMMON.CATEGORY}</div>
+          <div className='text-sm px-5 flex flex-nowrap justify-between font-light'>
+            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2 w-5' />{locale.COMMON.CATEGORY}</div>
             <Link href='/category' passHref>
               <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
                 {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
@@ -65,15 +66,15 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {/* 标签云  */}
       {tags && (
         <section className='mt-8'>
-          <div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
-            <div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-4 w-5'/>{locale.COMMON.TAGS}</div>
+          <div className='text-sm py-2 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200'>
+            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-2 w-5'/>{locale.COMMON.TAGS}</div>
             <Link href='/tag' passHref>
-              <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+              <div className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
                 {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
               </div>
             </Link>
           </div>
-          <div className='px-5'>
+          <div className='px-5 pt-2'>
             <TagGroups tags={tags} currentTag={currentTag} />
           </div>
         </section>
@@ -81,7 +82,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
     </div>
 
     {post && (
-      <section id='left-toc' className='sticky pb-20 top-0 bg-white dark:bg-gray-800'>
+      <section id='left-toc' className='sticky pb-20 top-0 bg-white dark:bg-gray-900'>
         <div className='border-b text-2xl bg-white font-bold text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
           {locale.COMMON.TABLE_OF_CONTENTS}
         </div>
diff --git a/components/Toc.js b/components/Toc.js
index f04b0769..0c66e390 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -50,8 +50,8 @@ const Toc = ({ toc }) => {
     setActiveSection(currentSectionId)
   }, throttleMs))
 
-  return <div className='dark:bg-gray-900 bg-white'>
-    <nav className='text-gray-500 dark:text-gray-400 overflow-y-auto scroll-hidden p-2'>
+  return <>
+    <nav className=' dark:text-gray-400 dark:bg-gray-900 overflow-y-auto scroll-hidden p-2'>
       {toc.map((tocItem) => {
         const id = uuidToId(tocItem.id)
         return (
@@ -74,7 +74,7 @@ const Toc = ({ toc }) => {
         )
       })}
     </nav>
-  </div>
+  </>
 }
 
 export default Toc
diff --git a/components/TocDrawer.js b/components/TocDrawer.js
index badb4638..6fe0de6d 100644
--- a/components/TocDrawer.js
+++ b/components/TocDrawer.js
@@ -29,7 +29,7 @@ const TocDrawer = ({ post, cRef }) => {
         ' dark:border-gray-800 bg-white dark:bg-gray-700 shadow-xl animate__animated animate__faster max-h-96 ' +
         ' w-60 duration-200 fixed right-4 top-16 rounded overflow-y-auto'}>
           {post && <>
-            <div className='border-b text-xl font-bold text-black dark:text-white py-3 px-6'>
+            <div className='text-xl font-bold text-black bg-gray-50 dark:text-white py-3 px-6'>
               {locale.COMMON.TABLE_OF_CONTENTS}
             </div>
             <Toc toc={post.toc}/>
diff --git a/components/TopNav.js b/components/TopNav.js
index 05455f10..7e6d31eb 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -29,7 +29,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
         <div className='w-96'>
           <Link href='/' passHref>
             <div className='cursor-pointer'>
-             <h1 className='text-lg dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{BLOG.title }</h1>
+             <h1 className='text-lg font-serif dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{BLOG.title }</h1>
             </div>
           </Link>
         </div>
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 4a16281e..80f93915 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -76,8 +76,10 @@ const BaseLayout = ({
         <div className='hidden lg:block z-10'>
           <SideBar post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
         </div>
-        <div className='flex flex-grow' ref={targetRef}>
-          {children}
+        <div className='flex flex-grow min-h-screen' ref={targetRef}>
+          <div className='flex-grow bg-gray-50 dark:bg-black shadow-inner'>
+            {children}
+          </div>
         </div>
       </div>
 
diff --git a/pages/archive/index.js b/pages/archive/index.js
index 57e2bcb9..90ac4279 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -57,7 +57,7 @@ const Index = ({ allPosts, tags, categories }) => {
 
   return (
     <BaseLayout meta={meta} tags={tags} categories={categories}>
-      <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16 '>
+      <div className=' pt-16 '>
         <StickyBar>
           <div className='py-2.5 text-lg lg:mx-14 dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4'/>{locale.NAV.ARCHIVE}</div>
         </StickyBar>
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 704503b7..d11f96d1 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -51,20 +51,20 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
   return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={allPosts} categories={categories}>
     <Progress targetRef={targetRef} />
 
-    <div id='article-wrapper' ref={targetRef} className='flex-grow dark:bg-black bg-gray-200'>
+    <div id='article-wrapper' ref={targetRef} className='flex-grow'>
 
-      <div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full '>
+      <div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full hover:shadow-2xl'>
         {post.type && !post.type.includes('Page') && (<>
-          <header className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0'>
+          <header className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 rounded-t-2xl overflow-hidden'>
             <Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} loading='eager' objectFit='cover' layout='fill' alt={post.title} />
           </header>
         </>)}
 
         <article itemScope itemType="https://schema.org/Movie" className='animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
           {/* 文章Title */}
-          <h2 className='font-bold text-3xl pt-5 text-black dark:text-white italic'> {post.title}</h2>
+          <h2 className='font-bold text-3xl pt-5 text-black dark:text-white font-serif'> {post.title}</h2>
           <hr className='mt-4' />
-          <section className='flex-nowrap flex  mt-1 dark:text-white'>
+          <section className='flex-nowrap flex  mt-1 dark:text-white font-light'>
             <Link href={`/category/${post.category}`} passHref>
               <div className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
                 <FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}
diff --git a/pages/category/[category].js b/pages/category/[category].js
index 2354ca21..b3e09aaa 100644
--- a/pages/category/[category].js
+++ b/pages/category/[category].js
@@ -14,7 +14,7 @@ export default function Category ({ tags, allPosts, filteredPosts, category, cat
     type: 'website'
   }
   return <BaseLayout meta={meta} tags={tags} currentCategory={category} totalPosts={allPosts} categories={categories}>
-    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16'>
+    <div className=' pt-16'>
       <StickyBar>
         <CategoryList currentCategory={category} categories={categories} />
       </StickyBar>
diff --git a/pages/category/index.js b/pages/category/index.js
index 34d25564..63e3075d 100644
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -16,7 +16,7 @@ export default function Category ({ tags, allPosts, categories }) {
     type: 'website'
   }
   return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags}>
-    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-2 lg:px-14'>
+    <div className=' p-2 lg:px-14'>
       <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
         <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}:</div>
         <div id='category-list' className='duration-200 flex flex-wrap'>
diff --git a/pages/index.js b/pages/index.js
index f889b5fe..5475e007 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -30,7 +30,7 @@ export async function getStaticProps () {
 const Index = ({ allPosts, tags, meta, categories }) => {
   return (
     <BaseLayout meta={meta} tags={tags} totalPosts={allPosts} categories={categories}>
-      <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
+      <div className=''>
         <BlogPostListScroll posts={allPosts} tags={tags} />
       </div>
     </BaseLayout>
diff --git a/pages/search.js b/pages/search.js
index 1b1cb3aa..e006f0fe 100644
--- a/pages/search.js
+++ b/pages/search.js
@@ -46,7 +46,7 @@ const Search = ({ allPosts, tags, categories }) => {
   }
   return (
     <BaseLayout meta={meta} tags={tags} totalPosts={allPosts} currentSearch={searchKey} categories={categories}>
-      <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
+      <div className=''>
         <StickyBar>
           <div className='p-4 dark:text-gray-200'><FontAwesomeIcon icon={faSearch} className='mr-1'/> 搜索词： {searchKey}</div>
         </StickyBar>
diff --git a/pages/tag/[tag].js b/pages/tag/[tag].js
index 1b05174f..2e607fa0 100644
--- a/pages/tag/[tag].js
+++ b/pages/tag/[tag].js
@@ -13,7 +13,7 @@ export default function Tag ({ tags, allPosts, filteredPosts, currentTag, catego
     type: 'website'
   }
   return <BaseLayout meta={meta} tags={tags} currentTag={currentTag} categories={categories} totalPosts={allPosts}>
-    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16'>
+    <div className=' pt-16'>
       <StickyBar>
         <TagList tags={tags} currentTag={currentTag}/>
       </StickyBar>
diff --git a/pages/tag/index.js b/pages/tag/index.js
index 85ac7845..541b14b5 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -16,7 +16,7 @@ export default function Tag ({ tags, allPosts, categories }) {
     type: 'website'
   }
   return <BaseLayout meta={meta} categories={categories} totalPosts={allPosts}>
-    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-2 lg:px-14'>
+    <div className=' p-2 lg:px-14'>
       <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
         <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faTags} className='mr-4'/>{locale.COMMON.TAGS}:</div>
         <div id='tags-list' className='duration-200 flex flex-wrap'>
diff --git a/tailwind.config.js b/tailwind.config.js
index be7c2c7c..1d4cd847 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,4 @@
 const BLOG = require('./blog.config')
-const { fontFamily } = require('tailwindcss/defaultTheme')
-const CJK = require('./lib/cjk')
-const fontSansCJK = !CJK()
-  ? []
-  : [`"Noto Sans CJK ${CJK()}"`, `"Noto Sans ${CJK()}"`]
-const fontSerifCJK = !CJK()
-  ? []
-  : [`"Noto Serif CJK ${CJK()}"`, `"Noto Serif ${CJK()}"`]
 
 module.exports = {
   purge: ['./pages/**/*.js', './components/**/*.js', './layouts/**/*.js'],
@@ -20,18 +12,6 @@ module.exports = {
         night: {
           DEFAULT: BLOG.darkBackground || '#111827'
         }
-      },
-      fontFamily: {
-        sans: ['"IBM Plex Sans"', ...fontSansCJK, ...fontFamily.sans],
-        serif: ['"Source Serif"', ...fontSerifCJK, ...fontFamily.serif],
-        noEmoji: [
-          '"IBM Plex Sans"',
-          'ui-sans-serif',
-          'system-ui',
-          '-apple-system',
-          'BlinkMacSystemFont',
-          'sans-serif'
-        ]
       }
     }
   },