Move examples to the new layout.

doc-src/content/stylesheets/_examples.sass

@@ -0,0 +1,6 @@
+.demo
+  article
+    text-align: left
+  h1
+    text-align: center
+  

doc-src/content/stylesheets/screen.sass

@@ -277,6 +277,7 @@ article
 /* @end
 
 @import "reference"
+@import "examples"
 
 /* @group OVERRIDES by page
 

doc-src/layouts/example.haml

@@ -1,17 +1,4 @@
-!!! Strict
-%html
-  %head
-    %title
-      #{@item[:title]} - Compass
-    %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="/docs/images/compass_icon.png")
-    %link{ :href => "/docs/stylesheets/legacy/example.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
-    %style{:type => "text/css"}= example_css
-  %body{body_attributes(@item)}
-    #container
-      #main
-        = yield
-
-    = render "partials/analytics"
+- render 'main' do
+  - content_for(:additional_css) do
+    = example_css
+  %article= yield

doc-src/layouts/main.haml

@@ -14,6 +14,8 @@
     /[if IE 6]
       %link{:charset => "utf-8", :href => "http://universal-ie6-css.googlecode.com/files/ie6.0.3.css", :rel => "stylesheet", :type => "text/css"}
     %link{ :href => "/docs/stylesheets/ui-lightness/jquery-ui-1.7.2.custom.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
+    - if @item[:content_for_additional_css]
+      %style(type="text/css")= @item[:content_for_additional_css]
   %body{body_attributes(@item)}
     %nav#skip-links
       %a{:href => "#content"} skip to content

doc-src/layouts/partials/example.haml

@@ -1,24 +1,13 @@
-%h1= @item[:title]
+%h1 Demo: #{@item[:title]}
+#demo= example_html
 
 = yield
 
-%table#example{:cellspacing=>"0", :cellpadding=>"0", :border=>"0"}
-  %tr.source
-    %th HTML
-    %th Sass
-  %tr.source
-    %td.markup
-      %pre
-        %code.html= h(example_html)
-    %td.stylesheet
-      %pre
-        %code.sass= h(example_sass)
-  %tr.output
-    %th Display
-    %th Generated CSS
-  %tr.output
-    %td.markup
-      = example_html
-    %td.stylesheet
-      %pre
-        %code.css= h(example_css)
+#how
+  #markup
+    %pre#haml= h(example_haml)
+    %pre#html= h(example_html)
+  #styles
+    %pre#scss= h(example_scss)
+    %pre#sass= h(example_sass)
+    %pre#css= h(example_css)

doc-src/lib/default.rb

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

doc-src/lib/examples.rb

@@ -1,7 +1,10 @@
-def example_html
+def example_haml
   markup_item = @item.children.detect{|child| child.identifier =~ /markup/}
-  haml = markup_item.reps.find { |r| r.name == :default }.content_at_snapshot(:raw)
-  Haml::Engine.new(haml).render
+  markup_item.reps.find { |r| r.name == :default }.content_at_snapshot(:raw)
+end
+
+def example_html
+  Haml::Engine.new(example_haml).render
 end
 
 def example_sass
@@ -9,6 +12,10 @@ def example_sass
   markup_item.reps.find { |r| r.name == :default }.content_at_snapshot(:raw)
 end
 
+def example_scss
+  Sass::Engine.new(example_sass).to_tree.to_scss
+end
+
 def example_css
   Sass::Engine.new(example_sass, Compass.sass_engine_options.merge(:line_comments => false)).render
 end