From 0265278d405924f9d42a0826fea03afc9dc2e4f0 Mon Sep 17 00:00:00 2001
From: TC Wang <tingchun0113@gmail.com>
Date: Sun, 14 Aug 2022 22:44:59 +0800
Subject: [PATCH] fix(index): adjust rwd styles

---
 components/intro/Intro.vue          | 17 ++++++++++++++-
 components/intro/IntroMilestone.vue |  4 +---
 pages/index.vue                     | 32 +++++++++++++++++++++--------
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/components/intro/Intro.vue b/components/intro/Intro.vue
index 807f62ad79..65313419b5 100644
--- a/components/intro/Intro.vue
+++ b/components/intro/Intro.vue
@@ -5,6 +5,7 @@
                 <core-h2
                     :title="$t('whatIsPyConAPAC')"
                     :is-bulleted="isBulleted"
+                    class="intro-h2"
                 ></core-h2>
                 <p class="info-section-description">
                     {{ $t('whatIsPyConAPACContent') }}
@@ -14,6 +15,7 @@
                 <core-h2
                     :title="$t('pyConWillBeHeldOnline')"
                     :is-bulleted="isBulleted"
+                    class="intro-h2"
                 ></core-h2>
                 <p class="info-section-description">
                     {{ $t('pyConWillBeHeldOnlineContent') }}
@@ -21,7 +23,12 @@
             </div>
         </div>
 
-        <core-h2 :title="$t('pyconIntro')" :is-bulleted="isBulleted"> </core-h2>
+        <core-h2
+            :title="$t('pyconIntro')"
+            :is-bulleted="isBulleted"
+            class="intro-h2 intro-milestones-title"
+        >
+        </core-h2>
         <div class="intro-milestones">
             <intro-milestone
                 v-for="(item, index) in $t('milestone')"
@@ -82,4 +89,12 @@ export default {
     @apply pl-0 md:pl-14 my-0 mx-auto;
     @apply text-justify;
 }
+
+.intro-h2 {
+    @apply mx-auto justify-center md:justify-start;
+}
+
+.intro-milestones-title {
+    @apply mb-14 md:mb-7;
+}
 </style>
diff --git a/components/intro/IntroMilestone.vue b/components/intro/IntroMilestone.vue
index 3a6b911784..f52ee2d755 100644
--- a/components/intro/IntroMilestone.vue
+++ b/components/intro/IntroMilestone.vue
@@ -35,8 +35,6 @@ export default {
 .milestone__unit {
     @apply text-2xl;
     @media (max-width: 833px) {
-        position: relative;
-        bottom: -30px;
         font-size: 1.2rem;
     }
 }
@@ -60,7 +58,7 @@ export default {
 .milestone__unit {
     @apply mb-2;
     @media (max-width: 833px) {
-        top: -8px;
+        @apply mb-12;
     }
 }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 4a406a81cd..40b9e58c49 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -44,20 +44,21 @@
                         {{ $t('callForProposals') }}
                     </text-button>
                 </div>
+                <div class="text-button-wrapper">
+                    <text-button to="/registration/tickets">{{
+                        $t('getTicket')
+                    }}</text-button>
+                </div>
             </div>
         </div>
 
         <i18n-page-wrapper>
             <intro :is-bulleted="isBulleted"></intro>
-            <div class="text-button-wrapper">
-                <text-button to="/registration/tickets">{{
-                    $t('getTicket')
-                }}</text-button>
-            </div>
             <div class="bulletin-section">
                 <core-h2
                     :title="$t('bulletinList')"
                     :is-bulleted="isBulleted"
+                    class="index-h2"
                 ></core-h2>
                 <bulletin-card-collection></bulletin-card-collection>
             </div>
@@ -65,6 +66,7 @@
                 <core-h2
                     :title="$t('sponsorList')"
                     :is-bulleted="isBulleted"
+                    class="index-h2"
                 ></core-h2>
                 <sponsor-card-collection
                     v-for="(leveledSponsors, i) in sponsorsData"
@@ -180,10 +182,19 @@ export default {
 
 @media (max-width: 567px) {
     .page-home .page-homeLandingFocus::after {
-        background-position: -40vw center;
-        background-size: 200vw;
+        background-position: -35vw center;
+        background-size: 150vw;
         background-repeat: no-repeat;
     }
+    .page-home__title {
+        left: 50%;
+        margin-left: -50vw;
+        margin-right: -50vw;
+        max-width: 100vw;
+        position: relative;
+        right: 50%;
+        width: 100vw;
+    }
 }
 
 .page-home__title {
@@ -206,8 +217,13 @@ export default {
     @apply pt-12 lg:mx-auto lg:w-full;
 }
 
+.index-h2 {
+    @apply mx-auto justify-center md:justify-start;
+}
+
 .text-button-wrapper {
-    @apply flex justify-center mt-16 mb-28;
+    @apply mt-48 mb-12 md:mt-32 md:mb-28;
+    @apply w-full flex justify-center md:justify-start;
 }
 
 .fade-enter-active,