waypoint on new coffeescript docs --they're coming along nicely

documentation/css/docs.css

@@ -87,7 +87,7 @@ div.code {
   z-index: 50;
   position: fixed;
   left: 0; top: 0; right: 0;
-  height: 50px;
+  height: 100px;
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 255)), to(rgba(255, 255, 255, 0)));
   background: -moz-linear-gradient(top, rgba(255, 255, 255, 255), rgba(255, 255, 255, 0));
 }
@@ -96,8 +96,9 @@ div.code {
   position: fixed;
   z-index: 100;
   height: 50px;
-  left: 25px; right: 25px; top: 25px;
+  left: 40px; right: 40px; top: 25px;
   background: #ddd;
+  padding-left: 250px;
   background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#d0d0d0));
   background: -moz-linear-gradient(top, #f5f5f5, #d0d0d0);
   filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#F5F5F5', EndColorStr='#D0D0D0');
@@ -105,23 +106,26 @@ div.code {
   -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
 }
   #logo {
+    display: block;
     width: 215px; height: 50px;
     background: url('logo.png');
     position: absolute;
-    top: 0px; left: 5px;
+    top: 0px; left: 10px;
   }
   .navigation {
     height: 50px;
     font: bold 11px/50px Arial;
     text-transform: uppercase;
-    position: absolute;
+    position: relative;
-    left: 250px;
+    float: left;
-    padding: 0 10px;
+    padding: 0 20px;
     border: 1px solid #bbb;
     border-top: 0; border-bottom: 0;
     cursor: pointer;
-    color: #595977;
   }
+    .navigation.try {
+      border-left: 0;
+    }
     .navigation:hover {
       background: #d0d0d0;
       background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#c0c0c0));
@@ -142,6 +146,16 @@ div.code {
       .navigation:hover .contents {
         display: block;
       }
+        .navigation .contents.repl_wrapper {
+          left: -162px;
+          width: 640px;
+          padding: 0;
+        }
+          .navigation .contents.repl_wrapper .code {
+            -webkit-box-shadow: none; -moz-box-shadow: none;
+            background: transparent;
+            border: 0;
+          }
       .navigation .contents a {
         display: block;
         width: 300px;
@@ -163,13 +177,21 @@ div.code {
   top: -90px;
 }
 
-#repl_source {
+#repl_source, #repl_results {
-  border: 0;
+  background: transparent;
-  padding: 5px 7px;
-  margin-left: 5px;
-  min-height: 250px;
-  resize: none;
-}
-#repl_results {
-  min-height: 260px;
 }
+  #repl_source {
+    border: 0;
+    padding: 5px 7px;
+    margin-left: 5px;
+    min-height: 250px;
+    resize: none;
+    width: 295px;
+  }
+  #repl_results {
+    font-family: Monaco, Consolas, "Lucida Console", monospace;
+    text-transform: none;
+    font-weight: normal;
+    min-height: 260px;
+    width: 295px;
+  }

documentation/index.html.erb

@@ -28,7 +28,7 @@
   <div id="fadeout"></div>
 
   <div id="flybar">
-    <div id="logo"></div>
+    <a id="logo" href="#top"> </a>
     <div class="navigation">
       <div class="button">
         Table of Contents
@@ -36,7 +36,7 @@
       <div class="contents">
         <a href="#overview">Mini Overview</a>
         <a href="#installation">Installation and Usage</a>
-        <a href="#try_coffee">Try CoffeeScript</a>
+        <a href="#language">Language Reference</a>
         <a href="#whitespace">Significant Whitespace</a>
         <a href="#functions">Functions and Invocation</a>
         <a href="#assignment">Assignment</a>
@@ -63,9 +63,26 @@
         <a href="#change_log">Change Log</a>
       </div>
     </div>
+    <div class="navigation try">
+      <div class="button">
+        Try CoffeeScript
+      </div>
+      <div class="contents repl_wrapper">
+        <div class="code">
+          <textarea id="repl_source">reverse: (string) ->
+  string.split('').reverse()
+
+print reverse 'tpircseeffoc'</textarea>
+          <pre id="repl_results"></pre>
+          <button onclick="javascript: repl_compile();">compile</button>
+          <br class="clear" />
+        </div>
+      </div>
+    </div>
   </div>
 
   <div class="container">
+    <span class="bookmark" id="top"></span>
 
     <p>
       CoffeeScript is a little language that compiles into JavaScript. Think
@@ -77,8 +94,7 @@
 
     <p>
       <b>Disclaimer:</b>
-      CoffeeScript is just for fun and seriously alpha. I'm sure that there are still
+      CoffeeScript is just for fun. Until it reaches 1.0, <i>there are no guarantees
-      plenty of holes in the walls and leaks in the roof. <i>There are no guarantees
       that the syntax won't change between versions.</i> That said,
       it compiles into clean JavaScript (the good parts) that can use existing
       JavaScript libraries seamlessly, and passes through
@@ -89,7 +105,7 @@
 
     <p>
       <b>Latest Version:</b>
-      <a href="http://gemcutter.org/gems/coffee-script">0.3.2</a>
+      <a href="http://github.com/jashkenas/coffee-script/tarball/0.5.0">0.5.0</a>
     </p>
 
     <h2>
@@ -238,29 +254,10 @@ coffee --watch --lint experimental.coffee
 coffee --print app/scripts/*.coffee > concatenation.js</pre>
 
     <h2>
-      <span id="try_coffee" class="bookmark"></span>
+      <span id="language" class="bookmark"></span>
-      Try CoffeeScript
+      Language Reference
     </h2>
 
-    <p>
-      Here's a live version of the CoffeeScript compiler, running within
-      your browser.<br /> Hit the <b>compile</b> button to generate JavaScript
-      on the right-hand side.
-      You can also paste in any of the examples from below.
-    </p>
-
-    <div class="code repl_wrapper">
-      <textarea id="repl_source">reverse: (string) ->
-  string.split('').reverse()
-
-print reverse 'tpircseeffoc'</textarea>
-      <pre id="repl_results"></pre>
-      <button onclick="javascript: repl_compile();">compile</button>
-      <br class="clear" />
-    </div>
-
-    <h2>Language Reference</h2>
-
     <p>
       <i>
         This reference is structured so that it can be read from top to bottom,

index.html

@@ -14,7 +14,7 @@
   <div id="fadeout"></div>
 
   <div id="flybar">
-    <div id="logo"></div>
+    <a id="logo" href="#top"> </a>
     <div class="navigation">
       <div class="button">
         Table of Contents
@@ -22,7 +22,7 @@
       <div class="contents">
         <a href="#overview">Mini Overview</a>
         <a href="#installation">Installation and Usage</a>
-        <a href="#try_coffee">Try CoffeeScript</a>
+        <a href="#language">Language Reference</a>
         <a href="#whitespace">Significant Whitespace</a>
         <a href="#functions">Functions and Invocation</a>
         <a href="#assignment">Assignment</a>
@@ -49,9 +49,26 @@
         <a href="#change_log">Change Log</a>
       </div>
     </div>
+    <div class="navigation try">
+      <div class="button">
+        Try CoffeeScript
+      </div>
+      <div class="contents repl_wrapper">
+        <div class="code">
+          <textarea id="repl_source">reverse: (string) ->
+  string.split('').reverse()
+
+print reverse 'tpircseeffoc'</textarea>
+          <pre id="repl_results"></pre>
+          <button onclick="javascript: repl_compile();">compile</button>
+          <br class="clear" />
+        </div>
+      </div>
+    </div>
   </div>
 
   <div class="container">
+    <span class="bookmark" id="top"></span>
 
     <p>
       CoffeeScript is a little language that compiles into JavaScript. Think
@@ -63,8 +80,7 @@
 
     <p>
       <b>Disclaimer:</b>
-      CoffeeScript is just for fun and seriously alpha. I'm sure that there are still
+      CoffeeScript is just for fun. Until it reaches 1.0, <i>there are no guarantees
-      plenty of holes in the walls and leaks in the roof. <i>There are no guarantees
       that the syntax won't change between versions.</i> That said,
       it compiles into clean JavaScript (the good parts) that can use existing
       JavaScript libraries seamlessly, and passes through
@@ -75,7 +91,7 @@
 
     <p>
       <b>Latest Version:</b>
-      <a href="http://gemcutter.org/gems/coffee-script">0.3.2</a>
+      <a href="http://github.com/jashkenas/coffee-script/tarball/0.5.0">0.5.0</a>
     </p>
 
     <h2>
@@ -335,29 +351,10 @@ coffee --watch --lint experimental.coffee
 coffee --print app/scripts/*.coffee > concatenation.js</pre>
 
     <h2>
-      <span id="try_coffee" class="bookmark"></span>
+      <span id="language" class="bookmark"></span>
-      Try CoffeeScript
+      Language Reference
     </h2>
 
-    <p>
-      Here's a live version of the CoffeeScript compiler, running within
-      your browser.<br /> Hit the <b>compile</b> button to generate JavaScript
-      on the right-hand side.
-      You can also paste in any of the examples from below.
-    </p>
-
-    <div class="code repl_wrapper">
-      <textarea id="repl_source">reverse: (string) ->
-  string.split('').reverse()
-
-print reverse 'tpircseeffoc'</textarea>
-      <pre id="repl_results"></pre>
-      <button onclick="javascript: repl_compile();">compile</button>
-      <br class="clear" />
-    </div>
-
-    <h2>Language Reference</h2>
-
     <p>
       <i>
         This reference is structured so that it can be read from top to bottom,