From feb6549a02bba677f4639f1576b4efd0fe6adf24 Mon Sep 17 00:00:00 2001 From: Eric Meyer Date: Mon, 26 Apr 2010 17:06:56 -0600 Subject: [PATCH 1/5] more sensible nav markup/structure --- doc-src/content/stylesheets/screen.sass | 28 +++++++------------- doc-src/layouts/main.haml | 35 +++++++++++++------------ 2 files changed, 28 insertions(+), 35 deletions(-) diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass index d5d40caa..93ccd1e0 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 +columns(3) +omega - +leader(.25) - +trailer(0) + margin: 0 label +float(left) width: columns(1,3) + gutter(3)*.5 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 From a7559fcdd5a0d1369604e6bf5c79ec82ede6ae0f Mon Sep 17 00:00:00 2001 From: Eric Meyer Date: Mon, 26 Apr 2010 17:42:46 -0600 Subject: [PATCH 2/5] mixin source uses :target for css interaction --- doc-src/content/stylesheets/_reference.scss | 10 +++++----- doc-src/content/stylesheets/screen.sass | 7 ++----- doc-src/layouts/partials/reference/mixins.haml | 8 ++++---- 3 files changed, 11 insertions(+), 14 deletions(-) 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/screen.sass b/doc-src/content/stylesheets/screen.sass index 93ccd1e0..5d9241b2 100644 --- a/doc-src/content/stylesheets/screen.sass +++ b/doc-src/content/stylesheets/screen.sass @@ -106,9 +106,9 @@ header[role="banner"] #search-docs color: #999 p + margin: 0 +columns(3) +omega - margin: 0 label +float(left) width: columns(1,3) + gutter(3)*.5 @@ -147,9 +147,6 @@ footer[role="contentinfo"] article text-align: left -aside[role="sidebar"] + article - +prefix(3) - article > nav border-top: $px2em*1px solid #ccc @@ -167,7 +164,7 @@ article /* @group OVERRIDES by content -#content +aside[role="sidebar"] + article +columns(9) +omega h1 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) From ba996c7eccf568d6bf7928b2b152fd232db30b71 Mon Sep 17 00:00:00 2001 From: Eric Meyer Date: Mon, 26 Apr 2010 18:04:55 -0600 Subject: [PATCH 3/5] example code in css-slideshows --- doc-src/content/stylesheets/_examples.sass | 23 +++++++++++- doc-src/content/stylesheets/_slideshow.sass | 2 +- doc-src/layouts/partials/example.haml | 37 +++++++++++++++---- .../layouts/partials/reference/examples.haml | 2 +- 4 files changed, 54 insertions(+), 10 deletions(-) diff --git a/doc-src/content/stylesheets/_examples.sass b/doc-src/content/stylesheets/_examples.sass index 34de58e1..d1b12192 100644 --- a/doc-src/content/stylesheets/_examples.sass +++ b/doc-src/content/stylesheets/_examples.sass @@ -3,4 +3,25 @@ text-align: left h1 text-align: center - \ No newline at end of file + + #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) 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/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] From 7f1da5525b66b7c0d71cc4588e205513046b4a30 Mon Sep 17 00:00:00 2001 From: Eric Meyer Date: Mon, 26 Apr 2010 18:06:29 -0600 Subject: [PATCH 4/5] allow overflow-x on code to scroll --- doc-src/content/stylesheets/_examples.sass | 3 +++ 1 file changed, 3 insertions(+) diff --git a/doc-src/content/stylesheets/_examples.sass b/doc-src/content/stylesheets/_examples.sass index d1b12192..725140f4 100644 --- a/doc-src/content/stylesheets/_examples.sass +++ b/doc-src/content/stylesheets/_examples.sass @@ -25,3 +25,6 @@ +alpha(12) &#styles +omega(12) + .code + li + overflow-x: auto From 32c659fe80cdfc0eada1fae3d9d174d729eb38ab Mon Sep 17 00:00:00 2001 From: Eric Meyer Date: Mon, 26 Apr 2010 18:13:30 -0600 Subject: [PATCH 5/5] fixed typo in demo header styles --- doc-src/content/stylesheets/_examples.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc-src/content/stylesheets/_examples.sass b/doc-src/content/stylesheets/_examples.sass index 725140f4..3bce0dd5 100644 --- a/doc-src/content/stylesheets/_examples.sass +++ b/doc-src/content/stylesheets/_examples.sass @@ -1,8 +1,8 @@ .demo article text-align: left - h1 - text-align: center + h1 + text-align: center #how +full(12)