Improve homepage on mobile (#874)

* [gatsby][mobile] center + padding on banner

* [gatsby][mobile] ellipsis in searchbar

* [gatsby][mobile] reduce size of main header + center + spacing

* [gatsby][mobile] reduce padding + decrease icon size on SellingPoints

Author: Ayc0

packages/gatsby/src/components/header.js

@@ -25,6 +25,8 @@ const NewsContainer = styled.div`
   ${ifMobile} {
     white-space: pre-wrap;
     line-height: 1.5em;
+    text-align: center;
+    padding-top: 5px;
   }
 
   background: #2188b6;

packages/gatsby/src/components/search/SearchBox.js

@@ -38,6 +38,7 @@ const SearchInput = styled.input`
   font: inherit;
   color: #2c8ebb;
   margin-left: 0.5em;
+  text-overflow: ellipsis;
 `;
 
 const IconButton = styled.button`
@@ -64,6 +65,7 @@ const IconButton = styled.button`
 
 const SubmitButton = styled(IconButton)`
   order: 1;
+  top: -2px;
   svg {
     top: 0.2em;
     left: 0.2em;

packages/gatsby/src/pages/index.js

@@ -23,6 +23,10 @@ const sectionStyle = css`
 
 const Section = styled.div`
   ${sectionStyle}
+
+  ${ifMobile} {
+    padding: 0 1em;
+  }
 `;
 
 const sectionContentStyle = css`
@@ -50,6 +54,11 @@ const Hero = styled.div`
 
 const HeroTitle = styled.div`
   font-size: 4em;
+  ${ifMobile} {
+    font-size: 2.2em;
+    text-align: center;
+  }
+
   font-weight: bold;
 
   color: #ffffff;
@@ -58,12 +67,16 @@ const HeroTitle = styled.div`
 
 const HeroSubtitle = styled.div`
   max-width: 800px;
-
+  color: #ffffff;
   margin-top: 40px;
-
   font-size: 1.5em;
 
-  color: #ffffff;
+  ${ifMobile} {
+    margin-top: 20px;
+    font-size: 1.2em;
+    text-align: center;
+    margin-bottom: 10px;
+  }
 `;
 
 const SellingPoints = styled.div`
@@ -80,6 +93,9 @@ const SellingPointContainer = styled.div`
   ${ifDesktop} {
     width: calc(50% - 20px);
   }
+  ${ifMobile} {
+    align-items: center;
+  }
 
   margin-top: 40px;
 
@@ -91,13 +107,20 @@ const SellingPointContainer = styled.div`
 const SellingPointIcon = styled.img`
   width: 100px;
   height: 100px;
+  ${ifMobile} {
+    width: 75px;
+    height: 75px;
+  }
 `;
 
 const SellingPointContent = styled.div`
   margin-left: 20px;
 
   h3 {
     margin-top: 0;
+    ${ifMobile} {
+      margin-bottom: .5em;
+    }
   }
 `;