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

This commit is contained in:
Jeremy Ashkenas 2010-02-21 16:13:09 -05:00
parent fc51f0ef6c
commit 6e15a4da0e
3 changed files with 84 additions and 68 deletions

View File

@ -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;
left: 250px;
padding: 0 10px;
position: relative;
float: left;
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 {
border: 0;
padding: 5px 7px;
margin-left: 5px;
min-height: 250px;
resize: none;
#repl_source, #repl_results {
background: transparent;
}
#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;
}

View File

@ -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
plenty of holes in the walls and leaks in the roof. <i>There are no guarantees
CoffeeScript is just for fun. Until it reaches 1.0, <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>
Try CoffeeScript
<span id="language" class="bookmark"></span>
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,

View File

@ -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
plenty of holes in the walls and leaks in the roof. <i>There are no guarantees
CoffeeScript is just for fun. Until it reaches 1.0, <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>
Try CoffeeScript
<span id="language" class="bookmark"></span>
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,