feat(navbar) new style, better performance

app/blog/BlogPostCard.tsx

@@ -23,7 +23,7 @@ function BlogPostCard({ post }: Props) {
 
     return (
 
-        <div>
+        <div className={ `w-full` }>
             <Card as={ Link } href={ `/blog/post/${ post_id }` }
                   className={ `mx-7 group` }
                   isPressable

app/blog/page.tsx

@@ -9,7 +9,7 @@ async function Blog() {
         let posts = res['posts'];
         return (
             // blog list
-            <ul className={ 'flex flex-col items-center w-full max-w-[1024px]' }>
+            <ul className={ 'flex flex-col items-center w-full' }>
                 { posts.map((post: JSON, key: React.Key | null | undefined) => (
                     <li key={ key } className={ 'my-7 w-full' }>
                         <BlogPostCard post={ post } />

app/blog/post/[id]/generate.tsx

@@ -19,7 +19,7 @@ async function Generate(props: Props) {
     const response = await axios(`http://localhost:${ process.env.BACKEND_PORT }/api/get/post/${ props.id }`);
     if (response.status !== 200) {
         return (
-            <Card className={ `w-full max-w-[1024px]` }>
+            <Card className={ `w-full` }>
                 <CardBody>
                     Fatal: Failed to load the post.
                 </CardBody>
@@ -31,10 +31,10 @@ async function Generate(props: Props) {
 
     return (
         <div>
-            <Card className={ `w-full max-w-[1024px]` }>
+            <Card className={ `w-full` }>
                 <CardBody>
                     <Markdown
-                        className={ `mx-5 my-5 max-w-none prose dark:prose-invert sm:prose-sm md:prose-sm lg:prose-lg` }
+                        className={ `mx-5 my-5 max-w-none prose dark:prose-invert sm:prose-sm md:prose-md lg:prose-lg` }
                         remarkPlugins={ [ remarkGfm, remarkToc, remarkFrontmatter ] }
                         rehypePlugins={ [ rehypeHighlight, rehypeRaw, rehypeSanitize ] }
                     >{ (post_data as any)['content'] }</Markdown>

app/blog/post/[id]/page.tsx

@@ -4,7 +4,7 @@ import Generate from '@/app/blog/post/[id]/generate';
 function BlogReader({ params }: { params: { id: string } }) {
 
     return (
-        <div className={ `mx-7 my-7 w-full max-w-[1024px]` }>
+        <div className={ `mx-7 my-7 w-full` }>
             <Generate id={ params.id } />
         </div>
     );

app/layout.tsx

@@ -17,10 +17,14 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" suppressHydrationWarning>
-        <body className={`dark:bg-[#282830]`}>
+        <body className={ `dark:bg-[#282830] min-h-screen` }>
         <NextThemesProvider attribute="class" defaultTheme="dark">
-            <Navbar />
-            { children }
+            <div className={ `justify-center flex flex-row w-full` }>
+                <Navbar />
+                <div className={ `flex-auto max-w-[1024px]` }>
+                    { children }
+                </div>
+            </div>
         </NextThemesProvider>
         </body>
         </html>