refactor tailwind typography to v3 and update styling

This commit is contained in:
Timothy Lin
2023-07-25 18:58:58 +08:00
parent ed54f2fcaf
commit 4278bec763
5 changed files with 19 additions and 114 deletions

View File

@ -40,7 +40,9 @@ export default function AuthorLayout({ children, content }: Props) {
<SocialIcon kind="twitter" href={twitter} />
</div>
</div>
<div className="prose max-w-none pb-8 pt-8 dark:prose-dark xl:col-span-2">{children}</div>
<div className="prose max-w-none pb-8 pt-8 dark:prose-invert xl:col-span-2">
{children}
</div>
</div>
</div>
</>

View File

@ -92,7 +92,7 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
</dd>
</dl>
<div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
<div className="prose max-w-none pb-8 pt-10 dark:prose-dark">{children}</div>
<div className="prose max-w-none pb-8 pt-10 dark:prose-invert">{children}</div>
<div className="pb-6 pt-6 text-sm text-gray-700 dark:text-gray-300">
<Link href={discussUrl(path)} rel="nofollow">
Discuss on Twitter
@ -125,7 +125,7 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
)}
{(next || prev) && (
<div className="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8">
{prev && (
{prev && prev.path && (
<div>
<h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
Previous Article
@ -135,7 +135,7 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
</div>
</div>
)}
{next && (
{next && next.path && (
<div>
<h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
Next Article

View File

@ -41,7 +41,7 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
</header>
<div className="grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:divide-y-0">
<div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
<div className="prose max-w-none pb-8 pt-10 dark:prose-dark">{children}</div>
<div className="prose max-w-none pb-8 pt-10 dark:prose-invert">{children}</div>
</div>
{siteMetadata.comments && (
<div className="pb-6 pt-6 text-center text-gray-700 dark:text-gray-300" id="comment">
@ -50,7 +50,7 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
)}
<footer>
<div className="flex flex-col text-sm font-medium sm:flex-row sm:justify-between sm:text-base">
{prev && (
{prev && prev.path && (
<div className="pt-4 xl:pt-8">
<Link
href={`/${prev.path}`}
@ -61,7 +61,7 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
</Link>
</div>
)}
{next && (
{next && next.path && (
<div className="pt-4 xl:pt-8">
<Link
href={`/${next.path}`}