From 8b82ddfce3cfabfd66d34f3fbafd3fab051cd3d0 Mon Sep 17 00:00:00 2001
From: Priscilla <tingtangsoo@gmail.com>
Date: Thu, 26 Aug 2021 19:22:13 +1000
Subject: [PATCH] Centered homepage on mobile view - specificially title,
 buttons and margins

---
 frontend/src/views/Home/Home.vue      | 21 +++++++++++++--------
 frontend/src/views/Home/Mission.vue   |  4 ++--
 frontend/src/views/Home/Showcase.vue  | 14 +++++++++++++-
 frontend/src/views/Home/SponsorUs.vue |  8 ++++++++
 4 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/Home/Home.vue b/frontend/src/views/Home/Home.vue
index 05e50452..92035b16 100644
--- a/frontend/src/views/Home/Home.vue
+++ b/frontend/src/views/Home/Home.vue
@@ -12,21 +12,21 @@
 -->
 
 <template>
-  <div id="home">
+  <div id="home" >
     <!-- Showcase -->
-    <Showcase />
+    <Showcase class="padding"/>
     <!-- Mission -->
-    <Mission />
+    <Mission  class="padding"/>
     <!--Events-->
-    <EventDisplay :events="eventItems" :updated="lastEventUpdate" />
+    <EventDisplay :events="eventItems" :updated="lastEventUpdate"  class="padding"/>
     <!-- Slideshow -->
-    <Slideshow />
+    <Slideshow  class="padding"/>
     <!-- Student Resources -->
-    <StudentResources />
+    <StudentResources  class="padding"/>
     <!-- Community Links -->
-    <CommunityLinks />
+    <CommunityLinks  class="padding"/>
     <!-- Sponsor -->
-    <SponsorUs />
+    <SponsorUs class="padding"/>
   </div>
 </template>
 
@@ -80,4 +80,9 @@ export default {
   box-sizing: border-box;
   color: $light-color;
 }
+
+.padding{
+  padding: 0.5em;
+}
+
 </style>
diff --git a/frontend/src/views/Home/Mission.vue b/frontend/src/views/Home/Mission.vue
index 6c9f517e..13b22a5e 100644
--- a/frontend/src/views/Home/Mission.vue
+++ b/frontend/src/views/Home/Mission.vue
@@ -13,7 +13,7 @@
         <img data-cy="mission-img" contain :src="mission.image" class="image"/>
       </v-col>
       <v-col xs="12" sm="6" align-self="center">
-        <p data-cy="mission-statement" class="text--md">
+        <p data-cy="mission-statement" class="text--sm">
           "{{mission.statement}}"
         </p>
       </v-col>
@@ -42,7 +42,7 @@ export default {
 <style lang="scss" scoped>
 
 .image {
-  max-width: 100%;
+  max-width: 90%;
   max-height: 100%;
 }
 </style>
diff --git a/frontend/src/views/Home/Showcase.vue b/frontend/src/views/Home/Showcase.vue
index 5cab3043..2b5154ee 100644
--- a/frontend/src/views/Home/Showcase.vue
+++ b/frontend/src/views/Home/Showcase.vue
@@ -8,7 +8,7 @@
   <div id="showcase" class="content">
     <v-container>
       <v-row no-gutters>
-        <v-col class="pa-0" cols="6">
+        <v-col class="pa-0" cols="12">
           <h1>
             {{quote}}
           </h1>
@@ -57,6 +57,18 @@ export default {
   float: right;
 }
 
+@media screen and (max-width: 600px){
+  .btn--join-us{
+    float: none;
+    margin: 0 auto;
+    display: block;
+  }
+
+  h1{
+    text-align: center;
+  }
+}
+
 .btn--join-us:hover {
   transition: 0.4s;
   background: rgba(102,255,255, 0.2);
diff --git a/frontend/src/views/Home/SponsorUs.vue b/frontend/src/views/Home/SponsorUs.vue
index 1208102f..f5b34778 100644
--- a/frontend/src/views/Home/SponsorUs.vue
+++ b/frontend/src/views/Home/SponsorUs.vue
@@ -77,6 +77,14 @@ export default {
   @extend .btn--lg;
 }
 
+@media screen and (max-width: 600px){
+  .btn--sponsorUs{
+    float: none;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
 .btn--sponsorUs:hover {
   transition: 0.4s;
   // when on hover, change background from transparent to $brand-color with light opacity