Pupdate

doc/site/js/main.js

@@ -1,17 +1,33 @@
- $(function() {
-     hljs.initHighlighting();
-
+var editor;
+$(function() {
+    this.isApi = location.href.indexOf("/api") >= 0;
+    if (!this.isApi) {
+        hljs.initHighlighting();
+        editor = ace.edit("ace_editor_demo");
+        var javascriptMode = require("ace/mode/javascript").Mode;
+        editor.getSession().setMode(new javascriptMode());
+    }
+    
     $("ul.menu-list li").click(function(e) {
         if (e.target.tagName === "LI") {
             console.log($(this).find("a"));
             window.location = $(this).find("a").attr("href");
         }
+        else if (e.target.tagName === "P") {
+            var anchor = $(e.target).siblings();
+            window.location = anchor.attr("href");
+        }
     });
      var tabs = $("#tabnav"),
          tab_a_selector = "a";
 
-    var firstLoad = true;
+     var firstLoad = true;
+     var _self = this;
      tabs.find(tab_a_selector).click(function(e) {
+        if (_self.isApi || $(this).attr("href").indexOf("/api/") >= 0) {
+             window.location = $(this).attr("href");
+        }
+         
         e.preventDefault();
         if ($(this).attr("href") === "/")
             return;
@@ -39,7 +55,8 @@
                 }, 400);
             }
         }
-
+    
+        
         $(this).tab("show");
 
         var state = {};
@@ -47,10 +64,12 @@
         $.bbq.pushState(state);
      });
 
-     $(window).on("hashchange", function(e) {
-         tabs.each(function() {
-            var idx = $.bbq.getState("nav") || "about";
-            $(this).find(tab_a_selector + "[href='#" + idx + "']").triggerHandler('click');
-         });
-     }).trigger("hashchange");
- });
+    if (!this.isApi) {
+         $(window).on("hashchange", function(e) {
+             tabs.each(function() {
+                var idx = $.bbq.getState("nav") || "about";
+                $(this).find(tab_a_selector + "[href='#" + idx + "']").triggerHandler('click');
+             });
+         }).trigger("hashchange");
+    }
+});

doc/site/style.css

@@ -5,6 +5,22 @@ body {
     font-family: Helvetica, Arial;
 }
 
+#ace_editor_wrapper {
+    height: 275px;
+    position: relative;
+    border: 1px solid #DDD;
+    border-radius: 5px;
+    margin-top: 5px;
+}
+
+#ace_editor_demo {
+    left: 0px;
+    top: 0px;
+    bottom: 1px;
+    right: 1px;
+    background: #fff;
+}
+
 h1, h2, h3, h4, h5, h6 {
     font-family: Helvetica;
     font-weight: 100;
@@ -37,13 +53,12 @@ H4 {
 P {
     padding:13px 0;
     margin:0;
-    line-height:22px;
-    font-size: 16px;
+    line-height:21px;
+    font-size: 15px;
 }
 
 UL{
-    line-height : 22px;
-    font-size: 16px;
+    font-size: 15px;
 }
 
 #header {
@@ -188,6 +203,7 @@ UL.content-list {
 
 UL.content-list li {
     padding-left: 10px;
+    padding-bottom: 3px;
 }
 
 ul.menu-list {
@@ -235,20 +251,62 @@ ul.menu-list li:hover {
     -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
 }
 
-UL.menu-list LI a {
+ul.menu-list li a {
     position: absolute;
-    bottom: 3px;
-    left: 8px;
-    color: #FFF;
-    text-align: left;
+    bottom: 0px;
+    left: 0px;
+    color: white;
+    text-align: center;
     font-weight: bold;
     text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
+    width: 100%;
+    display: block;
+    background: rgba(0, 0, 0, 0.6);
+    line-height: 12px;
+    padding: 4px 0;
 }
 
 UL.menu-list LI a:hover {
     text-decoration: none;
 }
 
+li#add_your_site p {
+    font-size: 32px;
+    border: 3px solid rgb(52, 160, 52);
+    color: rgb(52, 160, 52);
+    border-radius: 34px;
+    padding: 4px 4px 4px 7px;
+    width: 22px;
+    height: 22px;
+    line-height: 18px;
+    position: relative;
+    left: 31px;
+    top: 20px;
+    background: rgba(255, 255, 255, 1);
+}
+
+ul.menu-list li#add_your_site a {
+    color: #A3EEA3;
+}
+
+/* This is the animation code. */
+@-webkit-keyframes example {
+    0% { -webkit-transform: rotate(0deg); }
+    25% { -webkit-transform: rotate(3deg); }
+    50%   { -webkit-transform: rotate(0deg); }
+    75%   { -webkit-transform: rotate(-3deg); }
+}
+
+/* This is the element that we apply the animation to. */
+li#add_your_site {
+   -webkit-animation-name: example;
+   -webkit-animation-duration: 0.4s;
+   -webkit-animation-timing-function: ease; /* ease is the default */
+   -webkit-animation-delay: 0s;             /* 0 is the default */
+   -webkit-animation-iteration-count: infinite;    /* 1 is the default */
+   -webkit-animation-direction: alternate;  /* normal is the default */
+}
+
 A {
     color:#2557b4;
     text-decoration:none;
@@ -346,11 +404,11 @@ UL.menu-footer LI A:hover {
 }
 
 .tab-content {
-    margin-bottom: 100px;
+    margin-bottom: 50px;
 }
 
 .tab-content > .active, .pill-content > .active {
-    padding: 35px 30px;
+    padding: 25px 30px;
 }
 
 #top_container, .tab-content > .active, .pill-content > .active {
@@ -362,4 +420,33 @@ UL.menu-footer LI A:hover {
 
 pre .xml .javascript, pre .xml .css {
     opacity: 1;
+}
+
+#embed_link {
+    text-align: right;
+}
+#embed_link a {
+    color: #059C05;
+    font-weight: 100;
+    font-family: helvetica;
+    text-transform: uppercase;
+    font-size: 13px;
+    display: inline-block;
+    padding: 2px 10px;
+}
+
+p.highlight_note {
+    padding: 8px 35px 8px 14px;
+    margin-top: 10px;
+    color: #A0762E;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    background-color: #FCF8E3;
+    border: 1px solid #CA9C44;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+p.highlight_note a {
+    color: #537CC7;
 }