github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved the styling for the docs example pages

Browse Source
This commit is contained in:
Brandon Mathis 2010-12-10 18:16:27 -06:00
parent de3fab45c3
commit 354beb965d
13 changed files with 149 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc-src/assets/javascripts/fixups.js
View File

@ -14,7 +14,7 @@ $(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;

69
doc-src/assets/javascripts/shBrushXml.js vendored Normal file
View File

@ -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('(&lt;|<)[\\s\\/\\?]*(?<name>[:\\w-\\.]+)', 'xg').exec(code),
result = []
;
if (match.attributes != null)
{
var attributes,
regex = new XRegExp('(?<name> [\\w:\\-\\.]+)' +
'\\s*=\\s*' +
'(?<value> ".*?"|\'.*?\'|\\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('(\\&lt;|<)\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\](\\&gt;|>)', 'gm'), css: 'color2' }, // <![ ... [ ... ]]>
{ regex: SyntaxHighlighter.regexLib.xmlComments, css: 'comments' }, // <!-- ... -->
{ regex: new XRegExp('(&lt;|<)[\\s\\/\\?]*(\\w+)(?<attributes>.*?)[\\s\\/\\?]*(&gt;|>)', '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;
})();

15
doc-src/assets/javascripts/site.js
View File

@ -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')) {

3
doc-src/content/examples/compass/css3/font-face/markup.haml
View File

@ -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.

2
doc-src/content/examples/compass/css3/font-face/stylesheet.sass
View File

@ -4,4 +4,4 @@
.example
font-family: "Blooming Grove"
padding: 1em
font-size: 1.5em

16
doc-src/content/stylesheets/partials/_code.scss
View File

@ -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; }

21
doc-src/content/stylesheets/partials/_example.scss Normal file
View File

@ -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; }
}

14
doc-src/content/stylesheets/partials/_main.scss
View File

@ -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 {

17
doc-src/content/stylesheets/partials/_theme.scss
View File

@ -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; }}

1
doc-src/content/stylesheets/screen.scss
View File

@ -14,6 +14,7 @@
@import "partials/sidebar";
@import "partials/main";
@import "partials/code";
@import "partials/example";
//@import "syntax/syntax-theme";

4
doc-src/layouts/basic.haml
View File

@ -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"}

2
doc-src/layouts/example.haml
View File

@ -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

24
doc-src/layouts/partials/example.haml
View File

@ -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)