minor code formatting css improvements

Author: leebyron

site/_css/index.less

@@ -115,10 +115,6 @@ body.index {
         -webkit-font-smoothing: auto;
         -moz-osx-font-smoothing: auto;
         color: white;
-        background: transparent;
-        box-shadow: none;
-        padding: 0;
-        margin: 0;
       }
 
       &:last-child > .prism {
@@ -218,6 +214,10 @@ body.index {
       top: 0;
       width: 100%;
     }
+
+    .prism {
+      padding: 1ch;
+    }
   }
 
   section.point1 {
@@ -247,13 +247,6 @@ body.index {
         border-bottom: solid 5px #e0e0e0;
       }
 
-      .prism {
-        background: none;
-        box-shadow: none;
-        margin: 0;
-        padding: 1ch;
-      }
-
       .cursor {
         width: 7px;
         height: 15px;
@@ -309,13 +302,6 @@ body.index {
         top: -35px;
       }
 
-      .prism {
-        background: none;
-        box-shadow: none;
-        margin: 0;
-        padding: 0;
-      }
-
       .query, .response {
         position: absolute;
       }
@@ -407,13 +393,6 @@ body.index {
         top: 8px;
         background: lighten(@dark-color, 80%);
       }
-
-      .prism {
-        background: none;
-        box-shadow: none;
-        margin: 0;
-        padding: 1ch;
-      }
     }
   }
 

site/_css/prism.less

@@ -1,23 +1,5 @@
 @import "variables.less";
 
-.prism {
-  position: relative;
-
-  @media screen and (max-width: 1020px) {
-    padding: 4px 8px;
-    margin-left: -12px;
-    font-size: 11px;
-  }
-
-  @media print {
-    text-shadow: none;
-  }
-}
-
-.prism + .prism {
-  margin-top: -15px;
-}
-
 .prism {
   .code-font();
   direction: ltr;
@@ -35,39 +17,61 @@
   -ms-hyphens: none;
   hyphens: none;
 
-  font-size: 13px;
-  line-height: 17px;
-  background: white;
-  box-shadow: inset 0 0 0 1px #EEE, inset 4px 0 0 #EEE;
-  border-radius: 3px;
-
-  .line-highlight {
-    background-color: rgba(229, 53, 171, 0.15);
-    left: 0;
-    line-height: inherit;
-    margin-top: 5px;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-  }
+  position: relative;
 }
 
-.not(code) > pre.prism {
-  text-shadow: 0 1px white;
+// Used in docs, but not on index. todo: move.
+.inner-content {
+  .prism {
+    position: relative;
+    background: white;
+    box-shadow: inset 0 0 0 1px #EEE, inset 4px 0 0 #EEE;
+    border-radius: 3px;
+
+    .line-highlight {
+      background-color: rgba(229, 53, 171, 0.15);
+      left: 0;
+      line-height: inherit;
+      margin-top: 5px;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+    }
+
+    @media screen and (max-width: 1020px) {
+      padding: 4px 8px;
+      margin-left: -12px;
+      font-size: 11px;
+    }
+
+    @media print {
+      text-shadow: none;
+    }
+  }
 
-  &::-moz-selection, &::selection {
-    text-shadow: none;
+  .prism + .prism {
+    margin-top: -15px;
   }
-}
 
-// Code blocks
-pre.prism {
-  padding: 7px 14px;
-  margin-left: -4px;
-  margin-bottom: 10px;
-  overflow: auto;
+  .not(code) > pre.prism {
+    text-shadow: 0 1px white;
+
+    &::-moz-selection, &::selection {
+      text-shadow: none;
+    }
+  }
+
+  // Code blocks
+  pre.prism {
+    padding: 7px 14px;
+    margin-left: -4px;
+    margin-bottom: 10px;
+    overflow: auto;
+  }
 }
 
+
+
 // Colors
 // .prism {
 //   .comment,

site/_css/variables.less

@@ -24,5 +24,5 @@
   font-weight: 400;
   color: @color;
   font-size: @size;
-  line-height: @size * 1.3;
+  line-height: @size * 17/13;
 }

site/index.html.js

@@ -140,44 +140,44 @@ var index = React.createClass({
                 </Prism>
               </div>
             </div>
-          </div>
-          <script dangerouslySetInnerHTML={{__html: `(function(){
-            var i = 0;
-            var forward = true;
-            setTimeout(type, 2000);
-            showResponse(1);
-            function type() {
-              if (forward) {
-                document.getElementById('ch' + i).style.display = 'inline';
-                i++;
-                if (i === 27) {
-                  forward = false;
-                  showResponse(3);
-                  setTimeout(type, 1500);
-                } else if (i === 13) {
-                  showResponse(2);
-                  setTimeout(type, 1500);
-                } else {
-                  setTimeout(type, Math.random() * 180 + 70);
-                }
-              } else {
-                i--;
-                document.getElementById('ch' + i).style.display = 'none';
-                if (i === 0) {
-                  forward = true;
-                  showResponse(1);
-                  setTimeout(type, 2000);
+            <script dangerouslySetInnerHTML={{__html: `(function(){
+              var i = 0;
+              var forward = true;
+              setTimeout(type, 2000);
+              showResponse(1);
+              function type() {
+                if (forward) {
+                  document.getElementById('ch' + i).style.display = 'inline';
+                  i++;
+                  if (i === 27) {
+                    forward = false;
+                    showResponse(3);
+                    setTimeout(type, 1500);
+                  } else if (i === 13) {
+                    showResponse(2);
+                    setTimeout(type, 1500);
+                  } else {
+                    setTimeout(type, Math.random() * 180 + 70);
+                  }
                 } else {
-                  setTimeout(type, 80);
+                  i--;
+                  document.getElementById('ch' + i).style.display = 'none';
+                  if (i === 0) {
+                    forward = true;
+                    showResponse(1);
+                    setTimeout(type, 2000);
+                  } else {
+                    setTimeout(type, 80);
+                  }
                 }
               }
-            }
-            function showResponse(num) {
-              document.getElementById('r1').style.display = num === 1 ? 'block' : 'none';
-              document.getElementById('r2').style.display = num === 2 ? 'block' : 'none';
-              document.getElementById('r3').style.display = num === 3 ? 'block' : 'none';
-            }
-          })()`}} />
+              function showResponse(num) {
+                document.getElementById('r1').style.display = num === 1 ? 'block' : 'none';
+                document.getElementById('r2').style.display = num === 2 ? 'block' : 'none';
+                document.getElementById('r3').style.display = num === 3 ? 'block' : 'none';
+              }
+            })()`}} />
+          </div>
         </section>
 
         <div className="grayWash">
@@ -290,7 +290,6 @@ type Species {
 }`}
           </Prism>
           </div>
-          </div>
           <script dangerouslySetInnerHTML={{__html: `(function(){
             var typeHighlight = document.getElementById('type-highlight');
             var queryHighlight = document.getElementById('query-highlight');
@@ -305,6 +304,7 @@ type Species {
               setTimeout(highlightLine, 800 + Math.random() * 200);
             }
           })()`}} />
+          </div>
         </section>
 
         <div className="darkWash">
@@ -339,6 +339,15 @@ type Species {
               APIs give apps easier access to new features and enable cleaner,
               more maintainable server&nbsp;code.</p>
           </div>
+          <div className="window type-evolution" aria-hidden>
+            <Prism language="graphql">
+              {`type Film {
+  title: String
+  episode: Int
+  director: String
+}`}
+            </Prism>
+          </div>
         </section>
         </div>