From 4a5083d11421dd37e5a616644bbf7bec0c322160 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 15 Nov 2021 13:53:11 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E5=8D=A1=E7=89=8C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostCard.js       |  6 +++---
 components/BlogPostListScroll.js | 32 +++++++++++---------------------
 2 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index 54e18c71..b30cb5db 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -6,11 +6,11 @@ import React from 'react'
 const BlogPostCard = ({ post }) => {
   return (
     <div key={post.id}
-         className='animate__animated animate__fadeIn animate__faster xl:flex shadow-xl border dark:border-gray-600 mb-6 w-full bg-white bg-opacity-80 dark:bg-gray-800 dark:hover:bg-gray-700 overflow-hidden'>
+         className='animate__animated animate__fadeIn animate__faster xl:flex shadow-card border dark:border-gray-600 mb-6 w-full bg-white bg-opacity-80 dark:bg-gray-800 dark:hover:bg-gray-700 overflow-hidden'>
       {/*  封面图 */}
       {post.page_cover && post.page_cover.length > 1 && (
         <Link href={`${BLOG.path}/article/${post.slug}`}>
-          <img className='w-full max-h-52 xl:w-80 object-cover cursor-pointer transform hover:scale-110 duration-500'
+          <img className='w-full max-h-72 xl:w-80 object-cover cursor-pointer transform hover:scale-110 duration-500'
                src={post.page_cover} alt={post.title} />
         </Link>
       )}
@@ -18,7 +18,7 @@ const BlogPostCard = ({ post }) => {
       <div className='px-8 py-6 w-full'>
         <Link href={`${BLOG.path}/article/${post.slug}`}>
           <div
-            className='cursor-pointer my-3 text-2xl leading-tight font-bold text-black dark:text-gray-100 hover:underline'>{post.title}</div>
+            className='cursor-pointer my-3 text-xl leading-tight font-bold text-black dark:text-gray-100 hover:underline'>{post.title}</div>
         </Link>
         <p className='mt-2 text-gray-500 dark:text-gray-400 text-sm'>{post.summary}</p>
 
diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js
index 3755f663..f62f2983 100644
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -53,27 +53,17 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
   } else {
     return <div id='post-list-wrapper' className='mt-20 mx-2 lg:mx-20' ref={targetRef}>
 
-      {currentCategory && (
-        <div className='w-full p-1 my-2 sticky top-0 z-30 shadow-xl bg-gray-100 dark:bg-gray-700'>
-          <div className='cursor-pointer p-1.5 mr-2 dark:text-gray-300 hover:underline'><i
-            className='fa fa-folder-open-o mr-1' />{currentCategory}</div>
-        </div>
-      )}
-
-      {currentSearch && (
-        <div className='w-full p-1 my-2 sticky top-0 z-30 shadow-xl bg-gray-100 dark:bg-gray-700'>
-          <div className='cursor-pointer p-1.5 mr-2 dark:text-gray-300 hover:underline'><i
-            className='fa fa-search mr-1' />关键字：{currentSearch}</div>
-        </div>
-      )}
-
-      {currentTag && (
-        <div className='w-full p-1 my-2 sticky top-0 z-30 shadow-xl bg-gray-100 dark:bg-gray-700 flex'>
-          <div
-            className='cursor-pointer p-1.5 mr-2 hover:underline bg-gray-200 dark:bg-gray-500 dark:text-gray-200 px-2 rounded'>
-            <i className='fa fa-tag mr-1 ' /> {currentTag}</div>
-        </div>
-      )}
+      <div className='w-full mb-4 xl:sticky xl:top-0 z-30 shadow-card bg-white dark:bg-gray-700 dark:text-gray-200'>
+        {currentCategory && (
+          <div className='p-2 mr-2'><i className='fa fa-folder-open-o mr-1' />{currentCategory}</div>
+        )}
+        {currentSearch && (
+          <div className='p-2 mr-2'><i className='fa fa-search mr-1' />关键字：{currentSearch}</div>
+        )}
+        {currentTag && (
+          <div className='p-2 mr-2'> <i className='fa fa-tag mr-1' /> {currentTag}</div>
+        )}
+      </div>
 
       {/* 文章列表 */}
       <div className='flex flex-wrap'>