From 4b88b7b41851b5706a1384bd92f8477c1062d8e3 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 11 Oct 2021 18:32:42 +0800
Subject: [PATCH] =?UTF-8?q?4.0=20=E4=BB=BFYoutube=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Footer.js            |  2 +-
 components/SideBarResponsive.js |  2 +-
 components/Tags.js              |  3 ++-
 components/TocBar.js            |  4 ++--
 components/TopNav.js            | 12 ++++++------
 layouts/ArticleLayout.js        |  4 ++--
 layouts/DefaultLayout.js        |  2 +-
 7 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/components/Footer.js b/components/Footer.js
index c36db071..c86b9e86 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -6,7 +6,7 @@ const Footer = ({ fullWidth = true }) => {
   const y = d.getFullYear()
   return (
     <footer
-      className='flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 text-xs text-gray-400 p-6'
+      className='flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 text-sm text-gray-400 p-6'
     >
         <span className='fa fa-shield leading-6'> <a href='https://beian.miit.gov.cn/' className='ml-1'>闽ICP备20010331号</a></span>
         <br />
diff --git a/components/SideBarResponsive.js b/components/SideBarResponsive.js
index 18280e20..337cf43a 100644
--- a/components/SideBarResponsive.js
+++ b/components/SideBarResponsive.js
@@ -4,7 +4,7 @@ import TocBar from '@/components/TocBar'
 import SocialButton from '@/components/SocialButton'
 
 const SideBarResponsive = ({ tags, currentTag, post }) => {
-  return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 mt-12 hidden md:block'>
+  return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 mt-12 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'>
diff --git a/components/Tags.js b/components/Tags.js
index cd53f0f8..c8bab369 100644
--- a/components/Tags.js
+++ b/components/Tags.js
@@ -10,7 +10,8 @@ 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-20 flex py-1 space-x-3'>
+      <ul id='tag-container' className='px-10 flex py-1 space-x-3'>
+        <li className='w-10 py-2'>标签:</li>
         {Object.keys(tags).map(key => {
           const selected = key === currentTag
           return (
diff --git a/components/TocBar.js b/components/TocBar.js
index 51a4c0f3..0b1bd0f4 100644
--- a/components/TocBar.js
+++ b/components/TocBar.js
@@ -50,11 +50,11 @@ const TocBar = ({ toc }) => {
     setActiveSection(currentSectionId)
   }, throttleMs)
 
-  return <div className='bg-white dark:bg-gray-800 pb-10 w-52 hidden md:block min-h-screen'>
+  return <div className='bg-white dark:bg-gray-800 pb-10 hidden md:block min-h-screen'>
     <div className='border-t dark:border-gray-600 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'>
+    <nav className='text-gray-500 dark:text-gray-400 underline overflow-y-auto overflow-x-auto'>
       {toc.map((tocItem) => {
         const id = uuidToId(tocItem.id)
         return (
diff --git a/components/TopNav.js b/components/TopNav.js
index cb97a2b8..8b5af059 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -30,11 +30,11 @@ 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-600 border-b dark:border-gray-700 shadow'>
 
       <div className='fixed top-0 left-0 z-30 h-full'>
-        <div className={(showDrawer ? 'shadow-2xl' : '-ml-52') + ' duration-200 w-52 h-full bg-white dark:bg-gray-800 border-r dark:border-gray-600'}>
-          <div className='flex space-x-4 px-5 dark:bg-gray-600'>
+        <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'}>
+          <div className='flex space-x-4 px-5 py-1 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}/>
@@ -64,7 +64,7 @@ const TopNav = ({ tags, currentTag, post }) => {
           </div>
           <Link href='/'>
             <a
-              className='flex justify-center font-bold font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200
+              className='hidden md:block  flex justify-center font-bold font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200
                dark:text-gray-300
               '>{BLOG.title}</a>
           </Link>
@@ -76,12 +76,12 @@ const TopNav = ({ tags, currentTag, post }) => {
             <input
               type='text'
               placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-              className={'md:w-80 transition border-r dark:border-gray-700 duration-200 leading-10 pl-2 block border-gray-300 bg-white text-black dark:bg-gray-800 dark:text-white'}
+              className={'md:w-80 w-32 transition duration-200 leading-10 pl-2 block border-gray-300 bg-white text-black dark:bg-gray-800 dark:text-white'}
               onKeyUp={handleKeyUp}
               onChange={e => setSearchValue(e.target.value)}
               defaultValue={router.query.s ?? ''}
             />
-            <div className='py-3 px-5 bg-gray-50 flex dark:bg-gray-500 justify-center align-middle cursor-pointer'
+            <div className='py-3 px-5 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
                  onClick={handleSearch}>
               <i className='fa fa-search text-black absolute cursor-pointer' />
             </div>
diff --git a/layouts/ArticleLayout.js b/layouts/ArticleLayout.js
index 3104ed73..c9df88f9 100644
--- a/layouts/ArticleLayout.js
+++ b/layouts/ArticleLayout.js
@@ -48,7 +48,7 @@ const ArticleLayout = ({
 
       <Progress targetRef={targetRef} />
 
-      <div className=' fixed w-full top-0 z-20'>
+      <div className='fixed w-full top-0 z-20'>
         <TopNav post={frontMatter}/>
       </div>
 
@@ -63,7 +63,7 @@ const ArticleLayout = ({
           <div>
 
             <header
-              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'>
+              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'>
               {/* 封面图 */}
               {frontMatter.page_cover && frontMatter.page_cover.length > 1 && (
                 <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}
diff --git a/layouts/DefaultLayout.js b/layouts/DefaultLayout.js
index e6771ce1..96c4fa65 100644
--- a/layouts/DefaultLayout.js
+++ b/layouts/DefaultLayout.js
@@ -62,7 +62,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
             <Tags tags={tags} currentTag={currentTag} />
           </div>
 
-          <main id='post-list-wrapper' className='py-24 px-8 md:px-20'>
+          <main id='post-list-wrapper' className='py-24 px-2 md:px-20'>
             {(!page || page === 1) && (<div className='py-5' />)}
 
             {/* 当前搜索 */}