improved docs styling

doc-src/Gemfile.lock

@@ -8,7 +8,7 @@ GIT
 PATH
   remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
   specs:
-    compass (0.11.alpha.0.df908d3)
+    compass (0.11.alpha.0.78bcd44)
       haml (~> 3.0.23)
 
 GEM

doc-src/assets/javascripts/fixups.js

@@ -6,5 +6,5 @@ $(function(){
   $('span.arg[data-default-value]').each(function(i,e){
     e = $(e);
     e.attr("title", "Defaults to: " + e.attr("data-default-value"))
-  })
+  });
-});
+});

doc-src/assets/javascripts/jquery.cookie.js

@@ -0,0 +1,96 @@
+/**
+ * Cookie plugin
+ *
+ * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ */
+
+/**
+ * Create a cookie with the given name and value and other optional parameters.
+ *
+ * @example $.cookie('the_cookie', 'the_value');
+ * @desc Set the value of a cookie.
+ * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
+ * @desc Create a cookie with all available options.
+ * @example $.cookie('the_cookie', 'the_value');
+ * @desc Create a session cookie.
+ * @example $.cookie('the_cookie', null);
+ * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
+ *       used when the cookie was set.
+ *
+ * @param String name The name of the cookie.
+ * @param String value The value of the cookie.
+ * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
+ * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
+ *                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
+ *                             If set to null or omitted, the cookie will be a session cookie and will not be retained
+ *                             when the the browser exits.
+ * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
+ * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
+ * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
+ *                        require a secure protocol (like HTTPS).
+ * @type undefined
+ *
+ * @name $.cookie
+ * @cat Plugins/Cookie
+ * @author Klaus Hartl/klaus.hartl@stilbuero.de
+ */
+
+/**
+ * Get the value of a cookie with the given name.
+ *
+ * @example $.cookie('the_cookie');
+ * @desc Get the value of a cookie.
+ *
+ * @param String name The name of the cookie.
+ * @return The value of the cookie.
+ * @type String
+ *
+ * @name $.cookie
+ * @cat Plugins/Cookie
+ * @author Klaus Hartl/klaus.hartl@stilbuero.de
+ */
+jQuery.cookie = function(name, value, options) {
+    if (typeof value != 'undefined') { // name and value given, set cookie
+        options = options || {};
+        if (value === null) {
+            value = '';
+            options.expires = -1;
+        }
+        var expires = '';
+        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
+            var date;
+            if (typeof options.expires == 'number') {
+                date = new Date();
+                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
+            } else {
+                date = options.expires;
+            }
+            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
+        }
+        // CAUTION: Needed to parenthesize options.path and options.domain
+        // in the following expressions, otherwise they evaluate to undefined
+        // in the packed version for some reason...
+        var path = options.path ? '; path=' + (options.path) : '';
+        var domain = options.domain ? '; domain=' + (options.domain) : '';
+        var secure = options.secure ? '; secure' : '';
+        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
+    } else { // only name given, get cookie
+        var cookieValue = null;
+        if (document.cookie && document.cookie != '') {
+            var cookies = document.cookie.split(';');
+            for (var i = 0; i < cookies.length; i++) {
+                var cookie = jQuery.trim(cookies[i]);
+                // Does this cookie string begin with the name we want?
+                if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                    break;
+                }
+            }
+        }
+        return cookieValue;
+    }
+};

doc-src/assets/javascripts/site.js

@@ -0,0 +1,75 @@
+function changeTheme(theme) {
+  el = $('html');
+
+  if (!theme) theme = el.hasClass('dark') ? 'light': 'dark';
+  else if (el.hasClass(theme)) return;
+
+  el.removeClass('light');
+  el.removeClass('dark');
+  el.addClass(theme);
+  setThemePreference(theme);
+}
+
+function changeSyntax(syntax) {
+  el = $('body');
+
+  if (!syntax) {
+    syntax = el.hasClass('scss') ? 'sass': 'scss';
+  } else if (el.hasClass(syntax)) {
+    return;
+  }
+  el.removeClass('scss');
+  el.removeClass('sass');
+  el.addClass(syntax);
+  setSyntaxPreference(syntax);
+}
+
+function setThemePreference(theme) {
+  $.cookie("compass-theme", null);
+  $.cookie("compass-theme", theme, {
+    expires: 60 * 60 * 24 * 365 * 10,
+    path: '/'
+  });
+}
+function getThemePreference(defaultTheme) {
+  theme = $.cookie("compass-theme");
+  if (theme) {
+    changeTheme(theme);
+  } else {
+    changeTheme(defaultTheme);
+  }
+}
+function setSyntaxPreference(syntax) {
+  $.cookie("compass-syntax", null);
+  $.cookie("compass-syntax", syntax, {
+    expires: 60 * 60 * 24 * 365 * 10,
+    path: '/'
+  });
+}
+function getSyntaxPreference(defaultSyntax) {
+  syntax = $.cookie("compass-syntax");
+  if (syntax){
+    changeSyntax(syntax);
+  } else {
+    changeSyntax(defaultSyntax);
+  }
+}
+
+
+$('document').ready(function(){
+  $('#page').click(function(event){
+    var target = $(event.target);
+    if (target.parent().is('#syntax_pref')) {
+      changeSyntax(target.attr("rel"));
+      event.preventDefault();
+    } else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) {
+      changeTheme();
+      event.preventDefault();
+    } else if (target.attr("rel") == "view source") {
+      $(target.attr("href")).toggle();
+      event.preventDefault();
+    }
+  });
+  getThemePreference('dark');
+  getSyntaxPreference('scss');
+})

doc-src/content/reference/compass/css3.haml

@@ -11,17 +11,13 @@ classnames:
 meta_description: Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes. 
 layout: core
 ---
-%h1 Compass CSS3 Module
+- render 'reference' do
-%p
+  %p
-  The CSS3 module provides cross-browser mixins for CSS properties
+    The CSS3 module provides cross-browser mixins for CSS properties
-  introduced in CSS3, for example
+    introduced in CSS3, for example
-  <a href="/reference/compass/css3/border_radius/"><code>border-radius</code></a>
+    <a href="/reference/compass/css3/border_radius/"><code>border-radius</code></a>
-  and <a href="/reference/compass/css3/text-shadow/"><code>text-shadow</code></a>.
+    and <a href="/reference/compass/css3/text-shadow/"><code>text-shadow</code></a>.
-%p
+  %p
-  What rendering engines you support for the experimental css properties is governed by
+    What rendering engines you support for the experimental css properties is governed by
-  the configurable variables defined in <a href="/reference/compass/support/">the browser
+    the configurable variables defined in <a href="/reference/compass/support/">the browser
-  support module</a>.
+    support module</a>.
-%h3 Importing the Entire CSS3 Library
-%p
-  To import the CSS3 Module add the following to your stylesheets:<br>
-  <code>@import "compass/css3"</code><br>

doc-src/content/stylesheets/core/_clearing-classes.sass

@@ -8,4 +8,7 @@
   +border-bottom-right-radius(0)
 
 .hide
-  display: none
+  display: none
+
+#theme_pref
+  @extend .hide

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

@@ -0,0 +1,45 @@
+body.sass .mixin-source .scss, body.scss .mixin-source .sass { @extend .hide;}
+.mixin-source { display: none; }
+
+.syntaxhighlighter { padding: 5px 0; @include border-radius;
+  .toolbar { position: absolute; right: 0; }
+  .code-block { background: none; @include box-shadow(none)}
+  }
+
+pre {
+  margin: 1.5em 0;
+  .code-block { padding: .6em; }
+}
+
+.code-block { @extend .round-corners-4; @extend .fixed-font;
+  display: inline-block;
+  font-size: .95em;
+  padding: 0 .4em;
+  line-height: 1.5em;
+}
+
+.source-documentation {
+  @extend .round-corners-4; 
+  padding: 10px 15px;
+  background: rgba(#000, .1);
+  @include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
+  @include round-bottom-corners
+}
+h3 { @include round-corners; 
+  padding: 10px 15px;
+  margin: 20px 0 2px;
+  position: relative;
+  a { text-decoration: none;}
+}
+h3.mixin { @include round-top-corners;}
+.arg {
+  display: inline-block;
+  padding: 0 2px;
+  &[data-default-value] {
+    font-style: italic;
+    &:before{ content: "[" ; }
+    &:after{ content: "]" ; } }
+  }
+
+a[rel="view source"]{ float: right; padding: 9px 15px; margin-top: 20px; position: relative; z-index: 2; font-size: .8em; @include hover-link;}
+h2 + a[rel="view source"]{ margin-top: 12px;}

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

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

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

@@ -1,10 +1,42 @@
 #page {
   position: relative;
-  padding-top: 25px;
+  padding-top: 40px;
-  & > article { padding-top: 14px; font-size: 15px;
+  & > article { padding-top: 10px; font-size: 15px; } }
-    h1, h2 { padding-bottom: 6px; margin-bottom: 9px; }}}
 
-#version { @include round-bottom-corners;
+#docs_panel {
-  font-size: .7em;
   position: absolute; top: 0; right: 0;
-  padding: 2px 8px 4px; }
+  width: 100%;
+  & > div { float: right; margin-left: 10px; }
+  #theme_pref { padding: 3px 12px 6px; }
+  #version { font-size: .75em; padding: 4px 0 5px; background: none; border: none; position: absolute; left: 0;}
+  #syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} }
+}
+
+#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); 
+    li:last-child {border: 0; } } }
+}
+h2 a.help {
+  text-indent: -9999px;
+  display: inline-block;
+  position: relative;
+  text-decoration: none;
+  &:before {
+    @extend .pictos;
+    content: "?";
+    text-indent: 0;
+    position: absolute;
+    top: 2px;
+    left: 0;
+    color: #202020;
+    font-size: .9em;
+    text-shadow: #444 0 1px 0;
+  }
+}

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

@@ -3,7 +3,7 @@ nav a { @include hover-link; }
 header { @extend .group;
   font-size: 1.25em; font-family: "Museo Sans"; border-width: 4px;}
 #main-nav {
-  width: 76%;
+  width: 79%;
   display: inline-block;
   padding-bottom: 10px;
   ul {
@@ -24,13 +24,12 @@ header { @extend .group;
     padding: 2px 10px;
     display: inline-block; }}
     
-#docs-nav { padding-right: 15px; }
+#docs-nav { padding-right: 20px; }
     
 #module-nav {
   display: inline-block;
-  padding-left: 8px;
+  padding-left: 10px;
-  ul {
+  ul { @include horizontal-list(10px); } }
-    @include horizontal-list(10px);}}
     
 #search-docs {
   width: 20%; position: absolute; top: 29px; right: 0;

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

@@ -1,7 +1,7 @@
 aside {
-  padding-top: 20px;
+  padding-top: 16px;
   text-align: right;
-  padding-right: 17px;
+  padding-right: 22px;
   h2 {
     text-align: left;
     font-size: 1.3em;

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

@@ -1,7 +1,7 @@
-@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border){
+@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, $version-text, $version-border){
-  body { background: $page-bg; color: $text;
+  body {background: $page-bg; color: $text;
     a { color: $link; } }
-  #wrap { @extend .horizontal-rule-#{$theme}; }
+  #page { @extend .horizontal-rule-#{$theme}; }
   header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
   nav a { color: $nav-link; }
   
@@ -18,51 +18,63 @@
   
   #search-docs {
     input::-webkit-input-placeholder { color: $search; }
-    input { @extend .inset-panel-#{$theme}; background-color: rgba($search-bg, .2); color: $search;}}
+    input { @extend .inset-panel-#{$theme}; color: $search;}}
   
   aside { @extend .vertical-rule-#{$theme};
     h2 { @extend .horizontal-rule-#{$theme};
-      a { color: $text; } } }
+      a { color: $strong-text; } } }
   
-  #version { background: rgba($version-text, .03); color: rgba($version-text, .4); border: 1px solid rgba($version-border, .3); border-top: 0;
+  #docs_panel > div { background: rgba($version-text, .03); color: rgba($version-text, .4); border: 1px solid rgba($version-border, .3); border-top: 0; @include round-bottom-corners;
-    a { @include hover-link; color: rgba($version-text, .7); } }
+    a { text-decoration: none; color: rgba($version-text, .7); }
+    a[rel=theme] { color: rgba($version-border, .8); text-shadow: rgba($version-text, .08) 0 1px 0; &:hover { text-decoration: none; color: $strong-text; text-shadow: $version-border 0 1px 0; } } 
+    a[rel=sass], a[rel=scss] { color: rgba($version-border, .6); text-shadow: rgba($version-text, .08) 0 1px 0;} }
+  body.sass #docs_panel a[rel=sass], body.scss #docs_panel a[rel=scss] { color: rgba($version-text, .5); @include border-radius(1em); @extend .inset-panel-#{$theme};}
   
   #page > article {
     #{headings()}{ color: $heading; } }
     h1, h2 { @extend .horizontal-rule-#{$theme}; }
+    h3 {
+      background: rgba(#000, .2);
+      @include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
+      a:hover { color: $heading;
+        .arg { color: rgba($heading, .6);}
+      }
+    }
+  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 background-image(linear-gradient(rgba(#000, .5), rgba(#000, 0)));
+  @include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
-  @include single-box-shadow(rgba(#fff, .1), 0, 1px, 0);
+  background-color: rgba(#000, .3); }
-  background-color: rgba(#000, .2); }
   
 .horizontal-rule-dark {  
-  @include single-box-shadow(rgba(#fff, .07), 0, 1px, 0);
+  @include box-shadow(rgba(#fff, .07) 0 1px 0);
   border-bottom: 1px solid #121212; }
   
 .vertical-rule-dark {
-  @include single-box-shadow(rgba(#fff, .07), 1px, 0, 0);
+  @include box-shadow(rgba(#fff, .07) 1px 0 0);
   border-right: 1px solid #121212; }
   
-.code-block-dark { @extend .round-corners-4; @extend .inset-panel-dark;
+.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
-  display: inline-block;
-  padding-left: 2px;
-  padding-right: 2px; }
 
 @mixin dark-theme {
   $page-bg: #343434;
 
-  $text: #b6b6b6;
+  $text: #c6c6c6;
   $heading: white;
   $strong-text: #dbdbdb;
 
   $search: #6e6e6e;
-  $search-bg: black;
+  
-
   $link: #dadbb1;
   $nav-link: #bfbfbf;
+  $code: #85AFC9;
 
   $main-nav: $strong-text;
   $main-nav-selected: #fb292d;
@@ -72,7 +84,52 @@
   $version-text: white;
   $version-border: black;
 
-  @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border);
+  @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, $version-text, $version-border);
 }
 
-html.dark { @include dark-theme; }
+// Light Theme
+.inset-panel-light {
+  @include background-image(linear-gradient(rgba(#000, .15), rgba(#000, 0)));
+  @include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .25) 0 -1px 0);
+  background-color: rgba(#fff, .2); }
+  
+.horizontal-rule-light {  
+  @include single-box-shadow(rgba(#fff, 1), 0, 1px, 0);
+  border-bottom: 1px solid #bbb; }
+  
+.vertical-rule-light {
+  @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
+  border-right: 1px solid #bbb; }
+  
+.code-block-light { @extend .code-block;
+  //@include background-image(linear-gradient(rgba(#000, .1), rgba(#000, 0)));
+  @include box-shadow(rgba(#000, .2) 0 0 1px 1px inset);
+  background-color: rgba(#fff, 1);}
+
+@mixin light-theme {
+  $page-bg: #eaeaea;
+
+  $text: #222 ;
+  $heading: black;
+  $strong-text: #000;
+
+  $search: #666;
+  $search-bg: white;
+
+  $link: darken(adjust-hue(#dadbb1, 160), 40);
+  $nav-link: #444;
+
+  $main-nav: $strong-text;
+  $main-nav-selected: darken(#fb292d, 10);
+  $docs-nav-selected: $strong-text;
+  $module-nav-selected: $link;
+
+  $version-text: black;
+  $version-border: white;
+  $code: #222;
+
+  @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, $version-text, $version-border);
+}
+
+html.dark { @include dark-theme; }
+html.light { @include light-theme; }

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

@@ -1,14 +1,21 @@
-@font-face { font-family: 'pictos-web';	src: url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.eot');	src: local('☺'), url('http://s3.imathis.com/shared-assets/pictos-font/http://pictos-web.woff') format('woff'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.ttf') format('truetype'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal;}
+//@font-face { font-family: 'pictos-web';	src: url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.eot');	src: local('☺'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.woff') format('woff'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.ttf') format('truetype'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal;}
+@include font-face("pictos-web", font-files("pictos-web.woff", woff, "pictos-web.ttf", truetype, "pictos-web.svg#webfontIyfZbseF", svg), 'pictos-web.eot');
 
 .sans-font { font-family: 'Lucida Grande', Arial, sans-serif; }
 .heading-font { font-family: 'Museo Sans', 'serif'; }
-.pictos { font-family: pictos-web; }
+.pictos { font-family: pictos-web; font-weight: normal; font-style: normal;}
+.fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;}
 
 #page > article {
+  line-height: 1.45em;
   ol { list-style: outside decimal; padding-left: 2.5em;}
-  ul, ol { margin-bottom: 1.5em;}
+  ul, ol, dl { margin-bottom: 1.5em;}
   p { margin-bottom: 1.2em;}
   #{headings()}{ @extend .heading-font; line-height: 1.2em; }
   h1 { font-size: 30px; }
-  h2 { font-size: 20px; }
+  h2 { font-size: 22px; margin: 15px 0 8px; padding-bottom: 6px;}
+  h3 { font-size: 18px; }
+  h1 { padding-bottom: 6px; margin-bottom: 9px; }
+  ul { list-style: inside disc; }
+  dt { font-weight: bold; }
 }

doc-src/content/stylesheets/screen.sass

@@ -11,5 +11,6 @@
 @import partials/nav
 @import partials/sidebar
 @import partials/main
+@import partials/code
 
 @import core/clearing-classes

doc-src/layouts/basic.haml

@@ -1,6 +1,6 @@
 !!!5
 - # This template is just the stuff until the body tag.
-%html.dark.no-js{:dir => "ltr", :lang => "en"}
+%html.no-js{:dir => "ltr", :lang => "en"}
   %head
     %meta{:charset => "utf-8"}/
     %meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
@@ -8,6 +8,10 @@
     %title
       #{@item[:title]} | Compass Documentation
     <!--[if !IE 6]><!-->
+    %script(src="/javascripts/jquery-1.3.2.min.js")
+    %script(src="/javascripts/jquery.cookie.js")
+    %script(src="/javascripts/site.js")
+    %script(src="/javascripts/fixups.js" deferred)
     %link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
     %link{:href => "/stylesheets/syntax/shCore.css", :rel => "stylesheet", :type => "text/css"}
     %link{:href => "/stylesheets/syntax/shThemeDefault.css", :rel => "stylesheet", :type => "text/css"}

doc-src/layouts/blueprint.haml

@@ -1,5 +1,4 @@
 - render 'main' do
-  %aside(role="sidebar")
+  %aside(role="sidebar")= render 'partials/sidebar', :default_stylesheet => "_blueprint.scss"
-    %nav#local-nav
+  %article= yield
-      %ul=item_tree(reference_item(:stylesheet => "blueprint.scss"), :depth => 2, :omit_self => false, :heading_level => 2)
+  
-  %article= yield

doc-src/layouts/main.haml

@@ -19,16 +19,20 @@
         %a{:href => "/reference/blueprint/", :rel => "blueprint"} Blueprint
         %a{:href => "/reference/compass/", :rel => "core"} Core
       - if @item[:content_for_module_nav]
-      %nav#module-nav= @item[:content_for_module_nav]
+        %nav#module-nav= @item[:content_for_module_nav]
     #page
-      #version
+      #docs_panel
-        Version:
+        #theme_pref
-        %a.number(href="/CHANGELOG/")= compass_version
+          %a{:href => "#", :rel => "theme", :title => "switch theme" } switch theme
+        #syntax_pref
+          %a{:href => "#", :rel => "scss" } scss
+          %a{:href => "#", :rel => "sass" } sass
+        #version
+          Version:
+          %a.number(href="/CHANGELOG/")= compass_version
       = yield
       -#comments= render "partials/disqus_comments"
-  %footer(role="contentinfo")= render "partials/footer"
+    %footer(role="contentinfo")= render "partials/footer"
-  %script(src="/javascripts/jquery-1.3.2.min.js")
-  %script(src="/javascripts/fixups.js" deferred)
   %script{:src => "/javascripts/shCore.js", :type => "text/javascript"}
   %script{:src => "/javascripts/shBrushCss.js", :type => "text/javascript"}
   %script{:src => "/javascripts/shBrushSass.js", :type => "text/javascript"}

doc-src/layouts/partials/footer.haml

@@ -1,14 +1,8 @@
 .legalese
   %p
-    :plain
+    <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>
-      <a rel="license" href="/copyright/"
+    %span by Christopher M. Eppstein.
-         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>
-    %br
-    by Christopher M. Eppstein.
-  - if @item[:content_for_footer]
-    %hr
-    = @item[:content_for_footer]
 .links
   %ul
     %li
@@ -19,4 +13,7 @@
     %li
       Compass is Open Source -
       %a(href="http://github.com/chriseppstein/compass") Contribute
-    
+
+- if @item[:content_for_footer]
+  %hr
+  = @item[:content_for_footer]

doc-src/layouts/partials/reference/const_table.haml

@@ -2,10 +2,6 @@
   - const_id = constant_def.name.gsub(/_/,'-')
   %h3.constant{:id=>"const-#{const_id}"}
     %a.permalink{:href => "#const-#{const_id}"}= "$"+constant_def.name
-  %dl.constant-details.source-documentation
+    %code= constant_def.expr.to_sass(:format => :html)
-    %dt Value
+  - if constant_def.comment && constant_def.comment.strip.size > 0
-    %dd
+    %p= format_doc constant_def.comment
-      %code= constant_def.expr.to_sass(:format => :html)
-    - if constant_def.comment && constant_def.comment.strip.size > 0
-      %dt Description
-      %dd= format_doc constant_def.comment

doc-src/layouts/partials/reference/mixins.haml

@@ -2,18 +2,12 @@
   %h2 Mixins
 
   - mixin_defs.each do |mixin|
-    %span.view-source
+    %a{:href=>"#mixin-#{mixin.name}-source", :rel => "view source"} view source
-      View Source:
-      %a.view-source{:href=>"#mixin-#{mixin.name}-sass"} Sass
-      \|
-      %a.view-source{:href=>"#mixin-#{mixin.name}-scss"} SCSS
     %h3.mixin{:id=>"mixin-#{mixin.name}"}
       %a.permalink{:href => "#mixin-#{mixin.name}"}= mixin_signature(mixin)
     .mixin-source{:id=>"mixin-#{mixin.name}-source"}
-      .elided-code{:id=>"mixin-#{mixin.name}-sass"}
+      %pre.source-code.sass= mixin.to_sass
-        %pre.source-code.sass= mixin.to_sass
+      %pre.source-code.scss= mixin.to_scss
-      .elided-code{:id=>"mixin-#{mixin.name}-scss"}
-        %pre.source-code.scss= mixin.to_scss
 
     .source-documentation
       = format_doc(mixin.comment)