feat: article details page.

pages/_app.module.css

@@ -11,7 +11,7 @@
     @apply bg-gray-700 text-gray-300;
   }
   .wrapper {
-    @apply mx-auto max-w-screen-xl;
+    @apply mx-auto max-w-screen-lg;
   }
 }
 .pageHeader {

pages/articles/[id].tsx

@@ -17,7 +17,13 @@ const ArticleDetails: FC<Props> = ({ article }) => {
   // });
   return (
     <main className={styles.articleDetails}>
-      <h1>{article.title}</h1>
+      <article className={styles.article}>
+        <header>
+          <h1>{article.title}</h1>
+          <time>{article.publishedAt}</time>
+        </header>
+        <div dangerouslySetInnerHTML={{__html: article.content}}></div>
+      </article>
     </main>
   );
 };

pages/articles/article.module.css

@@ -0,0 +1,28 @@
+.articleDetail {
+}
+.article {
+  @apply bg-gray-50 m-2 overflow-hidden rounded-xl;
+
+  :global(.dark) & {
+    @apply bg-gray-800;
+  }
+  & > header {
+      @apply my-8 mx-4;
+    h1 {
+      @apply text-2xl font-medium;
+
+      :global(.dark) & {
+        @apply text-gray-200;
+      }
+    }
+    time {
+      @apply text-sm text-gray-500;
+      :global(.dark) & {
+        @apply text-gray-400;
+      }
+    }
+  }
+  & > div {
+    @apply my-4 leading-8 mx-4 lg:mx-6 xl:mx-8 text-justify;
+  }
+}