Add banner for early-access to Edge.

docs/assets/theme-colors.less

@@ -1,12 +1,39 @@
 @color-primary: #22A699;
 
 .docstart {
-  width: 100%; 
-  height: 222px;
+  width: 100%;
+  height: 345px;
   //border-right: 0px solid #22A699;
   //border:0px solid #22A699;
 }
 
+.docstart .pop-banner {
+  background-color: fade(@color-primary, 5%);
+  border: 2px solid @color-primary;
+  padding: 0.5rem;
+  margin-left: 20%;
+  margin-right: 20%;
+  margin-bottom: 2rem;
+  .pb-content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .pb-early-access {
+    font-weight: 700;
+    letter-spacing: .25em;
+    text-transform: uppercase;
+    color: @color-primary;
+  }
+  .pb-head {
+    font-weight: bold;
+    font-size: 1.1rem;
+  }
+  .pb-link, .pb-link a {
+    color: @color-primary;
+    text-decoration: underline;
+  }
+}
+
 .fundamentals, .quickstart, .guides {
   //border:0px solid #22A699;
   width: 33.3%;
@@ -29,8 +56,12 @@
   padding-bottom: 10px;
 }
 
+#documentation-heading {
+  font-size: 20px;
+}
 
-.documentation {
+
+.documentation-buttons {
   width: 100%;
   height: 100px;
 
@@ -121,6 +152,21 @@
 //   ##Screen = B/w 320px to 479px
 // */
 @media (min-width: 320px) and (max-width: 480px) {
+  .docstart .pop-banner {
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    .pb-head {
+      padding-top: 0.3rem;
+      padding-bottom: 0.3rem;
+    }
+    .pb-link {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+  }
+
   .btn.default.hollow {
     color: #e535ab;
     border: 2px solid #e535ab;

docs/source/index.md

@@ -4,6 +4,15 @@ description: Start here to learn how to use the Apollo platform.
 ---
 
 <div class="docstart" align="center">
+
+  <div class="pop-banner">
+    <div class="pb-content pb-early-access">Early Access</div>
+    <div class="pb-content pb-head">Interested in running GraphQL on the edge?</div>
+    <div class="pb-content pb-link">
+      <a href="/edge">Sign up to try Apollo Server on CloudFlare.</a>
+    </div>
+  </div>
+
   <div class="fundamentals">
       <div align="center">
         <a href="./fundamentals/platform.html">
@@ -58,11 +67,11 @@ description: Start here to learn how to use the Apollo platform.
   </div>
 </div>
 
-<h4 align="center"> Documentation </h4>
+<div align="center" id="documentation-heading"> Documentation </div>
 
 <hr />
 
-<div class="documentation">
+<div class="documentation-buttons">
   <div class="doc">
     <div align="center">
       <a href="/docs/engine" class="btn default hollow"> Start with Engine </a>