4.70版本 heo主题封面比例、动画更改

[laogou717]

HEO 主题改动记录

1. 博文卡片悬停动画改动

在 BlogPostCard.js 中，我发现当鼠标悬浮在博文卡片上时，整个卡片和封面图都会同时放大，这种效果使卡片显得不够美观。因此，我对以下内容进行了调整：

改动内容：

1. 删除了整个卡片的放大效果：

   • 删除了 hover:scale-110 悬停放大效果，这样博文卡片的文字和描述部分不再随着封面一起放大。

2. 改进封面图的动画效果：

   • 未改变封面图的放大比例，仍然保持 scale-105，但修改了动画时长，从 300ms 增加到了 500ms，并且使用了 ease-in-out，让封面图的悬停放大效果更加平滑自然。

3. 封面图居中显示：

   • 将封面的高度样式从固定的 h-60 更改为 h-full，这样封面图可以在卡片中自适应显示，确保其内容居中，避免被卡片的其他部分遮挡。

改动前效果：

（图片链接）

改动后效果：

（图片链接）

---

2. 标题图标的改动

在博文标题前的图标（icon）显示偏大，且与文字不对齐，导致整体布局不协调。为了改善这一点，我进行了以下修改：

改动内容：

1. 针对 NotionIcon.js 的修改：

   • 为了确保该图标仅在博文标题中调整样式，而不影响其他使用 NotionIcon 的地方，我在Heo主题下新建了 NotionIcon.js 来针对Heo这个主题的icon。
   • 这样可以单独对博文标题处的图标进行修改，而不会影响全局的图标样式。
     4.70版本 heo主题封面比例、动画更改 #2725 这就是刚刚这个提交撤回的原因,我忘记考虑hexo主题了。
   • 不过现在已经解决,可以访问这个:https://notion-next-dun-five-38.vercel.app 预览效果。

2. 在 BlogPostCard.js 中调整图标的大小和位置：

   • 在 BlogPostCard.js 中，我将图标的大小调整为 w-5 h-5，并通过 my-auto 确保图标与文字垂直居中对齐，同时在图标后添加了 translate-y-[-8%] 以保证图标和文字之间正确对其。

改动前效果：

（图片链接）

改动后效果：

（图片链接）

因为是第一次提交代码,有不足之处还请谅解。

[vercel]

@laogou717 is attempting to deploy a commit to the tangly1024's projects Team on Vercel.

A member of the Team first needs to authorize it.

[tangly1024]

感谢你的提交！这是非常重要的细节优化！