color tuning and animated first point

Author: leebyron

site/_core/Prism.js

@@ -389,7 +389,7 @@ Token.reactify = function(o, language, parent, key) {
 		type: o.type,
 		content: Token.reactify(o.content, language, parent),
 		tag: 'span',
-		classes: ['token', o.type],
+		classes: [o.type],
 		attributes: {key: key},
 		language: language,
 		parent: parent

site/_css/index.less

@@ -2,6 +2,7 @@
 
 // Index page uses a fixed header with an overlay
 body.index {
+  background: #f5f6f8;
   margin-top: 50px;
 
   header {
@@ -23,7 +24,6 @@ body.index {
 
   .hero {
     background: @dark-color;
-    color: #f8f8f8;
     min-height: 500px;
     max-height: 1000px;
     height: 70vh;
@@ -120,9 +120,7 @@ body.index {
     }
 
     .fadein-cols(3);
-
-    .fadein-cols(@n) when (@n > 0) {
-      .fadein-cols(@n - 1);
+    .fadein-cols(@n) when (@n > 0) { .fadein-cols(@n - 1);
       .marketing-col:nth-child(@{n}) {
         animation: fade 1.1s 0.8s * @n ease-in-out;
         animation-fill-mode: both;
@@ -156,7 +154,7 @@ body.index {
   }
 
   .grayWash {
-    background: #f3f4f6;
+    background: #e6e8ec;
     position: relative;
   }
 
@@ -186,6 +184,7 @@ body.index {
       pointer-events: none;
 
       .query, .response {
+        background: white;
         flex: 1;
       }
 
@@ -194,11 +193,33 @@ body.index {
       }
 
       .prism {
-        box-shadow: none;
         background: none;
+        box-shadow: none;
         margin: 0;
         padding: 1ch;
       }
+
+      .cursor {
+        width: 7px;
+        height: 14px;
+        background-color: #d0d0d0;
+        display: inline-block;
+        margin: 0 1px -3px;
+        animation: cursor-blink 0.5s infinite linear both alternate;
+
+        @keyframes cursor-blink {
+          0%, 30% {
+            opacity: 0;
+          }
+          70%, 100% {
+            opacity: 1;
+          }
+        }
+      }
+
+      .ch {
+        display: none;
+      }
     }
   }
 
@@ -227,8 +248,8 @@ body.index {
       }
 
       .prism {
-        box-shadow: none;
         background: none;
+        box-shadow: none;
         margin: 0;
         padding: 0;
       }

site/_css/prism.less

@@ -69,73 +69,75 @@ pre.prism {
 }
 
 // Colors
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
+.prism {
+  .comment,
+  .prolog,
+  .doctype,
+  .cdata {
+    color: slategray;
+  }
 
-.token.punctuation {
-  color: #999;
-}
+  .punctuation {
+    color: #999;
+  }
 
-.namespace {
-  opacity: .7;
-}
+  .namespace {
+    opacity: .7;
+  }
 
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #905;
-}
+  .property,
+  .tag,
+  .boolean,
+  .number,
+  .constant,
+  .symbol,
+  .deleted {
+    color: #905;
+  }
 
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #690;
-}
+  .selector,
+  .attr-name,
+  .string,
+  .char,
+  .builtin,
+  .inserted {
+    color: #690;
+  }
 
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #a67f59;
-  background: hsla(0, 0%, 100%, .5);
-}
+  .operator,
+  .entity,
+  .url,
+  .language-css .string,
+  .style .string {
+    color: #a67f59;
+    background: hsla(0, 0%, 100%, .5);
+  }
 
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
+  .atrule,
+  .attr-value,
+  .keyword {
+    color: #07a;
+  }
 
-.token.function {
-  color: #DD4A68;
-}
+  .function {
+    color: #DD4A68;
+  }
 
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
-}
+  .regex,
+  .important,
+  .variable {
+    color: #e90;
+  }
 
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
+  .important,
+  .bold {
+    font-weight: bold;
+  }
+  .italic {
+    font-style: italic;
+  }
 
-.token.entity {
-  cursor: help;
+  .entity {
+    cursor: help;
+  }
 }