header design detail

Author: leebyron

site/_css/index.less

@@ -25,6 +25,8 @@ body.index {
 .hero {
   background: @dark-color;
   color: #f8f8f8;
+  min-height: 500px;
+  max-height: 1000px;
   height: 80vh;
   position: relative;
   z-index: 11;
@@ -34,15 +36,25 @@ body.index {
   -moz-osx-font-smoothing: grayscale;
 
   header {
-    background: none;
+    background: linear-gradient(
+      fadeout(@dark-color, 20%),
+      fadeout(@dark-color, 100%)
+    );
     box-shadow: none;
+    min-height: 75px;
+    max-height: 150px;
+    height: 12vh;
 
-    nav a:hover, nav a:focus {
-      color: white;
-    }
+    nav > a {
+      text-shadow: 0 1px 1px @dark-color, 0 0 3px @dark-color;
+
+      &:hover, &:focus {
+        color: white;
+      }
 
-    a:first-child {
-      margin-left: -1em;
+      &:first-child {
+        margin-left: -1em;
+      }
     }
   }
 
@@ -63,6 +75,8 @@ body.index {
   .content {
     text-align: center;
     margin: 30px;
+    animation: fade 1.3s ease-in-out;
+    animation-fill-mode: both;
   }
 
   .main-logo {
@@ -100,7 +114,7 @@ body.index {
   .fadein-cols(@n) when (@n > 0) {
     .fadein-cols(@n - 1);
     .marketing-col:nth-child(@{n}) {
-      animation: fade 1.1s 0.8s * (@n - 1) ease-in-out;
+      animation: fade 1.1s 0.8s * @n ease-in-out;
       animation-fill-mode: both;
     }
   }