From 47e781d51791f5486f2a106078b3fcb022cd3497 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 16 Dec 2021 16:09:24 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E5=BD=92=E6=A1=A3=E9=A1=B5=E9=87=8D?=
 =?UTF-8?q?=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostArchive.js | 4 ++--
 components/BlogPostCard.js    | 4 ++--
 components/SideBar.js         | 2 +-
 pages/archive/index.js        | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/BlogPostArchive.js b/components/BlogPostArchive.js
index e95f2cfb..207486bb 100644
--- a/components/BlogPostArchive.js
+++ b/components/BlogPostArchive.js
@@ -17,10 +17,10 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
       <div className='pt-16 pb-4 text-3xl dark:text-white' id={archiveTitle}>{archiveTitle}</div>
       <ul>
         {posts.map(post => (
-          <li key={post.id} className='border-l-2 p-1 text-sm hover:scale-x-105 hover:border-blue-500 transform duration-500  overflow-hidden whitespace-nowrap'>
+          <li key={post.id} className='border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-blue-500 transform duration-500'>
             <div name={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp;
               <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-                <a className='dark:text-blue-400 hover:underline cursor-pointer text-blue-600'>{post.title}</a>
+                <a className='dark:text-blue-400 overflow-x-hidden hover:underline cursor-pointer text-blue-600'>{post.title}</a>
               </Link>
             </div>
           </li>
diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index 1af762c5..55229ed7 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -9,7 +9,7 @@ import TagItemMini from './TagItemMini'
 const BlogPostCard = ({ post, tags }) => {
   return (
     <div key={post.id} className='flex md:flex-row flex-col-reverse justify-between hover:shadow-2xl shadow-md mb-14 duration-300 rounded-xl
-      w-full lg:h-60 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
+      w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
 
       <div className='p-8 flex flex-col justify-between w-full'>
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
@@ -41,7 +41,7 @@ const BlogPostCard = ({ post, tags }) => {
 
       {post?.page_cover && (
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-        <div className='h-60 w-full md:max-w-sm relative rounded-t-xl md:rounded-t-none md:rounded-r-xl md:h-full duration-200 cursor-pointer transform overflow-hidden'>
+        <div className='h-60  w-full md:max-w-sm relative rounded-t-xl md:rounded-t-none md:rounded-r-xl md:h-full duration-200 cursor-pointer transform overflow-hidden'>
           <Image className='hover:scale-105 transform duration-500 rounded-t-xl md:rounded-t-none md:rounded-r-xl' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
         </div>
       </Link>
diff --git a/components/SideBar.js b/components/SideBar.js
index 4404d665..384b9880 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -77,7 +77,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
               </a>
             </Link>
           </div>
-          <div className='px-5 pt-2'>
+          <div className='px-5 py-2'>
             <TagGroups tags={tags} currentTag={currentTag} />
           </div>
         </section>
diff --git a/pages/archive/index.js b/pages/archive/index.js
index ee8f4879..79958c24 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -77,7 +77,7 @@ const Index = ({ allPosts, tags, categories }) => {
         <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>
-        <div className='mt-20 mx-2 lg:mx-20 bg-white p-12 dark:bg-gray-800'>
+        <div className='mt-20 mb-10 pb-20 mx-2 lg:mx-20 bg-white md:p-12 p-3 dark:bg-gray-800 '>
           {Object.keys(archivePosts).map(archiveTitle => (
              <BlogPostArchive key={archiveTitle} posts={archivePosts[archiveTitle]} archiveTitle={archiveTitle}/>
           ))}