Merge commit 'ericam/docs' into docs

* commit 'ericam/docs':
  fixed typo in demo header styles
  allow overflow-x on code to scroll
  example code in css-slideshows
  mixin source uses :target for css interaction
  more sensible nav markup/structure

doc-src/content/stylesheets/_examples.sass

@@ -4,3 +4,27 @@
     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)
+    .code
+      li
+        overflow-x: auto

doc-src/content/stylesheets/_reference.scss

@@ -34,21 +34,21 @@ body.reference {
       margin-top: 1em; } }
   span.view-source {
     float: right;
-    margin: 1.25em;
+    margin: 1em;
   }
   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%; }
   .mixin-source {
     pre {
-      @include transition;
-      @include transparent;
+      @include box-sizing(border-box);
       display: none;
       overflow-x: auto;
+      width: 100%;
+      padding: $base-rhythm-unit;
     }
-    pre.shown {
+    pre:target {
       display: block;
-      @include opaque;
     }
   }
   

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/content/stylesheets/screen.sass

@@ -56,12 +56,14 @@ header[role="banner"]
   height: $base-rhythm-unit
   border-color: #cccccc
   background-color: #eeeeee
+  .container
+    +container
+    +pie-clearfix
+    overflow: visible
   ul
     +horizontal-list
-    +container
-    position: relative
-    z-index: 2
     overflow: visible
+    position: relative
     li
       top: -$base-rhythm-unit * 0.5
       margin-bottom: -$base-rhythm-unit * 0.5
@@ -94,29 +96,19 @@ header[role="banner"]
 +active-docs(".blueprint", "/docs/reference/blueprint/")
 
 #version
-  // XXX This is placeholder styling. Susify me.
-  color: #999
   +adjust-font-size-to(14px)
-  z-index: 3
+  +float(left)
+  margin-left: 1.5em
+  color: #999
   .number
     color: #666
-  float: right
-  margin-right: 400px
     
 #search-docs
-  position: absolute
-  z-index: 1
-  top: 0
-  left: 0
-  width: 100%
   color: #999
-  form
-    +container
   p
+    margin: 0
     +columns(3)
     +omega
-    +leader(.25)
-    +trailer(0)
     label
       +float(left)
       width: columns(1,3) + gutter(3)*.5
@@ -155,9 +147,6 @@ footer[role="contentinfo"]
 article
   text-align: left
 
-aside[role="sidebar"] + article
-  +prefix(3)
-
 article
   > nav
     border-top: $px2em*1px solid #ccc
@@ -175,7 +164,7 @@ article
 
 /* @group OVERRIDES by content
 
-#content
+aside[role="sidebar"] + article
   +columns(9)
   +omega
   h1

doc-src/layouts/main.haml

@@ -31,6 +31,7 @@
             %li
               %a{:href => "/docs/tutorials/"} tutorials
     %nav#docs-nav{:role => "navigation"}
+      .container
         %ul
           %li
             %a{:href => "/docs/"} introduction

doc-src/layouts/partials/example.haml

@@ -4,10 +4,33 @@
 = yield
 
 #how
-  #markup
-    %pre#haml= h(example_haml)
-    %pre#html= h(example_html)
-  #styles
+  %section#markup
+    %nav
+      %ul
+        %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]

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

@@ -4,14 +4,14 @@
   - mixin_defs.each do |mixin|
     %span.view-source
       View Source:
-      %a.view-source{:href=>"#", :onclick => "$('#mixin-#{mixin.name}-source .scss').removeClass('shown');$('#mixin-#{mixin.name}-source .sass').addClass('shown'); return false;"} Sass
+      %a.view-source{:href=>"#mixin-#{mixin.name}-sass"} Sass
       \|
-      %a.view-source{:href=>"#", :onclick => "$('#mixin-#{mixin.name}-source .sass').removeClass('shown');$('#mixin-#{mixin.name}-source .scss').addClass('shown'); return false;"} SCSS
+      %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"}
-      %pre.sass= mixin.to_sass
-      %pre.scss= mixin.to_scss
+      %pre{:id=>"mixin-#{mixin.name}-sass"}= mixin.to_sass
+      %pre{:id=>"mixin-#{mixin.name}-scss"}= mixin.to_scss
 
     .source-documentation
       = format_doc(mixin.comment)