Fixes #30 - Adjustments to hero unit section of index page

static/css/index.css

 /******************************************************************************
  * Temparary styles
  *****************************************************************************/
 
 .avoid-wrap {display: inline-block;}
 .small {font-size: smaller;}
 .maxthon-only {display: none;}
 .maxthon .maxthon-only {display: block;}
 
 /******************************************************************************
  * #hero-download
  *****************************************************************************/
 
 #hero-download
 {
   padding: 3em 1em;
 }
 
 @media (min-width: 576px) and (max-width: 1023px)
 {
   /* add spacing left/right on tablets */
   #hero-download
   {
     padding-left: 3em;
     padding-right: 3em;
   }
 }
 
-@media(min-width: 1024px)
+@media (max-width: 575px)
 {
-  #hero-download
+  /* disable avoid-wrap inside h1 on mobile */
+  #hero-download h1 .avoid-wrap
   {
-    padding-top: 6em;
-    /* 3em bottom looks like 6em because of thumbnail contents */
-    padding-bottom: 3em;
+    display: inline;
   }
 }
 
 @media (max-width: 1023px)
 {
   /* force hero unit columns to break on large tablets */
   #hero-download .column
   {
     width: 100%;
   }
 }
 
+@media (min-width: 1024px)
+{
+  #hero-download
+  {
+    padding-top: 6em;
+    /* 3em bottom looks like 6em because of thumbnail contents */
+    padding-bottom: 4em;
+  }
+}
+
 #hero-download h1
 {
   /* Spacing is provided by the hero-download section */
   margin-top: 0;
-  /* Reduced line-height to match design without hurting accessibility */
-  line-height: 1.25;
-}
-
-@media (max-width: 575px)
-{
-  /* disable avoid-wrap inside h1 on mobile */
-  #hero-download h1 .avoid-wrap
-  {
-    display: inline;
-  }
 }
 
 @media (min-width: 576px)
 {
   /* make h1 larger sooner than usual */
   #hero-download h1
   {
-    font-size: 2.4em
+    font-size: 2.4em;
   }
 
   /* force break without <br> on large screens */
   #hero-download h1 .avoid-wrap:first-of-type
   {
     display: block;
   }
 }
 
 #hero-download-tos
@@ skipping 16 matching lines @@
 {
   #hero-download-button
   {
     /* force auto-width >= small tablets */
     width: auto;
   }
 }
 
 #hero-download-video
 {
-  /* add 1em space above on phones & tablets */
-  margin-top: 1em;
+  /* add space above on phones & tablets */
+  margin-top: 2em;

[juliandoucette, 2018/03/14 12:46:31]

NIT: Added a little more space here (personal preference)

   /* prevent default full-width on small tablets */
   max-width: 550px;
 }
 
 @media(min-width: 1024px)
 {
   #hero-download-video
   {
     /* keep aligned-top despite padding below */
     margin-top: -1em;
@@ skipping 226 matching lines @@
   padding: 0px 30px;
 }
 
 @media(max-width: 767px)
 {
   #footnote
   {
     padding: 0px 20px;
   }
 }