optimize mobile layout for signup page

sitcon-tw · Jan 13, 2024 · 73c9bb3 · 73c9bb3
1 parent 7d7ee16
commit 73c9bb3
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/app/(website)/signup/page.tsx b/app/(website)/signup/page.tsx
@@ -10,21 +10,21 @@ 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
             年會堅持不收費原則，秉持著「降低學生參與門檻」的理念，預算全數由個人／企業贊助或是政府／教育單位協助，若您也認同
             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>