Added a knowledge base.

_includes/styles/style.css

@@ -88,10 +88,11 @@ body.post #header {
 }
 
 #header .navigation {
-  width: 900px;
+  width: 960px;
   margin: 0 auto;
   overflow: auto;
   font-size: 11px;
+  position: relative;
   text-transform: uppercase;
   font-weight: bold;
   line-height: 30px;
@@ -154,11 +155,15 @@ body.post #header {
 #header .user-status {
   position: absolute;
   top: 0px;
-  right: 50px;
+  right: 0px;
   height: 60px;
   line-height: 30px;
   color: #888;
   font-size: 16px;
+  padding: 0;
+  margin: 0;
+  text-transform: none;
+  font-weight: normal;
 }
 
 #header .user-status img {
@@ -188,7 +193,6 @@ body.post #header {
 }
 
 #main {
-  /*margin-top: 60px;*/
   padding-top: 60px;
   overflow:auto;
   padding-bottom: 60px; /* must be same height as the footer */
@@ -207,21 +211,30 @@ body.post #header {
 vertical margins (top and bottom) to add spacing, else those margins get added to total height 
 and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
 
-#container { min-height: 100%; }
+#container { 
+  min-height: 100%;
+  margin: 0 auto;
+}
 
 #footer {
   position: relative;
   margin-top: -60px; /* negative value of footer height */
   height: 60px;
   font-size: 16px;
-  padding-left: 30px;
+
+
   line-height: 60px;
   background: #e0e7eb;
   border-top: 1px solid #c3ccd0;
   /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1);*/
   clear:both;
 }
 
+#footer .footer-content {
+  width: 960px;
+  margin: 0 auto;
+}
+
 /*Opera Fix*/
 body:before {/* thanks to Maleika (Kohoutec)*/
   content:"";
@@ -299,7 +312,6 @@ body.start {
 #start .owner {
   font-family: "Menlo", monospace;
   font-size: 17px;
-  margin-left: 30px;
   padding-top: 30px;
   padding-bottom: 0px;
   padding-left: 30px;
@@ -310,11 +322,13 @@ body.start {
 
 #start {
   padding-bottom: 20px;
+  width: 960px;
+  margin: 0 auto;
 }
 
 .repos {
   overflow: auto;
-  padding: 10px;
+  padding: 10px 0;
 }
 
 .repos > a {
@@ -338,10 +352,10 @@ body.start {
   padding: 10px;
   font-size: 16px;
   position: relative;
-  margin-left: 15px;
+  margin-right: 15px;
   margin-top: 15px;
-  width: 180px;
-  height: 180px;
+  width: 177px;
+  height: 177px;
   color: #444;
   display: block;
   float: left;
@@ -508,9 +522,12 @@ ul.site li a {
 ---------------------------------------------*/
 
 #posts {
-  padding: 30px;
+  padding: 30px 0;
+  width: 960px;
+  margin: 0 auto;
 }
 
+
 #publish_status {
   position: relative;
   height: 50px;
@@ -638,7 +655,7 @@ ul.site li a {
 }
 
 .document-menu-content {
-  width: 900px;
+  width: 960px;
   margin: 0 auto;
   color: #E7EEF2;
   font-weight: bold;
@@ -856,7 +873,7 @@ ul.site li a {
 
 .document .metadata-content {
   padding: 20px 0px;
-  width: 900px;
+  width: 960px;
   margin: 0 auto;
 }
 
@@ -898,7 +915,7 @@ ul.site li a {
   overflow:hidden;
 }
 
-.document .surface.preview img {
+.post-content img {
   max-width: 100%;
 }
 
@@ -918,30 +935,105 @@ ul.site li a {
 
 .document .content-preview, .document .content {
   padding: 20px 0px;
-  width: 900px;
+  width: 960px;
   margin: 0 auto;
 }
 
 .document .document-preview {
 
 }
 
-.document .post-content{
+.post-content {
   background: #fff;
   padding: 100px;
   font-family: 'Palatino Linotype', 'Adobe Garamond Pro', "Times New Roman", serif;
   font-weight: 400;
   font-size: 17px;
   line-height: 1.3em;
+  border: 1px solid #C3CCD0;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.post-content .title {
+  font-size: 50px;
+  font-weight: bold;
+  text-align: center;
+  padding-bottom: 60px;
 }
 
 .content-preview {
   font-size: 18px;
 }
 
+/* ------------------------------------------
+  About
+---------------------------------------------*/
+
+.about {
+  width: 960px;
+  margin: 30px auto;
+  background: white;
+}
+
+/* ------------------------------------------
+  Logbook
+---------------------------------------------*/
+
+.help {
+  width: 960px;
+  margin: 30px auto;
+}
+
+.help .articles {
+  overflow: auto;
+}
+
+.help .articles .article {
+
+  font-family: "Menlo", monospace;
+  overflow: hidden;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1);
+
+  /*background: rgba(255,255,255, 0.6);*/
+  background: #E0E7EB;
+
+  -moz-transition: background 200ms linear;
+  -o-transition: background 200ms linear;
+  -webkit-transition: background 200ms linear;
+  transition: background 200ms linear;
+
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+
+  text-align: center;
+  padding: 10px;
+  font-size: 16px;
+  position: relative;
+  margin-right: 15px;
+  margin-top: 15px;
+  width: 177px;
+  height: 177px;
+  color: #444;
+  display: block;
+  float: left;
+  border: 1px solid #c3ccd0;
+}
+
+.help .articles .article:hover {
+  background: #f0f5f7;
+}
+
+
+.help-article {
+  width: 960px;
+  margin: 30px auto;
+}
+
 /* ------------------------------------------
   Notifications
 ---------------------------------------------*/
+
 #notification .notification{
   text-align: center;
   width: 300px;

_includes/templates/header._

@@ -1,4 +1,4 @@
-<a href='{{site.baseurl}}' class='title'><span>Poole.</span></a>
+<!-- <a href='{{site.baseurl}}' class='title'><span>Poole.</span></a> -->
 
 <div class="navigation">
   <!--Github account and links-->
@@ -30,10 +30,12 @@
       </div>
       <% } %>
   <% } %>
+
+  <% if (window.authenticated) { %>
+    <div class='user-status'>
+      <img width="30" src="<%= $.cookie("avatar") %>"/>
+      <%= app.username %> <a class="logout" href="#">Logout</a>
+    </div>  
+  <% } %>
 </div>
-<% if (window.authenticated) { %>
-  <div class='user-status'>
-    <img width="30" src="<%= $.cookie("avatar") %>"/>
-    <%= app.username %> <a class="logout" href="#">Logout</a>
-  </div>  
-<% } %>
+

_includes/views/application.js

@@ -59,9 +59,16 @@ views.Application = Backbone.View.extend({
     $(view.el).appendTo(this.$('#main'));
   },
 
+
+
   // Main Views
   // ----------
 
+  static: function() {
+    this.header.render();
+    // No-op ;-)
+  },
+
   posts: function (user, repo, branch, path) {
     loadSite(user, repo, branch, path, _.bind(function (err, data) {
       if (err) return this.notify('error', 'Seems like the chosen repository is not a valid Jekyll site.');

_includes/views/header.js

@@ -9,7 +9,7 @@ views.Header = Backbone.View.extend({
 
   _logout: function() {
     logout();
-    window.location.href = '';
+    window.location.href = '{{site.root_dir}}';
   },
 
   initialize: function(options) {

_layouts/about.html

@@ -0,0 +1,8 @@
+---
+layout: default
+---
+
+<div class="about post-content">
+  <div class="title">{{page.title}}</div>
+  {{ content }}
+</div>

_layouts/article.html

@@ -0,0 +1,12 @@
+---
+layout: default
+---
+
+<div class="help-article">
+  <h1>{{ page.title }}</h1>
+  <p class="meta"> {{ page.date | date: "%B %d, %Y" }} </p>
+
+  <div id="post">
+  {{ content }}
+  </div>
+</div>

_layouts/default.html

@@ -0,0 +1,28 @@
+---
+---
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='UTF-8'/>
+  <title>Poole &middot; Serving Jekyll faithfully</title>
+  <link rel='shortcut icon' href='{{site.root_dir}}images/favicon.ico' type='image/x-icon' />
+  <link rel='stylesheet' href='{{site.root_dir}}app.css'>
+  {% include templates.html %}
+  <script src='{{site.root_dir}}boot.js'></script>
+</head>
+<body>
+  <div id='container'>
+    <div id='main'>{{content}}</div>
+  </div>
+
+  <div id='footer'>
+    <div class="footer-content">
+      <a href="{{site.root_dir}}help.html">Help</a> | <a href="{{site.root_dir}}about.html">About</a>
+
+      <div class="fr">
+        Made by <a href="http://developmentseed.org">Development Seed</a>, Sourcecode on <a href="http://github.com/developmentseed/poole">GitHub</a>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

_layouts/help.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+<div class="help post-content">
+  <div class="title">{{page.title}}</div>
+  <p class="meta"> {{ page.date | date: "%B %d, %Y" }} </p>
+
+  {{ content }}
+</div>

_layouts/post.html

@@ -0,0 +1,18 @@
+---
+layout: default
+---
+<h1>{{ page.title }}</h1>
+<p class="meta"> {{ page.date | date: "%B %d, %Y" }} </p>
+
+<div id="post">
+{{ content }}
+</div>
+
+<div id="related">
+  <h3>Related Posts</h3>
+  <ul class="posts">
+    {% for post in site.related_posts limit:3 %}
+    <li><span>{{ post.date | date_to_string }} &raquo;</span> <a href="{{ post.url }}">{{ post.title }}</a></li>
+    {% endfor %}
+  </ul>
+</div>