Merge branch 'new-source' of https://github.com/graphql/graphql.github.io into new-source

Author: Robert Zhu

site/_css/graphql.less

@@ -133,7 +133,7 @@ nav {
 }
 
 section {
-  max-width: 1020px;
+  max-width: 1080px;
   margin: 0 auto;
   padding: 0 20px;
 }

site/_css/index.less

@@ -678,6 +678,63 @@ body.index {
     .prose {
       max-width: 415px;
     }
+
+    .leverage-code {
+      @pane-width: 520px;
+      width: @pane-width;
+      overflow-y: hidden;
+
+      #leverageCodeView {
+        display: flex;
+        flex-direction: row;
+        left: 0;
+        position: relative;
+        transition: left 0.5s ease-in-out;
+        width: @pane-width * 4;
+
+        & > pre {
+          width: @pane-width;
+          position: relative;
+          top: 0;
+        }
+
+        &.step0 {
+          transition: none;
+        }
+
+        &.step1, &.step2 {
+          & > pre:first-child {
+            line-height: 4 * 17px;
+            transition:
+              top 0.5s ease-in-out,
+              line-height 0.5s ease-in-out;
+
+            &:first-line {
+              line-height: 17px;
+            }
+          }
+        }
+
+        &.step2 {
+          left: -1 * @pane-width;
+        }
+
+        &.step3 {
+          left: -2 * @pane-width;
+        }
+
+        &.step4 {
+          left: -3 * @pane-width;
+        }
+
+        &.step5 {
+          left: -4 * @pane-width;
+          & > pre:first-child {
+            left: 4 * @pane-width;
+          }
+        }
+      }
+    }
   }
 
   section.powered-by {

site/index.html.js

@@ -449,6 +449,80 @@ type Person {
               each field in the type system, and GraphQL calls them with
               optimal&nbsp;concurrency.</p>
           </div>
+          <div className="window leverage-code" aria-hidden>
+            <div id="leverageCodeView">
+              <Prism language="graphql">
+                {`type Character {
+  name: String
+  homeWorld: Planet
+  friends: [Character]
+}`}
+              </Prism>
+              <Prism>
+                {`// type Character {
+class Character {
+  // name: String
+  getName() {
+    return this._name
+  }
+
+  // homeWorld: Planet
+  getHomeWorld() {
+    return fetchHomeworld(this._homeworldID)
+  }
+
+  // friends: [Character]
+  getFriends() {
+    return this._friendIDs.map(fetchCharacter)
+  }
+}`}
+              </Prism>
+              <Prism language="python">
+                {`# type Character {
+class Character:
+  # name: String
+  def name(self):
+    return self._name
+
+  # homeWorld: Planet
+  def homeWorld(self):
+    return fetchHomeworld(self._homeworldID)
+
+  # friends: [Character]
+  def friends(self):
+    return map(fetchCharacter, self._friendIDs)
+`}
+              </Prism>
+              <Prism>
+                {`// type Character {
+public class Character {
+  // name: String
+  public String Name { get; }
+
+  // homeWorld: Planet
+  public async Task<Planet> GetHomeWorldAsync() {
+    return await FetchHomeworldAsync(_HomeworldID);
+  }
+
+  // friends: [Character]
+  public async IEnumerable<Task<Character>> GetFriendsAsync() {
+    return _FriendIDs.Select(FetchCharacterAsync);
+  }
+}`}
+              </Prism>
+            </div>
+            <script dangerouslySetInnerHTML={{__html: `(function(){
+              var i = 0;
+              var inView = document.getElementById('leverageCodeView');
+              var delayBefore = [ 800, 1800, 1200, 3000, 3000, 3000 ];
+              function step() {
+                inView.className = 'step' + i;
+                i = (i + 1) % 6;
+                setTimeout(step, delayBefore[i]);
+              }
+              step();
+            })()`}} />
+          </div>
         </section>
 
         <section className="powered-by">