From 259f7035e19887e7df6ad78c7a5bdc1d0257f8b3 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 12 Oct 2021 17:37:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
 =?UTF-8?q?=E5=8A=A0=E4=BE=A7=E8=BE=B9=E9=81=AE=E7=BD=A9=EF=BC=8C=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E8=B6=8A=E7=95=8C,=E5=AF=BC=E8=88=AA=E6=9D=A1?=
 =?UTF-8?q?=E5=8A=A0=E9=AB=98=EF=BC=8C=E5=A4=9C=E9=97=B4=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=EF=BC=8C=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostMini.js    |  2 +-
 components/DarkModeButton.js  |  2 +-
 components/Drawer.js          |  9 +++++----
 components/MenuButtonGroup.js |  2 +-
 components/SearchInput.js     |  2 +-
 components/SideBar.js         |  4 ++--
 components/Tags.js            | 10 +++++++++-
 components/TopNav.js          | 22 ++++++++++++----------
 layouts/ArticleLayout.js      | 10 +++++-----
 layouts/DefaultLayout.js      |  2 +-
 styles/globals.css            | 33 +++++++++++++++++++++++++++++++++
 11 files changed, 71 insertions(+), 27 deletions(-)

diff --git a/components/BlogPostMini.js b/components/BlogPostMini.js
index 0b2b8264..1991c3dc 100644
--- a/components/BlogPostMini.js
+++ b/components/BlogPostMini.js
@@ -3,7 +3,7 @@ import BLOG from '@/blog.config'
 const BlogPostMini = ({ post }) => {
   return (
     <a key={post.id} href={`${BLOG.path}/article/${post.slug}`}
-             className='sm:flex w-full border dark:border-gray-500 my-2 duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
+             className='sm:flex w-full border dark:border-gray-800 my-2 duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
             <img className='sm:w-40 w-full object-cover cursor-pointer' src={post.page_cover} alt={post.title} />
diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index 796abce3..83232bea 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -8,7 +8,7 @@ const DarkModeButton = () => {
     changeTheme(newTheme)
     localStorage.setItem('theme', newTheme)
   }
-  return <div className='z-10 p-1 duration-200 mr-2 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70 text-xl cursor-pointer dark:text-gray-300 '>
+  return <div className='z-10 p-1 duration-200 mr-2 h-12 text-xl cursor-pointer dark:text-gray-300 '>
     <i className={'fa p-2.5 hover:scale-125 transform duration-200 ' + (theme === 'dark' ? ' fa-sun-o' : ' fa-moon-o') } onClick={handleChangeDarkMode} />
   </div>
 }
diff --git a/components/Drawer.js b/components/Drawer.js
index 7c45ea99..7a670907 100644
--- a/components/Drawer.js
+++ b/components/Drawer.js
@@ -19,14 +19,14 @@ const Drawer = ({ post, currentTag }) => {
   return <div>
     {/* 触发抽屉按钮 */}
     <div onClick={handleMenuClick}
-      className='fixed top-1 left-0 z-30 py-1 px-5 duration-200 bg-white dark:bg-gray-600 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
+      className='fixed top-3 left-0 z-30 py-1 px-5 duration-200 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
       <i className='fa hover:scale-125 transform duration-200 fa-bars '
           />
     </div>
     <div className='fixed top-0 left-0 z-30 h-full'>
       <div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' overflow-y-auto duration-200 w-72 h-full bg-white dark:bg-gray-800 border-r dark:border-gray-600'}>
         {/* LOGO */}
-        <div className='sticky top-0 z-20 bg-white w-72  flex space-x-4 px-5 py-1 dark:border-gray-500 border-b dark:bg-gray-600 '>
+        <div className='sticky top-0 z-20 bg-white w-72  flex space-x-4 px-5 py-3.5 dark:border-gray-500 border-b dark:bg-gray-600 '>
           <div className='z-10 p-1 duration-200 mr-2 bg-white dark:bg-gray-600 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
             <i className='fa hover:scale-125 transform duration-200 fa-bars ' onClick={handleMenuClick}/>
           </div>
@@ -38,8 +38,9 @@ const Drawer = ({ post, currentTag }) => {
           </Link>
         </div>
       </div>
+
       {/* 侧边菜单 */}
-      <div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' w-72 duration-200 h-full fixed left-0 top-12 overflow-y-auto'}>
+      <div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' w-72 duration-200 h-full fixed left-0 top-20 overflow-y-auto'}>
         <div className='z-20'>
           <div className='px-5 my-3 block md:hidden'>
             <SearchInput currentTag={currentTag}/>
@@ -55,7 +56,7 @@ const Drawer = ({ post, currentTag }) => {
       </div>
     </div>
     {/* 背景蒙版 */}
-    <div className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-20 w-full h-full bg-black bg-opacity-40' } onClick={handleMenuClick}/>
+    <div className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-20 w-full h-full bg-black bg-opacity-50' } onClick={handleMenuClick}/>
   </div>
 }
 export default Drawer
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index a8509810..d7ef8d8e 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -16,7 +16,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
     { id: 8, icon: 'fa-twitter', name: 'Twitter', to: 'https://twitter.com/troy1024_1', show: true },
     { id: 9, icon: 'fa-telegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true }
   ]
-  return <nav className='max-w-sm'>
+  return <nav id='nav'>
     <ul className='leading-8 text-gray-700 dark:text-gray-400'>
       {links.map(
         link =>
diff --git a/components/SearchInput.js b/components/SearchInput.js
index c25e6498..94a30287 100644
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -27,7 +27,7 @@ const SearchInput = ({ currentTag }) => {
     <input
       type='text'
       placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-      className={'pl-2 w-full transition duration-200 leading-10 border-gray-300 bg-white text-black dark:bg-gray-800 dark:text-white'}
+      className={'pl-2 w-full transition duration-200 leading-10 border-gray-300 bg-white text-black dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
       onChange={e => setSearchValue(e.target.value)}
       defaultValue={router.query.s ?? ''}
diff --git a/components/SideBar.js b/components/SideBar.js
index 08ae2b71..0b022054 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -3,9 +3,9 @@ import TocBar from '@/components/TocBar'
 import MenuButtonGroup from '@/components/MenuButtonGroup'
 
 const SideBar = ({ tags, currentTag, post }) => {
-  return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 mt-12 hidden lg:block'>
+  return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 hidden lg:block'>
     <div className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
-      <div className='hidden md:block sticky top-12'>
+      <div className='hidden md:block sticky top-16'>
         <div className={post ? 'hidden xl:block' : 'block'}>
           <MenuButtonGroup allowCollapse={true}/>
         </div>
diff --git a/components/Tags.js b/components/Tags.js
index 039bcd7e..97706fda 100644
--- a/components/Tags.js
+++ b/components/Tags.js
@@ -10,7 +10,11 @@ import Link from 'next/link'
 const Tags = ({ tags, currentTag }) => {
   if (!tags) return <></>
   return (<div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
-      <ul id='tag-container' className='px-10 flex py-1 space-x-3'>
+      <div className='z-30 sticky left-0 flex'>
+        <div className='px-2 bg-white dark:bg-gray-800'/>
+        <div className='px-5 -line-x-opacity bg-black'/>
+      </div>
+      <ul id='tag-container' className='flex py-1 space-x-3'>
         <li className='w-10 py-2 dark:text-gray-200'>标签:</li>
         {Object.keys(tags).map(key => {
           const selected = key === currentTag
@@ -29,6 +33,10 @@ const Tags = ({ tags, currentTag }) => {
           )
         })}
       </ul>
+      <div className='z-30 sticky right-0 flex'>
+        <div className='px-5 line-x-opacity'/>
+        <div className='px-2 bg-white dark:bg-gray-800'/>
+      </div>
     </div>
   )
 }
diff --git a/components/TopNav.js b/components/TopNav.js
index 23838de8..5fc2d12b 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -8,7 +8,7 @@ import Drawer from '@/components/Drawer'
 
 const TopNav = ({ tags, currentTag, post }) => {
   return (
-    <div className='bg-white dark:bg-gray-600 border-b dark:border-gray-700 '>
+    <div className='bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
 
       {/* 侧面抽屉 */}
       <Drawer post={post} currentTag={currentTag} />
@@ -16,12 +16,12 @@ const TopNav = ({ tags, currentTag, post }) => {
       {/* 导航栏 */}
       <div
         id='sticky-nav'
-        className='text-sm m-auto w-full flex flex-row justify-between items-center px-2 md:px-4'
+        className='text-sm m-auto w-full flex flex-row justify-between items-center p-2 md:px-4'
       >
         <div className='flex ml-12'>
           <Link href='/'>
             <a
-              className='flex text-xl p-1 justify-center align-middle my-auto font-bold font-semibold hover:bg-gray-800 hover:text-white duration-200
+              className='flex text-xl py-1 px-3 justify-center align-middle my-auto font-bold font-semibold hover:bg-gray-800 hover:text-white duration-200
                dark:text-gray-300
               '>{BLOG.title}</a>
           </Link>
@@ -35,13 +35,15 @@ const TopNav = ({ tags, currentTag, post }) => {
         <div className='flex flex-nowrap space-x-1'>
           <DarkModeButton />
           <div className='flex align-middle cursor-pointer'>
-            <Image
-              alt={BLOG.author}
-              width={28}
-              height={28}
-              src='/avatar.svg'
-              className='rounded-full border-black'
-            />
+            <Link href='/article/about'>
+              <Image
+                alt={BLOG.author}
+                width={28}
+                height={28}
+                src='/avatar.svg'
+                className='rounded-full border-black'
+              />
+            </Link>
           </div>
         </div>
       </div>
diff --git a/layouts/ArticleLayout.js b/layouts/ArticleLayout.js
index cf8329ca..284fd160 100644
--- a/layouts/ArticleLayout.js
+++ b/layouts/ArticleLayout.js
@@ -53,15 +53,15 @@ const ArticleLayout = ({
       </div>
 
       {/* Wrapper */}
-      <div className='flex justify-between bg-gray-100 dark:bg-black'>
+      <div className='flex justify-between bg-gray-100'>
 
          <SideBar tags={tags} post={frontMatter} />
 
         {/* 主体区块 */}
-        <main className='bg-gray-100 dark:bg-black w-full'>
+        <main className='bg-gray-100 w-full dark:bg-gray-800'>
           {/* 中央区域 wrapper */}
             <header
-              className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-10 lg:mt-20 md:flex-shrink-0 overflow-y-hidden animate__fadeIn animate__animated'>
+              className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-16 lg:mt-20 md:flex-shrink-0 overflow-y-auto animate__fadeIn animate__animated'>
               {/* 封面图 */}
               {frontMatter.page_cover && frontMatter.page_cover.length > 1 && (
                 <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}
@@ -71,7 +71,7 @@ const ArticleLayout = ({
 
             <article
               ref={targetRef}
-              className='mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-600'>
+              className='mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
               {/* 文章标题 */}
               <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
                 {frontMatter.title}
@@ -131,7 +131,7 @@ const ArticleLayout = ({
               <div className='flex justify-center pt-5'>
                 <RewardButton />
               </div>
-              <p className='flex justify-center py-5'>
+              <p className='flex justify-center py-5 dark:text-gray-200'>
                  - 💖 本 文 结 束 😚 感 谢 您 的 阅 读  💖 -
               </p>
 
diff --git a/layouts/DefaultLayout.js b/layouts/DefaultLayout.js
index 865eed6b..bf23a2fa 100644
--- a/layouts/DefaultLayout.js
+++ b/layouts/DefaultLayout.js
@@ -59,7 +59,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
         <SideBar />
 
         <div className='flex-grow'>
-          <div className='fixed top-12 z-10 w-full border-b dark:border-gray-600'>
+          <div className='fixed top-16 z-10 w-full border-b dark:border-gray-600'>
             <Tags tags={tags} currentTag={currentTag} />
           </div>
 
diff --git a/styles/globals.css b/styles/globals.css
index e985639f..36955c16 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -109,9 +109,42 @@ nav {
   @apply right-auto left-0 hidden lg:block z-10 !important
 }
 
+/* 隐藏滚动条 */
 .scroll-hidden{
   -ms-overflow-style: none;
   overflow: -moz-scrollbars-none;
 }
 
 .scroll-hidden::-webkit-scrollbar { width: 0 !important }
+
+.notion-collection{
+  @apply max-w-0
+}
+
+/* 渐变透明度 */
+.line-x-opacity{
+  background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgb(255, 255, 255)); /* Safari 5.1 - 6.0 */
+  background: -o-linear-gradient(right, rgba(255, 255, 255,0), rgb(255, 255, 255)); /* Opera 11.1 - 12.0 */
+  background: -moz-linear-gradient(right, rgba(255, 255, 255,0), rgba(255, 255, 255)); /* Firefox 3.6 - 15 */
+  background: linear-gradient(to right, rgba(255, 255, 255,0), rgba(255, 255, 255)); /* 标准的语法（必须放在最后） */
+}
+
+.-line-x-opacity{
+  background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgb(255, 255, 255)); /* Safari 5.1 - 6.0 */
+  background: -o-linear-gradient(left, rgba(255, 255, 255,0), rgb(255, 255, 255)); /* Opera 11.1 - 12.0 */
+  background: -moz-linear-gradient(left, rgba(255, 255, 255,0), rgba(255, 255, 255)); /* Firefox 3.6 - 15 */
+  background: linear-gradient(to left, rgba(255, 255, 255,0), rgba(255, 255, 255)); /* 标准的语法（必须放在最后） */
+}
+.dark .line-x-opacity{
+  background: -webkit-linear-gradient(left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Safari 5.1 - 6.0 */
+  background: -o-linear-gradient(right, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Opera 11.1 - 12.0 */
+  background: -moz-linear-gradient(right, rgba(31, 41, 55,0), rgba(31, 41, 55)); /* Firefox 3.6 - 15 */
+  background: linear-gradient(to right, rgba(31, 41, 55,0), rgba(31, 41, 55)); /* 标准的语法（必须放在最后） */
+}
+
+.dark .-line-x-opacity{
+  background: -webkit-linear-gradient(right, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Safari 5.1 - 6.0 */
+  background: -o-linear-gradient(left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Opera 11.1 - 12.0 */
+  background: -moz-linear-gradient(left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Firefox 3.6 - 15 */
+  background: linear-gradient(to left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* 标准的语法（必须放在最后） */
+}