fix post list and post page breakpoint

This commit is contained in:
DefectingCat
2023-11-09 10:05:06 +08:00
parent e6fbb3ba6f
commit 1af004f3ca
3 changed files with 11 additions and 3 deletions

View File

@ -1,4 +1,5 @@
import clsx from 'clsx';
import PostCardLoading from 'components/pages/blog/post-card-loading';
import { Metadata } from 'next';
import { ReactNode } from 'react';
@ -8,7 +9,7 @@ export const metadata: Metadata = {
export default function PageLayout({ children }: { children: ReactNode }) {
return (
<main className="max-w-4xl mx-auto">
<main className="max-w-4xl mx-auto lg:w-[56rem]">
<h1
className={clsx(
'text-5xl font-bold text-center font-Barlow',

View File

@ -1,4 +1,5 @@
import rehypePrism from '@mapbox/rehype-prism';
import clsx from 'clsx';
import components from 'components/mdx/components';
import data from 'content/mdx-data';
import { allPostsPath, readSinglePost } from 'lib/posts';
@ -56,7 +57,13 @@ const Page = async ({
return (
<>
<main id="article" className="relative max-w-4xl px-4 mx-auto my-10">
<main
id="article"
className={clsx(
'relative max-w-4xl px-4 mx-auto my-10',
'lg:w-[56rem] w-full',
)}
>
<h1>{mdxSource.frontmatter?.title}</h1>
<time>{mdxSource.frontmatter?.date}</time>
<PostToc toc={toc} tocLength={tocLength} />

View File

@ -10,7 +10,7 @@ const PostCardLoading = () => {
'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
'flex justify-between text-gray-800 ',
'mb-4 dark:text-gray-200',
'flex-col',
'flex-col w-full',
)}
>
<div className="flex justify-between">