From 73c9bb3d916f0c6e3c186e525a28266f7c5abba8 Mon Sep 17 00:00:00 2001
From: Dada878 <xx0932399@gmail.com>
Date: Sat, 13 Jan 2024 18:15:33 +0800
Subject: [PATCH] optimize mobile layout for signup page

---
 app/(website)/signup/page.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/(website)/signup/page.tsx b/app/(website)/signup/page.tsx
index 6c584a7e..41aa9a4f 100644
--- a/app/(website)/signup/page.tsx
+++ b/app/(website)/signup/page.tsx
@@ -10,7 +10,7 @@ export default function Page() {
       <h1 className="mb-4 text-2xl font-bold md:text-4xl" id="page-title">
         報名資訊
       </h1>
-      <div className="mb-10 flex flex-row justify-around pb-16">
+      <div className="mb-10 flex flex-col md:flex-row justify-around pb-16">
         <div className="grid">
           <p>
             SITCON
@@ -18,13 +18,13 @@ export default function Page() {
             SITCON 的理念，歡迎支持我們。
           </p>
         </div>
-        <div className="justify-end">
+        <div className="md:justify-end justify-center mt-7 md:mt-0">
           <Button color="blue" url="/sponsor/">
             支持我們
           </Button>
         </div>
       </div>
-      <div className="grid grid-cols-2 grid-rows-3 content-center justify-center gap-5 gap-y-20 align-middle md:grid-cols-3 md:grid-rows-2">
+      <div className="grid content-center justify-center gap-5 gap-y-20 align-middle md:grid-cols-3 md:grid-rows-2">
         <div className="flex flex-col content-center justify-center align-middle">
           <div className="flex content-center justify-center align-middle">
             <img
@@ -36,7 +36,7 @@ export default function Page() {
           <p className="text-center text-xl font-bold">一般票</p>
         </div>
         <div className="grid content-center justify-start">
-          <ul className="col-span-1 list-disc">
+          <ul className="col-span-1 list-disc ml-5">
             <li>
               第一波售票
               <br />
@@ -49,7 +49,7 @@ export default function Page() {
             </li>
           </ul>
         </div>
-        <div className="grid content-center justify-end">
+        <div className="grid content-center md:justify-end justify-center">
           <Button color="blue" url="https://sitcon.kktix.cc/events/sitcon2024">
             KKTIX 報名連結
           </Button>
@@ -65,7 +65,7 @@ export default function Page() {
           <p className="text-center text-xl font-bold">遠道而來票</p>
         </div>
         <div className="grid content-center justify-start">
-          <ul className="list-disc">
+          <ul className="list-disc ml-5">
             <li>資格限制：住在偏鄉或離島、海外地區的學生。</li>
             <li>
               先到先審制，報名者需在 2024/01/05 23:59 前填寫{" "}
@@ -91,7 +91,7 @@ export default function Page() {
             </li>
           </ul>
         </div>
-        <div className="grid content-center justify-end">
+        <div className="grid content-center md:justify-end justify-center">
           <Button
             color="gray"
             className="pointer-events-none cursor-not-allowed opacity-50"
@@ -114,7 +114,7 @@ export default function Page() {
           </p>
         </div>
         <div className="grid content-center justify-start">
-          <ul className="list-disc">
+          <ul className="list-disc ml-5">
             <li>資格限制：對開源專案有貢獻者。</li>
             <li>
               需要事先申請。申請表單、申請資格及更詳細的申請說明，請參考
@@ -140,7 +140,7 @@ export default function Page() {
             </li>
           </ul>
         </div>
-        <div className="grid content-center justify-end">
+        <div className="grid content-center md:justify-end justify-center">
           <Button color="blue" url="https://ocf.tw/p/oscvpass/">
             立即取得
           </Button>
@@ -149,7 +149,7 @@ export default function Page() {
       <h1 className="mb-4 mt-20 text-2xl font-bold md:text-4xl" id="post-info">
         投稿資訊
       </h1>
-      <div className="mb-10 flex flex-row justify-around pb-16">
+      <div className="mb-10 flex flex-col md:flex-row justify-around pb-16">
         <div className="mr-4 grid">
           <p>
             SITCON
@@ -169,7 +169,7 @@ export default function Page() {
             <li>海報投稿：以靜態海報展出學生個人或團隊專案研究作品。</li>
           </ul>
         </div>
-        <div className="justify-end">
+        <div className="md:justify-end justify-center mt-7 md:mt-0">
           <Button color="blue" url="/cfp/">
             了解更多
           </Button>