single round-trip animation

Author: leebyron

site/_core/Prism.js

@@ -1,5 +1,39 @@
 var React = require('react');
-var unindent = require('./unindent');
+
+export default function PrismComponent(props) {
+  const lines = [];
+  if (props.line) {
+    props.line.split(',').forEach(range => {
+      const parts = range.split('-');
+      if (parts.length === 1) {
+        lines.push(parts[0].trim());
+      } else {
+        const start = parseInt(parts[0].trim(), 10);
+        const end = parseInt(parts[1].trim(), 10);
+        for (let ii = start; ii <= end; ii++) {
+          lines.push(ii);
+        }
+      }
+    });
+  }
+
+  const language = props.language || 'javascript';
+  const grammar = _.languages[language];
+  return (
+    <pre className={'prism language-' + language}>
+      {Token.reactify(_.tokenize(props.children, grammar))}
+      {lines.map(function(line, ii) {
+        return (
+          <div
+            className="line-highlight"
+            key={ii}
+            style={{height: 20, top: 20 * (line - 1)}}
+          />
+        );
+      })}
+    </pre>
+  );
+}
 
 /* http://prismjs.com/download.html?themes=prism&languages=markup+clike+javascript+jsx */
 /**
@@ -516,48 +550,3 @@ Prism.languages.insertBefore('inside', 'attr-value',{
 }, Prism.languages.jsx.tag);
 
 }(Prism));
-
-var PrismComponent = React.createClass({
-  statics: {
-    _: _
-  },
-  getDefaultProps: function() {
-    return {
-      language: 'javascript'
-    };
-  },
-  render: function() {
-    var lines = [];
-    if (this.props.line) {
-      this.props.line.split(',').forEach(function(range) {
-        var parts = range.split('-');
-        if (parts.length === 1) {
-          lines.push(parts[0].trim());
-        } else {
-          var start = parseInt(parts[0].trim(), 10);
-          var end = parseInt(parts[1].trim(), 10);
-          for (var ii = start; ii <= end; ii++) {
-            lines.push(ii);
-          }
-        }
-      });
-    }
-    var grammar = _.languages[this.props.language];
-    return (
-      <pre className={'prism language-' + this.props.language}>
-        {Token.reactify(_.tokenize(this.props.children, grammar))}
-        {lines.map(function(line, ii) {
-          return (
-            <div
-              className="line-highlight"
-              key={ii}
-              style={{height: 20, top: 20 * (line - 1)}}
-            />
-          );
-        })}
-      </pre>
-    );
-  }
-})
-
-module.exports = PrismComponent;

site/_core/unindent.js

@@ -166,11 +166,95 @@ body.index {
     padding-top: 4em;
     padding-bottom: 4em;
 
-    & > div {
+    .prose {
       max-width: 415px;
     }
   }
 
+  section.point2 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 4em;
+    padding-bottom: 4em;
+
+    .prose {
+      max-width: 415px;
+    }
+
+    .app-to-server {
+      width: 476px;
+      height: 370px;
+      position: relative;
+
+      & > img {
+        position: absolute;
+        top: -35px;
+        left: -10px;
+        right: -10px;
+      }
+
+      .query, .response {
+        position: absolute;
+
+        .prism {
+          box-shadow: none;
+          background: none;
+        }
+      }
+
+      .query {
+        animation: query-up 6s 0s infinite ease-in both;
+        left: 155px;
+
+        @keyframes query-up {
+          from {
+            opacity: 0;
+            top: 160px;
+          }
+
+          5%, 25% {
+            opacity: 1;
+          }
+
+          40% {
+            opacity: 0;
+          }
+
+          50%, 100% {
+            top: 90px;
+            opacity: 0;
+          }
+        }
+      }
+
+      .response {
+        animation: response-down 6s 2.3s infinite ease-out both;
+        left: 115px;
+
+        @keyframes response-down {
+          0% {
+            opacity: 0;
+            top: 70px;
+          }
+
+          10% {
+            opacity: 0;
+          }
+
+          25%, 45% {
+            opacity: 1;
+          }
+
+          50%, 100% {
+            opacity: 0;
+            top: 130px;
+          }
+        }
+      }
+    }
+  }
+
   .home-divider {
     border-top-color: #bbb;
     margin: 3em auto;

site/_css/index.less

@@ -35,8 +35,6 @@
   -ms-hyphens: none;
   hyphens: none;
 
-  white-space: pre-wrap;
-
   font-size: 13px;
   line-height: 17px;
   background: white;