diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index ffd77c38..4fccd828 100644 --- a/doc-src/Gemfile.lock +++ b/doc-src/Gemfile.lock @@ -8,7 +8,7 @@ GIT PATH remote: /Users/bmathis/Documents/Workspace/compass-projects/compass specs: - compass (0.11.alpha.0.df908d3) + compass (0.11.alpha.0.78bcd44) haml (~> 3.0.23) GEM diff --git a/doc-src/assets/fonts/pictos-web.eot b/doc-src/assets/fonts/pictos-web.eot new file mode 100644 index 00000000..f34d23f5 Binary files /dev/null and b/doc-src/assets/fonts/pictos-web.eot differ diff --git a/doc-src/assets/fonts/pictos-web.svg b/doc-src/assets/fonts/pictos-web.svg new file mode 100644 index 00000000..2d168314 --- /dev/null +++ b/doc-src/assets/fonts/pictos-web.svg @@ -0,0 +1,114 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Designer : Drew Wilson +Foundry : Drew Wilson +Foundry URL : httppictosdrewwilsoncom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/doc-src/assets/fonts/pictos-web.ttf b/doc-src/assets/fonts/pictos-web.ttf new file mode 100644 index 00000000..3ad12d5e Binary files /dev/null and b/doc-src/assets/fonts/pictos-web.ttf differ diff --git a/doc-src/assets/fonts/pictos-web.woff b/doc-src/assets/fonts/pictos-web.woff new file mode 100644 index 00000000..90e53628 Binary files /dev/null and b/doc-src/assets/fonts/pictos-web.woff differ diff --git a/doc-src/assets/images/compass-logo-small-light.png b/doc-src/assets/images/compass-logo-small-light.png new file mode 100644 index 00000000..34ce9a49 Binary files /dev/null and b/doc-src/assets/images/compass-logo-small-light.png differ diff --git a/doc-src/assets/javascripts/fixups.js b/doc-src/assets/javascripts/fixups.js index 93916f58..00f5ebe3 100644 --- a/doc-src/assets/javascripts/fixups.js +++ b/doc-src/assets/javascripts/fixups.js @@ -6,5 +6,5 @@ $(function(){ $('span.arg[data-default-value]').each(function(i,e){ e = $(e); e.attr("title", "Defaults to: " + e.attr("data-default-value")) - }) -}); + }); +}); \ No newline at end of file diff --git a/doc-src/assets/javascripts/jquery.cookie.js b/doc-src/assets/javascripts/jquery.cookie.js new file mode 100644 index 00000000..6df1faca --- /dev/null +++ b/doc-src/assets/javascripts/jquery.cookie.js @@ -0,0 +1,96 @@ +/** + * Cookie plugin + * + * Copyright (c) 2006 Klaus Hartl (stilbuero.de) + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + */ + +/** + * Create a cookie with the given name and value and other optional parameters. + * + * @example $.cookie('the_cookie', 'the_value'); + * @desc Set the value of a cookie. + * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true }); + * @desc Create a cookie with all available options. + * @example $.cookie('the_cookie', 'the_value'); + * @desc Create a session cookie. + * @example $.cookie('the_cookie', null); + * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain + * used when the cookie was set. + * + * @param String name The name of the cookie. + * @param String value The value of the cookie. + * @param Object options An object literal containing key/value pairs to provide optional cookie attributes. + * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object. + * If a negative value is specified (e.g. a date in the past), the cookie will be deleted. + * If set to null or omitted, the cookie will be a session cookie and will not be retained + * when the the browser exits. + * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie). + * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie). + * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will + * require a secure protocol (like HTTPS). + * @type undefined + * + * @name $.cookie + * @cat Plugins/Cookie + * @author Klaus Hartl/klaus.hartl@stilbuero.de + */ + +/** + * Get the value of a cookie with the given name. + * + * @example $.cookie('the_cookie'); + * @desc Get the value of a cookie. + * + * @param String name The name of the cookie. + * @return The value of the cookie. + * @type String + * + * @name $.cookie + * @cat Plugins/Cookie + * @author Klaus Hartl/klaus.hartl@stilbuero.de + */ +jQuery.cookie = function(name, value, options) { + if (typeof value != 'undefined') { // name and value given, set cookie + options = options || {}; + if (value === null) { + value = ''; + options.expires = -1; + } + var expires = ''; + if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { + var date; + if (typeof options.expires == 'number') { + date = new Date(); + date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); + } else { + date = options.expires; + } + expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE + } + // CAUTION: Needed to parenthesize options.path and options.domain + // in the following expressions, otherwise they evaluate to undefined + // in the packed version for some reason... + var path = options.path ? '; path=' + (options.path) : ''; + var domain = options.domain ? '; domain=' + (options.domain) : ''; + var secure = options.secure ? '; secure' : ''; + document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); + } else { // only name given, get cookie + var cookieValue = null; + if (document.cookie && document.cookie != '') { + var cookies = document.cookie.split(';'); + for (var i = 0; i < cookies.length; i++) { + var cookie = jQuery.trim(cookies[i]); + // Does this cookie string begin with the name we want? + if (cookie.substring(0, name.length + 1) == (name + '=')) { + cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); + break; + } + } + } + return cookieValue; + } +}; \ No newline at end of file diff --git a/doc-src/assets/javascripts/site.js b/doc-src/assets/javascripts/site.js new file mode 100644 index 00000000..0a100201 --- /dev/null +++ b/doc-src/assets/javascripts/site.js @@ -0,0 +1,75 @@ +function changeTheme(theme) { + el = $('html'); + + if (!theme) theme = el.hasClass('dark') ? 'light': 'dark'; + else if (el.hasClass(theme)) return; + + el.removeClass('light'); + el.removeClass('dark'); + el.addClass(theme); + setThemePreference(theme); +} + +function changeSyntax(syntax) { + el = $('body'); + + if (!syntax) { + syntax = el.hasClass('scss') ? 'sass': 'scss'; + } else if (el.hasClass(syntax)) { + return; + } + el.removeClass('scss'); + el.removeClass('sass'); + el.addClass(syntax); + setSyntaxPreference(syntax); +} + +function setThemePreference(theme) { + $.cookie("compass-theme", null); + $.cookie("compass-theme", theme, { + expires: 60 * 60 * 24 * 365 * 10, + path: '/' + }); +} +function getThemePreference(defaultTheme) { + theme = $.cookie("compass-theme"); + if (theme) { + changeTheme(theme); + } else { + changeTheme(defaultTheme); + } +} +function setSyntaxPreference(syntax) { + $.cookie("compass-syntax", null); + $.cookie("compass-syntax", syntax, { + expires: 60 * 60 * 24 * 365 * 10, + path: '/' + }); +} +function getSyntaxPreference(defaultSyntax) { + syntax = $.cookie("compass-syntax"); + if (syntax){ + changeSyntax(syntax); + } else { + changeSyntax(defaultSyntax); + } +} + + +$('document').ready(function(){ + $('#page').click(function(event){ + var target = $(event.target); + if (target.parent().is('#syntax_pref')) { + changeSyntax(target.attr("rel")); + event.preventDefault(); + } else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) { + changeTheme(); + event.preventDefault(); + } else if (target.attr("rel") == "view source") { + $(target.attr("href")).toggle(); + event.preventDefault(); + } + }); + getThemePreference('dark'); + getSyntaxPreference('scss'); +}) \ No newline at end of file diff --git a/doc-src/content/reference/compass/css3.haml b/doc-src/content/reference/compass/css3.haml index e980ec45..4915526c 100644 --- a/doc-src/content/reference/compass/css3.haml +++ b/doc-src/content/reference/compass/css3.haml @@ -11,17 +11,13 @@ classnames: meta_description: Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes. layout: core --- -%h1 Compass CSS3 Module -%p - The CSS3 module provides cross-browser mixins for CSS properties - introduced in CSS3, for example - border-radius - and text-shadow. -%p - What rendering engines you support for the experimental css properties is governed by - the configurable variables defined in the browser - support module. -%h3 Importing the Entire CSS3 Library -%p - To import the CSS3 Module add the following to your stylesheets:
- @import "compass/css3"
+- render 'reference' do + %p + The CSS3 module provides cross-browser mixins for CSS properties + introduced in CSS3, for example + border-radius + and text-shadow. + %p + What rendering engines you support for the experimental css properties is governed by + the configurable variables defined in the browser + support module. \ No newline at end of file diff --git a/doc-src/content/stylesheets/core/_clearing-classes.sass b/doc-src/content/stylesheets/core/_clearing-classes.sass index 7a31d0d0..4e3f2ba5 100644 --- a/doc-src/content/stylesheets/core/_clearing-classes.sass +++ b/doc-src/content/stylesheets/core/_clearing-classes.sass @@ -8,4 +8,7 @@ +border-bottom-right-radius(0) .hide - display: none \ No newline at end of file + display: none + +#theme_pref + @extend .hide \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_code.scss b/doc-src/content/stylesheets/partials/_code.scss new file mode 100644 index 00000000..d8f3b6b3 --- /dev/null +++ b/doc-src/content/stylesheets/partials/_code.scss @@ -0,0 +1,45 @@ +body.sass .mixin-source .scss, body.scss .mixin-source .sass { @extend .hide;} +.mixin-source { display: none; } + +.syntaxhighlighter { padding: 5px 0; @include border-radius; + .toolbar { position: absolute; right: 0; } + .code-block { background: none; @include box-shadow(none)} + } + +pre { + margin: 1.5em 0; + .code-block { padding: .6em; } +} + +.code-block { @extend .round-corners-4; @extend .fixed-font; + display: inline-block; + font-size: .95em; + padding: 0 .4em; + line-height: 1.5em; +} + +.source-documentation { + @extend .round-corners-4; + padding: 10px 15px; + background: rgba(#000, .1); + @include box-shadow(rgba(#000, .2) 0 0 0 1px inset); + @include round-bottom-corners +} +h3 { @include round-corners; + padding: 10px 15px; + margin: 20px 0 2px; + position: relative; + a { text-decoration: none;} +} +h3.mixin { @include round-top-corners;} +.arg { + display: inline-block; + padding: 0 2px; + &[data-default-value] { + font-style: italic; + &:before{ content: "[" ; } + &:after{ content: "]" ; } } + } + +a[rel="view source"]{ float: right; padding: 9px 15px; margin-top: 20px; position: relative; z-index: 2; font-size: .8em; @include hover-link;} +h2 + a[rel="view source"]{ margin-top: 12px;} \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_layout.scss b/doc-src/content/stylesheets/partials/_layout.scss index 8e64dba7..a0fd5c85 100644 --- a/doc-src/content/stylesheets/partials/_layout.scss +++ b/doc-src/content/stylesheets/partials/_layout.scss @@ -9,7 +9,9 @@ body { @extend .sans-font; line-height: 1.45em; } -#wrap { @extend .group; padding: 0 20px 20px;} +#wrap { @extend .group; padding: 0 20px 20px; } +#page { @extend .group; padding-bottom: 30px;} +footer { @extend .group; clear: both; padding-top: 20px;} header { padding: 22px 0 0; position: relative; } -#page > article { padding-left: $side-nav-width + 40px; } +#page > article { padding-left: $side-nav-width + 45px; } aside { float: left; width: $side-nav-width; } \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_main.scss b/doc-src/content/stylesheets/partials/_main.scss index 077f0105..8c3abe1f 100644 --- a/doc-src/content/stylesheets/partials/_main.scss +++ b/doc-src/content/stylesheets/partials/_main.scss @@ -1,10 +1,42 @@ #page { position: relative; - padding-top: 25px; - & > article { padding-top: 14px; font-size: 15px; - h1, h2 { padding-bottom: 6px; margin-bottom: 9px; }}} + padding-top: 40px; + & > article { padding-top: 10px; font-size: 15px; } } -#version { @include round-bottom-corners; - font-size: .7em; +#docs_panel { position: absolute; top: 0; right: 0; - padding: 2px 8px 4px; } \ No newline at end of file + width: 100%; + & > div { float: right; margin-left: 10px; } + #theme_pref { padding: 3px 12px 6px; } + #version { font-size: .75em; padding: 4px 0 5px; background: none; border: none; position: absolute; left: 0;} + #syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} } +} + +#theme_pref { + a { display: block; text-indent: -9999px; font-size: 18px; width: .9em; position: relative; text-decoration: none; } + a:before { text-indent: 0; position: absolute; left: 0; top: 2px; content: 'Q'; @extend .pictos; } } + +footer { + .legalese { font-size: .75em; float: left; + span { display: block; } } + .links { float: left; font-size: .9em; + ul { @include horizontal-list(10px); + li:last-child {border: 0; } } } +} +h2 a.help { + text-indent: -9999px; + display: inline-block; + position: relative; + text-decoration: none; + &:before { + @extend .pictos; + content: "?"; + text-indent: 0; + position: absolute; + top: 2px; + left: 0; + color: #202020; + font-size: .9em; + text-shadow: #444 0 1px 0; + } +} \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_nav.scss b/doc-src/content/stylesheets/partials/_nav.scss index 8f6fc36b..72017cca 100644 --- a/doc-src/content/stylesheets/partials/_nav.scss +++ b/doc-src/content/stylesheets/partials/_nav.scss @@ -3,7 +3,7 @@ nav a { @include hover-link; } header { @extend .group; font-size: 1.25em; font-family: "Museo Sans"; border-width: 4px;} #main-nav { - width: 76%; + width: 79%; display: inline-block; padding-bottom: 10px; ul { @@ -24,13 +24,12 @@ header { @extend .group; padding: 2px 10px; display: inline-block; }} -#docs-nav { padding-right: 15px; } +#docs-nav { padding-right: 20px; } #module-nav { display: inline-block; - padding-left: 8px; - ul { - @include horizontal-list(10px);}} + padding-left: 10px; + ul { @include horizontal-list(10px); } } #search-docs { width: 20%; position: absolute; top: 29px; right: 0; diff --git a/doc-src/content/stylesheets/partials/_sidebar.scss b/doc-src/content/stylesheets/partials/_sidebar.scss index b9ab5a1c..fdc3697a 100644 --- a/doc-src/content/stylesheets/partials/_sidebar.scss +++ b/doc-src/content/stylesheets/partials/_sidebar.scss @@ -1,7 +1,7 @@ aside { - padding-top: 20px; + padding-top: 16px; text-align: right; - padding-right: 17px; + padding-right: 22px; h2 { text-align: left; font-size: 1.3em; diff --git a/doc-src/content/stylesheets/partials/_theme.scss b/doc-src/content/stylesheets/partials/_theme.scss index 86986add..7ec83fcf 100644 --- a/doc-src/content/stylesheets/partials/_theme.scss +++ b/doc-src/content/stylesheets/partials/_theme.scss @@ -1,7 +1,7 @@ -@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border){ - body { background: $page-bg; color: $text; +@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border){ + body {background: $page-bg; color: $text; a { color: $link; } } - #wrap { @extend .horizontal-rule-#{$theme}; } + #page { @extend .horizontal-rule-#{$theme}; } header { @extend .horizontal-rule-#{$theme}; border-width: 4px; } nav a { color: $nav-link; } @@ -18,51 +18,63 @@ #search-docs { input::-webkit-input-placeholder { color: $search; } - input { @extend .inset-panel-#{$theme}; background-color: rgba($search-bg, .2); color: $search;}} + input { @extend .inset-panel-#{$theme}; color: $search;}} aside { @extend .vertical-rule-#{$theme}; h2 { @extend .horizontal-rule-#{$theme}; - a { color: $text; } } } + a { color: $strong-text; } } } - #version { background: rgba($version-text, .03); color: rgba($version-text, .4); border: 1px solid rgba($version-border, .3); border-top: 0; - a { @include hover-link; color: rgba($version-text, .7); } } + #docs_panel > div { background: rgba($version-text, .03); color: rgba($version-text, .4); border: 1px solid rgba($version-border, .3); border-top: 0; @include round-bottom-corners; + a { text-decoration: none; color: rgba($version-text, .7); } + a[rel=theme] { color: rgba($version-border, .8); text-shadow: rgba($version-text, .08) 0 1px 0; &:hover { text-decoration: none; color: $strong-text; text-shadow: $version-border 0 1px 0; } } + a[rel=sass], a[rel=scss] { color: rgba($version-border, .6); text-shadow: rgba($version-text, .08) 0 1px 0;} } + body.sass #docs_panel a[rel=sass], body.scss #docs_panel a[rel=scss] { color: rgba($version-text, .5); @include border-radius(1em); @extend .inset-panel-#{$theme};} #page > article { #{headings()}{ color: $heading; } } h1, h2 { @extend .horizontal-rule-#{$theme}; } + h3 { + background: rgba(#000, .2); + @include box-shadow(rgba(#000, .2) 0 0 0 1px inset); + a:hover { color: $heading; + .arg { color: rgba($heading, .6);} + } + } + footer .links li { @extend .vertical-rule-#{$theme}; } + + code { @extend .code-block-#{$theme}; color: $code;} + .arg { color: $code;} + .arg[data-default-value] { color: rgba($code, .7);} + a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);};} } // Dark theme .inset-panel-dark { - @include background-image(linear-gradient(rgba(#000, .5), rgba(#000, 0))); - @include single-box-shadow(rgba(#fff, .1), 0, 1px, 0); - background-color: rgba(#000, .2); } + @include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset); + background-color: rgba(#000, .3); } .horizontal-rule-dark { - @include single-box-shadow(rgba(#fff, .07), 0, 1px, 0); + @include box-shadow(rgba(#fff, .07) 0 1px 0); border-bottom: 1px solid #121212; } .vertical-rule-dark { - @include single-box-shadow(rgba(#fff, .07), 1px, 0, 0); + @include box-shadow(rgba(#fff, .07) 1px 0 0); border-right: 1px solid #121212; } -.code-block-dark { @extend .round-corners-4; @extend .inset-panel-dark; - display: inline-block; - padding-left: 2px; - padding-right: 2px; } +.code-block-dark { @extend .code-block; @extend .inset-panel-dark; } @mixin dark-theme { $page-bg: #343434; - $text: #b6b6b6; + $text: #c6c6c6; $heading: white; $strong-text: #dbdbdb; $search: #6e6e6e; - $search-bg: black; - + $link: #dadbb1; $nav-link: #bfbfbf; + $code: #85AFC9; $main-nav: $strong-text; $main-nav-selected: #fb292d; @@ -72,7 +84,52 @@ $version-text: white; $version-border: black; - @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border); + @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border); } -html.dark { @include dark-theme; } \ No newline at end of file +// Light Theme +.inset-panel-light { + @include background-image(linear-gradient(rgba(#000, .15), rgba(#000, 0))); + @include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .25) 0 -1px 0); + background-color: rgba(#fff, .2); } + +.horizontal-rule-light { + @include single-box-shadow(rgba(#fff, 1), 0, 1px, 0); + border-bottom: 1px solid #bbb; } + +.vertical-rule-light { + @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0); + border-right: 1px solid #bbb; } + +.code-block-light { @extend .code-block; + //@include background-image(linear-gradient(rgba(#000, .1), rgba(#000, 0))); + @include box-shadow(rgba(#000, .2) 0 0 1px 1px inset); + background-color: rgba(#fff, 1);} + +@mixin light-theme { + $page-bg: #eaeaea; + + $text: #222 ; + $heading: black; + $strong-text: #000; + + $search: #666; + $search-bg: white; + + $link: darken(adjust-hue(#dadbb1, 160), 40); + $nav-link: #444; + + $main-nav: $strong-text; + $main-nav-selected: darken(#fb292d, 10); + $docs-nav-selected: $strong-text; + $module-nav-selected: $link; + + $version-text: black; + $version-border: white; + $code: #222; + + @include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border); +} + +html.dark { @include dark-theme; } +html.light { @include light-theme; } \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_typography.scss b/doc-src/content/stylesheets/partials/_typography.scss index 356765b3..4e19cd5b 100644 --- a/doc-src/content/stylesheets/partials/_typography.scss +++ b/doc-src/content/stylesheets/partials/_typography.scss @@ -1,14 +1,21 @@ -@font-face { font-family: 'pictos-web'; src: url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.eot'); src: local('☺'), url('http://s3.imathis.com/shared-assets/pictos-font/http://pictos-web.woff') format('woff'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.ttf') format('truetype'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal;} +//@font-face { font-family: 'pictos-web'; src: url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.eot'); src: local('☺'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.woff') format('woff'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.ttf') format('truetype'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal;} +@include font-face("pictos-web", font-files("pictos-web.woff", woff, "pictos-web.ttf", truetype, "pictos-web.svg#webfontIyfZbseF", svg), 'pictos-web.eot'); .sans-font { font-family: 'Lucida Grande', Arial, sans-serif; } .heading-font { font-family: 'Museo Sans', 'serif'; } -.pictos { font-family: pictos-web; } +.pictos { font-family: pictos-web; font-weight: normal; font-style: normal;} +.fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;} #page > article { + line-height: 1.45em; ol { list-style: outside decimal; padding-left: 2.5em;} - ul, ol { margin-bottom: 1.5em;} + ul, ol, dl { margin-bottom: 1.5em;} p { margin-bottom: 1.2em;} #{headings()}{ @extend .heading-font; line-height: 1.2em; } h1 { font-size: 30px; } - h2 { font-size: 20px; } + h2 { font-size: 22px; margin: 15px 0 8px; padding-bottom: 6px;} + h3 { font-size: 18px; } + h1 { padding-bottom: 6px; margin-bottom: 9px; } + ul { list-style: inside disc; } + dt { font-weight: bold; } } \ No newline at end of file diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass index 96c9c450..3162fd15 100644 --- a/doc-src/content/stylesheets/screen.sass +++ b/doc-src/content/stylesheets/screen.sass @@ -11,5 +11,6 @@ @import partials/nav @import partials/sidebar @import partials/main +@import partials/code @import core/clearing-classes \ No newline at end of file diff --git a/doc-src/layouts/basic.haml b/doc-src/layouts/basic.haml index 3db23a20..d5ed6968 100644 --- a/doc-src/layouts/basic.haml +++ b/doc-src/layouts/basic.haml @@ -1,6 +1,6 @@ !!!5 - # This template is just the stuff until the body tag. -%html.dark.no-js{:dir => "ltr", :lang => "en"} +%html.no-js{:dir => "ltr", :lang => "en"} %head %meta{:charset => "utf-8"}/ %meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"} @@ -8,6 +8,10 @@ %title #{@item[:title]} | Compass Documentation + %script(src="/javascripts/jquery-1.3.2.min.js") + %script(src="/javascripts/jquery.cookie.js") + %script(src="/javascripts/site.js") + %script(src="/javascripts/fixups.js" deferred) %link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"} %link{:href => "/stylesheets/syntax/shCore.css", :rel => "stylesheet", :type => "text/css"} %link{:href => "/stylesheets/syntax/shThemeDefault.css", :rel => "stylesheet", :type => "text/css"} diff --git a/doc-src/layouts/blueprint.haml b/doc-src/layouts/blueprint.haml index e1797ced..9794fa5d 100644 --- a/doc-src/layouts/blueprint.haml +++ b/doc-src/layouts/blueprint.haml @@ -1,5 +1,4 @@ - render 'main' do - %aside(role="sidebar") - %nav#local-nav - %ul=item_tree(reference_item(:stylesheet => "blueprint.scss"), :depth => 2, :omit_self => false, :heading_level => 2) - %article= yield \ No newline at end of file + %aside(role="sidebar")= render 'partials/sidebar', :default_stylesheet => "_blueprint.scss" + %article= yield + \ No newline at end of file diff --git a/doc-src/layouts/main.haml b/doc-src/layouts/main.haml index a3286161..667ddb18 100644 --- a/doc-src/layouts/main.haml +++ b/doc-src/layouts/main.haml @@ -19,16 +19,20 @@ %a{:href => "/reference/blueprint/", :rel => "blueprint"} Blueprint %a{:href => "/reference/compass/", :rel => "core"} Core - if @item[:content_for_module_nav] - %nav#module-nav= @item[:content_for_module_nav] + %nav#module-nav= @item[:content_for_module_nav] #page - #version - Version: - %a.number(href="/CHANGELOG/")= compass_version + #docs_panel + #theme_pref + %a{:href => "#", :rel => "theme", :title => "switch theme" } switch theme + #syntax_pref + %a{:href => "#", :rel => "scss" } scss + %a{:href => "#", :rel => "sass" } sass + #version + Version: + %a.number(href="/CHANGELOG/")= compass_version = yield -#comments= render "partials/disqus_comments" - %footer(role="contentinfo")= render "partials/footer" - %script(src="/javascripts/jquery-1.3.2.min.js") - %script(src="/javascripts/fixups.js" deferred) + %footer(role="contentinfo")= render "partials/footer" %script{:src => "/javascripts/shCore.js", :type => "text/javascript"} %script{:src => "/javascripts/shBrushCss.js", :type => "text/javascript"} %script{:src => "/javascripts/shBrushSass.js", :type => "text/javascript"} diff --git a/doc-src/layouts/partials/footer.haml b/doc-src/layouts/partials/footer.haml index ef5ce1b3..286eab87 100644 --- a/doc-src/layouts/partials/footer.haml +++ b/doc-src/layouts/partials/footer.haml @@ -1,14 +1,8 @@ .legalese %p - :plain - - %br - by Christopher M. Eppstein. - - if @item[:content_for_footer] - %hr - = @item[:content_for_footer] + + %span by Christopher M. Eppstein. + .links %ul %li @@ -19,4 +13,7 @@ %li Compass is Open Source - %a(href="http://github.com/chriseppstein/compass") Contribute - \ No newline at end of file + +- if @item[:content_for_footer] + %hr + = @item[:content_for_footer] \ No newline at end of file diff --git a/doc-src/layouts/partials/reference/const_table.haml b/doc-src/layouts/partials/reference/const_table.haml index 44d5d12c..a34622ec 100644 --- a/doc-src/layouts/partials/reference/const_table.haml +++ b/doc-src/layouts/partials/reference/const_table.haml @@ -2,10 +2,6 @@ - const_id = constant_def.name.gsub(/_/,'-') %h3.constant{:id=>"const-#{const_id}"} %a.permalink{:href => "#const-#{const_id}"}= "$"+constant_def.name - %dl.constant-details.source-documentation - %dt Value - %dd - %code= constant_def.expr.to_sass(:format => :html) - - if constant_def.comment && constant_def.comment.strip.size > 0 - %dt Description - %dd= format_doc constant_def.comment + %code= constant_def.expr.to_sass(:format => :html) + - if constant_def.comment && constant_def.comment.strip.size > 0 + %p= format_doc constant_def.comment diff --git a/doc-src/layouts/partials/reference/mixins.haml b/doc-src/layouts/partials/reference/mixins.haml index c98647e7..8a4a60cb 100644 --- a/doc-src/layouts/partials/reference/mixins.haml +++ b/doc-src/layouts/partials/reference/mixins.haml @@ -2,18 +2,12 @@ %h2 Mixins - mixin_defs.each do |mixin| - %span.view-source - View Source: - %a.view-source{:href=>"#mixin-#{mixin.name}-sass"} Sass - \| - %a.view-source{:href=>"#mixin-#{mixin.name}-scss"} SCSS + %a{:href=>"#mixin-#{mixin.name}-source", :rel => "view source"} view source %h3.mixin{:id=>"mixin-#{mixin.name}"} %a.permalink{:href => "#mixin-#{mixin.name}"}= mixin_signature(mixin) .mixin-source{:id=>"mixin-#{mixin.name}-source"} - .elided-code{:id=>"mixin-#{mixin.name}-sass"} - %pre.source-code.sass= mixin.to_sass - .elided-code{:id=>"mixin-#{mixin.name}-scss"} - %pre.source-code.scss= mixin.to_scss + %pre.source-code.sass= mixin.to_sass + %pre.source-code.scss= mixin.to_scss .source-documentation = format_doc(mixin.comment)