fix(docs): styles in mobile view (#527)

daangn · Oct 21, 2024 · d7855c3 · d7855c3
1 parent 6396121
commit d7855c3
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @stackflow/docs
 
+## 2.0.1
+
+### Patch Changes
+
+- Fix style in mobile view
+
 ## 2.0.0
 
 ### Major Changes

diff --git a/docs/components/index-page/Tile.tsx b/docs/components/index-page/Tile.tsx
@@ -1,6 +1,6 @@
 export function Tile({ title, content }: { title: string; content: string }) {
   return (
-    <div className="bg-neutral-100 dark:bg-neutral-900 rounded-xl p-6">
+    <div className="bg-neutral-100 dark:bg-neutral-900 rounded-xl p-6 w-full box-border">
       <p className="text-gray-900 dark:text-white text-base font-bold truncate">
         {title}
       </p>

diff --git a/docs/components/index-page/index.tsx b/docs/components/index-page/index.tsx
@@ -22,7 +22,7 @@ export function IndexPage({ lang = "ko" }: { lang: "ko" | "en" }) {
         <div className="flex flex-col items-center gap-4 my-8 lg:ml-8 lg:items-start lg:gap-1 lg:m-0">
           <h1 className="text-5xl lg:text-8xl font-extrabold">Stackflow</h1>
 
-          <p className="text-sm lg:text-xl text-center">
+          <p className="text-sm px-4 lg:px-0 lg:text-xl text-center">
             {getLocaleText(
               "JavaScript와 TypeScript를 위한 가장 간편한 스택 네비게이션 프레임워크.",
               "The Simplest Stack Navigation for JavaScript and TypeScript.",
@@ -63,7 +63,7 @@ export function IndexPage({ lang = "ko" }: { lang: "ko" | "en" }) {
           height={500}
           className="absolute w-full -z-10 top-20 left-0 opacity-40"
         />
-        <ChevronsDown className="absolute mx-auto bottom-10 size-8 animate-bounce opacity-75" />
+        <ChevronsDown className="absolute lg:mx-auto bottom-10 size-8 animate-bounce opacity-75" />
       </section>
 
       <section className="w-full flex flex-col items-center px-6 pb-8 gap-16">
@@ -74,7 +74,7 @@ export function IndexPage({ lang = "ko" }: { lang: "ko" | "en" }) {
           </h1>
           "
         </div>
-        <div className="grid lg:grid-cols-3 gap-8">
+        <div className="grid lg:grid-cols-3 gap-6 lg:gap-8">
           <Tile
             title="Headless Architecture"
             content={getLocaleText(

diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stackflow/docs",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": true,
   "description": "Mobile-first stack navigator framework with Composable Plugin System",
   "license": "MIT",