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,161 @@
  * 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: 768px)
+@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)

[ire, 2018/03/14 07:39:15]

SuperNIT: Inconsistent spacing between `@media` and `(` . I think we want a
space between these

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

Done.

Good catch.

 {
   #hero-download
   {
     padding-top: 6em;
-    padding-bottom: 6em;
+    /* 3em bottom looks like 6em because of thumbnail contents */

[ire, 2018/03/14 07:39:15]

If the aim is to make it look like there is equal spacing to the top and bottom
of this section (which from the mockup it looks like this is the case), then 3em
doesn't seem to be enough. 

It currently looks like there is more space to the top than to the bottom of
this section.

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

4em it is?

[ire, 2018/03/14 13:27:30]

I think something changed because now only 6em looks equal :/

Does 4em look equal to you?

[juliandoucette, 2018/03/14 14:13:41]

Good eye. I removed the font-size change. As a result, the download button is
lower. Compare the bottom of the laptop (before the reflection) to the top of
the laptop.

(And/or apply or review my font-size change so that I can rebase on top of it.)

[juliandoucette, 2018/03/14 14:17:10]

It's worth considering that this text may be longer in different languages and
this may look uneven as a result. I guess the question is which side would we
like to optimize for? The laptop or the text?

+    padding-bottom: 3em;
+  }
+}
+
+@media (max-width: 1023px)

[ire, 2018/03/14 07:39:15]

SuperNIT: The order of these media queries is a bit confusing. I would expect
the styles to go in order from smaller to bigger screens.

ie..

#hero-download

@media (min-width: 576px) and (max-width: 1023px) { #hero-download  }

@media (max-width: 1023px) { #hero-download  }

@media(min-width: 1024px) { #hero-download  }

---

i.e. place this block before the previous one

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

~Done.

I have moved these around slightly to find a balance between keeping similar
selectors together and ordering by size.

Sorry about confusion.

[ire, 2018/03/14 13:27:30]

Thanks

+{
+  /* force hero unit columns to break on large tablets */
+  #hero-download .column
+  {
+    width: 100%;
   }
 }
 
 #hero-download h1
 {
-  line-height: 1.1;
+  /* Spacing is provided by the hero-download section */
+  margin-top: 0;
+  /* Reduced line-height to match design without hurting accessibility */

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

Detail: Removed line-height from this change because I will address this issue
globally separately.

+  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

[ire, 2018/03/14 07:39:15]

NIT: Missing semicolon

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

Done.

Good catch.

+  }
+
+  /* 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;

[ire, 2018/03/14 07:39:15]

Suggest: Change this element to a <p> instead of a <div> so we don't need to
manually add this margin

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

I changed it from a p to a div because p has margin top and bottom and I only
want margin-bottom.

[ire, 2018/03/14 13:27:30]

Ack. Because of collapsible margins the top margin doesn't have any effect here.

[juliandoucette, 2018/03/14 14:13:41]

~Ack. I could change the div.small to p.small and leave div.button and then
change p.margin-bottom to 0.5em to achieve the same effect. If I change both
divs to `p`s then I'd have to cancel out 1em top and bottom. I did that in my
last changeset in order to take your suggestion.

 }
 
 #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 1em space above on phones & tablets */
+  margin-top: 1em;
+  /* prevent default full-width on small tablets */
+  max-width: 550px;
 }
 
-@media(min-width: 768px)
+@media(min-width: 1024px)
 {
   #hero-download-video
   {
-    display: block;
+    /* keep aligned-top despite padding below */
+    margin-top: -1em;
+    /* provide a little space between thumbnail and border + shadow */
+    padding: 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.
+ */
+
+#hero-download-video:not(.hide-disclaimer) .video-thumbnail
+{
+  margin-bottom: -2.5em;
+}
+
+#hero-download-video:not(.hide-disclaimer),
+#hero-download-video.has-iframe
+{
+  margin-bottom: 2.5em;
+}
+
 /******************************************************************************
  * #media
  *****************************************************************************/
 
 #media-section { clear: both; }
 
 #media-header h2,
 #media-list