diff --git a/doc-src/content/stylesheets/_examples.sass b/doc-src/content/stylesheets/_examples.sass index 34de58e1..3bce0dd5 100644 --- a/doc-src/content/stylesheets/_examples.sass +++ b/doc-src/content/stylesheets/_examples.sass @@ -1,6 +1,30 @@ .demo article text-align: left - h1 - text-align: center - \ No newline at end of file + 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 diff --git a/doc-src/content/stylesheets/_reference.scss b/doc-src/content/stylesheets/_reference.scss index f401f38a..54498b39 100644 --- a/doc-src/content/stylesheets/_reference.scss +++ b/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; } } diff --git a/doc-src/content/stylesheets/_slideshow.sass b/doc-src/content/stylesheets/_slideshow.sass index db0c9f31..4b0d0e10 100644 --- a/doc-src/content/stylesheets/_slideshow.sass +++ b/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 diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass index d5d40caa..5d9241b2 100644 --- a/doc-src/content/stylesheets/screen.sass +++ b/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 diff --git a/doc-src/layouts/main.haml b/doc-src/layouts/main.haml index 63ef2114..05e543c7 100644 --- a/doc-src/layouts/main.haml +++ b/doc-src/layouts/main.haml @@ -31,24 +31,25 @@ %li %a{:href => "/docs/tutorials/"} tutorials %nav#docs-nav{:role => "navigation"} - %ul - %li - %a{:href => "/docs/"} introduction - %li - %a{:href => "/docs/reference/compass/"} core - %li - %a{:href => "/docs/reference/blueprint/"} blueprint - / + .container + %ul %li - %a{:href => "/docs/plugins/"} plugins - #version - Current Version: - %a.number(href="/CHANGELOG/")= compass_version - #search-docs - %form - %p - %label{:for => "search"} search - %input#search{:name => "search", :type => "text", :value => "", :placeholder => "Search"} + %a{:href => "/docs/"} introduction + %li + %a{:href => "/docs/reference/compass/"} core + %li + %a{:href => "/docs/reference/blueprint/"} blueprint + / + %li + %a{:href => "/docs/plugins/"} plugins + #version + Current Version: + %a.number(href="/CHANGELOG/")= compass_version + #search-docs + %form + %p + %label{:for => "search"} search + %input#search{:name => "search", :type => "text", :value => "", :placeholder => "Search"} - if @item[:content_for_module_nav] %nav#module-nav= @item[:content_for_module_nav] #page= yield diff --git a/doc-src/layouts/partials/example.haml b/doc-src/layouts/partials/example.haml index 454448c9..49b560a5 100644 --- a/doc-src/layouts/partials/example.haml +++ b/doc-src/layouts/partials/example.haml @@ -4,10 +4,33 @@ = yield #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) + %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) diff --git a/doc-src/layouts/partials/reference/examples.haml b/doc-src/layouts/partials/reference/examples.haml index e9d9421d..38a77e13 100644 --- a/doc-src/layouts/partials/reference/examples.haml +++ b/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] diff --git a/doc-src/layouts/partials/reference/mixins.haml b/doc-src/layouts/partials/reference/mixins.haml index f56d5d68..84060aaa 100644 --- a/doc-src/layouts/partials/reference/mixins.haml +++ b/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)