added home page and improved site styles for IE

doc-src/Gemfile.lock

@@ -8,7 +8,7 @@ GIT
 PATH
   remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
   specs:
-    compass (0.11.alpha.0.9cd80d1)
+    compass (0.11.alpha.1.8f9cce8)
       haml (~> 3.0.23)
 
 GEM

doc-src/assets/javascripts/fixups.js

@@ -8,3 +8,15 @@ $(function(){
     e.attr("title", "Defaults to: " + e.attr("data-default-value"))
   });
 });
+
+;(function()
+{
+	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
+	function Brush(){};
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['sass', 'scss'];
+
+	SyntaxHighlighter.brushes.Sass = Brush;
+
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();

doc-src/assets/javascripts/modernizr-1.6.min.js

@@ -0,0 +1,30 @@
+/*
+ * Modernizr v1.6
+ * http://www.modernizr.com
+ *
+ * Developed by: 
+ * - Faruk Ates  http://farukat.es/
+ * - Paul Irish  http://paulirish.com/
+ *
+ * Copyright (c) 2009-2010
+ * Dual-licensed under the BSD or MIT licenses.
+ * http://www.modernizr.com/license/
+ */
+window.Modernizr=function(i,e,u){function s(a,b){return(""+a).indexOf(b)!==-1}function D(a,b){for(var c in a)if(j[a[c]]!==u&&(!b||b(a[c],E)))return true}function n(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1);c=(a+" "+F.join(c+" ")+c).split(" ");return!!D(c,b)}function S(){f.input=function(a){for(var b=0,c=a.length;b<c;b++)L[a[b]]=!!(a[b]in h);return L}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));f.inputtypes=function(a){for(var b=0,c,k=a.length;b<
+k;b++){h.setAttribute("type",a[b]);if(c=h.type!=="text"){h.value=M;if(/^range$/.test(h.type)&&h.style.WebkitAppearance!==u){l.appendChild(h);c=e.defaultView;c=c.getComputedStyle&&c.getComputedStyle(h,null).WebkitAppearance!=="textfield"&&h.offsetHeight!==0;l.removeChild(h)}else/^(search|tel)$/.test(h.type)||(c=/^(url|email)$/.test(h.type)?h.checkValidity&&h.checkValidity()===false:h.value!=M)}N[a[b]]=!!c}return N}("search tel url email datetime date month week time datetime-local number range color".split(" "))}
+var f={},l=e.documentElement,E=e.createElement("modernizr"),j=E.style,h=e.createElement("input"),M=":)",O=Object.prototype.toString,q=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),F="Webkit Moz O ms Khtml".split(" "),v={svg:"http://www.w3.org/2000/svg"},d={},N={},L={},P=[],w,Q=function(a){var b=document.createElement("style"),c=e.createElement("div");b.textContent=a+"{#modernizr{height:3px}}";(e.head||e.getElementsByTagName("head")[0]).appendChild(b);c.id="modernizr";l.appendChild(c);a=c.offsetHeight===
+3;b.parentNode.removeChild(b);c.parentNode.removeChild(c);return!!a},o=function(){var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return function(b,c){c=c||document.createElement(a[b]||"div");b="on"+b;var k=b in c;if(!k){c.setAttribute||(c=document.createElement("div"));if(c.setAttribute&&c.removeAttribute){c.setAttribute(b,"");k=typeof c[b]=="function";if(typeof c[b]!="undefined")c[b]=u;c.removeAttribute(b)}}return k}}(),G={}.hasOwnProperty,R;R=
+typeof G!=="undefined"&&typeof G.call!=="undefined"?function(a,b){return G.call(a,b)}:function(a,b){return b in a&&typeof a.constructor.prototype[b]==="undefined"};d.flexbox=function(){var a=e.createElement("div"),b=e.createElement("div");(function(k,g,r,x){g+=":";k.style.cssText=(g+q.join(r+";"+g)).slice(0,-g.length)+(x||"")})(a,"display","box","width:42px;padding:0;");b.style.cssText=q.join("box-flex:1;")+"width:10px;";a.appendChild(b);l.appendChild(a);var c=b.offsetWidth===42;a.removeChild(b);
+l.removeChild(a);return c};d.canvas=function(){var a=e.createElement("canvas");return!!(a.getContext&&a.getContext("2d"))};d.canvastext=function(){return!!(f.canvas&&typeof e.createElement("canvas").getContext("2d").fillText=="function")};d.webgl=function(){var a=e.createElement("canvas");try{if(a.getContext("webgl"))return true}catch(b){}try{if(a.getContext("experimental-webgl"))return true}catch(c){}return false};d.touch=function(){return"ontouchstart"in i||Q("@media ("+q.join("touch-enabled),(")+
+"modernizr)")};d.geolocation=function(){return!!navigator.geolocation};d.postmessage=function(){return!!i.postMessage};d.websqldatabase=function(){return!!i.openDatabase};d.indexedDB=function(){for(var a=-1,b=F.length;++a<b;){var c=F[a].toLowerCase();if(i[c+"_indexedDB"]||i[c+"IndexedDB"])return true}return false};d.hashchange=function(){return o("hashchange",i)&&(document.documentMode===u||document.documentMode>7)};d.history=function(){return!!(i.history&&history.pushState)};d.draganddrop=function(){return o("drag")&&
+o("dragstart")&&o("dragenter")&&o("dragover")&&o("dragleave")&&o("dragend")&&o("drop")};d.websockets=function(){return"WebSocket"in i};d.rgba=function(){j.cssText="background-color:rgba(150,255,150,.5)";return s(j.backgroundColor,"rgba")};d.hsla=function(){j.cssText="background-color:hsla(120,40%,100%,.5)";return s(j.backgroundColor,"rgba")||s(j.backgroundColor,"hsla")};d.multiplebgs=function(){j.cssText="background:url(//:),url(//:),red url(//:)";return/(url\s*\(.*?){3}/.test(j.background)};d.backgroundsize=
+function(){return n("backgroundSize")};d.borderimage=function(){return n("borderImage")};d.borderradius=function(){return n("borderRadius","",function(a){return s(a,"orderRadius")})};d.boxshadow=function(){return n("boxShadow")};d.textshadow=function(){return e.createElement("div").style.textShadow===""};d.opacity=function(){var a=q.join("opacity:.5;")+"";j.cssText=a;return s(j.opacity,"0.5")};d.cssanimations=function(){return n("animationName")};d.csscolumns=function(){return n("columnCount")};d.cssgradients=
+function(){var a=("background-image:"+q.join("gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:")+q.join("linear-gradient(left top,#9f9, white);background-image:")).slice(0,-17);j.cssText=a;return s(j.backgroundImage,"gradient")};d.cssreflections=function(){return n("boxReflect")};d.csstransforms=function(){return!!D(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])};d.csstransforms3d=function(){var a=!!D(["perspectiveProperty","WebkitPerspective",
+"MozPerspective","OPerspective","msPerspective"]);if(a)a=Q("@media ("+q.join("transform-3d),(")+"modernizr)");return a};d.csstransitions=function(){return n("transitionProperty")};d.fontface=function(){var a,b=e.head||e.getElementsByTagName("head")[0]||l,c=e.createElement("style"),k=e.implementation||{hasFeature:function(){return false}};c.type="text/css";b.insertBefore(c,b.firstChild);a=c.sheet||c.styleSheet;b=k.hasFeature("CSS2","")?function(g){if(!(a&&g))return false;var r=false;try{a.insertRule(g,
+0);r=!/unknown/i.test(a.cssRules[0].cssText);a.deleteRule(a.cssRules.length-1)}catch(x){}return r}:function(g){if(!(a&&g))return false;a.cssText=g;return a.cssText.length!==0&&!/unknown/i.test(a.cssText)&&a.cssText.replace(/\r+|\n+/g,"").indexOf(g.split(" ")[0])===0};f._fontfaceready=function(g){g(f.fontface)};return b('@font-face { font-family: "font"; src: "font.ttf"; }')};d.video=function(){var a=e.createElement("video"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('video/ogg; codecs="theora"');
+b.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"')||a.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');b.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return b};d.audio=function(){var a=e.createElement("audio"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('audio/ogg; codecs="vorbis"');b.mp3=a.canPlayType("audio/mpeg;");b.wav=a.canPlayType('audio/wav; codecs="1"');b.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")}return b};d.localstorage=function(){try{return"localStorage"in
+i&&i.localStorage!==null}catch(a){return false}};d.sessionstorage=function(){try{return"sessionStorage"in i&&i.sessionStorage!==null}catch(a){return false}};d.webWorkers=function(){return!!i.Worker};d.applicationcache=function(){return!!i.applicationCache};d.svg=function(){return!!e.createElementNS&&!!e.createElementNS(v.svg,"svg").createSVGRect};d.inlinesvg=function(){var a=document.createElement("div");a.innerHTML="<svg/>";return(a.firstChild&&a.firstChild.namespaceURI)==v.svg};d.smil=function(){return!!e.createElementNS&&
+/SVG/.test(O.call(e.createElementNS(v.svg,"animate")))};d.svgclippaths=function(){return!!e.createElementNS&&/SVG/.test(O.call(e.createElementNS(v.svg,"clipPath")))};for(var H in d)if(R(d,H)){w=H.toLowerCase();f[w]=d[H]();P.push((f[w]?"":"no-")+w)}f.input||S();f.crosswindowmessaging=f.postmessage;f.historymanagement=f.history;f.addTest=function(a,b){a=a.toLowerCase();if(!f[a]){b=!!b();l.className+=" "+(b?"":"no-")+a;f[a]=b;return f}};j.cssText="";E=h=null;i.attachEvent&&function(){var a=e.createElement("div");
+a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function c(p){for(var m=-1;++m<r;)p.createElement(g[m])}function k(p,m){for(var I=p.length,t=-1,y,J=[];++t<I;){y=p[t];m=y.media||m;J.push(k(y.imports,m));J.push(y.cssText)}return J.join("")}var g="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video".split("|"),r=g.length,x=RegExp("<(/*)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)",
+"gi"),T=RegExp("\\b(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)\\b(?!.*[;}])","gi"),z=b.createDocumentFragment(),A=b.documentElement,K=A.firstChild,B=b.createElement("style"),C=b.createElement("body");B.media="all";c(b);c(z);a.attachEvent("onbeforeprint",function(){for(var p=-1;++p<r;)for(var m=b.getElementsByTagName(g[p]),I=m.length,t=-1;++t<I;)if(m[t].className.indexOf("iepp_")<0)m[t].className+=" iepp_"+
+g[p];K.insertBefore(B,K.firstChild);B.styleSheet.cssText=k(b.styleSheets,"all").replace(T,".iepp_$1");z.appendChild(b.body);A.appendChild(C);C.innerHTML=z.firstChild.innerHTML.replace(x,"<$1bdo")});a.attachEvent("onafterprint",function(){C.innerHTML="";A.removeChild(C);K.removeChild(B);A.appendChild(z.firstChild)})}(this,document);f._enableHTML5=true;f._version="1.6";l.className=l.className.replace(/\bno-js\b/,"")+" js";l.className+=" "+P.join(" ");return f}(this,this.document);

doc-src/content/help/index.haml

@@ -0,0 +1,67 @@
+---
+title: Compass Help
+crumb: Help
+classnames:
+  - help
+layout: main
+---
+%article
+  %h1#logo Compass
+
+  :markdown
+    Compass is a stylesheet authoring tool that uses the Sass stylesheet
+    language to make your stylesheets smaller and your web site easier to
+    maintain. Compass provides ports of the best of breed css frameworks
+    that you can use without forcing you to use their presentational class
+    names. It’s a new way of thinking about stylesheets that must be seen
+    in action!
+    
+    <object width="700" height="438"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11671458&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11671458&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="438"></embed></object><p><a href="http://vimeo.com/11671458">An introduction to Compass</a> from <a href="http://vimeo.com/ltackett">Lorin Tackett</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
+    
+    ## Installing
+    
+    Compass is a tool that runs on the command line.
+    
+    On any system with ruby installed, open your terminal and type:
+    
+        gem install compass
+    
+    This will install Compass and Sass too. Verify that compass is installed:
+    
+        compass version
+    
+    ## Creating a stand-alone project
+    
+        compass create myproject
+        mate myproject
+        compass watch myproject
+    
+    If you don't have TextMate, substitute the `mate myproject` part with the text
+    editor of your choice. Edit the `*.scss` files in the `sass` directory.
+    These files are yours and you can change them as you see fit, delete them,
+    make new ones, etc. Compass will automatically compile them into css in the
+    `stylesheets` directory whenever they change.
+    
+    ## Rails Support
+    
+        compass init rails /path/to/myrailsproject
+    
+    ## Installing a framework
+    
+    When creating a new project:
+    
+        compass create myproject --using blueprint/basic
+    
+    When installing into an existing project:
+    
+        cd myproject
+        compass install blueprint/semantic
+    
+    With Rails:
+    
+        compass init rails /path/to/myrailsproject --using blueprint/semantic
+    
+    ## Bugs Reports, Discussions, Support
+    
+    Send a note to the [mailing list](http://groups.google.com/group/compass-users)
+    and/or [File a bug](http://github.com/chriseppstein/compass/issues).

doc-src/content/index.haml

@@ -1,65 +1,66 @@
 ---
-title: Compass Documentation
+title: Compass Home
-crumb: Docs
+crumb: Home
 body_id: home
+layout: homepage
 ---
-%article
 %h1#logo Compass
-
+%h2 <strong>Compass</strong> is an open-source <em>CSS Authoring Framework</em>.
-  :markdown
+.overview
-    Compass is a stylesheet authoring tool that uses the Sass stylesheet
+  .compass
-    language to make your stylesheets smaller and your web site easier to
+    %h4 Why designers love Compass.
-    maintain. Compass provides ports of the best of breed css frameworks
+    %ol
-    that you can use without forcing you to use their presentational class
+      %li Get cleaner markup with no presentational classes.
-    names. It’s a new way of thinking about stylesheets that must be seen
+      %li It’s chock full of the web’s best reusable patterns.
-    in action!
+      %li Developing a personal framework is simple. 
-    
+      %li Compass mixins make CSS3 easy.
-    <object width="700" height="438"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11671458&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11671458&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="438"></embed></object><p><a href="http://vimeo.com/11671458">An introduction to Compass</a> from <a href="http://vimeo.com/ltackett">Lorin Tackett</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
+  .sass
-    
+    %h4 Compass uses Sass.
-    ## Installing
+    %p <a href="http://sass-lang.com/">Sass</a> is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS.
-    
+%h3 Brilliant people use Compass, including these <em>wildly talented</em> folks:
-    Compass is a tool that runs on the command line.
+%ul#featured_sites
-    
+  %li
-    On any system with ruby installed, open your terminal and type:
+    %a(href="http://addons.heroku.com/")
-    
+      %img(src="/images/sites/addons.heroku.jpg")
-        gem install compass
+      %span.title Heroku Addons
-    
+      %span.url http://addons.heroku.com
-    This will install Compass and Sass too. Verify that compass is installed:
+  %li
-    
+    %a(href="http://sencha.com/products/touch/")
-        compass version
+      %img(src="/images/sites/sencha.jpg")
-    
+      %span.title Sencha Touch
-    ## Creating a stand-alone project
+      %span.url http://sencha.com/products/touch
-    
+  %li
-        compass create myproject
+    %a(href="http://caring.com/")
-        mate myproject
+      %img(src="/images/sites/caring.jpg")
-        compass watch myproject
+      %span.title Caring.com
-    
+      %span.url http://caring.com
-    If you don't have TextMate, substitute the `mate myproject` part with the text
+  %li
-    editor of your choice. Edit the `*.scss` files in the `sass` directory.
+    %a(href="http://hubblesite.org/")
-    These files are yours and you can change them as you see fit, delete them,
+      %img(src="/images/sites/hubblesite.jpg")
-    make new ones, etc. Compass will automatically compile them into css in the
+      %span.title HubbleSite
-    `stylesheets` directory whenever they change.
+      %span.url http://hubblesite.org
-    
+  %li
-    ## Rails Support
+    %a(href="http://dailymile.com/")
-    
+      %img(src="/images/sites/dailymile.jpg")
-        compass init rails /path/to/myrailsproject
+      %span.title DailyMile
-    
+      %span.url http://dailymile.com
-    ## Installing a framework
+  %li
-    
+    %a(href="http://cofamilies.com/")
-    When creating a new project:
+      %img(src="/images/sites/cofamilies.jpg")
-    
+      %span.title Cofamilies
-        compass create myproject --using blueprint/basic
+      %span.url http://cofamilies.com
-    
+  %li
-    When installing into an existing project:
+    %a(href="http://jumpstartlab.com")
-    
+      %img(src="/images/sites/jumpstartlab.jpg")
-        cd myproject
+      %span.title Jumpstart Lab
-        compass install blueprint/semantic
+      %span.url http://jumpstartlab.com
-    
+  %li
-    With Rails:
+    %a(href="http://green.cals.cornell.edu/")
-    
+      %img(src="/images/sites/cornell.jpg")
-        compass init rails /path/to/myrailsproject --using blueprint/semantic
+      %span.title Corenell University - CALS
-    
+      %span.url http://green.cals.cornell.edu
-    ## Bugs Reports, Discussions, Support
+  %li
-    
+    %a(href="http://busyconf.com/")
-    Send a note to the [mailing list](http://groups.google.com/group/compass-users)
+      %img(src="/images/sites/busyconf.jpg")
-    and/or [File a bug](http://github.com/chriseppstein/compass/issues).
+      %span.title BusyConf
+      %span.url http://busyconf.com

doc-src/content/stylesheets/home.scss

@@ -0,0 +1,17 @@
+@import "compass";
+@import "core/extensions";
+@include reset(global);
+@include reset(html5);
+@import "core/base-classes";
+
+@import "partials/theme";
+@import "partials/layout";
+@import "partials/nav";
+@import "partials/typography";
+@import "partials/main";
+@import "partials/home";
+
+html.dark { @include dark-theme; }
+html.light { @include light-theme; }
+
+@import "core/clearing-classes";

doc-src/content/stylesheets/ie.scss

@@ -0,0 +1,5 @@
+ul#featured_sites li {
+  margin-left: 4px;
+  margin-top: 4px;
+  &:hover{ padding: 6px;
+    img { width: 240px; }}}

doc-src/content/stylesheets/partials/_code.scss

@@ -12,7 +12,6 @@ html .syntaxhighlighter {
   //a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
   }
 
-
 pre {
   margin: 1.5em 0;
   .code-block { padding: .6em; }
@@ -30,6 +29,7 @@ pre {
   padding: 10px 15px;
   @include round-bottom-corners
 }
+
 h3 { @include round-corners; 
   padding: 10px 15px;
   margin: 20px 0 20px;
@@ -82,17 +82,8 @@ h2 + a[rel="view source"]{ margin-top: 12px;}
   .toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
     span.title { display: inline; }
     a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } }
+
+  &::-webkit-scrollbar { width: 12px; height: 12px; }
+  &::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } }
+  &::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }
 }
-
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px; }
-
-::-webkit-scrollbar-button {
-  &:start:decrement, &:end:increment {
-    display: block;
-    width: 0;
-    height: 0; } }
-
-::-webkit-scrollbar-thumb:horizontal {
-    -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }

doc-src/content/stylesheets/partials/_home.scss

@@ -0,0 +1,82 @@
+body#home {
+  width: 810px;
+  #page { padding-top: 31px;}
+  h1#logo {
+    $logo: 'compass-logo.png';
+    background: image-url($logo) no-repeat;
+    text-indent: -9999px;
+    overflow: hidden;
+    width: image-width($logo);
+    height: image-height($logo)/2;
+    padding: 0;
+    margin: 0 auto 18px;
+  }
+  #{headings()}{ @extend .heading-font; }
+  h2 {
+    text-align: center;
+    font-size: 30px;
+    padding-bottom: 15px;
+    margin-bottom: 30px;
+    line-height: 1.1em;
+  }
+  h3 {
+    text-align: center;
+    font-size: 25px;
+    margin-top: 32px;
+  }
+  h4 { font-size: 1.5em; }
+  .overview {
+    @extend .group;
+    .compass { width: 406px; float: left;
+      h4:before { content: "k"; } }
+    .sass { width: 275px; float: right; 
+      h4:before { content: "2"; } }
+    div { 
+      padding: 20px;
+      h4 {
+        padding-bottom: 12px;
+        margin-bottom: 12px;
+        &:before {
+          @extend .pictos;
+          color: #fb292d;
+          display: inline-block;
+          font-size: 1.2em;
+          padding-right: .3em;
+        }
+      }
+    }
+    ol { padding-left: 0; list-style: inside decimal; margin-bottom: 0; }
+    p { margin-bottom: 0; }
+    ol, p { line-height: 1.8em; font-size: .95em;}
+  }
+}
+ul#featured_sites {
+  @extend .group;
+  overflow: visible;
+  margin-top: 30px;
+  list-style: none;
+  padding: 0px;
+  li {
+    float: left;
+    text-shadow: none;
+    overflow: visible;
+    position: relative;
+    &:nth-child(3n+2){ margin: 0 7px; }
+    &:nth-child(1n+4){ margin-top: 7px; }
+    &:nth-child(3n+4){ clear: left; }
+    padding: 6px;
+    a { text-decoration: none; }
+    img { float: left; width: 240px; }
+    span { display: none;}
+    &:hover { z-index: 100;
+      padding: 3px 2px;
+      img { width: 248px; }
+      span { display: block; position: absolute; text-shadow: none;}
+    }
+    .url {
+      bottom: 2px; left: 2px; right: 2px; background: #000; background: rgba(#000, .8); z-index: 102; padding: 2.2em 10px 6px;
+      font-size: .8em; border-top: 1px solid rgba(#fff, .2); }
+    .title { bottom: 1.7em; left: 0; z-index: 103; text-decoration: none; padding: 0 11px; color: #fff; }
+  }
+}
+html.light body#home { h1#logo { background-position: bottom;} }

doc-src/content/stylesheets/partials/_layout.scss

@@ -9,9 +9,12 @@ body {
   @extend .sans-font;
   line-height: 1.45em;
 }
+
 #wrap { @extend .group; padding: 0 20px 20px; }
-#page { @extend .group; padding-bottom: 30px;}
+#page { @extend .group; padding-bottom: 30px; overflow: hidden;}
 footer { @extend .group; clear: both; padding-top: 20px;}
 header { padding: 22px 0 0; position: relative; }
-#page > article { padding-left: $side-nav-width + 45px; }
+#page article { padding-left: $side-nav-width + 45px;}
 aside { float: left; width: $side-nav-width; }
+
+body#home #page article { padding-left: 0;}

doc-src/content/stylesheets/partials/_main.scss

@@ -3,26 +3,27 @@
   padding-top: 40px;
   & > article { padding-top: 10px; font-size: 15px; } }
 
+#theme_pref {
+  a { display: block; font-size: 18px; width: .9em; position: relative; text-decoration: none; @extend .pictos; } }
+
 #docs_panel {
   position: absolute; top: 0; right: 0;
   width: 100%;
   & > div { float: right; margin-left: 10px; }
-  #theme_pref { padding: 3px 12px 6px; }
+  #theme_pref { padding: 3px 12px 6px; a { position: relative; top: 2px;} }
   #version { font-size: .75em; padding: 4px 0 5px; background: none; border: none; position: absolute; left: 0; a { @include hover-link; } }
   #syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} }
   a { text-decoration: none; }
+  & > div { @include round-bottom-corners; }
 }
 
-#theme_pref {
-  a { display: block; text-indent: -9999px; font-size: 18px; width: .9em; position: relative; text-decoration: none; }
-  a:before { text-indent: 0; position: absolute; left: 0; top: 2px; content: 'Q'; @extend .pictos; } }
-
 footer {
-  .legalese { font-size: .75em; float: left;
-    span { display: block; } }
   .links { float: left; font-size: .9em;
-    ul { @include horizontal-list(10px); 
+    img { vertical-align: middle; padding-right: 5px; position: relative; top: -2px;}
-    li:last-child {border: 0; } } }
+    span { position: relative; top: -1px; } 
+    ul { @include horizontal-list(15px); overflow: visible; 
+    li {padding-top: 3px;}
+    li:last-child {border: 0; @include box-shadow(none); } } }
 }
 h2 a.help {
   text-indent: -9999px;

doc-src/content/stylesheets/partials/_nav.scss

@@ -64,9 +64,21 @@ header { @extend .group;
 }
     
 #search-docs {
-  width: 20%; position: absolute; top: 29px; right: 0;
+  position: absolute; top: 29px; right: 0;
-  input { @extend .sans-font; @extend .round-corners-4;
+  &:before {
-    @include box-sizing(border-box);
+    content: "s";
-    width: 100%; max-width: 200px; min-width: 60px; border: 0; margin: 0; padding: 5px 8px;
+    display: block;
+    @extend .pictos;
+    position: absolute;
+    left: 6px;
+    top: 4px;
     font-size: .8em;
-    float: right; } }
+    z-index: 20;
+    @include opacity(.8)
+  }
+  input { @extend .sans-font; @include round-corners;
+    @include box-sizing(border-box);
+    max-width: 200px; min-width: 75px; border: 0; margin: 0; padding: 5px 8px 5px 23px;
+    font-size: .8em;
+    float: right;
+    position: relative; } }

doc-src/content/stylesheets/partials/_theme.scss

@@ -1,66 +1,77 @@
-@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $option-panel-text, $option-panel-border, $option-panel-bg){
+@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg){
   body { background: $page-bg; color: $text;
     a { color: $link; } }
+  
   #page { @extend .horizontal-rule-#{$theme}; }
   header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
-  #main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; }
-  nav a { color: $nav-link; }
   
+  nav a { color: $nav-link; }
   #main-nav a { color: $main-nav;}
-  body.home #main-nav a[rel=home],
+  
-  body.help #main-nav a[rel=help],
+  body#home #main-nav a[rel=home],
-  body.docs #main-nav a[rel=documentation],
+  body#help #main-nav a[rel=help],
-  body.get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
+  body.reference #main-nav a[rel=documentation],
+  body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
+  
+  #search-docs input {
+    @extend .inset-panel-#{$theme}; color: $search; 
+    &::-webkit-input-placeholder { color: $search; } }
+  #{headings()}{ color: $heading;
+    strong { color: $main-nav-selected; }
+    em { color: $code; } }
+  
+  h2 { @extend .horizontal-rule-#{$theme}; }
+  
+  aside { @extend .vertical-rule-#{$theme};
+    h2 a { color: $strong-text; } }
+      
+  footer .links li { @extend .vertical-rule-#{$theme}; }
+  code { @extend .code-block-#{$theme}; color: $code; }
+  
+  #theme_pref { @extend .theme-switch-#{$theme}; }
+  #docs_panel div { background: $option-panel-bg; border: 1px solid $option-panel-border; border-top: 0; }
+  
+  body#home .overview div { @extend .inset-panel-#{$theme};
+    h4 { @extend .horizontal-rule-#{$theme}; } }
+  #featured_sites li { @extend .inset-panel-#{$theme}; }
+  
+}
+@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){
+
+  #page > article {
+    h1, h2 { @extend .horizontal-rule-#{$theme}; }
+    h3 { @extend .heading-panel-#{$theme}; } }
   
   #sub-nav { @extend .horizontal-rule-#{$theme}; }
   #docs-nav { @extend .vertical-rule-#{$theme}; }
   body.core a[rel=core], body.blueprint a[rel=blueprint]{ @extend .inset-panel-#{$theme}; color: $docs-nav-selected; @extend .round-corners-4;}
+  #main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; float: left; }
+  
   #module-nav {
     ul { overflow: visible; }
     li.selected { @extend .selected-marker-#{$theme};
       a { color: $module-nav-selected; } } }
   
-  #search-docs {
+  a[rel=sass], a[rel=scss] { @extend .syntax-switch-#{$theme}; }
-    input::-webkit-input-placeholder { color: $search; }
+  &.sass a[rel=sass], &.scss a[rel=scss] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
-    input { @extend .inset-panel-#{$theme}; color: $search;}}
   
-  aside { @extend .vertical-rule-#{$theme};
+  #version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
-    h2 { @extend .horizontal-rule-#{$theme};
-      a { color: $strong-text; } } }
-  
-  #docs_panel > div {
-    @include round-bottom-corners;
-    background: $option-panel-bg; border: 1px solid $option-panel-border; border-top: 0;
-    
-    a[rel=theme] { @extend .theme-switch-#{$theme}; } }
-  
-  a[rel=sass], a[rel=scss] { @extend .syntax-switch-#{$theme} }
-  
-  #version { color: $option-panel-text; a { color: rgba($nav-link, .7); } }
-  
-  &.sass a[rel=sass], &.scss a[rel=scss] { color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
   .mixin-source { @extend .mixin-panel-#{$theme}; }
-  
-  #page > article {
-    #{headings()}{ color: $heading; }
-    h1, h2 { @extend .horizontal-rule-#{$theme}; }
-    h3 { @extend .heading-panel-#{$theme}; }
   h2 a.help { color: $heading;}
+  
+  
   .source-documentation { @extend .doc-panel-#{$theme}; }
-  }
   
-  footer .links li { @extend .vertical-rule-#{$theme}; }
-  
-  code { @extend .code-block-#{$theme}; color: $code; }
   .arg { color: $code; }
   .arg[data-default-value] { color: rgba($code, .7); }
   a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} }
+  
 }
 
 // Dark theme
 .inset-panel-dark {
   @include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
-  background-color: rgba(#000, .3); }
+  background: darken(#2f2f2f, 4); background-color: rgba(#000, .3); }
   
 .horizontal-rule-dark {  
   @include box-shadow(rgba(#fff, .07) 0 1px 0);
@@ -73,6 +84,7 @@
 .code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
 
 .heading-panel-dark {
+  background: darken(#2f2f2f, 6);
   background: rgba(#000, .2);
   @include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
   a:hover { color: #fff;
@@ -80,6 +92,7 @@
   }
 }
 .doc-panel-dark {
+  background: darken(#2f2f2f, 4);
   background: rgba(#000, .1);
   @include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
 }
@@ -89,8 +102,9 @@
   &:hover { color: #fff; text-shadow: #000 0 1px 0; } }
 
 .theme-switch-dark {
-  color: rgba(#000, .8); text-shadow: rgba(#fff, .08) 0 1px 0;
+  cursor: pointer;
-  &:hover { color: #eee; text-shadow: #000 0 1px 0; } }
+  a { color: #000; color: rgba(#000, .8); text-shadow: rgba(#fff, .08) 0 1px 0; }
+  &:hover a { color: #eee; text-shadow: #000 0 1px 0; } }
 
 .selected-marker-dark {
   a:before{ border-bottom-color: #121212; }
@@ -102,8 +116,8 @@
   td.gutter { background: rgba(#fff, .05); .line { border-right: 2px solid rgba(#fff, .15); color: rgba(#fff, .5); }}
 }
 
-@mixin dark-theme {
+@mixin dark-theme($docs: false) {
-  $page-bg: #343434;
+  $page-bg: #2f2f2f;
 
   $text: #c6c6c6;
   $heading: white;
@@ -111,20 +125,25 @@
 
   $search: #6e6e6e;
   
-  $link: #dadbb1;
+  $code: #dadbb1;
   $nav-link: #bfbfbf;
-  $code: #85AFC9;
+  $link: saturate(lighten(#85AFC9, 4), 19);
 
   $main-nav: $strong-text;
   $main-nav-selected: #fb292d;
   $docs-nav-selected: $strong-text;
   $module-nav-selected: $link;
 
-  $option-panel-text: rgba(#fff, .2);
   $option-panel-border: rgba(#000, .3);
   $option-panel-bg: rgba(#fff, .03);
   
-  @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $option-panel-text, $option-panel-border, $option-panel-bg);
+  @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
+  
+  @if($docs){ 
+    @include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
+    .syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
+    .syntaxhighlighter::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; }
+  }
 }
 
 // Light Theme
@@ -141,19 +160,20 @@
   @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
   border-right: 1px solid #bbb; }
   
-.code-block-light { @extend .code-block; @extend .inset-panel-light;}
+.code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); }
 
 .syntax-switch-light {
   color: rgba(#000, .3); text-shadow: rgba(#fff, .08) 0 1px 0;
   &:hover { color: #000; text-shadow: #fff 0 1px 0; }}
 
 .theme-switch-light {
-  color: rgba(#000, .2); text-shadow: rgba(#fff, 1) 0 1px 0;
+  cursor: pointer;
-  &:hover { color: #000; } }
+  a {color: rgba(#000, .2); text-shadow: rgba(#fff, 1) 0 1px 0;}
+  &:hover a { color: #000; } }
 
 .heading-panel-light {
-  background: #fff;
+  background: rgba(#fff, .5);
-  @include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
+  @include box-shadow(rgba(#000, .13) 0 0 0 1px inset);
   a:hover { color: #000;
     .arg { color: rgba(#000, .6); } }
 }
@@ -165,20 +185,22 @@
 }
 
 .doc-panel-light {
-  background: rgba(#fff, .5);
+  background: rgba(#000, .03);
+  text-shadow: rgba(#fff, .9) 0 1px 1px;
   @include box-shadow(rgba(#000, .15) 0 0 0 1px inset);
 }
 
 .mixin-panel-light {
   @extend .inset-panel-light;
+  background: rgba(#fff, .8);
   td.gutter { background: rgba(#000, .08); .line { border-right: 2px solid rgba(#000, .2); color: rgba(#000, .4); } }
 }
 
-@mixin light-theme {
+@mixin light-theme($docs: false) {
   $page-bg: #ececec; // image-url('bg-light.jpg');
 
   $text: #222 ;
-  $heading: black;
+  $heading: #444;
   $strong-text: #000;
 
   $search: #666;
@@ -192,24 +214,14 @@
   $docs-nav-selected: $strong-text;
   $module-nav-selected: $link;
 
-  $option-panel-text: rgba(#000, .3);
   $option-panel-border: rgba(#000, .2);
   $option-panel-bg: #fff;
 
-  @include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $option-panel-text, $option-panel-border, $option-panel-bg);
+  @include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
-}
   
-html.dark {
+  @if($docs){
-  @include dark-theme;
+    @include docs-theme(light, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
-  ::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
+    .syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; background: rgba(#ddd, .8); }
-  ::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; }
+    .syntaxhighlighter::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#000, 0) 40%, rgba(#000, .2))) #fff; -webkit-box-shadow: rgba(black, 0.2) 0px 0 0 1px inset; }
   }
-html.light {
-  @include light-theme;
-  ::-webkit-scrollbar-track-piece {
-    -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset;
-    background: rgba(#ddd, .8); }
-  ::-webkit-scrollbar-thumb:horizontal {
-    background: -webkit(linear-gradient(rgba(#000, 0) 40%, rgba(#000, .2))) #fff;
-    -webkit-box-shadow: rgba(black, 0.2) 0px 0 0 1px inset; }
 }

doc-src/content/stylesheets/partials/_typography.scss

@@ -7,13 +7,14 @@
 
 
 .sans-font { font-family: 'Lucida Grande', Arial, sans-serif; }
-.heading-font { font-family: 'museosans-web', 'serif'; }
+.heading-font { font-family: 'Museo Sans', 'serif'; }
 .pictos { font-family: pictos, pictos-web; font-weight: normal; font-style: normal;}
 .fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;}
 
-#page > article {
+#page {
   line-height: 1.45em;
   ol { list-style: outside decimal; padding-left: 2.5em; }
+  ol ol { list-style: outside lower-alpha; padding-left: 2.5em; }
   ul, ol, dl { margin-bottom: 1.5em;}
   p { margin-bottom: 1.2em;}
   #{headings(1,2)}{ @extend .heading-font; line-height: 1.2em; }
@@ -24,3 +25,7 @@
   ul { list-style: inside disc; }
   dt { font-weight: bold; }
 }
+#page aside {
+  ul { list-style: none; margin-bottom: 1em;}
+  h2 { line-height: 1.4em; margin-top: 0;}
+}

doc-src/content/stylesheets/screen.scss

@@ -0,0 +1,24 @@
+@import "compass";
+@import "core/extensions";
+
+@include global-reset;
+@include reset-html5;
+
+@import "core/base-classes";
+
+@import "partials/theme";
+@import "partials/layout";
+@import "partials/typography";
+
+@import "partials/nav";
+@import "partials/sidebar";
+@import "partials/main";
+@import "partials/code";
+
+@import "syntax/syntax-theme";
+
+@import "core/clearing-classes";
+
+
+html.dark { @include dark-theme(true); }
+html.light { @include light-theme(true); }

doc-src/layouts/basic.haml

@@ -7,18 +7,15 @@
     %link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
     %title
       #{@item[:title]} | Compass Documentation
-    <!--[if !IE 6]><!-->
     %link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
-    %script(src="/javascripts/jquery-1.3.2.min.js")
+    %script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript")
-    %script(src="/javascripts/jquery.cookie.js")
+    %script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript")
-    %script(src="/javascripts/site.js")
+    %script(src="/javascripts/jquery.cookie.js" type="text/javascript")
+    %script(src="/javascripts/site.js" type="text/javascript")
     %script(src="/javascripts/shCore.js" type="text/javascript" deferred)
-    %script(src="/javascripts/fixups.js" deferred)
+    %script(src="/javascripts/fixups.js" type="text/javascript" deferred)
-    <!--<![endif]-->
+    /[if lte IE 8]
-    /[if gte IE 7]
       %link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}
-    /[if IE 6]
-      %link{:charset => "utf-8", :href => "http://universal-ie6-css.googlecode.com/files/ie6.0.3.css", :rel => "stylesheet", :type => "text/css"}
     - if @item[:content_for_additional_css]
       %style(type="text/css")= @item[:content_for_additional_css]
   %body{body_attributes(@item)}= yield

doc-src/layouts/homepage.haml

@@ -1,15 +1,28 @@
-!!! Strict
+!!!5
-%html
+- # This template is just the stuff until the body tag.
+%html.no-js{:dir => "ltr", :lang => "en"}
   %head
-    %title
+    %meta{:charset => "utf-8"}/
-      #{@item[:title]} - Compass
+    %meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
-    %meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
-    - if @item[:meta_description]
-      %meta{:name => "description", :content => @item[:meta_description]}
     %link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
-    %link{ :href => "/stylesheets/legacy/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
+    %title
-    %script{:src => "/javascripts/jquery-1.3.2.min.js", :type => "text/javascript"}
+      #{@item[:title]} | Compass Documentation
+    %link{:charset => "utf-8", :href => "/stylesheets/home.css", :rel => "stylesheet", :type => "text/css"}
+    %script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript")
+    %script(src="/javascripts/jquery.cookie.js" type="text/javascript")
+    %script(src="/javascripts/site.js" type="text/javascript")
+    %script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript")
+    /[if lte IE 8]
+      %link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}
+    - if @item[:content_for_additional_css]
+      %style(type="text/css")= @item[:content_for_additional_css]
   %body{body_attributes(@item)}
+    #wrap
+      = render "partials/main-navigation"
+      #page
+        #docs_panel
+          #theme_pref
+            %a{:href => "#", :rel => "theme", :title => "switch theme" } Q
         = yield
-    %script(src="/javascripts/fixups.js" deferred)
+      %footer(role="contentinfo")= render "partials/footer"
     = render "partials/analytics"

doc-src/layouts/main.haml

@@ -1,19 +1,6 @@
 - render "basic" do
   #wrap
-    %header#banner{:role => "banner"}
+    = render "partials/main-navigation"
-      %nav#main-nav{:role => "navigation"}
-        %ul
-          %li.vcard
-            %a.fn.org.url.uid{:href => "/", :rel => "home"} Compass
-          %li
-            %a{:href => "/reference/compass/", :rel => "documentation"} Docs
-          %li
-            %a{:href => "/help", :rel=> "help"} Get Help
-          %li
-            %a{:href => "/get-involved", :rel=> "get-involved"} Get Involved
-              
-      %form#search-docs{:action => "/search/", :method => "GET"}
-        %input#search{:name => "q", :type => "text", :value => "", :placeholder => "Search the docs"}
     #sub-nav
       %nav#docs-nav{:role => "navigation"}
         %a{:href => "/reference/blueprint/", :rel => "blueprint"} Blueprint
@@ -23,7 +10,7 @@
     #page
       #docs_panel
         #theme_pref
-          %a{:href => "#", :rel => "theme", :title => "switch theme" } switch theme
+          %a{:href => "#", :rel => "theme", :title => "switch theme" } Q
         #syntax_pref
           %a{:href => "#", :rel => "scss" } scss
           %a{:href => "#", :rel => "sass" } sass

doc-src/layouts/partials/footer.haml

@@ -1,18 +1,11 @@
-.legalese
-  %p
-    <a rel="license" href="/copyright/" id="cc-logo"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/us/88x31.png" /></a>
-    %span by Christopher M. Eppstein.
-
 .links
   %ul
     %li
-      %a(href="http://compass-style.org/" rel="home") Compass Homepage
+      <a rel="license" href="/copyright/" id="cc-logo"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/us/88x31.png" /></a>
+      %span by Christopher M. Eppstein.
     %li
       Compass is Charityware - 
       %a(href="http://umdf.org/compass") Donate Now!
-    %li
-      Compass is Open Source -
-      %a(href="http://github.com/chriseppstein/compass") Contribute
 
 - if @item[:content_for_footer]
   %hr

doc-src/layouts/partials/main-navigation.haml

@@ -0,0 +1,14 @@
+%header#banner{:role => "banner"}
+  %nav#main-nav{:role => "navigation"}
+    %ul
+      %li.vcard
+        %a.fn.org.url.uid{:href => "/", :rel => "home"} Home
+      %li
+        %a{:href => "/reference/compass/", :rel => "documentation"} Docs
+      %li
+        %a{:href => "/help", :rel=> "help"} Get Help
+      %li
+        %a{:href => "/get-involved", :rel=> "get-involved"} Get Involved
+          
+  %form#search-docs{:action => "/search/", :method => "GET"}
+    %input#search{:name => "q", :type => "text", :value => "", :placeholder => "Search the docs"}

doc-src/lib/default.rb

@@ -7,7 +7,7 @@ include Nanoc3::Helpers::Rendering
 include Nanoc3::Helpers::Breadcrumbs
 
 def body_class(item)
-  classes = ["docs"]
+  classes = [""]
   classes += item[:classnames] || []
   classes << "demo" if item.identifier =~ /^\/examples/
   classes.join(" ")