💄 update style and layout

src/app/[lang]/Footer.tsx

@@ -1,4 +1,5 @@
 import Container from '@/components/Container';
+import Link from '@/components/Link';
 
 type FooterProps = {
   copyright: string;
@@ -7,12 +8,12 @@ type FooterProps = {
 function Footer({ copyright }: FooterProps) {
   return (
     <Container as="footer" className="flex justify-center gap-3 ">
-      <a
+      <Link
         rel="license"
         href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
       >
         CC BY-NC-SA 4.0
-      </a>
+      </Link>
       <span>{copyright}</span>
     </Container>
   );

src/app/[lang]/Menu.tsx

@@ -58,10 +58,10 @@ function Menu({ menu }: MenuProps) {
               href={href}
               className={cn(
                 'block p-3 text-xl leading-none no-underline',
-                'text-zinc-700 dark:text-zinc-300',
+                'text-zinc-800 dark:text-zinc-200',
                 activeLinkIndex === index
                   ? 'neon-text text-primary-600 dark:text-primary-400'
-                  : 'hover:text-primary-700 dark:hover:text-primary-300'
+                  : 'hover:text-primary-800 dark:hover:text-primary-200'
               )}
             >
               {text}

src/app/[lang]/posts/[postId]/page.tsx

@@ -45,7 +45,7 @@ async function PostPage({ params: { postId } }: PostParams) {
         </H1>
         <time>{formattedDate}</time>
       </Container>
-      <Container as="main" className="mx-2 block py-8 lg:flex lg:px-2">
+      <Container as="main" className="block py-8 lg:flex lg:px-2">
         <aside className="hidden w-40 shrink-0 lg:block xl:w-60">
           <nav className="sticky top-[var(--header-height)] px-4">
             <h4 className="my-3 text-lg font-semibold text-gray-900 dark:text-gray-100">

src/components/Card/Card.tsx

@@ -3,6 +3,7 @@ import { MdOutlineWidgets } from 'react-icons/md';
 import { AiOutlineTags } from 'react-icons/ai';
 
 import { formatDate } from '@/utils/date';
+import { H2 } from '../Heading';
 import Link from '../Link';
 import Image from '../Image';
 
@@ -31,16 +32,11 @@ function Card({
           />
         )}
       </div>
-      <div>
-        <h2 className="text-2xl font-bold dark:text-white/90">
-          <Link
-            className="hover:text-black/70 dark:hover:text-white/70"
-            href={`/posts/${id}`}
-          >
-            {title}
-          </Link>
-        </h2>
-        <p className="my-3 text-base">{description}</p>
+      <div className="prose prose-slate dark:prose-invert">
+        <H2>
+          <Link href={`/posts/${id}`}>{title}</Link>
+        </H2>
+        <p>{description}</p>
         <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
           <div className="flex items-center gap-1">
             <BsCalendar4Week />
@@ -52,7 +48,7 @@ function Card({
               category.map((tag) => (
                 <Link
                   key={category + tag}
-                  className="whitespace-nowrap hover:text-black/70 dark:hover:text-white/70"
+                  className="whitespace-nowrap"
                   href="/"
                 >
                   {tag}
@@ -63,11 +59,7 @@ function Card({
           <div className="flex flex-wrap items-center gap-1">
             <AiOutlineTags />
             {tags.map((tag) => (
-              <Link
-                key={tag}
-                className="whitespace-nowrap hover:text-black/70 dark:hover:text-white/70"
-                href="/"
-              >
+              <Link key={tag} className="whitespace-nowrap" href="/">
                 {tag}
               </Link>
             ))}

src/components/Container/Container.tsx

@@ -11,7 +11,7 @@ function Container({ as = 'div', className, ...props }: ContainerProps) {
   return (
     <Component
       className={cn(
-        'px-7 mx-2 md:mx-8 lg:mx-16 lg:px-14',
+        'px-7 mx-4 max-w-6xl lg:px-14 sm:mx-8 md:mx-12 lg:mx-14 xl:mx-auto',
         className
       )}
       {...props}

src/components/Link/Link.tsx

@@ -45,7 +45,10 @@ function Link<T extends string = string>({
     return (
       <NextLink
         href={adjustedHref as Route}
-        className={className}
+        className={cn(
+          'hover:text-primary-700 dark:hover:text-primary-300',
+          className
+        )}
         {...otherProps}
       >
         {children}
@@ -58,7 +61,10 @@ function Link<T extends string = string>({
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className={cn('inline-flex', className)}
+      className={cn(
+        'inline-flex hover:text-primary-700 dark:hover:text-primary-300',
+        className
+      )}
       {...otherProps}
     >
       {children}