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
@@ -8,63 +8,123 @@
 .maxthon .maxthon-only {display: block;}
 
 /******************************************************************************
  * #hero-download
  *****************************************************************************/
 
 #hero-download
 {
-  padding-top: 2em;
-  padding-bottom: 2em;
+  padding: 3em 1em 3em 1em;

[ire, 2018/03/13 09:18:02]

NIT: Use shorthand `3em 1em` instead

[ire, 2018/03/13 09:18:02]

Shouldn't this just be 3em al around?

Spec: "Below 1024px (Below Desktop breakpoint) Ensure exactly 3rem all around
section"

[juliandoucette, 2018/03/13 14:23:08]

Done.

[juliandoucette, 2018/03/13 14:23:08]

No. I 3em on tablet until 1em on mobile. Sorry for confusion.

 }
 
-@media(min-width: 768px)
+#hero-download h1 .avoid-wrap

[ire, 2018/03/13 09:18:03]

Is there a reason you didn't use `word-wrap`/`word-break` to stop the word
breaking?

[juliandoucette, 2018/03/13 14:23:09]

I think so? My intent was to prevent breaking between specific words. AFAICT
these two properties/values do not do exactly that. At least, `word-break:
keep-all;` doesn't seem to do it.

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

Acknowledged.

+{
+  display: inline;
+}
+
+@media (min-width: 576px)
 {
   #hero-download
   {
-    padding-top: 6em;
-    padding-bottom: 6em;
+    padding-left: 3em;
+    padding-right: 3em;
+  }
+
+  #hero-download h1
+  {
+    font-size: 2.4em
+  }
+
+  #hero-download h1 .avoid-wrap
+  {
+    display: inline-block;
+  }
+
+  #hero-download h1 .avoid-wrap:first-of-type
+  {
+    display: block;
+  }
+}
+
+@media(min-width: 1024px)
+{
+  #hero-download
+  {
+    padding: 6em 1em 5em 1em;

[ire, 2018/03/13 09:18:02]

NIT: Shorthand `6em 1em 5em`

[ire, 2018/03/13 09:18:03]

Shouldn't this be `6em 1em`?

Spec: "Ensure exactly 6rem above and below section"

[juliandoucette, 2018/03/13 14:23:08]

Done.

[juliandoucette, 2018/03/13 14:23:08]

Yes and no. The ~space at the bottom of the image makes it *look* like more than
6em if 6em is applied. Therefore, we decided to go with 5em on bottom to achieve
the 6em *effect*/look.

I'm sorry. I should have addded a comment about this.

+  }
+}
+
+@media (max-width: 1023.98px)
+{
+  #hero-download .column
+  {
+    width: 100%;
   }
 }
 
 #hero-download h1
 {
+  margin-top: 0;
   line-height: 1.1;
 }
 
 #hero-download-tos
 {
-  font-size: 10px;
+  display: block;
+  margin-bottom: 0.5em;
 }
 
 #hero-download-button
 {
   display: block;
+  padding-top: 0.8em;
+  padding-bottom: 0.8em;
 }
 
-@media(min-width: 768px)
+#hero-download-button
+{
+  display: inline-block;
+  min-width: 250px;
+  width: 100;
+}
+
+@media (min-width: 576px)
 {
   #hero-download-button
   {
-    display: inline-block;
-    min-width: 350px;
+    width: auto;
   }
 }
 
+/** Hide the video border/shadow only when the thumbnail alone is showing */
+#hero-download-video.hide-disclaimer:not(.has-iframe)
+{
+  border: none;

[ire, 2018/03/13 09:18:02]

The adding/removing of the border causes a shift. 

Suggest: Instead of removing the border here, add a transparent border of the
same width

[juliandoucette, 2018/03/13 14:23:09]

Good catch!

+  box-shadow: none;
+}
+
+/** Add 1em of padding around the thumbnail when the disclaimer is showing */
+#hero-download-video:not(.hide-disclaimer)
+{
+  padding: 1em;
+}
+
 #hero-download-video
 {
-  display: none;
+  margin-top: 1em;
+  max-width: 550px;
 }
 
-@media(min-width: 768px)
+@media(min-width: 1024px)
 {
   #hero-download-video
   {
-    display: block;
+    max-width: none;
+    margin-top: 0;
   }
 }
 
 /******************************************************************************
  * #media
  *****************************************************************************/
 
 #media-section { clear: both; }