From 0baddd241a528e342cfbeb82d660dc18932b557c Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 7 Oct 2021 19:31:32 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=8C=E9=A2=9C=E8=89=B2=E6=AF=94?=
 =?UTF-8?q?=E4=BE=8B=E5=BE=AE=E8=B0=83=EF=BC=8C=E7=A4=BE=E4=BA=A4=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=8A=A0=E5=8A=A8=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SideBar.js      | 28 +++++++++++++++-------------
 components/SocialButton.js | 22 +++++++++++++++-------
 components/TocBar.js       |  2 +-
 layouts/ArticleLayout.js   |  4 ++--
 4 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/components/SideBar.js b/components/SideBar.js
index 7482d213..397be453 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -45,17 +45,17 @@ const SideBar = ({ tags, currentTag, post }) => {
       className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none ') + ' dark:bg-gray-800 bg-white sidebar h-full w-72 duration-500 ease-in-out'}>
 
       {/* Logo  */}
-      <section className='px-5 pt-8 pb-2 flex-col pb-2 sticky top-0 bg-white dark:bg-gray-800 z-10'>
+      <section className='flex border-b px-5 pt-8 pb-5 flex-col sticky top-0 bg-white dark:bg-gray-800 z-10'>
         <Link href='/'>
-          <a
-            className='text-3xl hover:scale-125 dark:bg-gray-900 dark:text-gray-300 font-semibold dark:hover:bg-gray-600 bg-gray-700 text-white p-2 duration-200 transform'>{BLOG.title}</a>
+          <div
+            className='mx-auto text-center cursor-pointer text-3xl dark:bg-gray-900 dark:text-gray-300 font-semibold dark:hover:bg-gray-600 bg-gray-700 text-white p-2 hover:scale-105 hover:shadow-2xl duration-200 transform'>{BLOG.title}</div>
         </Link>
 
-        <i className='fa fa-map-marker pl-2 dark:text-gray-300 mt-3' >&nbsp;Fuzhou, China</i>
+        <i className='mx-auto fa fa-map-marker pl-1 dark:text-gray-300 mt-5' >&nbsp;Fuzhou, China</i>
       </section>
 
       {/* 搜索框 */}
-      <section className={ (post ? ' ' : ' sticky top-0 ') + 'flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'}>
+      <section className={ (post ? ' ' : ' sticky top-0 ') + ' border-t border-b flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'}>
         <input
           type='text'
           placeholder={
@@ -73,9 +73,9 @@ const SideBar = ({ tags, currentTag, post }) => {
       <div className={ (post ? ' ' : ' sticky top-0 ') + 'px-6'}>
 
         {/* 菜单 */}
-        <nav className='mt-4'>
+        <nav className='mt-6'>
           <strong className='text-2xl text-gray-600 dark:text-gray-400'>菜单</strong>
-          <ul className='leading-8 text-gray-500 dark:text-gray-400'>
+          <ul className='mt-4 leading-8 text-gray-500 dark:text-gray-400'>
             <li><a className='fa fa-info hover:underline' href='/article/about' id='about'><span
               className='ml-2'>关于本站</span></a></li>
             <li><a className='fa fa-rss hover:underline' href='/feed' target='_blank' id='feed'><span
@@ -85,30 +85,32 @@ const SideBar = ({ tags, currentTag, post }) => {
         </nav>
 
         {/* 标签云  */}
-        <section className='mt-4'>
+        <section className='mt-6'>
           <strong className='text-2xl text-gray-600 dark:text-gray-400'>标签</strong>
-          <Tags tags={tags} currentTag={currentTag} />
+          <div className='mt-4'>
+            <Tags tags={tags} currentTag={currentTag} />
+          </div>
         </section>
 
         {/* 联系 */}
         <section>
-          <div className='mt-4'>
+          <div className='mt-6'>
             <strong className='text-2xl text-gray-600 dark:text-gray-400'>联系我</strong>
-            <div className='py-2'>
+            <div className='mt-2 py-2'>
               <SocialButton />
             </div>
           </div>
         </section>
 
           {/* 站点信息 */}
-        <section className='py-2'>
+        <section className='my-3'>
           <Footer />
         </section>
 
       </div>
 
       {post && (
-        <div className='sticky top-28'>
+        <div className='sticky top-32'>
           <TocBar toc={post.toc} />
         </div>
       )}
diff --git a/components/SocialButton.js b/components/SocialButton.js
index 9b88a7b9..806d3917 100644
--- a/components/SocialButton.js
+++ b/components/SocialButton.js
@@ -3,13 +3,21 @@ import React from 'react'
 const SocialButton = () => {
   return <>
     <div className='space-x-3 text-2xl text-gray-500 dark:text-gray-400'>
-      <a className='fa fa-github' target='_blank' rel='noreferrer' title={'github'}
-         href={'https://github.com/tangly1024'} />
-      <a className='fa fa-twitter' target='_blank' rel='noreferrer' title={'twitter'}
-         href={'https://twitter.com/troy1024_1'} />
-      <a className='fa fa-telegram' href={'https://t.me/tangly_1024'} title={'telegram'} />
-      <a className='fa fa-weibo' target='_blank' rel='noreferrer' title={'weibo'}
-         href={'http://weibo.com/tangly1024'} />
+      <a target='_blank' rel='noreferrer' title={'github'}
+          href={'https://github.com/tangly1024'} >
+        <div className='fa fa-github transform hover:scale-125 duration-150'/>
+      </a>
+      <a target='_blank' rel='noreferrer' title={'twitter'}
+         href={'https://twitter.com/troy1024_1'} >
+        <div className='fa fa-twitter transform hover:scale-125 duration-150'/>
+      </a>
+      <a href={'https://t.me/tangly_1024'} title={'telegram'} >
+        <div className='fa fa-telegram transform hover:scale-125 duration-150'/>
+      </a>
+      <a target='_blank' rel='noreferrer' title={'weibo'}
+         href={'https://weibo.com/tangly1024'} >
+        <div className='fa fa-weibo transform hover:scale-125 duration-150'/>
+      </a>
     </div>
   </>
 }
diff --git a/components/TocBar.js b/components/TocBar.js
index dce001bc..ac73c0d5 100644
--- a/components/TocBar.js
+++ b/components/TocBar.js
@@ -48,7 +48,7 @@ const TocBar = ({ toc }) => {
   }, throttleMs)
 
   return <div className='bg-white dark:bg-gray-800 pb-10'>
-    <div className='text-2xl bg-gray-100 font-bold text-black dark:text-white py-6 px-6'>
+    <div className='border-t border-b text-2xl bg-gray-100 font-bold text-black dark:bg-black dark:text-white py-6 px-6'>
       文章目录
     </div>
     <nav className='text-gray-500 dark:text-gray-400 underline overflow-y-auto overflow-x-hidden'>
diff --git a/layouts/ArticleLayout.js b/layouts/ArticleLayout.js
index ad50a56c..b1128552 100644
--- a/layouts/ArticleLayout.js
+++ b/layouts/ArticleLayout.js
@@ -58,7 +58,7 @@ const ArticleLayout = ({
           <div>
 
             <header
-              className='mx-auto max-w-5xl 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-20 md:flex-shrink-0 overflow-y-hidden animate__fadeIn animate__animated'>
               {/* 封面图 */}
               {frontMatter.page_cover && frontMatter.page_cover.length > 1 && (
                 <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}
@@ -68,7 +68,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='hover:shadow-2xl mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-600'>
               {/* 文章标题 */}
               <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
                 {frontMatter.title}