排版微调

components/Pagination.js

@@ -26,7 +26,7 @@ const Pagination = ({ page, showNext }) => {
       >
         <button
           rel='prev'
-          className={`${currentPage === 1 ? 'invisible' : 'block'} duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          className={`${currentPage === 1 ? 'invisible' : 'block'} w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
         >
           ← {locale.PAGINATION.PREV}
         </button>
@@ -39,7 +39,7 @@ const Pagination = ({ page, showNext }) => {
       }>
         <button
           rel='next'
-          className={`${+showNext ? 'block' : 'invisible'} duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          className={`${+showNext ? 'block' : 'invisible'} w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
         >
           {locale.PAGINATION.NEXT} →
         </button>

components/SideBarResponsive.js

@@ -38,8 +38,8 @@ const SideBarResponsive = ({ tags, currentTag, post }) => {
         {/* 联系 */}
         <section className='mt-6 mb-6 hidden xl:inline-block'>
             <strong className='text-gray-600 dark:text-gray-400 px-6'>联系我</strong>
-            <div>
-              <i className='fa fa-map-marker text-sm dark:text-gray-300 px-6 mt-3' >&nbsp;Fuzhou, China</i>
+            <div className='text-sm text-gray-600'>
+              <i className='fa fa-map-marker dark:text-gray-300 px-6 my-2' >&nbsp;Fuzhou, China</i>
             </div>
             <div>
               <SocialButton />

components/SocialButton.js

@@ -7,7 +7,7 @@ import React from 'react'
  */
 const SocialButton = () => {
   return <div className='w-52'>
-    <div className='space-x-3 text-2xl text-black dark:text-gray-400 px-6'>
+    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 px-6'>
       <a target='_blank' rel='noreferrer' title={'github'}
           href={'https://github.com/tangly1024'} >
         <div className='fa fa-github transform hover:scale-125 duration-150'/>

components/TopNav.js

@@ -30,7 +30,7 @@ const TopNav = ({ tags, currentTag, post }) => {
   }
 
   return (
-    <div className='bg-white dark:bg-gray-600 border-b dark:border-gray-700 shadow'>
+    <div className='bg-white dark:bg-gray-600 border-b dark:border-gray-700 '>
 
       <div className='fixed top-0 left-0 z-30 h-full'>
         <div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' duration-200 w-72 h-full bg-white dark:bg-gray-800 border-r dark:border-gray-600'}>
@@ -89,9 +89,8 @@ const TopNav = ({ tags, currentTag, post }) => {
         </div>
 
         <div className='flex flex-nowrap space-x-1'>
-
           <DarkModeButton />
-          <a className='flex align-middle cursor-pointer' href='/article/about'>
+          <div className='flex align-middle cursor-pointer' >
             <Image
               alt={BLOG.author}
               width={28}
@@ -99,7 +98,7 @@ const TopNav = ({ tags, currentTag, post }) => {
               src='/avatar.svg'
               className='rounded-full border-black'
             />
-          </a>
+          </div>
         </div>
       </div>
     </div>