Add tour page, separate screencasts page, style update

_includes/aboutlinks.html

@@ -0,0 +1,21 @@
+<nav class="subhead container_12">
+<ul>
+    <li class="item index grid_4">
+    <a href="tour.html">
+      <h1>Tour</h1>
+
+      </a>
+    </li>
+    <li class="item about grid_4">
+      <a href="docs.html">
+        <h1>Documentation</h1>
+
+      </a>
+    </li>
+    <li class="item help grid_4">
+      <a href="screencasts.html">
+        <h1>Screencasts</h1>
+      </a>
+    </li>
+</ul>  
+</nav>

_includes/navheader.html

@@ -1,25 +1,31 @@
 <ul  class="container_12">
-    <li class="item downloads grid_3">
-    <a href="downloads.html">
-      <h1>Downloads</h1>
-      <p class="rd_version">{{ site.rd_version }}</p>
+    <li class="item index grid_4 alpha">
+    <a href="index.html">
+      <h1>RunDeck</h1>
+      <p class="rd_version">Open-Source Job Console</p>
       </a>
     </li>
-    <li class="item docs grid_3">
-      <a href="docs.html">
-        <h1>Documentation</h1>
-        <p class="rd_version">{{ site.rd_version }}</p>
+    <li class="item about grid_2">
+      <a href="about.html">
+        <h1>About</h1>
+        <p>Docs, Screencasts</p>
       </a>
     </li>
-    <li class="item help grid_3">
+    <li class="item help grid_2">
       <a href="help.html">
         <h1>Get Help</h1>
         <p>IRC List Tracker</p>
       </a>
     </li>
-    <li class="item source grid_3">
+    <li class="item downloads grid_2">
+    <a href="downloads.html">
+      <h1>Download</h1>
+      <p class="rd_version">{{ site.rd_version }}</p>
+      </a>
+    </li>
+    <li class="item source grid_2 omega">
       <a href="https://github.com/dtolabs/rundeck">
-        <h1>Source</h1>
+        <h1>Source Code</h1>
         <p>On GitHub</p>
       </a>
     </li>

_includes/rundeckdescription.html

@@ -0,0 +1,16 @@
+
+<article class="container_12 introduction">
+<div class="grid_2">
+<img src="images/rundeck140.png" alt="RunDeck Logo">
+</div>
+<div class="grid_10">
+<h3>
+RunDeck is an open-source <em>job scheduler</em> and <em>command orchestration</em> tool with a <em>web console</em>.
+</h3>
+<p>
+ Dispatch shell commands and scripts across all your physical or virtual nodes  from a web-based or command-line interface. Automate ad-hoc and routine procedures. Use the API and plugins to integrate with other services.  Use your LDAP/AD for authentication, and configure extensive access control.</p>
+
+</div>
+
+<div class="clear"></div>
+</article>

_includes/tour-list.html

@@ -0,0 +1,93 @@
+<ul class="about">
+<li>
+<p>
+    Welcome to <em>RunDeck</em>, a web-accessible console for dispatching commands and scripts to your nodes.
+</p>
+
+<figure>
+<img src="images/screenshots/runpage1.png" alt="Node listing">
+</figure>
+</li>
+
+
+<li>
+<p>Import <em>Node resources</em> from anywhere: Chef, Puppet, Amazon EC2, or your own in-house CMDB. Nodes can be organized using tags or other attributes.</p>
+
+<figure>
+<img src="images/screenshots/nodes1.png" alt="Node listing">
+</figure>
+</li>
+
+
+<li>
+    <p>Run <em>commands and scripts</em> on your nodes. Run them in parallel on multiple nodes.</p>
+    <p>Run commands <i>ad-hoc</i> by just typing in the command and hitting enter.</p>
+
+<figure>
+<img src="images/screenshots/adhoc1.png">
+</figure>
+</li>
+
+<li><p><em>Plugins</em> can add new node sources, formats and remote executors.</p> 
+
+<figure>
+<img src="images/screenshots/addsource1.png" alt="Add Node sources in the GUI">
+</figure>
+</li>
+
+<li><p><em>Live executions</em> can be followed, and interleaved output from multiple nodes can be separated.</p>
+<figure>
+<img src="images/screenshots/nowrunning1.png">
+</figure>
+</li>
+
+<li><p><em>Jobs</em> define commands to run on a schedule or on demand. You can notify people via email or web services via webhook when they finish.</p>
+
+<figure>
+<img src="images/screenshots/jobs1.png">
+<figcaption>Organize Jobs into Groups. Schedule them using cron syntax.</figcaption>
+</figure>
+</li>
+
+<li><p><em>Workflows</em> allow coordinated sequences of commands, scripts or other Jobs.</p>
+
+<figure>
+<img src="images/screenshots/workflow1.png" >
+</figure>
+</li>
+
+
+<li><p>With the <em>workflow editor</em> you can modify workflows in the GUI without touching the command-line or source files. But, you can also use textual source definitions and export/import via GUI, CLI or API.</p>
+
+<figure>
+<img src="images/screenshots/workfloweditor1.png" >
+</figure>
+</li>
+
+
+<li><p>The <em>Web API</em> and command-line tools let you run and manage Jobs, update your node resources, and retrieve execution history. You can connect RunDeck with other tools, scripts and services easily.</p>
+
+<figure>
+<img src="images/screenshots/api1.png" >
+</figure>
+</li>
+
+<li><p>The <em>execution history</em> lets you audit and search all previous executions.</p>
+
+<figure>
+<img src="images/screenshots/history1.png" >
+</figure>
+</li>
+
+<li>
+    <ul>
+        <li><p>Add <em>access control</em> to all aspects of the system.</p></li>
+        <li><p>Integrate with other tools like Chef, Puppet, Jenkins, etc.</p></li>
+        <li><p>Add or create plugins for further features.</p></li>
+        <li><p><a href="screencasts.html">Watch some screencasts</a> to see how it works.</p></li>
+        <li><p><a href="downloads.html">Download and install</a> on Linux, Windows and Mac OS X</p></li>
+        <li><p> <a href="docs/index.html">Read the documentation for more information...</a>
+        </p></li>
+    </ul>
+</li>
+</ul>

_layouts/base.html

@@ -19,12 +19,12 @@
   <link rel="shortcut icon" href="/favicon.ico">
   <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
-  <link rel="stylesheet" href="css/style.css?v=2">
-  <link rel="stylesheet" href="css/nav.css?v=2">
-  <link rel="stylesheet" href="css/960.css?v=2">
-  <link rel="stylesheet" type="text/css" href="css/skin.css" />
+  <link rel="stylesheet" href="{{ site.url }}/css/style.css?v=2">
+  <link rel="stylesheet" href="{{ site.url }}/css/nav.css?v=2">
+  <link rel="stylesheet" href="{{ site.url }}/css/960.css?v=2">
+  <link rel="stylesheet" type="text/css" href="{{ site.url }}/css/skin.css" />
 
-  <script src="js/libs/modernizr-1.6.min.js"></script>
+  <script src="{{ site.url }}/js/libs/modernizr-1.6.min.js"></script>
 </head>
 
 <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
@@ -36,7 +36,7 @@
 <!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
 
   <div id="container">
-    <nav>
+    <nav class="top">
       {% include navheader.html %}
     </nav>
 
@@ -54,15 +54,15 @@
 
 
 
-  <script src="js/plugins.js?v=1"></script>
-  <script src="js/script.js?v=1"></script>
+  <script src="{{ site.url }}/js/plugins.js?v=1"></script>
+  <script src="{{ site.url }}/js/script.js?v=1"></script>
 
   <!--[if lt IE 7 ]>
     <script src="js/libs/dd_belatedpng.js"></script>
     <script> DD_belatedPNG.fix('img, .png_bg'); </script>
   <![endif]-->
 
-  <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
+  <script type="text/javascript" src="{{ site.url }}/js/jquery.jcarousel.min.js"></script>
 
 
     {% include ganalytics.html %}
@@ -76,10 +76,32 @@
       return false;
     }
 
+    function mycarousel_initCallback(carousel)
+    {
+        // Disable autoscrolling if the user clicks the prev or next button.
+        carousel.buttonNext.bind('click', function() {
+            carousel.startAuto(0);
+        });
+
+        carousel.buttonPrev.bind('click', function() {
+            carousel.startAuto(0);
+        });
+
+        // Pause autoscrolling if the user moves with the cursor over the clip.
+        carousel.clip.hover(function() {
+            carousel.stopAuto();
+        }, function() {
+            carousel.startAuto();
+        });
+    };
     $(document).ready(function() {
       $('#movies').jcarousel({
         'scroll':1,
-        'visible':1
+        'visible':1,
+        auto: 8,
+        animation:'slow',
+        wrap: 'last',
+        initCallback: mycarousel_initCallback
       });
     });
 

about.html

@@ -0,0 +1,45 @@
+--- 
+
+layout: base
+title: About
+
+---
+
+	<section id="about" class="page">
+	    <article class="container_12 aboutlink solo">
+	        <div class="grid_12">
+
+                <a href="tour.html">
+                  <h1>Tour</h1>
+                  <p>&rarr; Get an overview of what RunDeck is and how you can use it.</p>
+                  </a>            
+            </div>
+            <div class="clear"></div>
+        </article>
+	    <article class="container_12 aboutlink">
+    	        <div class="grid_12">
+
+                    <a href="screencasts.html">
+                      <h1>Screencasts</h1>
+<p>&rarr; Watch videos about how to use RunDeck.</p>
+                      </a>
+                </div>
+
+                <div class="clear"></div>
+        </article>
+        	    <article class="container_12 aboutlink">
+            	        <div class="grid_12">
+
+                            <a href="docs.html">
+                              <h1>Documentation</h1>
+                                <p>
+                                    &rarr; 
+View the User Guide, API and Reference Docs. Latest version {{ site.rd_version }}
+</p>
+                              </a>
+                        </div>
+
+                        <div class="clear"></div>
+                </article>
+
+    </section>

css/nav.css

@@ -1,5 +1,5 @@
 nav {
-  border-bottom-color: #E0E0E0;
+  border-bottom-color: #000;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   height: 50px;
@@ -38,6 +38,7 @@ nav li a:visited {
 
 nav li a:hover {
   color: white;
+  text-decoration:none;
 }
 
 nav li a {