CTA buttons and css polish

Author: leebyron

site/_css/index.less

@@ -24,7 +24,7 @@ body.index {
 
   .hero {
     background: @dark-color;
-    min-height: 500px;
+    min-height: 540px;
     max-height: 1000px;
     height: 70vh;
     position: relative;
@@ -122,8 +122,7 @@ body.index {
     .fadein-cols(3);
     .fadein-cols(@n) when (@n > 0) { .fadein-cols(@n - 1);
       .marketing-col:nth-child(@{n}) {
-        animation: fade 1.1s 0.8s * @n ease-in-out;
-        animation-fill-mode: both;
+        animation: fade 1.1s 0.8s * @n ease-in-out both;
       }
     }
 
@@ -138,6 +137,21 @@ body.index {
         transform: translate(0, 0);
       }
     }
+
+    .buttons-unit {
+      animation: fade 1.1s 3s ease-in-out both;
+
+      .button {
+        .headline-font(@size: 17px, @color: white);
+        border: solid 1px fadeout(white, 60%);
+
+        &:hover, &:focus, &:active {
+          color: @text-color;
+          background: white;
+          text-decoration: none;
+        }
+      }
+    }
   }
 
   section h1,
@@ -394,10 +408,16 @@ body.index {
       box-shadow:
         0 0 0 1px rgba(0, 0, 0, 0.2),
         0 16px 64px rgba(0, 0, 0, 0.6);
-      margin: 3em -10px -100px;
+      margin: 3em -10px -80px;
+      overflow: hidden;
+      padding-top: 45%;
+      pointer-events: none;
+      position: relative;
       transform: translateZ(0);
 
       video {
+        position: absolute;
+        top: 0;
         width: 100%;
       }
     }
@@ -455,9 +475,9 @@ body.index {
       transition: background 0.1s ease-out, color 0.1s ease-out;
 
       border: solid 1px @rhodamine-color;
-      border-radius: 4px;
-      padding: 0.5em 1.5em;
-      margin: 0 16px;
+      border-radius: 6px;
+      padding: 0.4em 1.2em;
+      margin: 0 0.6em;
       display: inline-block;
       text-decoration: none;
 

site/index.html.js

@@ -60,6 +60,15 @@ var index = React.createClass({
               </div>
             </section>
 
+            <div className="buttons-unit">
+              <a className="button" href="/code/">
+                Get Started
+              </a>
+              <a className="button" href="/docs/">
+                Learn More
+              </a>
+            </div>
+
           </div>
         </div>