make buttons and headers better on mobile

_includes/home-banner.html

@@ -2,7 +2,7 @@
   <h1>Liquid</h1>
   <p>Safe, customer facing template language for flexible web apps.</p>
   <p class="btn-row">
-    <a href="https://github.com/Shopify/liquid/archive/master.zip" target="_blank" class="btn"><i class="icon fa fa-2x fa-arrow-circle-down"></i>Download</a>
-    <a href="https://github.com/Shopify/liquid" target="_blank" class="btn"><i class="icon fa fa-2x fa-github"></i>View on GitHub</a>
+    <a href="https://github.com/Shopify/liquid/archive/master.zip" target="_blank" class="btn"><i class="icon fa fa-2x fa-arrow-circle-down" aria-hidden="true"></i>Download</a>
+    <a href="https://github.com/Shopify/liquid" target="_blank" class="btn" aria-hidden="true"><i class="icon fa fa-2x fa-github"></i>View on GitHub</a>
   </p>
 </header>

_sass/modules/_buttons.scss

@@ -3,15 +3,31 @@
   display: flex;
   background: $color-blue-5;
   align-items: center;
+  justify-content: center;
   padding: $spacing-unit/4 $spacing-unit/2;
   border-radius: 8px;
   text-decoration: none;
+  text-align: center;
+  white-space: nowrap;
 
   &:hover {
     background: $color-blue-4;
     cursor: pointer;
     text-decoration: none;
   }
+
+  &:first-child {
+    margin-bottom: $spacing-unit / 2;
+  }
+
+  @include phone-and-up {
+    justify-content: center;
+
+    &:first-child {
+      justify-content: flex-start;
+      margin-bottom: 0;
+    }
+  }
 }
 
 .btn:visited {
@@ -21,10 +37,15 @@
 .btn-row {
   display: flex;
   justify-content: center;
+  flex-direction: column;
   margin-bottom: 0;
 
-  .btn:not(:first-child) {
-    margin-left: $spacing-unit / 2;
+  @include phone-and-up {
+    flex-direction: row;
+
+    .btn:not(:first-child) {
+      margin-left: $spacing-unit / 2;
+    }
   }
 }
 

_sass/modules/_home-banner.scss

@@ -2,10 +2,14 @@
   text-align: center;
   border-bottom: 1px solid lighten($color-slate, 50%);
   padding-bottom: $spacing-unit;
-  margin-bottom: $spacing-unit;
 
   h1 {
     font-weight: bold;
-    font-size: 5em;
+    font-size: 4em;
+
+    @include phone-and-up {
+      font-size: 5em;
+    }
   }
 }
+

_sass/partials/_media-queries.scss

@@ -2,7 +2,7 @@
   Media queries
 ==============================================================================*/
 
-$phone-width: 321px;
+$phone-width: 375px;
 $tablet-width: 768px;
 $desktop-width: 1024px;