add video demo of Uppy to the front page

website/themes/uppy/layout/index.ejs

@@ -32,13 +32,17 @@
 </section>
 
 <section id="example" class="IndexExample">
-  <h2 class="IndexSection-title">Quick Example</h2>
+  <h2 class="IndexSection-title">Demo</h2>
 
-  <div class="IndexExample-block"><%- partial('partials/frontpage-code-sample') %></div>
-
-  <div class="sign">&raquo;</div>
+  <div class="IndexExample-block">
+    <video class="IndexExample-video"
+           src="/images/uppy-demo.mp4"
+           autoplay loop muted></video>
+  </div>
 
-  <div class="IndexExample-block"><img src="/images/uppy-dragdrop-screenshot.png"></div>
+  <div class="IndexExample-block">
+    <%- partial('partials/frontpage-code-sample') %>
+  </div>
 
   <a class="GetStartedBtn" href="/guide/index.html">Get Started</a>
 </section>

website/themes/uppy/source/css/_index.scss

@@ -165,7 +165,7 @@
   transition: all .3s ease;
   background-color: $color-primary;
   color: $color-white;
-  margin-top: 3em;
+  margin-top: 1.2em;
   margin-bottom: 2em;
 
   &:hover { @include zoom; }
@@ -210,14 +210,14 @@
 
 .IndexSection-title {
   font-size: 25px;
-  margin-bottom: 1.5em;
+  margin-bottom: 0.7em;
 }
 
 .IndexExample-block {
-  padding: 7px;
+  // padding: 7px;
   text-align: left;
-  background-color: $color-codebg;
-  border-radius: $size-radius;
+  // background-color: $color-codebg;
+  // border-radius: $size-radius;
   overflow: hidden;
   max-width: 500px;
   margin: auto;
@@ -225,13 +225,17 @@
 
   @media #{$screen-medium} {
     max-width: 100%;
-    width: 43%;
+    width: 47%;
     display: inline-block;
     vertical-align: middle;
-    height: 250px;
+    // height: 250px;
   }
 }
 
+.IndexExample-video {
+  max-width: 100%;
+}
+
 .IndexExample-block img {
   margin: auto;
 }