fix: move className from article to div

This commit is contained in:
Timothy 2021-02-04 08:44:28 +08:00
parent 1c1c30cf18
commit 4e8092f6b1

View File

@ -37,40 +37,45 @@ export default function Home({ posts }) {
const { slug, date, title, summary, tags } = frontMatter
return (
<li key={slug} className="py-12">
<article className="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
<dl>
<dt className="sr-only">Published on</dt>
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
</dd>
</dl>
<div className="space-y-5 xl:col-span-3">
<div className="space-y-6">
<div>
<h2 className="text-2xl font-bold leading-8 tracking-tight">
<Link href={`/blog/${slug}`} className="text-gray-900 dark:text-gray-100">
{title}
</Link>
</h2>
<div className="space-x-3">
{tags.map((tag) => (
<Tag key={tag} text={tag} />
))}
<article>
<div className="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
<dl>
<dt className="sr-only">Published on</dt>
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
</dd>
</dl>
<div className="space-y-5 xl:col-span-3">
<div className="space-y-6">
<div>
<h2 className="text-2xl font-bold leading-8 tracking-tight">
<Link
href={`/blog/${slug}`}
className="text-gray-900 dark:text-gray-100"
>
{title}
</Link>
</h2>
<div className="space-x-3">
{tags.map((tag) => (
<Tag key={tag} text={tag} />
))}
</div>
</div>
<div className="prose text-gray-500 max-w-none dark:text-gray-400">
{summary}
</div>
</div>
<div className="prose text-gray-500 max-w-none dark:text-gray-400">
{summary}
<div className="text-base font-medium leading-6">
<Link
href={`/blog/${slug}`}
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
aria-label={`Read "${title}"`}
>
Read more &rarr;
</Link>
</div>
</div>
<div className="text-base font-medium leading-6">
<Link
href={`/blog/${slug}`}
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
aria-label={`Read "${title}"`}
>
Read more &rarr;
</Link>
</div>
</div>
</article>
</li>