lighten shadows, clean up windows

Author: leebyron

site/_css/index.less

@@ -178,6 +178,28 @@ body.index {
     overflow: hidden;
   }
 
+  .window {
+    background: white;
+    border-radius: 6px 6px 0 0;
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.12);
+    margin: 0 -15px;
+    overflow: hidden;
+    padding-top: 25px;
+    position: relative;
+
+    &::before {
+      background: linear-gradient(#f0f0f0, #dedede);
+      border-radius: 6px 6px 0 0;
+      box-shadow: inset 0 2px 2px -2px white, 0 1px rgba(0,0,0,0.4);
+      content: ' ';
+      display: block;
+      height: 25px;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
   section.point1 {
     display: flex;
     flex-direction: row-reverse;
@@ -191,20 +213,13 @@ body.index {
     }
 
     .faux-graphiql {
-      border: 1px solid transparent;
-      border-image: url(http://github.com/%3Cspan%20class=%22pl-s%22%3E/img/terminal.png%3C/span%3E) repeat;
-      border-image-slice: 190 210 190 234;
-      border-image-width: 95px 105px 95px 117px;
-      padding: 54px 55px 79px 55px;
-      margin: -30px 0 -80px -70px;
-      width: 570px;
-      height: 450px;
+      width: 440px;
+      height: 330px;
       display: flex;
       flex-direction: column;
       pointer-events: none;
 
       .query, .response {
-        background: white;
         flex: 1;
       }
 
@@ -350,13 +365,7 @@ body.index {
     }
 
     .strong-typed-query {
-      border: 1px solid transparent;
-      border-image: url(http://github.com/%3Cspan%20class=%22pl-s%22%3E/img/terminal.png%3C/span%3E) repeat;
-      border-image-slice: 190 210 190 234;
-      border-image-width: 95px 105px 95px 117px;
-      padding: 54px 55px 79px 55px;
-      margin: -30px 0 -80px -70px;
-      width: 580px;
+      width: 480px;
       display: flex;
       pointer-events: none;
 
@@ -399,6 +408,10 @@ body.index {
       color: white;
     }
 
+    em {
+      font-family: Palatino, Georgia, serif;
+    }
+
     .prose {
       max-width: 575px;
       text-align: center;
@@ -411,13 +424,13 @@ body.index {
 
     .graphiqlVid {
       background: white;
-      border-radius: 4px;
+      border-radius: 6px 6px 0 0;
       box-shadow:
         0 0 0 1px rgba(0, 0, 0, 0.2),
         0 16px 64px rgba(0, 0, 0, 0.6);
-      margin: 3em -10px -80px;
+      margin: 3em -10px -75px;
       overflow: hidden;
-      padding-top: 45%;
+      padding-top: 40%;
       pointer-events: none;
       position: relative;
       transform: translateZ(0);

site/img/graphiql.mp4

@@ -93,7 +93,7 @@ var index = React.createClass({
               predictable results. Apps using GraphQL are fast and stable because
               they control the data they get, not the&nbsp;server.</p>
           </div>
-          <div className="faux-graphiql" aria-hidden>
+          <div className="window faux-graphiql" aria-hidden>
             <div className="query">
               <pre className="prism">
                 {'{'}
@@ -237,7 +237,7 @@ var index = React.createClass({
               what&rsquo;s possible and provide clear and helpful errors. Apps can
               use types to avoid writing manual parsing&nbsp;code.</p>
           </div>
-          <div className="strong-typed-query" aria-hidden>
+          <div className="window strong-typed-query" aria-hidden>
           <div className="query">
           <div id="query-highlight" className="highlight" />
           <Prism>
@@ -314,12 +314,12 @@ type Species {
               Know exactly what data you can request from your API without
               leaving your editor, highlight potential issues before sending a
               query, and take advantage of improved code intelligence. GraphQL
-              makes it easy to build powerful tools like <a href="https://github.com/graphql/graphiql" target="_blank">GraphiQL</a> by
+              makes it easy to build powerful tools like <a href="https://github.com/graphql/graphiql" target="_blank">Graph<em>i</em>QL</a> by
               leveraging your API&rsquo;s type system.</p>
           </div>
           <div className="graphiqlVid" dangerouslySetInnerHTML={{__html: `
             <video autoplay loop playsinline>
-              <source src="http://github.com/img/graphiql.mp4?" type="video/mp4" />
+              <source src="http://github.com/img/graphiql.mp4?%3Cspan%20class="x x-first x-last">x" type="video/mp4" />
             </video>
           `}} />
         </section>