style: apply blog content style

hyesungoh · Mar 19, 2023 · 1c83f8e · 1c83f8e · vercel · Mar 19, 2023
1 parent 6ba7bc6
commit 1c83f8e
Showing 1 changed file with 31 additions and 1 deletion.
diff --git a/apps/blog/src/pages/[slug].page.tsx b/apps/blog/src/pages/[slug].page.tsx
@@ -33,7 +33,7 @@ function Post({ title, subtitle, category, date, content, ogImage }: Props) {
         <P theme={theme}>
           <DateAndCategoryLink date={date} category={category} />
         </P>
-        <article dangerouslySetInnerHTML={{ __html: content }}></article>
+        <Article dangerouslySetInnerHTML={{ __html: content }}></Article>
       </Main>
       <AuthorSection hasKbarButton />
       <Comments />
@@ -59,6 +59,36 @@ const P = styled.p<{ theme: NextUITheme | undefined }>`
   color: ${({ theme }) => theme.colors.accents6.value};
 `;
 
+const Article = styled.article`
+  & h1,
+  & h2 {
+    margin-top: 2rem;
+  }
+
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
+    margin-top: 1rem;
+  }
+
+  & img {
+    margin-top: 0.75rem;
+  }
+
+  & hr {
+    margin: 1.5rem 0;
+  }
+
+  & p {
+    margin-bottom: 0.25rem;
+  }
+
+  & blockquote p:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+
 interface Paths {
   params: {
     slug: string;