d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: 菜单下划线动画

Browse Source
This commit is contained in:
LooseLi
2023-08-25 17:11:55 +08:00
parent 9a23443375
commit 718da30c50
2 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
themes/next/components/BlogPostCard.js
View File

@@ -28,10 +28,10 @@ const BlogPostCard = ({ post, showSummary }) => {
data-aos-duration="500"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className={`cursor-pointer hover:underline text-3xl ${showPreview ? 'text-center' : ''
className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''
} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
<NotionIcon icon={post.pageIcon} /> {post.title}
<NotionIcon icon={post.pageIcon} /> <span className='menu-link'>{post.title}</span>
</Link>
@@ -48,10 +48,10 @@ const BlogPostCard = ({ post, showSummary }) => {
<Link
href={`/category/${post.category}`}
passHref
className="hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer font-light text-sm hover:underline transform">
className="hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer font-light text-sm transform">
<i className="mr-1 fas fa-folder" />
{post.category}
<span className='menu-link'>{post.category}</span>
</Link>
<span className="mx-2">|</span>
@@ -60,8 +60,8 @@ const BlogPostCard = ({ post, showSummary }) => {
<Link
href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
passHref
className="hover:text-blue-500 dark:hover:text-blue-400 font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
{post.date?.start_date}
className="hover:text-blue-500 dark:hover:text-blue-400 font-light cursor-pointer text-sm leading-4 mr-3">
<span className='menu-link'>{post.date?.start_date}</span>
</Link>
</div>
<TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/>

14
themes/next/style.js
View File

@@ -19,6 +19,20 @@ const Style = () => {
padding: 40px;
}
// 菜单下划线动画
#theme-next .menu-link {
text-decoration: none;
background-image: linear-gradient(#4e80ee, #4e80ee);
background-repeat: no-repeat;
background-position: bottom center;
background-size: 0 2px;
transition: background-size 100ms ease-in-out;
}
#theme-next .menu-link:hover {
background-size: 100% 2px;
color: #4e80ee;
}
`}</style>
}