diff --git a/doc-src/assets/javascripts/fixups.js b/doc-src/assets/javascripts/fixups.js index f1b1c18c..72a4aaec 100644 --- a/doc-src/assets/javascripts/fixups.js +++ b/doc-src/assets/javascripts/fixups.js @@ -14,9 +14,9 @@ $(function(){ typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null; function Brush(){}; Brush.prototype = new SyntaxHighlighter.Highlighter(); - Brush.aliases = ['sass', 'scss']; + Brush.aliases = ['sass', 'scss', 'css', 'html']; SyntaxHighlighter.brushes.Sass = Brush; typeof(exports) != 'undefined' ? exports.Brush = Brush : null; -})(); \ No newline at end of file +})(); diff --git a/doc-src/assets/javascripts/shBrushXml.js b/doc-src/assets/javascripts/shBrushXml.js new file mode 100644 index 00000000..69d9fd0b --- /dev/null +++ b/doc-src/assets/javascripts/shBrushXml.js @@ -0,0 +1,69 @@ +/** + * SyntaxHighlighter + * http://alexgorbatchev.com/SyntaxHighlighter + * + * SyntaxHighlighter is donationware. If you are using it, please donate. + * http://alexgorbatchev.com/SyntaxHighlighter/donate.html + * + * @version + * 3.0.83 (July 02 2010) + * + * @copyright + * Copyright (C) 2004-2010 Alex Gorbatchev. + * + * @license + * Dual licensed under the MIT and GPL licenses. + */ +;(function() +{ + // CommonJS + typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null; + + function Brush() + { + function process(match, regexInfo) + { + var constructor = SyntaxHighlighter.Match, + code = match[0], + tag = new XRegExp('(<|<)[\\s\\/\\?]*(?[:\\w-\\.]+)', 'xg').exec(code), + result = [] + ; + + if (match.attributes != null) + { + var attributes, + regex = new XRegExp('(? [\\w:\\-\\.]+)' + + '\\s*=\\s*' + + '(? ".*?"|\'.*?\'|\\w+)', + 'xg'); + + while ((attributes = regex.exec(code)) != null) + { + result.push(new constructor(attributes.name, match.index + attributes.index, 'color1')); + result.push(new constructor(attributes.value, match.index + attributes.index + attributes[0].indexOf(attributes.value), 'string')); + } + } + + if (tag != null) + result.push( + new constructor(tag.name, match.index + tag[0].indexOf(tag.name), 'keyword') + ); + + return result; + } + + this.regexList = [ + { regex: new XRegExp('(\\<|<)\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\](\\>|>)', 'gm'), css: 'color2' }, // + { regex: SyntaxHighlighter.regexLib.xmlComments, css: 'comments' }, // + { regex: new XRegExp('(<|<)[\\s\\/\\?]*(\\w+)(?.*?)[\\s\\/\\?]*(>|>)', 'sg'), func: process } + ]; + }; + + Brush.prototype = new SyntaxHighlighter.Highlighter(); + Brush.aliases = ['xml', 'xhtml', 'xslt', 'html']; + + SyntaxHighlighter.brushes.Xml = Brush; + + // CommonJS + typeof(exports) != 'undefined' ? exports.Brush = Brush : null; +})(); diff --git a/doc-src/assets/javascripts/site.js b/doc-src/assets/javascripts/site.js index b273aee4..47b98a11 100644 --- a/doc-src/assets/javascripts/site.js +++ b/doc-src/assets/javascripts/site.js @@ -70,14 +70,14 @@ function getSyntaxPreference(defaultSyntax, defaultMarkup) { // add example styling preferences if ($('body').hasClass('demo')){ - markupCookie = $.cookie("compass-example-markup"); + //markupCookie = $.cookie("compass-example-markup"); styleCookie = $.cookie("compass-example-style"); - markup = (markupCookie) ? markupCookie : defaultMarkup; + //markup = (markupCookie) ? markupCookie : defaultMarkup; style = (styleCookie) ? styleCookie : defaultSyntax; changeExampleStyleSyntax(style) - changeExampleMarkupSyntax(markup); + //changeExampleMarkupSyntax(markup); } } @@ -98,11 +98,10 @@ $('document').ready(function(){ // Set Demo page syntax preferences } else if (target.parent().is('.syntax_pref')) { event.preventDefault(); - if (target.parent().parent().is('#markup')) { - changeExampleMarkupSyntax(target.attr("rel"), true); - } else { - changeExampleStyleSyntax(target.attr("rel"), true); - } + //if (target.parent().parent().is('#markup')) { + // changeExampleMarkupSyntax(target.attr("rel"), true); + //else + changeExampleStyleSyntax(target.attr("rel"), true); // Set Theme preference } else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) { diff --git a/doc-src/content/examples/compass/css3/font-face/markup.haml b/doc-src/content/examples/compass/css3/font-face/markup.haml index d62c9796..e7c0287a 100644 --- a/doc-src/content/examples/compass/css3/font-face/markup.haml +++ b/doc-src/content/examples/compass/css3/font-face/markup.haml @@ -1,3 +1,2 @@ .example - %h1 The Quick Brown Fox - %p Jumped over the log. + %p The Quick Brown Fox jumped over the lazy dog. diff --git a/doc-src/content/examples/compass/css3/font-face/stylesheet.sass b/doc-src/content/examples/compass/css3/font-face/stylesheet.sass index 6d97c821..4256a548 100644 --- a/doc-src/content/examples/compass/css3/font-face/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/font-face/stylesheet.sass @@ -4,4 +4,4 @@ .example font-family: "Blooming Grove" - padding: 1em + font-size: 1.5em diff --git a/doc-src/content/stylesheets/partials/_code.scss b/doc-src/content/stylesheets/partials/_code.scss index ba188e16..22a9bf61 100644 --- a/doc-src/content/stylesheets/partials/_code.scss +++ b/doc-src/content/stylesheets/partials/_code.scss @@ -1,8 +1,18 @@ -html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;} -.mixin-source { display: none; position: relative; @extend .fixed-font; } +//html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;} +.mixin-source, .example-source { + position: relative; @extend .fixed-font; + .syntaxhighlighter { + &.scss, &.sass, &.css { display: none; } } } -html .syntaxhighlighter { +html.sass { .mixin-source .syntaxhighlighter.sass, .example-source .syntaxhighlighter.sass { display: block; } } +html.scss { .mixin-source .syntaxhighlighter.scss, .example-source .syntaxhighlighter.scss { display: block; } } +html.css .example-source .syntaxhighlighter.css { display: block; } + +.mixin-source { display: none; } + +html.light .syntaxhighlighter, html.dark .syntaxhighlighter { margin: 0 0 2px; + code { padding: 0; } //font-size: 1.1em; text-shadow: none; .code-block { background: none; @extend .clear-box-shadow; } diff --git a/doc-src/content/stylesheets/partials/_example.scss b/doc-src/content/stylesheets/partials/_example.scss new file mode 100644 index 00000000..51ca61e6 --- /dev/null +++ b/doc-src/content/stylesheets/partials/_example.scss @@ -0,0 +1,21 @@ +html.light #demo, html.dark #demo { + color: #333; +} + +#demo { + @include round-corners; + @extend .group; + background: #fff; + margin-bottom: 1.2em; + padding: 40px; +} + +#how { + section { width: 49%; float: left; } + section + section { float: right; } + + .example-source { clear: both; } + #markup { margin-top: 12px; } +} + + diff --git a/doc-src/content/stylesheets/partials/_main.scss b/doc-src/content/stylesheets/partials/_main.scss index 7b3717db..cd91ae18 100644 --- a/doc-src/content/stylesheets/partials/_main.scss +++ b/doc-src/content/stylesheets/partials/_main.scss @@ -9,12 +9,18 @@ #docs_panel { position: absolute; top: 0; right: 0; width: 100%; - & > div { float: right; margin-left: 10px; } + & > div { float: right; margin-left: 10px; @include round-bottom-corners; border: 1px solid; border-top: 0;} + a { text-decoration: none; } #theme_pref { padding: 3px 12px 6px; a { position: relative; top: 2px;} } #version { font-size: .75em; padding: 4px 0 5px; background: none; border: none; position: absolute; left: 0; a { @include hover-link; } } - #syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} } + +} + +#syntax_pref, .syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} } + +.syntax_pref { + float: right; @include round-top-corners; border: 1px solid; border-bottom: 0; a { text-decoration: none; } - & > div { @include round-bottom-corners; } } footer { @@ -22,7 +28,7 @@ footer { img { vertical-align: middle; padding-right: 5px; position: relative; top: -2px;} span { position: relative; top: -1px; } ul { @include horizontal-list(15px); overflow: visible; - li {padding-top: 3px;} + li { padding-top: 3px; } li:last-child {border: 0; @include box-shadow(none); } } } } #page article h2 { diff --git a/doc-src/content/stylesheets/partials/_theme.scss b/doc-src/content/stylesheets/partials/_theme.scss index fe2c0ed9..625b63d3 100644 --- a/doc-src/content/stylesheets/partials/_theme.scss +++ b/doc-src/content/stylesheets/partials/_theme.scss @@ -32,7 +32,7 @@ code { @extend .code-block-#{$theme}; color: $code; } #theme_pref { @extend .theme-switch-#{$theme}; } - #docs_panel div { background: $option-panel-bg; border: 1px solid $option-panel-border; border-top: 0; } + #docs_panel div, .syntax_pref { background: $option-panel-bg; border-color: $option-panel-border; } body#home .overview div { @extend .inset-panel-#{$theme}; h4 { @extend .horizontal-rule-#{$theme}; } } @@ -63,16 +63,17 @@ #module-nav li.selected { @extend .selected-marker-#{$theme}; a { color: $module-nav-selected; } } - a[rel=sass], a[rel=scss] { @extend .syntax-switch-#{$theme}; } - &.sass a[rel=sass], &.scss a[rel=scss] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; } + a[rel=sass], a[rel=scss], a[rel=css] { @extend .syntax-switch-#{$theme}; } + &.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; } #version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } } - .mixin-source { @extend .mixin-panel-#{$theme}; } + .mixin-source, .example-source { @extend .mixin-panel-#{$theme}; } h2 a.help { color: $heading;} - .source-documentation { @extend .doc-panel-#{$theme}; } + #demo { @extend .demo-#{$theme}; } + .arg { color: $code; } .arg[data-default-value] { color: rgba($code, .7); } a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} } @@ -98,6 +99,10 @@ .code-block-dark { @extend .code-block; @extend .inset-panel-dark; } +.demo-dark { + @include box-shadow(rgba(#000, .5) 0 2px 10px inset, rgba(#fff, .3) 0 1px 2px 0px, rgba(#000, .8) 0 0 0 1px inset); } + + .heading-panel-dark { background: darken(#2f2f2f, 6); background: rgba(#000, .2); @@ -181,6 +186,8 @@ .code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); } +.demo-light { @include box-shadow(rgba(#000, .3) 0 2px 10px inset, #fff 0 1px 2px 0px, rgba(#000, .05) 0 0 0 1px inset); } + .syntax-switch-light { color: rgba(#000, .3); text-shadow: rgba(#fff, .08) 0 1px 0; &:hover { color: #000; text-shadow: #fff 0 1px 0; }} diff --git a/doc-src/content/stylesheets/screen.scss b/doc-src/content/stylesheets/screen.scss index 2574f876..50b26a49 100644 --- a/doc-src/content/stylesheets/screen.scss +++ b/doc-src/content/stylesheets/screen.scss @@ -14,6 +14,7 @@ @import "partials/sidebar"; @import "partials/main"; @import "partials/code"; +@import "partials/example"; //@import "syntax/syntax-theme"; diff --git a/doc-src/layouts/basic.haml b/doc-src/layouts/basic.haml index c566c520..2201517d 100644 --- a/doc-src/layouts/basic.haml +++ b/doc-src/layouts/basic.haml @@ -13,7 +13,9 @@ %script(src="/javascripts/jquery.cookie.js" type="text/javascript") %script(src="/javascripts/site.js" type="text/javascript") %script(src="/javascripts/shCore.js" type="text/javascript" deferred) - -#%script(src="/javascripts/shBrushSass.js" type="text/javascript" deferred) + %script(src="/javascripts/shBrushSass.js" type="text/javascript" deferred) + %script(src="/javascripts/shBrushCss.js" type="text/javascript" deferred) + %script(src="/javascripts/shBrushXml.js" type="text/javascript" deferred) %script(src="/javascripts/fixups.js" type="text/javascript" deferred) /[if lte IE 8] %link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"} diff --git a/doc-src/layouts/example.haml b/doc-src/layouts/example.haml index 2209b1bd..b6e3caf4 100644 --- a/doc-src/layouts/example.haml +++ b/doc-src/layouts/example.haml @@ -7,7 +7,7 @@ #docs_panel #theme_pref %a{:href => "#", :rel => "theme", :title => "switch theme" } Q - #syntax_pref + -#syntax_pref %a{:href => "#", :rel => "scss" } scss %a{:href => "#", :rel => "sass" } sass #version diff --git a/doc-src/layouts/partials/example.haml b/doc-src/layouts/partials/example.haml index e6d3fc78..9b9520da 100644 --- a/doc-src/layouts/partials/example.haml +++ b/doc-src/layouts/partials/example.haml @@ -5,26 +5,18 @@ #how %section#markup - .syntax_pref + -#.syntax_pref %a{:href => "#", :rel => "html" } html %a{:href => "#", :rel => "haml" } haml - - .code - %ul - %li#html - %pre= h(example_html) - %li#haml - %pre= h(example_haml) + .example-source + %pre.source-code.html= h(example_html) + -# %pre.source-code.haml= h(example_haml) %section#styles .syntax_pref %a{:href => "#", :rel => "scss" } scss %a{:href => "#", :rel => "sass" } sass %a{:href => "#", :rel => "css" } css - .code - %ul - %li#scss - %pre= h(example_scss) - %li#sass - %pre= h(example_sass) - %li#css - %pre= h(example_css) + .example-source + %pre.source-code.scss= h(example_scss) + %pre.source-code.sass= h(example_sass) + %pre.source-code.css= h(example_css)