Merge pull request #317 from tingchun0113/fix/adjust-rwd-styles

fix(index): adjust rwd styles
pycontw · Aug 25, 2022 · add4a23 · add4a23
2 parents b6eb188 + e816df8
commit add4a23
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 12 deletions.
diff --git 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,14 +15,20 @@
                 <core-h2
                     :title="$t('pyConWillBeHeldOnline')"
                     :is-bulleted="isBulleted"
+                    class="intro-h2"
                 ></core-h2>
                 <p class="info-section-description">
                     {{ $t('pyConWillBeHeldOnlineContent') }}
                 </p>
             </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
@@ -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
@@ -44,27 +44,29 @@
                         {{ $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>
             <div id="sponsor" class="sponsor-section">
                 <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,21 @@ export default {
 
 @media (max-width: 567px) {
     .page-home .page-homeLandingFocus::after {
-        background-position: -40vw center;
-        background-size: 200vw;
+        content: '';
+        background-image: url('~@/static/page-home-background-rwd.svg');
+        background-position: center top 10%;
+        background-size: contain;
         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 +219,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,

diff --git a/static/page-home-background-rwd.svg b/static/page-home-background-rwd.svg