Fixes #35 - Progressively enhance install button with appropriate links and text

static/css/index.css

 /******************************************************************************
  * Temparary styles
  *****************************************************************************/
 
 .avoid-wrap {display: inline-block;}
 .small {font-size: smaller;}
 
-#content,
-#blog
-{
-  padding-top: 5em;
-}
-
 /******************************************************************************
  * Browser-based styles
  *****************************************************************************/
 
+.show-on-msie { display: none; }
+.msie .show-on-msie { display: inherit; }
+.msie .hide-on-msie { display: none; }
+
 .show-on-maxthon { display: none; }
-.maxthon .show-on-maxthon { display: block; }
+.maxthon .show-on-maxthon { display: inherit; }
 .maxthon .hide-on-maxthon { display: none; }
 
 /******************************************************************************
  * #hero-download
  *****************************************************************************/
 
 #hero-download
 {
-  padding-top: 2em;
-  padding-bottom: 2em;
-}
-
-@media(min-width: 768px)
+  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 (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;
-}
-
-@media(min-width: 768px)
+  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: 576px)
 {
   #hero-download-button
   {
-    display: inline-block;
-    min-width: 350px;
+    /* force auto-width >= small tablets */
+    width: auto;
   }
 }
 
 #hero-download-video
 {
-  display: none;
-}
-
-@media(min-width: 768px)
+  /* add space above on phones & tablets */
+  margin-top: 2em;
+  /* prevent default full-width on small tablets */
+  max-width: 550px;
+}
+
+#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;
 }
@@ skipping 111 matching lines @@
     vertical-align: middle;
   }
 
   #media-list img
   {
     margin: 0 2em;
   }
 }
 
 /******************************************************************************
- * #features
- *****************************************************************************/
-
-#features
-{
-  text-align: center;
-  padding-top: 3em;
-  padding-bottom: 3em;
-}
-
-#features h2
-{
-  text-transform: uppercase;
-}
-
-@media (max-width: 575px)
-{
-  #features .column
-  {
-    margin-bottom: 3em;
-  }
-
-  #features .column:last-of-type
-  {
-    margin-bottom: 0;
-  }
-}
-
-@media (min-width: 576px) and (max-width: 1023px)
-{
-  #features
-  {
-    text-align: left;
-  }
-
-  [dir="rtl"] #features
-  {
-    text-align: right;
-  }
-
-  #features .column
-  {
-    position: relative;
-    width: auto;
-    padding: 0 3em 2em 10.5em;
-  }
-
-  [dir="rtl"] #features .column
-  {
-    padding: 0 10.5em 2em 3em;
-  }
-
-  #features .column:last-of-type
-  {
-    padding-bottom: 0;
-  }
-
-  #features img
-  {
-    position: absolute;
-    left: 3em;
-    top: 0.5em;
-  }
-
-  [dir="rtl"] #features img
-  {
-    left: auto;
-    right: 3em;
-  }
-
-  #features h2
-  {
-    margin: 0;
-  }
-}
-
-/******************************************************************************
- * #abb-notification
- *****************************************************************************/
-
-#abb-notification
+ * #abb-cross-promotion
+ *****************************************************************************/
+
+#abb-cross-promotion
 {
   padding: 3em 0;
 }
 
-#abb-notification h2
+#abb-cross-promotion h2
 {
   margin-top: 0;
   margin-bottom: 1.5em;
 }
 
-#abb-notification h2,
-#abb-notification h3
+#abb-cross-promotion h2,
+#abb-cross-promotion h3
 {
   text-transform: uppercase;
 }
 
 #abb-logo
 {
   max-width: 10em;
 }
 
 #abb-app-store-badges
@@ skipping 14 matching lines @@
   }
 }
 
 @media (min-width: 576px)
 {
   #abb-app-store-badges .one-half
   {
     width: 50%;
   }
 
-  #abb-notification figure,
+  #abb-cross-promotion figure,
   #abb-app-store-badges
   {
     padding-left: 2em;
     padding-right: 2em;
   }
 }
 
 /******************************************************************************
  * #footnote
  *****************************************************************************/
 
 #footnote
 {
   padding-top: 3em;
   padding-bottom: 2em;
   font-size: 13px;
   color: #7d7d7d;
 }