example code in css-slideshows

doc-src/content/stylesheets/_examples.sass

@@ -4,3 +4,24 @@
   h1
     text-align: center
 
+  #how
+    +full(12)
+    +pie-clearfix
+    +adjust-font-size-to(12px)
+    +h-borders(1px,1,12px)
+    border-color: #ccc
+    font-family: monospace
+    nav
+      background: #eee
+      +trailer(1,12px)
+      ul
+        +inline-block-list(.4em)
+        text-align: right
+    section
+      position: relative
+      +columns(6,12)
+      +slideshow
+      &#markup
+        +alpha(12)
+      &#styles
+        +omega(12)

doc-src/content/stylesheets/_slideshow.sass

@@ -6,7 +6,7 @@
 // **Not compatible with Opera without Javascript help**
 
 // Override with the proper class names for your slide/slide-nav containers
-$slide-container: ".slides"
+$slide-container: ".code"
 
 $max-slides: 10
 

doc-src/layouts/partials/example.haml

@@ -4,10 +4,33 @@
 = yield
 
 #how
-  #markup
+  %section#markup
-    %pre#haml= h(example_haml)
+    %nav
-    %pre#html= h(example_html)
+      %ul
-  #styles
+        %li
+          %a{:href => "#haml"} haml
+        %li
+          %a{:href => "#html"} html
+    .code
+      %ul
+        %li#haml
+          %pre= h(example_haml)
+        %li#html
+          %pre= h(example_html)
+  %section#styles
+    %nav
+      %ul
+        %li
+          %a{:href => "#scss"} scss
+        %li
+          %a{:href => "#sass"} sass
+        %li
+          %a{:href => "#css"} css
+    .code
+      %ul
+        %li#scss
           %pre#scss= h(example_scss)
+        %li#sass
           %pre#sass= h(example_sass)
+        %li#css
           %pre#css= h(example_css)

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

@@ -2,6 +2,6 @@
   %h2 Examples
   %dl.examples
     - examples.each do |example|
-      %dt= link_to example.item[:title], example, :target => "_blank"
+      %dt= link_to example.item[:title], example
       - if example.item[:description]
         %dd= example.item[:description]