Move the tutorials to the new layout.

doc-src/Rules

@@ -47,7 +47,7 @@ end
 
 compile '*' do
   filter :haml, :ugly => true
-  layout 'default'
+  layout item[:layout] || 'main'
 end
 
 (0..5).each do |i|

doc-src/content/examples/compass/css3/gradient/markup.haml

@@ -9,7 +9,7 @@
 #radial-gradient.gradient-example
 
 %p
-  This yields a linear gradient spanning from !start to !end coordinates  
+  This yields a linear gradient spanning from $start to $end coordinates  
 
 #linear-gradient.gradient-example
 

doc-src/content/stylesheets/_base.sass

@@ -24,14 +24,14 @@ $side-gutter-width: 1em
 // OMEGA_FLOAT
 // By default, +omega elements are floated right.
 // You can override that globally here:
-// !omega_float = "right"
+// $omega_float = "right"
 
 // HACKS
 // Are you using hacks or conditional comments? Susy makes both possible.
 // Leave this as 'true' to use hacks, set it as false for conditional comments.
 // Conditional comments will require overrides for +omega, +inline-block and
 // several other mixins.
-// !hacks = true
+// $hacks = true
 
 // SUSY
 // Don't move this @import above the GRID and FONT-SIZE overrides.

doc-src/content/stylesheets/_reference.scss

@@ -38,7 +38,15 @@ body.reference {
   span.color + span.swatch { margin: 0 3px 3px; border: 1px solid #333333; width: 1em; height: 1em; @include inline-block; }
   .color-snippet { width: 100px; height: 20px; @include border-radius(3px); }
   a.help { font-size: 75%; }
-  p code { border: 1px solid #ccc; padding: 2px; background-color: #e7e7e7;}
+}
+
+body.docs {
+  p code, pre {
+    @include code-text;
+    border: 1px solid #ccc;
+    padding: 2px;
+    background-color: #e7e7e7;
+  }
 }
 
 table.constants {

doc-src/content/stylesheets/screen.sass

@@ -40,11 +40,13 @@ header[role="banner"]
     +border-bottom-right-radius(0.5em)
 
 =active-compass-nav($id, $url)
-  body#{$id} #compass-nav a[href="#{$url}"]
+  #{append-selector(body, $id)}
+    #compass-nav a[href="#{$url}"]
       background: #cccccc
       cursor: default
 
-+active-compass-nav(".docs", "/docs/")
++active-compass-nav("#home,.reference", "/docs/")
++active-compass-nav(".tutorial", "/docs/tutorials/")
 
 #docs-nav
   +pie-clearfix
@@ -142,6 +144,8 @@ footer[role="contentinfo"]
 
 article
   text-align: left
+
+aside[role="sidebar"] + article
   +prefix(3)
 
 article
@@ -224,13 +228,16 @@ article
   a.selected:after
     content: "«"
 
+=code-text
+  font-family: monospace
+
 #code
   +full(12)
   +pie-clearfix
   +adjust-font-size-to(12px)
   +h-borders(1px,1,12px)
+  +code-text
   border-color: #ccc
-  font-family: monospace
   nav
     background: #eee
     +trailer(1,12px)

doc-src/content/tutorials.haml

@@ -3,6 +3,7 @@ title: Compass Tutorials
 crumb: Tutorials
 classnames:
   - tutorial
+layout: tutorial
 ---
 %h1 Compass Tutorials
 

doc-src/content/tutorials/best_practices.haml

@@ -1,6 +1,7 @@
 ---
 title: Best practices
 crumb: Best practices
+layout: tutorial
 ---
 
 %h3
@@ -18,10 +19,10 @@ crumb: Best practices
 %h4
   _base.scss
 %pre
-  \!blueprint_grid_columns = 24
-  \!blueprint_grid_width   = 30px
-  \!blueprint_grid_margin  = 10px
-  \!font_color              = #333
+  \$blueprint_grid_columns = 24
+  \$blueprint_grid_width   = 30px
+  \$blueprint_grid_margin  = 10px
+  \$font_color              = #333
   \
   @import compass/reset.scss
   @import compass/utilities.scss
@@ -70,35 +71,22 @@ crumb: Best practices
   than the whole list of rules which define that appearance.
 %h4
   Mixin Example
-%pre
-  \// Mixin for the html element, so the footer stays at the bottom of the screen.
-  \// Relies on the following html structure, and a fixed-height #footer element:
-  \//
-  \//  %body
-  \//    #root
-  \//      #root_footer
-  \//    #footer
-  \
-  \=attach_footer( !footer_height )
-  \  :height 100%
-  \
-  body
-  \  :height 100%
-  \
-  \#root
-  \  :min-height 100%
-  \  :margin-bottom  = -!footer_height
-  \
-  \#root_footer
-  \  :clear both
-  \  :height = !footer_height
-  \
-  \#footer
-  \  :clear            both
-  \  :position         relative
-  \  :height         = !footer_height
+
+:markdown
+  Mixin for the html element, so the footer stays at the bottom of the screen.
+  Relies on the following html structure, and a fixed-height `#footer` element:
+  
+      <body>
+        <div id="root">
+          <div id="root_footer"></div>
+        </div>
+        <div id="footer">
+          Footer content goes here.
+        </div>
+      </body>
+
 %p
   A single line is all that’s needed to use the mixin, which moves the implementation details out of the way and replaces them with a clear and concise label:
 %pre
   \html
-  \  +attach_footer( 54px )
+  \  @include attach_footer( 54px )

doc-src/content/tutorials/blueprint.haml

@@ -1,5 +1,6 @@
 ---
 title: Blueprint Framework
+layout: tutorial
 classnames:
   - tutorial
 ---

doc-src/content/tutorials/configurable-variables.haml

@@ -1,5 +1,6 @@
 ---
 title: Working with Configurable Variables
+layout: tutorial
 classnames:
   - tutorial
 ---
@@ -11,20 +12,21 @@ classnames:
   There are two ways of defining a variable in Sass. The first, most common, approach is
   simple assignment. For example:
 
-      !my_constant = #fedcba
+      $my-constant : #fedcba
 
   The second approach is called guarded assignment. In this case, the constant is only
   set if it does not already have a value. For example:
 
-      !my_constant ||= #fedcba
+      $my-constant : #fedcba !default
 
   Many compass modules use guarded assignment to allow you to set defaults for that module.
   In order for these configurable variables to work correctly, you must set the variables
   *before* you import the module. For example:
 
-      !blueprint_grid_columns = 12
-      @import blueprint/grid
+      $blueprint-grid-columns = 12
+      @import "blueprint/grid"
 
   Because of this, it is common to have one or more partials
-  that set the constants first and get imported before any other imports in your stylesheet(s).
-  This is commonly referred to as the "base" stylesheet and is usually named `_base.scss`.
+  that set the constants first and get imported before any other
+  imports in your stylesheet(s). This is commonly referred to as
+  the "base" stylesheet and is usually named `_base.scss` or `_base.sass`.

doc-src/layouts/blueprint.haml

@@ -1,3 +1,3 @@
 - render 'main' do
-  %aside(role="sidebar")= render 'partials/sidebar', :default_stylesheet => "_blueprint.scss"
+  %aside(role="sidebar")= render 'partials/sidebar', :default_stylesheet => "_blueprint.scss", :omit_self => false, :heading_level => 2
   %article= yield

doc-src/layouts/main.haml

@@ -26,7 +26,7 @@
             %li
               %a{:href => "/", :rel => "home"} compass
             %li
-              %a{:href => "/docs/"} docs
+              %a{:href => "/docs/"} reference
             %li
               %a{:href => "/docs/tutorials/"} tutorials
     %nav#docs-nav{:role => "navigation"}
@@ -37,6 +37,7 @@
           %a{:href => "/docs/reference/compass/"} core
         %li
           %a{:href => "/docs/reference/blueprint/"} blueprint
+        /
           %li
             %a{:href => "/docs/plugins/"} plugins
       #search-docs

doc-src/layouts/partials/sidebar.haml

@@ -1,2 +1,2 @@
 %nav#local-nav
-  %ul= item_tree(reference_item(:stylesheet => (@item[:nav_stylesheet] || @default_stylesheet)), :depth => 2, :omit_self => true)
+  %ul= item_tree(reference_item(:stylesheet => (@item[:nav_stylesheet] || @default_stylesheet)), :depth => 2, :omit_self => get_var(:omit_self){true}, :heading_level => get_var(:heading_level){1})

doc-src/layouts/tutorial.haml

@@ -0,0 +1,5 @@
+- render 'main' do
+  %aside(role="sidebar")
+    %nav#local-nav
+      %ul= item_tree(tutorial_item(:root), :depth => 2, :omit_self => false, :heading_level => 2)
+  %article= yield

doc-src/lib/default.rb

@@ -55,6 +55,11 @@ def find(identifier)
   @items.find{|i| i.identifier == identifier}
 end
 
+def get_var(instance_var)
+  instance_variable_defined?("@#{instance_var}") ? instance_variable_get("@#{instance_var}") : yield
+end
+  
+
 def item_tree(item, options = {})
   crumb = item[:crumb] || item[:title]
   options[:heading_level] ||= 1 if options.fetch(:headings, true)
@@ -91,4 +96,10 @@ def item_tree(item, options = {})
   %Q{#{contents}#{child_html}}
 end
 
+def tutorial_item(path)
+  path = "" if path == :root
+  @items.detect do |i|
+    i.identifier == "/tutorials/#{path}"
+  end
+end
 

doc-src/lib/stylesheets.rb

@@ -36,7 +36,6 @@ def reference_item(options)
       @items.detect do |i|
         i.identifier =~ /^\/reference/ &&
         i[:stylesheet] == path
-        
       end
     end
   end