修改hexo卡片元素位置和间隙

This commit is contained in:
emengweb
2023-04-25 11:53:44 +00:00
parent 29fa0a8b6a
commit 7bd8337019
12 changed files with 52 additions and 43 deletions

View File

@@ -3,6 +3,7 @@ import TagItemMini from './TagItemMini'
import { useGlobal } from '@/lib/global'
import formatDate from '@/lib/formatDate'
import BLOG from '@/blog.config'
import NotionIcon from '@/components/NotionIcon'
export default function HeaderArticle({ post, siteInfo }) {
const { locale } = useGlobal()
@@ -30,24 +31,25 @@ export default function HeaderArticle({ post, siteInfo }) {
data-aos-anchor-placement="top-bottom"
className="bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
<div className='mt-24'>
{/* 文章Title */}
<div className="font-bold text-4xl shadow-text-md flex justify-center text-center text-white dark:text-white ">
{post.title}
</div>
<section className="flex-wrap shadow-text-md flex text-sm justify-center mt-2 text-white dark:text-gray-400 font-light leading-8">
<div className='dark:text-gray-200'>
<div className='mt-10'>
<div className='mb-3 flex justify-center'>
{post.category && <>
<Link href={`/category/${post.category}`} passHref legacyBehavior>
<div className="cursor-pointer mr-2 dark:hover:text-white hover:underline">
<i className="mr-1 fas fa-folder-open" />
<div className="cursor-pointer px-2 py-1 mb-2 border rounded-sm dark:border-white text-sm font-medium text-5xl shadow-text-md text-white">
{post.category}
</div>
</Link>
</>}
</div>
<div className='flex justify-center dark:text-gray-200'>
{/* 文章Title */}
<div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
<NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />{post.title}
</div>
<section className="flex-wrap shadow-text-md flex text-sm justify-center mt-4 text-white dark:text-gray-400 font-light leading-8">
<div className='flex justify-center dark:text-gray-200 text-opacity-70'>
{post?.type !== 'Page' && (
<>
<Link
@@ -71,7 +73,7 @@ export default function HeaderArticle({ post, siteInfo }) {
</div>}
</section>
<div className='my-3'>
<div className='mt-4 mb-1'>
{post.tagItems && (
<div className="flex justify-center flex-nowrap overflow-x-auto">
{post.tagItems.map(tag => (