improved the styling for the docs example pages

doc-src/assets/javascripts/fixups.js

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

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('(&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;
+})();

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')) {
+      //if (target.parent().parent().is('#markup')) {
-        changeExampleMarkupSyntax(target.attr("rel"), true);
+      //  changeExampleMarkupSyntax(target.attr("rel"), true);
-      } else {
+      //else
       changeExampleStyleSyntax(target.attr("rel"), true);
-      }
 
     // Set Theme preference
     } else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) {

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

@@ -1,3 +1,2 @@
 .example
-  %h1 The Quick Brown Fox
+  %p The Quick Brown Fox jumped over the lazy dog.
-  %p Jumped over the log.

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

doc-src/content/stylesheets/partials/_code.scss

@@ -1,8 +1,18 @@
-html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;}
+//html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;}
-.mixin-source { display: none; position: relative; @extend .fixed-font; }
+.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; }

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

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 {

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}; }
+  a[rel=sass], a[rel=scss], a[rel=css] { @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}; }
+  &.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; }}

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";
 

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

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

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
-
+    .example-source
-    .code
+      %pre.source-code.html= h(example_html)
-      %ul
+      -# %pre.source-code.haml= h(example_haml)
-        %li#html
-          %pre= h(example_html)
-        %li#haml
-          %pre= h(example_haml)
   %section#styles
     .syntax_pref
       %a{:href => "#", :rel => "scss" } scss
       %a{:href => "#", :rel => "sass" } sass
       %a{:href => "#", :rel => "css" } css
-    .code
+    .example-source
-      %ul
+      %pre.source-code.scss= h(example_scss)
-        %li#scss
+      %pre.source-code.sass= h(example_sass)
-          %pre= h(example_scss)
+      %pre.source-code.css= h(example_css)
-        %li#sass
-          %pre= h(example_sass)
-        %li#css
-          %pre= h(example_css)