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

static/css/index.css

Index: static/css/index.css
===================================================================
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -2,78 +2,146 @@
  * Temparary styles
  *****************************************************************************/
 
 .avoid-wrap {display: inline-block;}
 .small {font-size: smaller;}
 .maxthon-only {display: none;}
 .maxthon .maxthon-only {display: block;}
 
-#content,
-#blog
-{
-  padding-top: 5em;
-}
-
 /******************************************************************************
  * #hero-download
  *****************************************************************************/
 
 #hero-download
 {
-  padding-top: 2em;
-  padding-bottom: 2em;
+  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: 768px)
+@media (max-width: 575px)
+{
+  /* disable avoid-wrap inside h1 on mobile */
+  #hero-download h1 .avoid-wrap
+  {
+    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;
     padding-bottom: 6em;
   }
 }
 
 #hero-download h1
 {
-  line-height: 1.1;
+  /* Spacing is provided by the hero-download section */
+  margin-top: 0;
+}
+
+@media (min-width: 576px)
+{
+  /* force break without <br> on large screens */
+  #hero-download h1 .avoid-wrap:first-of-type
+  {
+    display: block;
+  }
 }
 
 #hero-download-tos
 {
-  font-size: 10px;
+  margin-bottom: 0.5em;
 }
 
 #hero-download-button
 {
-  display: block;
+  display: inline-block;
+  min-width: 250px;
+  /* stretch full-width <= small tablets */
+  width: 100%;
+  /* 0.2em taller than normal buttons */
+  padding-top: 0.8em;
+  padding-bottom: 0.8em;
 }
 
-@media(min-width: 768px)
+@media (min-width: 576px)
 {
   #hero-download-button
   {
-    display: inline-block;
-    min-width: 350px;
+    /* force auto-width >= small tablets */
+    width: auto;
   }
 }
 
 #hero-download-video
 {
-  display: none;
+  /* add space above on phones & tablets */
+  margin-top: 2em;
+  /* prevent default full-width on small tablets */
+  max-width: 550px;
 }
 
-@media(min-width: 768px)
+#hero-download-video
+{
+  /* provide a little space between thumbnail and border + shadow */
+  padding: 1em 1em 0 1em;
+}
+
+@media (min-width: 1024px)
 {
   #hero-download-video
   {
-    display: block;
+    /* keep aligned-top despite padding below */
+    margin-top: -1em;
   }
 }
 
+#hero-download-video.has-iframe
+{
+  /* remove space around thumbnail when thumbnail is replaced by video */
+  padding: 0;
+}
+
+/** Hide the video border + shadow only when the thumbnail alone is showing */
+#hero-download-video.hide-disclaimer:not(.has-iframe)
+{
+  border-color: transparent;
+  /* there is no box-shadow-color property :( */
+  box-shadow: 1px 1px 0 0 transparent;
+}
+
+/* The thumbnail is taller than the video. But it's hard to see because of the
+ * reflection and whitespace at the bottom. As a result, I am cutting out the
+ * whitespace and reflection when I show the disclaimer so that the section
+ * doesn't visibly resize when the thumbnail is replaced by the a iframe.
+ */
+
+
 /******************************************************************************
  * #media
  *****************************************************************************/
 
 #media-section
 {
   clear: both;
   text-align: center;