From bf83b2d5b3a126bd6f9f60736015d7563f4f494e Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Tue, 20 Apr 2010 11:09:09 -0700 Subject: [PATCH] Getting started with the new layout: * Added susy and css-slideshow * Converted legacy css to scss, moved it and updated reference. * extracted some javascript to a file so it can be shared. --- doc-src/.compass/config.rb | 3 +- doc-src/Rules | 27 +- doc-src/assets/javascripts/fixups.js | 10 + doc-src/config.yaml | 1 + doc-src/content/index.haml | 2 +- doc-src/content/stylesheets/_base.sass | 64 ++ doc-src/content/stylesheets/_defaults.sass | 136 ++++ doc-src/content/stylesheets/_slideshow.sass | 14 + doc-src/content/stylesheets/example.sass | 26 - doc-src/content/stylesheets/ie.sass | 7 + .../content/stylesheets/legacy/example.scss | 25 + doc-src/content/stylesheets/legacy/main.scss | 157 ++++ .../stylesheets/legacy/partials/_syntax.scss | 2 + .../legacy/partials/syntax/_coderay.scss | 211 ++++++ .../legacy/partials/syntax/_pygments.scss | 151 ++++ .../content/stylesheets/legacy/screen.scss | 675 ++++++++++++++++++ doc-src/content/stylesheets/main.sass | 157 ---- .../content/stylesheets/partials/_syntax.sass | 2 - .../stylesheets/partials/syntax/_coderay.sass | 211 ------ .../partials/syntax/_pygments.sass | 209 ------ doc-src/content/stylesheets/print.sass | 20 + doc-src/content/stylesheets/screen.sass | 263 +++++++ doc-src/layouts/default.haml | 14 +- doc-src/layouts/example.haml | 2 +- doc-src/layouts/main.haml | 51 ++ 25 files changed, 1812 insertions(+), 628 deletions(-) create mode 100644 doc-src/assets/javascripts/fixups.js create mode 100644 doc-src/content/stylesheets/_base.sass create mode 100644 doc-src/content/stylesheets/_defaults.sass create mode 100644 doc-src/content/stylesheets/_slideshow.sass delete mode 100644 doc-src/content/stylesheets/example.sass create mode 100644 doc-src/content/stylesheets/ie.sass create mode 100644 doc-src/content/stylesheets/legacy/example.scss create mode 100644 doc-src/content/stylesheets/legacy/main.scss create mode 100644 doc-src/content/stylesheets/legacy/partials/_syntax.scss create mode 100644 doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss create mode 100644 doc-src/content/stylesheets/legacy/partials/syntax/_pygments.scss create mode 100644 doc-src/content/stylesheets/legacy/screen.scss delete mode 100644 doc-src/content/stylesheets/main.sass delete mode 100644 doc-src/content/stylesheets/partials/_syntax.sass delete mode 100644 doc-src/content/stylesheets/partials/syntax/_coderay.sass delete mode 100644 doc-src/content/stylesheets/partials/syntax/_pygments.sass create mode 100644 doc-src/content/stylesheets/print.sass create mode 100644 doc-src/content/stylesheets/screen.sass create mode 100644 doc-src/layouts/main.haml diff --git a/doc-src/.compass/config.rb b/doc-src/.compass/config.rb index 676ed43f..f3f04ac1 100644 --- a/doc-src/.compass/config.rb +++ b/doc-src/.compass/config.rb @@ -1,5 +1,6 @@ # Require any additional compass plugins here. -# require 'susy' +require 'susy' +require 'css-slideshow' # Set this to the root of your project when deployed: http_path = "/docs" diff --git a/doc-src/Rules b/doc-src/Rules index d6b5c623..5fc90413 100644 --- a/doc-src/Rules +++ b/doc-src/Rules @@ -6,26 +6,38 @@ puts "Compass running from: #{Compass.lib_directory}" Compass.add_configuration "#{File.dirname(__FILE__)}/.compass/config.rb" -SITE_ROOT = "/docs" +SITE_ROOT = "/docs" compile '/assets/*/' do nil end -['/examples/*/markup/', '/examples/*/stylesheet/', '/examples/*/background/'].each do |ex_file| - compile ex_file do +['markup', 'stylesheet', 'background'].each do |ex_file| + compile "/examples/*/#{ex_file}/" do nil end end +compile '/' do + filter :haml, :ugly => true + layout 'main' +end + compile '/examples/*/' do filter :haml, :ugly => true filter :highlight if ENV['SYNTAX'] layout 'example' end -compile '/stylesheets/*/' do - filter :sass, Compass.sass_engine_options +skip = Proc.new{nil} +sass_options = Compass.sass_engine_options + +(0..5).each do |i| + compile("/stylesheets/#{'*/' * i}_*/") {nil} +end + +compile '/stylesheets/*' do + filter :sass, sass_options.merge(:syntax => item[:extension].to_sym) end compile '/reference/*/' do @@ -39,9 +51,8 @@ compile '*' do layout 'default' end -route '/stylesheets/*/_*/' do - # don't output partials, so return nil - nil +(0..5).each do |i| + route("/stylesheets/#{'*/' * i}_*/") {nil} end route '/assets/css/*/' do diff --git a/doc-src/assets/javascripts/fixups.js b/doc-src/assets/javascripts/fixups.js new file mode 100644 index 00000000..93916f58 --- /dev/null +++ b/doc-src/assets/javascripts/fixups.js @@ -0,0 +1,10 @@ +$(function(){ + $('span.color').each(function(i,e){ + e = $(e); + e.after(''); + }); + $('span.arg[data-default-value]').each(function(i,e){ + e = $(e); + e.attr("title", "Defaults to: " + e.attr("data-default-value")) + }) +}); diff --git a/doc-src/config.yaml b/doc-src/config.yaml index 02dacb5e..ba6f66a5 100644 --- a/doc-src/config.yaml +++ b/doc-src/config.yaml @@ -6,4 +6,5 @@ data_sources: - items_root: /assets layouts_root: /assets type: filesystem_assets +text_extensions: [ 'css', 'erb', 'haml', 'htm', 'html', 'js', 'less', 'markdown', 'md', 'php', 'rb', 'sass', 'scss', 'txt' ] output_dir: .. diff --git a/doc-src/content/index.haml b/doc-src/content/index.haml index 4174ff4d..bf9e8240 100644 --- a/doc-src/content/index.haml +++ b/doc-src/content/index.haml @@ -19,7 +19,7 @@ body_id: home This screencast will walk you through getting set up, learning Sass, and then how to use Compass to style a webpage. - + %h2 Bugs Reports, Discussions, Support diff --git a/doc-src/content/stylesheets/_base.sass b/doc-src/content/stylesheets/_base.sass new file mode 100644 index 00000000..78f8542f --- /dev/null +++ b/doc-src/content/stylesheets/_base.sass @@ -0,0 +1,64 @@ +//** +// Susy: Fixed-Elastic-Fluid grids without all the math +// By: Eric A. Meyer and OddBird Collective +// Site: www.oddbird.net/susy/ +//** + +// FONT-SIZE +// Override these values as needed (defaults are 12/18) +$base-font-size: 16px + +$base-line-height: 24px + +// GRID +// Set these values as needed for your grid layout. +// - defaults are shown. +$total-cols: 12 + +$col-width: 3.5em + +$gutter-width: 2em + +$side-gutter-width: 1em + +// OMEGA_FLOAT +// By default, +omega elements are floated right. +// You can override that globally here: +// !omega_float = "right" + +// HACKS +// Are you using hacks or conditional comments? Susy makes both possible. +// Leave this as 'true' to use hacks, set it as false for conditional comments. +// Conditional comments will require overrides for +omega, +inline-block and +// several other mixins. +// !hacks = true + +// SUSY +// Don't move this @import above the GRID and FONT-SIZE overrides. +@import susy/susy + +// COLORS +// Set any colors you will need later. +$base: black + +$alt: #005498 + +// FONTS +// Give yourself some font stacks to work with. +=sans-family + font-family: Helvetica, Arial, sans-serif + +=serif-family + font-family: Baskerville, Palatino, serif + +// OTHER MIXINS +// Mixins set here will be available in defaults, screen, print and IE +// Or anywhere you import either base.sass or defaults.sass +=skip-links + a + +skip-link + width: 100% + +#skip-links + position: relative + +skip-links diff --git a/doc-src/content/stylesheets/_defaults.sass b/doc-src/content/stylesheets/_defaults.sass new file mode 100644 index 00000000..1675bf52 --- /dev/null +++ b/doc-src/content/stylesheets/_defaults.sass @@ -0,0 +1,136 @@ +//** DEFAULT STYLES **// +// Don't forget to set your default styles. + +// Get all the details and mixins from base.sass +@import base + +// Reset browser defaults, and prepare block-level HTML5 elements +@import susy/reset + +/* @group defaults + +body + +sans-family + color: $base + +/* @group links + +\:focus + outline: 1px dotted $alt + +a + &:link, &:visited + color: $alt + text-decoration: none + &:focus, &:hover, &:active + color: $alt - #222222 + +/* @end + +/* @group inline tags + +cite + font-style: italic + +em + font-style: italic + +strong + font-weight: bold + +ins + text-decoration: underline + +del + text-decoration: line-through + +q + font-style: italic + em + font-style: normal + +/* @end + +/* @group replaced tags + +img + vertical-align: bottom + +/* @end + +/* @group headers + +h1, h2, h3, h4, h5, h6 + font-weight: bold + +/* @end + +/* @group block tags + +p + +leader + +trailer + +=list-default($ol: false) + +leader + +trailer + margin-left: 3em + @if $ol + list-style: decimal + @else + list-style: disc + +=no-style-list + +no-bullets + margin: 0 + padding: 0 + +ol + +list-default(ol) + +ul + +list-default + +blockquote + margin: $base-rhythm-unit + +serif-family + +/* @end + +/* @group tables + +/* tables still need 'cellspacing="0"' in the markup + +table + width: 100% + +th + font-weight: bold + +/* @end + +/* @group forms + +fieldset + +trailer + +legend + font-weight: bold + font-variant: small-caps + +label + display: block + +legend + label + margin-top: 0 + +textarea, input:not([type="radio"]) + +box-sizing(border-box) + width: 100% + +button + vertical-align: top + +/* @end + +/* @end diff --git a/doc-src/content/stylesheets/_slideshow.sass b/doc-src/content/stylesheets/_slideshow.sass new file mode 100644 index 00000000..db0c9f31 --- /dev/null +++ b/doc-src/content/stylesheets/_slideshow.sass @@ -0,0 +1,14 @@ +// CSS-only Lightboxes +// Plugin by Eric Meyer - http://www.oddbird.net/ +// Based on the work of Jenna Smith - http://growldesign.co.uk/ + +// Compatible with IE6+, Mozilla and Webkit browsers. +// **Not compatible with Opera without Javascript help** + +// Override with the proper class names for your slide/slide-nav containers +$slide-container: ".slides" + +$max-slides: 10 + +// import slideshow +@import css-slideshow \ No newline at end of file diff --git a/doc-src/content/stylesheets/example.sass b/doc-src/content/stylesheets/example.sass deleted file mode 100644 index 3d6f25d6..00000000 --- a/doc-src/content/stylesheets/example.sass +++ /dev/null @@ -1,26 +0,0 @@ -body - font-family: "Lucida Grande", Arial, sans-serif - -#example - width: 100% - > tbody > tr > td - border: 2px solid black - vertical-align: top - width: 48% - min-width: 400px - pre - margin: 0 - overflow: auto - td.line_numbers, td.linenos - padding: 6px 3px - border-right: 1px solid #333 - background-color: #ccc - td.code - padding: 6px 3px - max-width: 400px - pre - margin: 0 - overflow: auto - -@import partials/syntax - \ No newline at end of file diff --git a/doc-src/content/stylesheets/ie.sass b/doc-src/content/stylesheets/ie.sass new file mode 100644 index 00000000..67edc67a --- /dev/null +++ b/doc-src/content/stylesheets/ie.sass @@ -0,0 +1,7 @@ +/* Welcome to Susy. Use this file to write IE specific override styles. + * Import this file using the following HTML or equivalent: + * + +@import base diff --git a/doc-src/content/stylesheets/legacy/example.scss b/doc-src/content/stylesheets/legacy/example.scss new file mode 100644 index 00000000..1cd611c9 --- /dev/null +++ b/doc-src/content/stylesheets/legacy/example.scss @@ -0,0 +1,25 @@ +body { + font-family: "Lucida Grande", Arial, sans-serif; } + +#example { + width: 100%; + > tbody > tr > td { + border: 2px solid black; + vertical-align: top; + width: 48%; + min-width: 400px; + pre { + margin: 0; + overflow: auto; } } + td.line_numbers, td.linenos { + padding: 6px 3px; + border-right: 1px solid #333333; + background-color: #cccccc; } + td.code { + padding: 6px 3px; + max-width: 400px; + pre { + margin: 0; + overflow: auto; } } } + +@import "partials/syntax"; diff --git a/doc-src/content/stylesheets/legacy/main.scss b/doc-src/content/stylesheets/legacy/main.scss new file mode 100644 index 00000000..ecc251fe --- /dev/null +++ b/doc-src/content/stylesheets/legacy/main.scss @@ -0,0 +1,157 @@ +@import "compass/utilities"; +@import "compass/css3"; +@import "blueprint"; + +body { + font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif; + line-height: 1.5; + font-size: 13px; } + +// Layout +#container { + @include pie-clearfix; } + +#main { + @include column(16, true); + @include prepend(8); } + +#sidebar { + @include column(8); + @include pull(24, true); + background: #f5f5f5; + h2 { + font-size: 16px; } + ul, ol { + list-style-position: inside; + padding-left: 10px; } + .selected { + font-weight: bold; } + a { + @include hover-link; } } + +#footer { + @include column(24); + background: #f5f5f5; + border-top: 2px solid #dddddd; + margin: 1em 0; + .legalese { + @include column(12); } + hr { + @include colruler; } + .links { + @include column(12, true); + ul { + @include no-bullets; + a { + @include hover-link; } } } } + +// Typography + +blockquote { + font-style: italic; } + +hr { + background: none; + height: 0; + font-size: 0; + line-height: 0; + border: none; + border-top: 2px solid #cccccc; } + +// Regular data tables +table.datagrid { + border-collapse: collapse; + th { + background: #eeeeee; } + td, + th { + border: 1px solid #cccccc; + text-align: left; + padding: 5px; + cell-spacing: 0; } } + +// Reference + +body.reference { + h3 { + &.mixin, &.constant { + font-family: Monaco, courier; + font-weight: 200; + @include text-shadow; + background-color: #eeeeee; + border: 1px solid #aaaaaa; + padding: 0.75em; + margin-bottom: 0; + a.permalink { + @include hover-link; + @include link-colors(inherit, inherit); } } + .arg[data-default-value] { + color: #666666; + &:before { + content: "["; } + &:after { + content: "]"; } } } + .source-documentation { + background-color: #eeeeee; + border: 1px solid #aaaaaa; + border-top-width: 0; + padding: 0.75em; } + dl.source-documentation { + margin-top: 0; + dt { + font-weight: bold; + float: left; + margin-right: 15px; } + dt:not(:first-child) { + margin-top: 1em; } } + a.view-source { + float: right; + margin: 1.25em; } + 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%; } } + +table.constants { + width: 100%; + @include alternating-rows-and-columns(#eeeeee, #bbbbbb, #191919); + @include outer-table-borders(1px); + @include inner-table-borders(1px); + td, th { + padding: 0.25em 0.5em; } } + +ol#breadcrumbs { + @include horizontal-list; + @include no-bullets; + li:after { + content: " > "; } + li.last:after { + content: ""; } + li.last { + visibility: hidden; } } + +body#home #logo { + @include replace-text(unquote("compass.png"), 0px); + height: 159px; } + +p code { + border: 1px solid #cccccc; + background-color: #f2f2f2; + padding: 2px; } + +body#reference-compass-css3 { + #border-radius { + padding: 2px 8px; + @include border-radius(0.75em); } + #text-shadow { + @include text-shadow(red); } } + +@import "partials/syntax"; diff --git a/doc-src/content/stylesheets/legacy/partials/_syntax.scss b/doc-src/content/stylesheets/legacy/partials/_syntax.scss new file mode 100644 index 00000000..848cc852 --- /dev/null +++ b/doc-src/content/stylesheets/legacy/partials/_syntax.scss @@ -0,0 +1,2 @@ +@import "syntax/coderay"; +@import "syntax/pygments"; diff --git a/doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss b/doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss new file mode 100644 index 00000000..9b91e48c --- /dev/null +++ b/doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss @@ -0,0 +1,211 @@ +.CodeRay { + .debug { + color: white !important; + background: blue !important; } + .af { + color: #0000cc; } + .an { + color: #000077; } + .at { + color: #ff0088; } + .av { + color: #770000; } + .aw { + color: #cc0000; } + .bi { + color: #550099; + font-weight: bold; } + .c { + color: #888888; } + .ch { + color: #0044dd; + .k { + color: #0044dd; } + .dl { + color: #003399; } } + .cl { + color: #bb0066; + font-weight: bold; } + .cm { + color: #aa0088; + font-weight: bold; } + .co { + color: #003366; + font-weight: bold; } + .cr { + color: #00aa00; } + .cv { + color: #336699; } + .de { + color: #bb00bb; } + .df { + color: #009999; + font-weight: bold; } + .di { + color: #008888; + font-weight: bold; } + .dl { + color: black; } + .do { + color: #997700; } + .dt { + color: #3344bb; } + .ds { + color: #dd4422; + font-weight: bold; } + .e { + color: #666666; + font-weight: bold; } + .en { + color: #880000; + font-weight: bold; } + .er { + color: red; + background-color: #ffaaaa; } + .ex { + color: #cc0000; + font-weight: bold; } + .fl { + color: #6600ee; + font-weight: bold; } + .fu { + color: #0066bb; + font-weight: bold; } + .gv { + color: #dd7700; + font-weight: bold; } + .hx { + color: #005588; + font-weight: bold; } + .i { + color: #0000dd; + font-weight: bold; } + .ic { + color: #bb4444; + font-weight: bold; } + .il { + background: #dddddd; + color: black; + .il { + background: #cccccc; + .il { + background: #bbbbbb; } } + .idl { + background: #dddddd; + font-weight: bold; + color: #666666; } } + .idl { + background-color: #bbbbbb; + font-weight: bold; + color: #666666; } + .im { + color: red; } + .in { + color: #bb22bb; + font-weight: bold; } + .iv { + color: #3333bb; } + .la { + color: #997700; + font-weight: bold; } + .lv { + color: #996633; } + .oc { + color: #4400ee; + font-weight: bold; } + .of { + color: black; + font-weight: bold; } + .pc { + color: #003388; + font-weight: bold; } + .pd { + color: #336699; + font-weight: bold; } + .pp { + color: #557799; } + .ps { + color: #0000cc; + font-weight: bold; } + .pt { + color: #007744; + font-weight: bold; } + .r, .kw { + color: #008800; + font-weight: bold; } + .ke { + color: #880088; + .dl { + color: #660066; } + .ch { + color: #8800ff; } } + .vl { + color: #008888; } + .rx { + background-color: #fff0ff; + .k { + color: #880088; } + .dl { + color: #440044; } + .mod { + color: #cc22cc; } + .fu { + color: #440044; + font-weight: bold; } } + .s { + background-color: #fff0f0; + color: #dd2200; + .s { + background-color: #ffe0e0; + .s { + background-color: #ffd0d0; } } + .ch { + color: #bb00bb; } + .dl { + color: #771100; } } + .sh { + background-color: #f0fff0; + color: #22bb22; + .dl { + color: #116611; } } + .sy { + color: #aa6600; + .k { + color: #aa6600; } + .dl { + color: #663300; } } + .ta { + color: #007700; } + .tf { + color: #007700; + font-weight: bold; } + .ts { + color: #dd7700; + font-weight: bold; } + .ty { + color: #333399; + font-weight: bold; } + .v { + color: #003366; } + .xt { + color: #444444; } + .ins { + background: #aaffaa; } + .del { + background: #ffaaaa; } + .chg { + color: #aaaaff; + background: #000077; } + .head { + color: #ff88ff; + background: #550055; } + .ins .ins { + color: #008800; + font-weight: bold; } + .del .del { + color: #880000; + font-weight: bold; } + .chg .chg { + color: #6666ff; } + .head .head { + color: #ff44ff; } } diff --git a/doc-src/content/stylesheets/legacy/partials/syntax/_pygments.scss b/doc-src/content/stylesheets/legacy/partials/syntax/_pygments.scss new file mode 100644 index 00000000..8622ad5f --- /dev/null +++ b/doc-src/content/stylesheets/legacy/partials/syntax/_pygments.scss @@ -0,0 +1,151 @@ +.highlight { + .hll { + background-color: #ffffcc; } + .c { + color: #606060; + font-style: italic; } + .err { + color: #f00000; + background-color: #f0a0a0; } + .k { + color: #208090; + font-weight: bold; } + .o { + color: #303030; } + .cm { + color: #606060; + font-style: italic; } + .cp { + color: #507090; } + .c1 { + color: #606060; + font-style: italic; } + .cs { + color: #c00000; + font-weight: bold; + font-style: italic; } + .gd { + color: #a00000; } + .ge { + font-style: italic; } + .gr { + color: red; } + .gh { + color: navy; + font-weight: bold; } + .gi { + color: #00a000; } + .go { + color: gray; } + .gp { + color: #c65d09; + font-weight: bold; } + .gs { + font-weight: bold; } + .gu { + color: purple; + font-weight: bold; } + .gt { + color: #0040d0; } + .kc, .kd, .kn { + color: #208090; + font-weight: bold; } + .kp { + color: #0080f0; + font-weight: bold; } + .kr { + color: #208090; + font-weight: bold; } + .kt { + color: #6060f0; + font-weight: bold; } + .m { + color: #6000e0; + font-weight: bold; } + .s { + background-color: #e0e0ff; } + .na { + color: #000070; } + .nb { + color: #007020; } + .nc { + color: #e090e0; + font-weight: bold; } + .no { + color: #50e0d0; + font-weight: bold; } + .nd { + color: #505050; + font-weight: bold; } + .ni { + color: maroon; } + .ne { + color: #f00000; + font-weight: bold; } + .nf { + color: #50e0d0; + font-weight: bold; } + .nl { + color: #907000; + font-weight: bold; } + .nn { + color: #0e84b5; + font-weight: bold; } + .nt { + color: #007000; } + .nv { + color: #003060; } + .ow { + color: black; + font-weight: bold; } + .w { + color: #bbbbbb; } + .mf { + color: #6000e0; + font-weight: bold; } + .mh { + color: #005080; + font-weight: bold; } + .mi { + color: #6060f0; + font-weight: bold; } + .mo { + color: #4000e0; + font-weight: bold; } + .sb { + background-color: #e0e0ff; } + .sc { + color: #8080f0; } + .sd { + color: #d04020; } + .s2 { + background-color: #e0e0ff; } + .se { + color: #606060; + font-weight: bold; + background-color: #e0e0ff; } + .sh { + background-color: #e0e0ff; } + .si { + background-color: #e0e0e0; } + .sx { + color: #f08080; + background-color: #e0e0ff; } + .sr { + color: black; + background-color: #e0e0ff; } + .s1 { + background-color: #e0e0ff; } + .ss { + color: #f0c080; } + .bp { + color: #007020; } + .vc { + color: #c0c0f0; } + .vg { + color: #f08040; } + .vi { + color: #a0a0f0; } + .il { + color: #6060f0; + font-weight: bold; } } diff --git a/doc-src/content/stylesheets/legacy/screen.scss b/doc-src/content/stylesheets/legacy/screen.scss new file mode 100644 index 00000000..f52702dd --- /dev/null +++ b/doc-src/content/stylesheets/legacy/screen.scss @@ -0,0 +1,675 @@ +// XXX Placeholder +#skip-links { + position: relative; + a { + position: absolute; + top: -9999em; + display: block; + width: 100%; + &:focus { + top: 0; + z-index: 999; } } } + +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; } + +*:focus { + outline: 0; } + +body { + line-height: 1; + color: black; + background: white; } + +ol, ul { + list-style: none; } + +table { + border-collapse: separate; + border-spacing: 0; + vertical-align: middle; } + +caption, th, td { + text-align: left; + font-weight: normal; + vertical-align: middle; } + +q, blockquote { + quotes: "" ""; } + +q { + &:before, &:after { + content: ""; } } + +blockquote { + &:before, &:after { + content: ""; } } + +a img { + border: none; } + +section, article, aside, header, footer, nav, dialog, figure { + display: block; } + +body { + font-family: Helvetica, Arial, sans-serif; + color: black; } + +:focus { + outline: 1px dotted #005498; } + +a { + &:link, &:visited { + color: #005498; + text-decoration: none; } + &:focus, &:hover, &:active { + color: #003276; } } + +cite, em { + font-style: italic; } + +strong { + font-weight: bold; } + +ins { + text-decoration: underline; } + +del { + text-decoration: line-through; } + +q { + font-style: italic; + em { + font-style: normal; } } + +img { + vertical-align: bottom; } + +h1, h2, h3, h4, h5, h6 { + font-weight: bold; } + +p { + margin-top: 1.5em; + margin-bottom: 1.5em; } + +ol { + margin-top: 1.5em; + margin-bottom: 1.5em; + margin-left: 3em; + list-style: decimal; } + +ul { + margin-top: 1.5em; + margin-bottom: 1.5em; + margin-left: 3em; + list-style: disc; } + +blockquote { + margin: 1.5em; + font-family: Baskerville, Palatino, serif; } + +table { + width: 100%; } + +th { + font-weight: bold; } + +fieldset { + margin-bottom: 1.5em; } + +legend { + font-weight: bold; + font-variant: small-caps; } + +label { + display: block; } + +legend + label { + margin-top: 0; } + +textarea, input:not([type="radio"]) { + /* Mozilla (FireFox, Camino) */ + -moz-box-sizing: border-box; + /* Webkit (Safari, Chrome) */ + -webkit-box-sizing: border-box; + /* IE (8) */ + -ms-box-sizing: border-box; + /* CSS3 */ + box-sizing: border-box; + width: 100%; } + +button { + vertical-align: top; } + +body { + font-size: 100%; + line-height: 1.5em; } + +html > body { + font-size: 16px; } + +body { + text-align: center; } + +header[role="banner"] h1, #compass-nav { + display: inline; + float: left; + width: 46.97%; + margin-right: 3.03%; } + +header[role="banner"] { + background: #f9f9f9; + div { + overflow: hidden; + display: inline-block; + text-align: left; + margin-left: auto; + margin-right: auto; + width: 66em; + max-width: 100%; + display: block; } + h1 { + margin-left: 1.515%; + font-size: 1.125em; + line-height: 1.333em; + text-transform: uppercase; + a { + display: block; + padding-top: 2.667em; + padding-bottom: 2em; } } } + +#compass-nav { + display: inline; + float: right; + margin-right: 1.515%; + /* ugly hacks for IE6-7 */ + #margin-left: -2em; + /* end ugly hacks */ + text-align: right; + ul { + margin: 0; + padding: 0; + border: 0; + outline: 0; + overflow: hidden; + display: inline-block; + padding-top: 3em; + margin-bottom: 2.25em; + display: block; + li { + list-style-image: none; + list-style-type: none; + margin-left: 0px; + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + /* ugly hacks for IE6-7 */ + #display: inline; + #vertical-align: auto; + /* end ugly hacks */ + white-space: no-wrap; + padding-left: 0; + padding-right: 0; } } + a { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + /* ugly hacks for IE6-7 */ + #display: inline; + #vertical-align: auto; + /* end ugly hacks */ + font-size: 0.875em; + line-height: 1.714em; + padding: 0 1em; + border-top-left-radius: 0.5em; + -moz-border-radius-topleft: 0.5em; + -webkit-border-top-left-radius: 0.5em; + border-bottom-right-radius: 0.5em; + -moz-border-radius-bottomright: 0.5em; + -webkit-border-bottom-right-radius: 0.5em; } } + +body[id="home"], body[id$="-docs"] { + #compass-nav a[href="/docs/"] { + background: #cccccc; + cursor: default; } } + +#docs-nav { + display: inline-block; + border-top-style: solid; + border-top-width: 0.063em; + padding-top: 0.313em; + border-bottom-style: solid; + border-bottom-width: 0.063em; + padding-bottom: 0.313em; + position: relative; + height: 1.5em; + border-color: #cccccc; + background-color: #eeeeee; + &:after { + content: " "; + display: block; + height: 0; + clear: both; + overflow: hidden; + visibility: hidden; } + display: block; + ul { + margin: 0; + padding: 0; + border: 0; + outline: 0; + overflow: hidden; + display: inline-block; + overflow: hidden; + display: inline-block; + text-align: left; + margin-left: auto; + margin-right: auto; + width: 66em; + max-width: 100%; + position: relative; + z-index: 2; + overflow: visible; + display: block; + li { + list-style-image: none; + list-style-type: none; + margin-left: 0px; + white-space: nowrap; + display: inline; + float: left; + padding-left: 4px; + padding-right: 4px; + &:first-child, &.first { + padding-left: 0px; } + &:last-child, &.last { + padding-right: 0px; } + top: -0.75em; + margin-bottom: -0.75em; + position: relative; } + display: block; } + a { + &:link, &:visited { + display: block; + padding: 0 1em; + border: 1px solid #eeeeee; + border-top-style: solid; + border-top-width: 0.063em; + padding-top: 0.688em; + border-bottom-style: solid; + border-bottom-width: 0.063em; + padding-bottom: 0.313em; + border-bottom: 0; + border-top-left-radius: 0.5em; + -moz-border-radius-topleft: 0.5em; + -webkit-border-top-left-radius: 0.5em; + border-top-right-radius: 0.5em; + -moz-border-radius-topright: 0.5em; + -webkit-border-top-right-radius: 0.5em; + background: #dddddd; } + &:hover, &:focus, &:active { + background-color: #eeeeee; + border-color: #dddddd; } } } + +.home #docs-nav a[href="index.php"] { + &:link, &:visited { + border-bottom-style: solid; + border-bottom-width: 0.063em; + padding-bottom: 0.313em; + cursor: default; + background: white; + border-color: #cccccc; + border-bottom-color: white; } } + +.core #docs-nav a[href="core.php"] { + &:link, &:visited { + border-bottom-style: solid; + border-bottom-width: 0.063em; + padding-bottom: 0.313em; + cursor: default; + background: white; + border-color: #cccccc; + border-bottom-color: white; } } + +/* line 83, ../src/screen.sass */ + +.css3 #docs-nav a[href="core.php"] { + &:link, &:visited { + border-bottom-style: solid; + border-bottom-width: 0.063em; + padding-bottom: 0.313em; + cursor: default; + background: white; + border-color: #cccccc; + border-bottom-color: white; } } + +.utils #docs-nav a[href="core.php"] { + &:link, &:visited { + border-bottom-style: solid; + border-bottom-width: 0.063em; + padding-bottom: 0.313em; + cursor: default; + background: white; + border-color: #cccccc; + border-bottom-color: white; } } + +.gradient #docs-nav a[href="core.php"] { + &:link, &:visited { + border-bottom-style: solid; + border-bottom-width: 0.063em; + padding-bottom: 0.313em; + cursor: default; + background: white; + border-color: #cccccc; + border-bottom-color: white; } } + +.demo #docs-nav a[href="core.php"] { + &:link, &:visited { + border-bottom-style: solid; + border-bottom-width: 0.063em; + padding-bottom: 0.313em; + cursor: default; + background: white; + border-color: #cccccc; + border-bottom-color: white; } } + +#search-docs { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 100%; + color: #999999; + form { + overflow: hidden; + display: inline-block; + text-align: left; + margin-left: auto; + margin-right: auto; + width: 66em; + max-width: 100%; + display: block; } + p { + display: inline; + float: left; + width: 21.97%; + margin-right: 3.03%; + display: inline; + float: right; + margin-right: 1.515%; + /* ugly hacks for IE6-7 */ + #margin-left: -2em; + /* end ugly hacks */ + margin-top: 0.375em; + margin-bottom: 0em; + label { + display: inline; + float: left; + width: 31.034%; + margin: 0; + text-align: right; } + input { + display: inline; + float: left; + width: 62.069%; + margin-right: 13.793%; + display: inline; + float: right; + margin-right: 1.515%; + /* ugly hacks for IE6-7 */ + #margin-left: -2em; } } } + +#page { + overflow: hidden; + display: inline-block; + text-align: left; + margin-left: auto; + margin-right: auto; + width: 66em; + max-width: 100%; + margin-top: 4.5em; + display: block; } + +aside[role="sidebar"] { + display: inline; + float: left; + width: 21.97%; + margin-right: 3.03%; + margin-left: 1.515%; + font-size: 0.875em; + line-height: 1.714em; + margin-top: 3.429em; + color: #999999; + section, p { + margin-top: 1.714em; + margin-bottom: 1.714em; } } + +footer[role="contentinfo"] { + overflow: hidden; + display: inline-block; + text-align: left; + margin-left: auto; + margin-right: auto; + width: 66em; + max-width: 100%; + margin-top: 4.5em; + color: #999999; + display: block; + .license { + clear: both; + margin-right: 1.515%; + margin-left: 1.515%; + font-size: 0.875em; + line-height: 1.714em; } } + +article > nav { + border-top: 0.063em solid #cccccc; + margin-top: -0.063em; + color: #cccccc; + ul { + list-style: none; + margin: 0; + padding: 0; + li { + list-style-image: none; + list-style-type: none; + margin-left: 0px; } } + li { + display: inline; + float: left; + width: 48.438%; + margin-right: 3.125%; + &:last-child { + display: inline; + float: right; + margin-right: 0; + /* ugly hacks for IE6-7 */ + #margin-left: -2em; + /* end ugly hacks */ + text-align: right; } } } + +#content { + display: inline; + float: left; + width: 71.97%; + margin-right: 3.03%; + display: inline; + float: right; + margin-right: 1.515%; + /* ugly hacks for IE6-7 */ + #margin-left: -2em; + /* end ugly hacks */ + h1 { + font-size: 2.25em; + line-height: 1.333em; + margin-bottom: 0.667em; } } + +.demo #content { + float: none; + display: block; + margin: 0; + width: auto; + clear: both; + margin-right: 1.515%; + margin-left: 1.515%; + h1 { + text-align: center; } } + +#module-nav { + margin-top: 0.375em; + border-bottom-style: solid; + border-bottom-width: 0.063em; + padding-bottom: 0.313em; + margin-bottom: 0.75em; + border-color: #cccccc; + clear: both; + ul { + margin: 0; + padding: 0; + overflow: hidden; + display: inline-block; + text-align: left; + margin-left: auto; + margin-right: auto; + width: 66em; + max-width: 100%; + display: block; + li { + display: inline; + float: left; + margin-right: 1.5em; + &:first-child { + margin-left: 1.515%; } } } + + #page { + margin-top: 2.25em; } } + +#local-nav { + margin-top: 1.714em; + ul { + list-style: none; + margin: 0; + padding: 0; + text-align: right; + li { + list-style-image: none; + list-style-type: none; + margin-left: 0px; } } + h2 { + margin-top: 1.714em; + border-bottom: 1px solid #cccccc; + margin-bottom: 0.602em; + text-align: left; } } + +#code { + clear: both; + display: inline-block; + font-size: 0.75em; + line-height: 2em; + border-top-style: solid; + border-top-width: 0.083em; + padding-top: 1.917em; + border-bottom-style: solid; + border-bottom-width: 0.083em; + padding-bottom: 1.917em; + border-color: #cccccc; + font-family: monospace; + &:after { + content: " "; + display: block; + height: 0; + clear: both; + overflow: hidden; + visibility: hidden; } + display: block; + nav { + background: #eeeeee; + margin-bottom: 2em; + ul { + margin: 0; + padding: 0; + border: 0; + outline: 0; + overflow: hidden; + display: inline-block; + text-align: right; + display: block; + li { + list-style-image: none; + list-style-type: none; + margin-left: 0px; + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + /* ugly hacks for IE6-7 */ + #display: inline; + #vertical-align: auto; + /* end ugly hacks */ + white-space: no-wrap; + padding-left: 0.4em; + padding-right: 0.4em; } } } + section { + position: relative; + display: inline; + float: left; + width: 48.438%; + margin-right: 3.125%; + .slides { + width: 100%; + overflow: hidden; + > ul { + margin: 0; + padding: 0; + width: 1030%; + list-style: none; + overflow: hidden; + display: inline-block; + li { + list-style-image: none; + list-style-type: none; + margin-left: 0px; } + display: block; + > li { + display: inline; + float: left; + width: 9.709%; + margin-right: 0.049%; } } } + &#styles { + display: inline; + float: right; + margin-right: 0; + /* ugly hacks for IE6-7 */ + #margin-left: -2em; } } + .slides li { + overflow: auto; } + table { + .lino { + color: #666666; + background: #dddddd; + padding: 0 0.4em; } + .source { + width: 100%; + padding: 0 0.4em; } } } + +#demo { + clear: both; + padding-top: 1.5em; + border-bottom-style: solid; + border-bottom-width: 0.063em; + padding-bottom: 1.438em; + border-color: #cccccc; + .gradient { + margin: 1.5em 0; + height: 6em; + background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, white), color-stop(100%, #dddddd)); + background-image: -moz-linear-gradient(left top, white 0%, #dddddd 100%); } } diff --git a/doc-src/content/stylesheets/main.sass b/doc-src/content/stylesheets/main.sass deleted file mode 100644 index ddf0863c..00000000 --- a/doc-src/content/stylesheets/main.sass +++ /dev/null @@ -1,157 +0,0 @@ -@import compass/utilities -@import compass/css3 -@import blueprint - -body - font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif - line-height: 1.5 - font-size: 13px - -// Layout -#container - +pie-clearfix - -#main - +column(16, true) - +prepend(8) - -#sidebar - +column(8) - +pull(24, true) - background: #F5F5F5 - h2 - font-size: 16px - ul, ol - list-style-position: inside - padding-left: 10px - .selected - font-weight: bold - a - +hover-link - -#footer - +column(24) - background: #F5F5F5 - border-top: 2px solid #ddd - margin: 1em 0 - .legalese - +column(12) - hr - +colruler - .links - +column(12, true) - ul - +no-bullets - a - +hover-link - -// Typography - -blockquote - :font-style italic - -hr - :background none - :height 0 - :font-size 0 - :line-height 0 - :border none - :border-top 2px solid #CCC - -// Regular data tables -table.datagrid - border-collapse: collapse - th - :background #EEE - td, - th - border: 1px solid #CCC - text-align: left - padding: 5px - cell-spacing: 0 - -// Reference - -body.reference - h3 - &.mixin, &.constant - font-family: Monaco, courier - font-weight: 200 - +text-shadow - background-color: #eee - border: 1px solid #aaa - padding: 0.75em - margin-bottom: 0 - a.permalink - +hover-link - +link-colors("inherit", "inherit") - .arg[data-default-value] - color: #666 - &:before - content: "[" - &:after - content: "]" - .source-documentation - background-color: #eee - border: 1px solid #aaa - border-top-width: 0 - padding: 0.75em - dl.source-documentation - margin-top: 0 - dt - font-weight: bold - float: left - margin-right: 15px - dt:not(:first-child) - margin-top: 1em - a.view-source - float: right - margin: 1.25em - span.color + span.swatch - margin: 0 3px 3px - border: 1px solid #333 - width: 1em - height: 1em - +inline-block - .color-snippet - width: 100px - height: 20px - +border-radius(3px) - a.help - font-size: 75% - -table.constants - width: 100% - +alternating-rows-and-columns(#EEE, #bbb, #191919) - +outer-table-borders(1px) - +inner-table-borders(1px) - td, th - padding: 0.25em 0.5em - -ol#breadcrumbs - +horizontal-list - +no-bullets - li:after - content: " > " - li.last:after - content: "" - li.last - visibility: hidden - -body#home #logo - +replace-text("compass.png", 0px) - height: 159px - -p code - border: 1px solid #ccc - background-color: #f2f2f2 - padding: 2px - -body#reference-compass-css3 - #border-radius - padding: 2px 8px - +border-radius(0.75em) - #text-shadow - +text-shadow(red) - -@import partials/syntax \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_syntax.sass b/doc-src/content/stylesheets/partials/_syntax.sass deleted file mode 100644 index 44b85c55..00000000 --- a/doc-src/content/stylesheets/partials/_syntax.sass +++ /dev/null @@ -1,2 +0,0 @@ -@import partials/syntax/coderay -@import partials/syntax/pygments \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/syntax/_coderay.sass b/doc-src/content/stylesheets/partials/syntax/_coderay.sass deleted file mode 100644 index 919f8a06..00000000 --- a/doc-src/content/stylesheets/partials/syntax/_coderay.sass +++ /dev/null @@ -1,211 +0,0 @@ -.CodeRay - .debug - color: white !important - background: blue !important - .af - color: #00C - .an - color: #007 - .at - color: #f08 - .av - color: #700 - .aw - color: #C00 - .bi - color: #509 - font-weight: bold - .c - color: #888 - .ch - color: #04D - .k - color: #04D - .dl - color: #039 - .cl - color: #B06 - font-weight: bold - .cm - color: #A08 - font-weight: bold - .co - color: #036 - font-weight: bold - .cr - color: #0A0 - .cv - color: #369 - .de - color: #B0B - .df - color: #099 - font-weight: bold - .di - color: #088 - font-weight: bold - .dl - color: black - .do - color: #970 - .dt - color: #34b - .ds - color: #D42 - font-weight: bold - .e - color: #666 - font-weight: bold - .en - color: #800 - font-weight: bold - .er - color: #F00 - background-color: #FAA - .ex - color: #C00 - font-weight: bold - .fl - color: #60E - font-weight: bold - .fu - color: #06B - font-weight: bold - .gv - color: #d70 - font-weight: bold - .hx - color: #058 - font-weight: bold - .i - color: #00D - font-weight: bold - .ic - color: #B44 - font-weight: bold - .il - background: #ddd - color: black - .il - background: #ccc - .il - background: #bbb - .idl - background: #ddd - font-weight: bold - color: #666 - .idl - background-color: #bbb - font-weight: bold - color: #666 - .im - color: #f00 - .in - color: #B2B - font-weight: bold - .iv - color: #33B - .la - color: #970 - font-weight: bold - .lv - color: #963 - .oc - color: #40E - font-weight: bold - .of - color: #000 - font-weight: bold - .pc - color: #038 - font-weight: bold - .pd - color: #369 - font-weight: bold - .pp - color: #579 - .ps - color: #00C - font-weight: bold - .pt - color: #074 - font-weight: bold - .r, .kw - color: #080 - font-weight: bold - .ke - color: #808 - .dl - color: #606 - .ch - color: #80f - .vl - color: #088 - .rx - background-color: #fff0ff - .k - color: #808 - .dl - color: #404 - .mod - color: #C2C - .fu - color: #404 - font-weight: bold - .s - background-color: #fff0f0 - color: #D20 - .s - background-color: #ffe0e0 - .s - background-color: #ffd0d0 - .ch - color: #b0b - .dl - color: #710 - .sh - background-color: #f0fff0 - color: #2B2 - .dl - color: #161 - .sy - color: #A60 - .k - color: #A60 - .dl - color: #630 - .ta - color: #070 - .tf - color: #070 - font-weight: bold - .ts - color: #D70 - font-weight: bold - .ty - color: #339 - font-weight: bold - .v - color: #036 - .xt - color: #444 - .ins - background: #afa - .del - background: #faa - .chg - color: #aaf - background: #007 - .head - color: #f8f - background: #505 - .ins .ins - color: #080 - font-weight: bold - .del .del - color: #800 - font-weight: bold - .chg .chg - color: #66f - .head .head - color: #f4f diff --git a/doc-src/content/stylesheets/partials/syntax/_pygments.sass b/doc-src/content/stylesheets/partials/syntax/_pygments.sass deleted file mode 100644 index f841225d..00000000 --- a/doc-src/content/stylesheets/partials/syntax/_pygments.sass +++ /dev/null @@ -1,209 +0,0 @@ -.highlight - .hll - background-color: #ffffcc - - .c - color: #606060 - font-style: italic - - .err - color: #F00000 - background-color: #F0A0A0 - - .k - color: #208090 - font-weight: bold - - .o - color: #303030 - - .cm - color: #606060 - font-style: italic - - .cp - color: #507090 - - .c1 - color: #606060 - font-style: italic - - .cs - color: #c00000 - font-weight: bold - font-style: italic - - .gd - color: #A00000 - - .ge - font-style: italic - - .gr - color: #FF0000 - - .gh - color: #000080 - font-weight: bold - - .gi - color: #00A000 - - .go - color: #808080 - - .gp - color: #c65d09 - font-weight: bold - - .gs - font-weight: bold - - .gu - color: #800080 - font-weight: bold - - .gt - color: #0040D0 - - .kc, .kd, .kn - color: #208090 - font-weight: bold - - .kp - color: #0080f0 - font-weight: bold - - .kr - color: #208090 - font-weight: bold - - .kt - color: #6060f0 - font-weight: bold - - .m - color: #6000E0 - font-weight: bold - - .s - background-color: #e0e0ff - - .na - color: #000070 - - .nb - color: #007020 - - .nc - color: #e090e0 - font-weight: bold - - .no - color: #50e0d0 - font-weight: bold - - .nd - color: #505050 - font-weight: bold - - .ni - color: #800000 - - .ne - color: #F00000 - font-weight: bold - - .nf - color: #50e0d0 - font-weight: bold - - .nl - color: #907000 - font-weight: bold - - .nn - color: #0e84b5 - font-weight: bold - - .nt - color: #007000 - - .nv - color: #003060 - - .ow - color: #000000 - font-weight: bold - - .w - color: #bbbbbb - - .mf - color: #6000E0 - font-weight: bold - - .mh - color: #005080 - font-weight: bold - - .mi - color: #6060f0 - font-weight: bold - - .mo - color: #4000E0 - font-weight: bold - - .sb - background-color: #e0e0ff - - .sc - color: #8080F0 - - .sd - color: #D04020 - - .s2 - background-color: #e0e0ff - - .se - color: #606060 - font-weight: bold - background-color: #e0e0ff - - .sh - background-color: #e0e0ff - - .si - background-color: #e0e0e0 - - .sx - color: #f08080 - background-color: #e0e0ff - - .sr - color: #000000 - background-color: #e0e0ff - - .s1 - background-color: #e0e0ff - - .ss - color: #f0c080 - - .bp - color: #007020 - - .vc - color: #c0c0f0 - - .vg - color: #f08040 - - .vi - color: #a0a0f0 - - .il - color: #6060f0 - font-weight: bold diff --git a/doc-src/content/stylesheets/print.sass b/doc-src/content/stylesheets/print.sass new file mode 100644 index 00000000..8d3f3ed7 --- /dev/null +++ b/doc-src/content/stylesheets/print.sass @@ -0,0 +1,20 @@ +/* Welcome to Susy. Use this file to define print styles. + * Import this file using the following HTML or equivalent: + * + +@import defaults + +=print + nav + display: none + * + float: none !important + body + +serif-family + font-size: 12pt + background: white + color: black + a:link:after, a:visited:after + content: " (" attr(href) ") " + ++print diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass new file mode 100644 index 00000000..fb584fd3 --- /dev/null +++ b/doc-src/content/stylesheets/screen.sass @@ -0,0 +1,263 @@ +/* Welcome to Susy. Use this file to define screen styles. + * Import this file using the following HTML or equivalent: + * + +@import defaults +@import slideshow + +/* @group STRUCTURE + ++susy + +header[role="banner"] h1, #compass-nav + +columns(6) + +header[role="banner"] + background: #f9f9f9 + div + +container + h1 + +alpha + +adjust-font-size-to(18px) + text-transform: uppercase + a + display: block + +padding-leader(2, 18px) + +padding-trailer(1.5, 18px) + +#compass-nav + +omega + text-align: right + ul + +inline-block-list + +padding-leader(2) + +trailer(1.5) + a + +inline-block + +adjust-font-size-to(14px) + padding: 0 1em + +border-top-left-radius(0.5em) + +border-bottom-right-radius(0.5em) + +=active-compass-nav($id, $url) + body[id$="#{$id}"] #compass-nav a[href="#{$url}"] + background: #cccccc + cursor: default + ++active-compass-nav(-docs, unquote("/docs/")) + +#docs-nav + +pie-clearfix + +leading-border(1px, 0.25) + +trailing-border(1px, 0.25) + position: relative + height: $base-rhythm-unit + border-color: #cccccc + background-color: #eeeeee + ul + +horizontal-list + +container + position: relative + z-index: 2 + overflow: visible + li + top: -$base-rhythm-unit * 0.5 + margin-bottom: -$base-rhythm-unit * 0.5 + position: relative + a + &:link, &:visited + display: block + padding: 0 $side-gutter-width + border: 1px solid #eeeeee + +leading-border(1px, 0.5) + +trailing-border(1px, 0.25) + border-bottom: 0 + +border-top-radius(0.5em) + background: #dddddd + &:hover, &:focus, &:active + background-color: #eeeeee + border-color: #dddddd + +=active-docs($class, $url) + .#{$class} #docs-nav a[href="#{$url}"] + &:link, &:visited + +trailing-border(1px, 0.25) + cursor: default + background: white + border-color: #cccccc + border-bottom-color: white + ++active-docs(home, "index.php") ++active-docs(core, "core.php") ++active-docs(css3, "core.php") ++active-docs(utils, "core.php") ++active-docs(gradient, "core.php") ++active-docs(demo, "core.php") + +#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) + label + +float(left) + width: columns(1,3) + gutter(3)*.5 + margin: 0 + text-align: right + input + +columns(2,3) + +omega + +#page + +container + +leader(3) + +aside[role="sidebar"] + +columns(3) + +alpha + +adjust-font-size-to(14px) + +leader(2,14px) + color: #999999 + section, p + +leader(1,14px) + +trailer(1,14px) + +footer[role="contentinfo"] + +container + +leader(3) + color: #999999 + .license + +full + +adjust-font-size-to(14px) + +/* @end + +/* @group COMPONENTS by type + +article + > nav + border-top: $px2em*1px solid #ccc + margin-top: -$px2em*1px + color: #ccc + ul + +no-style-list + li + +columns(6,12) + &:last-child + +omega(12) + text-align: right + +/* @end + +/* @group OVERRIDES by content + +#content + +columns(9) + +omega + h1 + +adjust-font-size-to(36px) + +trailer(1,36px) + .demo & + float: none + display: block + margin: 0 + width: auto + +full + h1 + text-align: center + +#module-nav + +leader(.25) + +trailing-border(1px,.25) + +trailer(.5) + border-color: #ccc + clear: both + ul + margin: 0 + padding: 0 + +container + li + +float(left) + margin-right: 1.5em + &:first-child + +alpha + + #page + +leader(1.5) + +#local-nav + +leader(1,14px) + ul + +no-style-list + text-align: right + h2 + +leader(1,14px) + border-bottom: 1px solid #ccc + margin-bottom: ($base_rhythm_unit*.5 - $px2em*1px) * (14/16) + text-align: left + +#code + +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) + .slides + li + overflow: auto + table + .lino + color: #666 + background: #ddd + padding: 0 .4em + .source + width: 100% + padding: 0 .4em + +#demo + +full(12) + +padding-leader + +trailing-border(1px) + border-color: #ccc + .gradient + margin: 1.5em 0 + height: 6em + +linear-gradient(color_stops(#fff, #ddd), "left top") + +/* @end + +/* @group OVERRIDES by page + + +/* @end + +/* @group DEBUG + +// Uncomment, adjust and use for debugging +// #page +// +show-grid("grid.png") + +/* @end diff --git a/doc-src/layouts/default.haml b/doc-src/layouts/default.haml index 20bb7116..cbf310b2 100644 --- a/doc-src/layouts/default.haml +++ b/doc-src/layouts/default.haml @@ -7,7 +7,7 @@ - if @item[:meta_description] %meta{:name => "description", :content => @item[:meta_description]} %link(rel="shortcut icon" type="image/png" href="/docs/images/compass_icon.png") - %link{ :href => "/docs/stylesheets/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" } + %link{ :href => "/docs/stylesheets/legacy/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" } %link{ :href => "/docs/stylesheets/ui-lightness/jquery-ui-1.7.2.custom.css", :rel => "stylesheet", :type => "text/css", :media => "screen" } %script{:src => "/docs/javascripts/jquery-1.3.2.min.js", :type => "text/javascript"} %script{:src => "/docs/javascripts/jquery-ui-1.7.2.custom.min.js", :type => "text/javascript"} @@ -18,15 +18,5 @@ #sidebar = render "partials/sidebar" #footer= render "partials/footer" - :javascript - $(function(){ - $('span.color').each(function(i,e){ - e = $(e); - e.after(''); - }); - $('span.arg[data-default-value]').each(function(i,e){ - e = $(e); - e.attr("title", "Defaults to: " + e.attr("data-default-value")) - }) - }); + %script(src="/docs/javascripts/fixups.js" deferred) = render "partials/analytics" diff --git a/doc-src/layouts/example.haml b/doc-src/layouts/example.haml index 4078fa1a..530905bb 100644 --- a/doc-src/layouts/example.haml +++ b/doc-src/layouts/example.haml @@ -7,7 +7,7 @@ - if @item[:meta_description] %meta{:name => "description", :content => @item[:meta_description]} %link(rel="shortcut icon" type="image/png" href="/docs/images/compass_icon.png") - %link{ :href => "/docs/stylesheets/example.css", :rel => "stylesheet", :type => "text/css", :media => "screen" } + %link{ :href => "/docs/stylesheets/legacy/example.css", :rel => "stylesheet", :type => "text/css", :media => "screen" } %style{:type => "text/css"}= example_css %body{body_attributes(@item)} #container diff --git a/doc-src/layouts/main.haml b/doc-src/layouts/main.haml new file mode 100644 index 00000000..c864523d --- /dev/null +++ b/doc-src/layouts/main.haml @@ -0,0 +1,51 @@ +!!!5 +%html.no-js{:dir => "ltr", :lang => "en"} + %head + %meta{:charset => "utf-8"}/ + %meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"} + %link(rel="shortcut icon" type="image/png" href="/docs/images/compass_icon.png") + %title home | compass docs wireframe + + %link{:charset => "utf-8", :href => "stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"} + + /[if gte IE 7] + %link{:charset => "utf-8", :href => "stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"} + /[if IE 6] + %link{:charset => "utf-8", :href => "http://universal-ie6-css.googlecode.com/files/ie6.0.3.css", :rel => "stylesheet", :type => "text/css"} + %link{ :href => "/docs/stylesheets/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" } + %link{ :href => "/docs/stylesheets/ui-lightness/jquery-ui-1.7.2.custom.css", :rel => "stylesheet", :type => "text/css", :media => "screen" } + %body{body_attributes(@item)} + %nav#skip-links + %a{:href => "#content"} skip to content + %header#banner{:role => "banner"} + %div + %h1.vcard + %a.fn.org.url.uid{:href => "/", :rel => "home"} Compass + %nav#compass-nav + %ul + %li + %a{:href => "/", :rel => "home"} compass + %li + %a{:href => "/docs/"} docs + %li + %a{:href => "/docs/tutorials/"} tutorials + %nav#docs-nav{:role => "navigation"} + %ul + %li + %a{:href => "/docs/"} introduction + %li + %a{:href => "/docs/compass/"} core + %li + %a{:href => "/docs/blueprint/"} blueprint + %li + %a{:href => "/docs/plugins/"} plugins + #search-docs + %form + %p + %label{:for => "search"} search + %input#search{:name => "search", :type => "text", :value => "", :placeholder => "Search"} + %article= yield + %script(src="/docs/javascripts/jquery-1.3.2.min.js") + %script(src="/docs/javascripts/jquery-ui-1.7.2.custom.min.js") + %script(src="/docs/javascripts/fixups.js" deferred) + = render "partials/analytics"