improve mobile design

khoatranthanh · Jan 22, 2021 · 5374ffe · 5374ffe
1 parent 9faae76
commit 5374ffe
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 build/
-out/
+out/
+.DS_STORE
diff --git a/components/site/section/SectionDesc.tsx b/components/site/section/SectionDesc.tsx
@@ -27,7 +27,7 @@ const SectionDesc = ({ title, items, id, hasCommingSoon }: Props) => {
           return (
             <div
               key={section.title}
-              className="hover:opacity-100 border rounded-lg w-1/3 m-2 md:m-0  md:w-1/5"
+              className="hover:opacity-100 border rounded-lg w-full sm:w-1/3 m-2 md:m-0  md:w-1/5"
             >
               <Link href={section.link}>
                 <a className="">

diff --git a/pages/started/index.tsx b/pages/started/index.tsx
@@ -96,16 +96,18 @@ const StartedPage: FC = () => {
             </svg>
             Once Tailwind CSS is installed, you can get started!
           </p>
-          <Link href="/components">
-            <a className="w-44 mb-4 px-4 py-3 mt-8 text-base font-medium rounded-md text-center text-white bg-gray-800 hover:bg-gray-700">
-              &#129513; See components!
-            </a>
-          </Link>
-          <Link href="/templates">
-            <a className="w-44 mb-4 px-4 py-3 ml-4 text-base font-medium rounded-md text-center text-white bg-gray-800 hover:bg-gray-700">
-              &#127912; See templates!
-            </a>
-          </Link>
+          <div className="md:flex md:items-center md:space-x-4">
+            <Link href="/components">
+              <a className="w-auto block mb-4 px-4 py-3 text-base font-medium rounded-md text-center text-white bg-gray-800 hover:bg-gray-700">
+                &#129513; See components!
+              </a>
+            </Link>
+            <Link href="/templates">
+              <a className="w-auto block mb-4 px-4 py-3 text-base font-medium rounded-md text-center text-white bg-gray-800 hover:bg-gray-700">
+                &#127912; See templates!
+              </a>
+            </Link>
+          </div>
         </div>
       </div>
       <div