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
This commit is contained in:
Chris Eppstein 2010-04-27 00:05:07 -07:00
commit 9c2c457a10
8 changed files with 97 additions and 60 deletions

View File

@ -1,6 +1,30 @@
.demo .demo
article article
text-align: left text-align: left
h1 h1
text-align: center 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

View File

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

View File

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

View File

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

View File

@ -31,24 +31,25 @@
%li %li
%a{:href => "/docs/tutorials/"} tutorials %a{:href => "/docs/tutorials/"} tutorials
%nav#docs-nav{:role => "navigation"} %nav#docs-nav{:role => "navigation"}
%ul .container
%li %ul
%a{:href => "/docs/"} introduction
%li
%a{:href => "/docs/reference/compass/"} core
%li
%a{:href => "/docs/reference/blueprint/"} blueprint
/
%li %li
%a{:href => "/docs/plugins/"} plugins %a{:href => "/docs/"} introduction
#version %li
Current Version: %a{:href => "/docs/reference/compass/"} core
%a.number(href="/CHANGELOG/")= compass_version %li
#search-docs %a{:href => "/docs/reference/blueprint/"} blueprint
%form /
%p %li
%label{:for => "search"} search %a{:href => "/docs/plugins/"} plugins
%input#search{:name => "search", :type => "text", :value => "", :placeholder => "Search"} #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] - if @item[:content_for_module_nav]
%nav#module-nav= @item[:content_for_module_nav] %nav#module-nav= @item[:content_for_module_nav]
#page= yield #page= yield

View File

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

View File

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

View File

@ -4,14 +4,14 @@
- mixin_defs.each do |mixin| - mixin_defs.each do |mixin|
%span.view-source %span.view-source
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}"} %h3.mixin{:id=>"mixin-#{mixin.name}"}
%a.permalink{:href => "#mixin-#{mixin.name}"}= mixin_signature(mixin) %a.permalink{:href => "#mixin-#{mixin.name}"}= mixin_signature(mixin)
.mixin-source{:id=>"mixin-#{mixin.name}-source"} .mixin-source{:id=>"mixin-#{mixin.name}-source"}
%pre.sass= mixin.to_sass %pre{:id=>"mixin-#{mixin.name}-sass"}= mixin.to_sass
%pre.scss= mixin.to_scss %pre{:id=>"mixin-#{mixin.name}-scss"}= mixin.to_scss
.source-documentation .source-documentation
= format_doc(mixin.comment) = format_doc(mixin.comment)