feature:

博客卡片调整；
顶部tabBar调整

components/BlogPostCard.js

@@ -5,27 +5,34 @@ import React from 'react'
 
 const BlogPostCard = ({ post }) => {
   return (
-    <div key={post.id} className='animate__animated animate__fadeIn animate__faster shadow-xl border dark:border-gray-600 my-2 w-full 2xl:max-w-3xl 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 2xl:h-60 object-cover cursor-pointer transform hover:scale-110 duration-500' src={post.page_cover} alt={post.title} />
-          </Link>
-        )}
+    <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'>
+      {/*  封面图 */}
+      {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'
+               src={post.page_cover} alt={post.title} />
+        </Link>
+      )}
 
-        <div className='px-8 py-6'>
-          <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>
-          </Link>
-          <div className='flex flex-nowrap'>
+      <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>
+        </Link>
+        <p className='mt-2 text-gray-500 dark:text-gray-400 text-sm'>{post.summary}</p>
+
+        <div className='flex md:flex-nowrap flex-wrap md:justify-start justify-between pt-5'>
+          <div className='flex whitespace-nowrap'>
             <Link href={`/category/${post.category}`}>
-              <div className='cursor-pointer dark:text-gray-200 font-bold text-sm py-1.5 mr-2 hover:underline'><i className='fa fa-folder-open-o mr-1'/>{post.category}</div>
+              <div className='cursor-pointer dark:text-gray-200 text-gray-500 text-sm py-1.5 mr-1 underline hover:scale-105 transform duration-200'><i
+                className='fa fa-folder-open-o mr-1' />{post.category}</div>
             </Link>
             <span className='mt-2 mx-2 text-gray-500 dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
           </div>
-          <div className='flex'> {post.tags.map(tag => (<TagItemMini key={tag} tag={tag} />))}</div>
-          <p className='mt-2 text-gray-500 dark:text-gray-400 text-sm'>{post.summary}</p>
+          <div className='flex ml-1'> {post.tags.map(tag => (<TagItemMini key={tag} tag={tag} />))}</div>
         </div>
+      </div>
     </div>
   )
 }

components/BlogPostListPage.js

@@ -56,7 +56,7 @@ const BlogPostListPage = ({ page = 1, posts = [], tags }) => {
 
       <div>
         {/* 文章列表 */}
-        <div className='grid 3xl:grid-cols-4 2xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5'>
+        <div className='flex flex-wrap'>
           {postsToShow.map(post => (
             <BlogPostCard key={post.id} post={post} tags={tags} />
           ))}

components/BlogPostListScroll.js

@@ -49,40 +49,46 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
   const targetRef = useRef(null)
 
   if (!postsToShow || postsToShow.length === 0) {
-    return <BlogPostListEmpty currentSearch={currentSearch}/>
+    return <BlogPostListEmpty currentSearch={currentSearch} />
   } else {
-    return <div id='post-list-wrapper' className='mt-20 mx-2 md:mx-20' ref={targetRef}>
+    return <div id='post-list-wrapper' className='mt-20 mx-2 lg:mx-20' ref={targetRef}>
 
       {currentCategory && (
-        <div className='w-full p-1 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 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 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 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 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 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='grid 3xl:grid-cols-3 2xl:grid-cols-2 grid-cols-1 gap-5'>
-          {postsToShow.map(post => (
-            <BlogPostCard key={post.id} post={post} />
-          ))}
-        </div>
+      <div className='flex flex-wrap'>
+        {postsToShow.map(post => (
+          <BlogPostCard key={post.id} post={post} />
+        ))}
+      </div>
 
-        <div className='flex'>
-          <div onClick={() => { handleGetMore() }}
-               className='w-full my-4 py-4 bg-gray-300 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
-               > {hasMore ? '继续加载' : '加载完了😰'} </div>
-        </div>
+      <div className='flex'>
+        <div onClick={() => {
+          handleGetMore()
+        }}
+             className='w-full my-4 py-4 bg-gray-300 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
+        > {hasMore ? '继续加载' : '加载完了😰'} </div>
+      </div>
     </div>
   }
 }

components/TagItemMini.js

@@ -2,12 +2,12 @@ import Link from 'next/link'
 
 const TagItemMini = ({ tag, selected = false, count }) => {
   return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag)}`}>
-    <div className={`cursor-pointer inline-block border rounded hover:bg-gray-300 
-      mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:text-gray-300 dark:hover:bg-gray-500
+    <div className={`cursor-pointer inline-block border rounded hover:bg-gray-500 shadow-card
+      mr-2 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:text-gray-300 dark:hover:bg-gray-500
        ${selected
       ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'
-      : 'bg-gray-200 text-gray-600 dark:bg-gray-800 dark:border-gray-600'}` }>
-    <div> <i className='fa fa-tag mr-1 py-0.5'/>{tag + (count ? `(${count})` : '')} </div>
+      : 'bg-white text-gray-500 hover:shadow-xl hover:text-white border-gray-500 dark:bg-gray-800 dark:border-gray-600'}` }>
+    <div> <i className='fa fa-tag mr-2 py-0.5'/>{tag + (count ? `(${count})` : '')} </div>
     </div>
   </Link>
 }