From 1fab66a8debb76b5ba49814aa6513496747a1b52 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 23 Dec 2021 13:06:22 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E7=A7=BB=E5=8A=A8=E7=AB=AFw-full?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostCard.js       | 8 ++++----
 components/BlogPostListScroll.js | 2 +-
 components/Header.js             | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index 7685b5de..fe5c0cd8 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -8,8 +8,8 @@ import TagItemMini from './TagItemMini'
 
 const BlogPostCard = ({ post, tags }) => {
   return (
-    <div key={post.id} className='flex xl:flex-row flex-col-reverse justify-between hover:shadow-2xl shadow-md mb-8 duration-300 rounded-xl
-      w-full mx-2 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
+    <div key={post.id} className='flex xl:flex-row flex-col-reverse justify-between md:hover:shadow-2xl md:shadow-md duration-300 md:rounded-xl
+       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,8 +41,8 @@ const BlogPostCard = ({ post, tags }) => {
 
       {post?.page_cover && (
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-        <div className='h-60 w-full xl:max-w-xs relative rounded-t-xl xl:rounded-t-none xl:rounded-r-xl xl:h-full duration-200 cursor-pointer transform overflow-hidden'>
-          <Image className='hover:scale-105 transform duration-500 rounded-t-xl xl:rounded-t-none xl:rounded-r-xl' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
+        <div className='h-60 w-full xl:max-w-xs relative md:rounded-t-xl xl:rounded-t-none xl:rounded-r-xl xl:h-full duration-200 cursor-pointer transform overflow-hidden'>
+          <Image className='hover:scale-105 transform duration-500 md:rounded-t-xl xl:rounded-t-none xl:rounded-r-xl' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
         </div>
       </Link>
       )}
diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js
index f9cc534a..d3f29448 100644
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -56,7 +56,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
     return <div id='post-list-wrapper' className='mt-10 md:mt-0' ref={targetRef}>
 
       {/* 文章列表 */}
-      <div className='flex flex-wrap'>
+      <div className='flex flex-wrap space-y-8'>
         {postsToShow.map(post => (
           <BlogPostCard key={post.id} post={post} tags={tags}/>
         ))}
diff --git a/components/Header.js b/components/Header.js
index c64497e2..b4f045f9 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -102,6 +102,6 @@ function updateHeaderHeight () {
   if (window) {
     const headerElement = document.getElementById('header')
     console.log(headerElement, window.innerHeight)
-    headerElement.style.setProperty('height', window.innerHeight + 'px')
+    headerElement?.style?.setProperty('height', window.innerHeight + 'px')
   }
 }