Fix docs layout, font, color

Author: forestream

apps/landing/src/app/(detail)/docs/layout.tsx

@@ -16,7 +16,13 @@ export default function DetailLayout({
             <LeftMenu />
           </Box>
         </Box>
-        <Box className="markdown-body" flex={1} px="60px" py="40px">
+        <Box
+          className="markdown-body"
+          flex={1}
+          px={['20px', null, '60px']}
+          py={['20px', null, '40px']}
+          w="100%"
+        >
           {children}
         </Box>
         <Box display={['none', null, null, 'initial']}>

apps/landing/src/app/markdown.css

@@ -4,6 +4,30 @@ table {
     border-collapse: collapse;
     border-spacing: 0;
     border: 1px solid var(--text);
+    color: var(--text, #2F2F2F);
+
+    /* Desktop/bodyReg */
+    font-family: Pretendard;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 24px */
+    letter-spacing: -0.48px;
+}
+
+code {
+    font-family: D2Coding;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 1.5;
+    letter-spacing: -0.03em;
+}
+
+@media (min-width: 1280px) {
+    code {
+        font-size: 15px;
+    }
 }
 
 th, td {

apps/landing/src/mdx-components.tsx

@@ -1,3 +1,4 @@
+import { Text } from '@devup-ui/react'
 import type { MDXComponents } from 'mdx/types'
 
 import { Code } from './components/Code'
@@ -17,6 +18,34 @@ const _components = {
       </code>
     )
   },
+  h1({ children }: { children: React.ReactNode }) {
+    return (
+      <Text as="h1" color="$title" typography="h1">
+        {children}
+      </Text>
+    )
+  },
+  h2({ children }: { children: React.ReactNode }) {
+    return (
+      <Text as="h2" color="$title" typography="h2">
+        {children}
+      </Text>
+    )
+  },
+  h3({ children }: { children: React.ReactNode }) {
+    return (
+      <Text as="h3" color="$title" typography="h3">
+        {children}
+      </Text>
+    )
+  },
+  p({ children }: { children: React.ReactNode }) {
+    return (
+      <Text as="p" color="$text" typography="bodyReg">
+        {children}
+      </Text>
+    )
+  },
 }
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {