Clean and create output directory when generating docs.

utils/dartdoc/static/styles.css

 /* Reset */
 body, h1, h2, h3, h4, p, pre, section {
   margin: 0;
   padding: 0;
 }
 
 body {
   font-family: Georgia, serif;
   background: #eee;
   color: #333;
@@ skipping 13 matching lines @@
 
 h3 {
   font: 600 14px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
       sans-serif;
   color: #999;
   margin: 22px 0 0 0;
 }
 
 h4 {
   font: 600 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
       sans-serif;

[Jacob, 2011/11/16 19:59:30]

tweak the CSS so you only have to specify the font face list once so it is
easier to change

[jimhug, 2011/11/17 16:59:44]

+1!!  Of course, what I'd really like is "use a constant in the css to specify
the font list once without having to change your structure at all.  However,
we've got a little time to wait before that is an option <smile>.
On 2011/11/16 19:59:30, Jacob wrote:

[Bob Nystrom, 2011/11/17 20:44:21]

My (unstated) plan was to do this CSS file the dumb/redundant way now and then
later clean it up using Terry's preprocessor once that's available. I didn't
want to rearrange the styles too much to get around the lack of variables now
since I hope to have them soon.

 }
 
 p {
   font-size: 16px;
   line-height: 22px;
   margin: 22px 0;
 }
 
 strong {
   font-weight: 700;
@@ skipping 98 matching lines @@
 }
 
 .anchor-link:hover,
 .show-code:hover {
   color: hsl(40, 100%, 60%);
 }
 
 /* Syntax highlighting. */
 /* Note: these correspond to the constants in classify.dart. */
 pre.source .e { color: hsl(  0, 100%, 70%); } /* Error */
 pre.source .c { color: hsl(220,  20%, 65%); } /* Comment */

[Jacob, 2011/11/16 19:59:30]

drive by comments:
us #rgb or #rrggbb colors instead of hsl
While HSL is cool and can express specifying shades from a single color scheme
more easily when using regular CSS, fewer people understand it than rgb  and it
generates longer CSS (assuming your preprocessor doesn't convert to #rgb

[jimhug, 2011/11/17 16:59:44]

Hmm...  I really liked the hsl colors here when I was hacking on these colors in
the editor code.  I found the ability to tweak the saturation and luminence
really handy.  I'd like to see us continue to use hsl when appropriate - unless
I'm missing something critical.

On 2011/11/16 19:59:30, Jacob wrote:

[Bob Nystrom, 2011/11/17 20:44:21]

I'm familiar with both but I find hsl much easier to reason about. I spend a lot
of time tweaking colors and rgb is almost unusable for that.

My intent here is that eventually Terry's mojo will bake these down to rgb for
me later at some point.

 pre.source .i { color: hsl(220,  20%, 20%); } /* Identifier */
 pre.source .k { color: hsl(220, 100%, 50%); } /* Keyword */
 pre.source .p { color: hsl(220,  20%, 50%); } /* Punctuation */
 pre.source .o { color: hsl(220,  40%, 50%); } /* Operator */
 pre.source .s { color: hsl( 40,  90%, 40%); } /* String */
 pre.source .n { color: hsl( 30,  70%, 50%); } /* Number */
 pre.source .t { color: hsl(180,  40%, 40%); } /* Type Name */
 pre.source .r { color: hsl(200, 100%, 50%); } /* Special Identifier */
 pre.source .a { color: hsl(220, 100%, 45%); } /* Arrow */
 
 /* Interpolated expressions within strings. */
 pre.source .si {
   background: hsl(40, 100%, 90%);
 }
 
 pre.source .s.si { background: hsl(40, 80%, 95%); }
 pre.source .i.si { color: hsl(40, 30%, 30%); }
 pre.source .p.si { color: hsl(40, 60%, 40%); }
 
 /* Enable these to debug the grid: */
 
 /*
 body {
-  background: url('grid-22.png') top left repeat;
+  background: -webkit-linear-gradient(top, #eee 0, #fff 10%, #fff 90%, #eee 100%);

[Jacob, 2011/11/16 19:59:30]

add gradient definitions for moz, ie, and opera as well
there are plenty of convenience tools on the web to help you do this.

[jimhug, 2011/11/17 16:59:44]

Or...  wait a couple of weeks for Terry's tool to do this automatically for you.
 Unfortunately, given the doc team's desire to use this ASAP, I'd agree with
Jacob that you should fix this for now so we don't send the wrong message with
our docs.

On 2011/11/16 19:59:30, Jacob wrote:

[Bob Nystrom, 2011/11/17 20:44:21]

What Jim said! :)
These styles are only for debugging and won't actually be seen by users (unless
they actually look at the CSS and we don't minify it...). Note that these are
all commented out here.

+  background-size: 22px 22px;
+  background-repeat: repeat;
 }
 
 .content {
   background: none;
 }
 
 h1 {
   border-left: solid 4px green;
 }
 
@@ skipping 10 matching lines @@
 }
 
 p {
   border-left: solid 4px purple;
 }
 
 section {
   border-left: solid 4px gray;
 }
 */