improved styling for source code views

doc-src/Gemfile.lock

@@ -8,7 +8,7 @@ GIT
 PATH
   remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
   specs:
-    compass (0.11.alpha.0.8413909)
+    compass (0.11.alpha.0.9cd80d1)
       haml (~> 3.0.23)
 
 GEM

doc-src/assets/javascripts/site.js

@@ -73,4 +73,4 @@ $('document').ready(function(){
       event.preventDefault();
     }
   });
-})
+});

doc-src/content/stylesheets/core/_clearing-classes.sass

@@ -9,3 +9,5 @@
 
 .hide
   display: none
+.clear-box-shadow
+  +box-shadow(none)

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

@@ -1,11 +1,18 @@
 html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;}
-.mixin-source { display: none; }
+.mixin-source { display: none; position: relative; @extend .fixed-font; }
 
-.syntaxhighlighter { padding: 5px 0; @include border-radius;
+html .syntaxhighlighter {
-  .toolbar { position: absolute; right: 0; }
+  margin: 0 0 2px;
-  .code-block { background: none; @include box-shadow(none)}
+  //font-size: 1.1em;
+  text-shadow: none;
+  .code-block { background: none; @extend .clear-box-shadow; }
+  &, table td.code .container { position: static !important; }
+  table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } } 
+  .toolbar { display: none; }
+  //a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
   }
 
+
 pre {
   margin: 1.5em 0;
   .code-block { padding: .6em; }
@@ -25,13 +32,13 @@ pre {
 }
 h3 { @include round-corners; 
   padding: 10px 15px;
-  margin: 20px 0 2px;
+  margin: 20px 0 20px;
   font-weight: bold;
   position: relative;
   a { text-decoration: none;}
   code, .arg { font-weight: normal; }
 }
-h3.mixin { @include round-top-corners;}
+h3.mixin { @include round-top-corners; margin-bottom: 2px;}
 .arg {
   display: inline-block;
   padding: 0 2px;
@@ -43,3 +50,49 @@ h3.mixin { @include round-top-corners;}
 
 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;}
+
+.syntaxhighlighter {
+  a, div, code, table, table td, table tr, table tbody, table thead, table caption, textarea {
+    background: none; border: 0; bottom: auto; float: none; height: auto; left: auto; line-height: 1.2em !important;
+    padding: 0; margin: 0; outline: 0;
+    overflow: visible; position: static; right: auto;
+    text-align: left; top: auto; vertical-align: baseline;
+    width: auto;
+    font: { weight: normal; style: normal;
+      size: 1em;
+    }
+    min: { height: inherit; }
+  }
+}
+
+.syntaxhighlighter { width: 100%; margin: 1em 0 1em 0; position: relative; overflow: auto; font-size: 1em;
+  
+  // set up bold and italic
+  .bold { font-weight: bold; }
+  .italic { font-style: italic; }
+  .line { white-space: pre; }
+  
+  // main table and columns
+  table { width: 100%;
+    td.code { width: 100%;
+      .line { padding: 0 .6em; } }    
+    td.gutter .line { text-align: right; padding: 0 0.8em 0 1em; } } // middle spacing between line numbers and lines
+    
+  // Styles for the toolbar
+  .toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
+    span.title { display: inline; }
+    a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } }
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px; }
+
+::-webkit-scrollbar-button {
+  &:start:decrement, &:end:increment {
+    display: block;
+    width: 0;
+    height: 0; } }
+
+::-webkit-scrollbar-thumb:horizontal {
+    -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }

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

@@ -30,7 +30,7 @@ h2 a.help {
   position: relative;
   text-decoration: none;
   @include opacity(.3);
-  &:hover{ @include opacity(.7); }
+  &:hover { @include opacity(.7); }
   &:before {
     @extend .pictos;
     content: "?";

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

@@ -39,7 +39,7 @@
   #version { color: $option-panel-text; a { color: rgba($nav-link, .7); } }
   
   &.sass a[rel=sass], &.scss a[rel=scss] { color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
-  
+  .mixin-source { @extend .mixin-panel-#{$theme}; }
   
   #page > article {
     #{headings()}{ color: $heading; }
@@ -97,6 +97,10 @@
   &:before { border-bottom-color: #414141; }
   &:after { border-bottom-color: #323232; }
 }
+.mixin-panel-dark {
+  @extend .inset-panel-dark;
+  td.gutter { background: rgba(#fff, .05); .line { border-right: 2px solid rgba(#fff, .15); color: rgba(#fff, .5); }}
+}
 
 @mixin dark-theme {
   $page-bg: #343434;
@@ -165,6 +169,11 @@
   @include box-shadow(rgba(#000, .15) 0 0 0 1px inset);
 }
 
+.mixin-panel-light {
+  @extend .inset-panel-light;
+  td.gutter { background: rgba(#000, .08); .line { border-right: 2px solid rgba(#000, .2); color: rgba(#000, .4); } }
+}
+
 @mixin light-theme {
   $page-bg: #ececec; // image-url('bg-light.jpg');
 
@@ -190,5 +199,17 @@
   @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, $option-panel-text, $option-panel-border, $option-panel-bg);
 }
 
-html.dark { @include dark-theme; }
+html.dark {
-html.light { @include light-theme; }
+  @include dark-theme;
+  ::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
+  ::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; }
+}
+html.light {
+  @include light-theme;
+  ::-webkit-scrollbar-track-piece {
+    -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset;
+    background: rgba(#ddd, .8); }
+  ::-webkit-scrollbar-thumb:horizontal {
+    background: -webkit(linear-gradient(rgba(#000, 0) 40%, rgba(#000, .2))) #fff;
+    -webkit-box-shadow: rgba(black, 0.2) 0px 0 0 1px inset; }
+}

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

@@ -8,7 +8,7 @@
 
 .sans-font { font-family: 'Lucida Grande', Arial, sans-serif; }
 .heading-font { font-family: 'museosans-web', 'serif'; }
-.pictos { font-family: pictos-web; font-weight: normal; font-style: normal;}
+.pictos { font-family: pictos, pictos-web; font-weight: normal; font-style: normal;}
 .fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;}
 
 #page > article {

doc-src/content/stylesheets/screen.sass

@@ -13,4 +13,6 @@
 @import partials/main
 @import partials/code
 
+@import syntax/syntax-theme
+
 @import core/clearing-classes

doc-src/content/stylesheets/syntax/_shThemeRDark.scss

@@ -0,0 +1,32 @@
+// RDark SyntaxHighlighter theme based on theme by Radu Dineiu
+// http://www.vim.org/scripts/script.php?script_id=1732
+
+$background:					#1b2426 !default;
+
+$line_highlighted_background:	#323E41 !default;
+$line_highlighted_number:		#b9bdb6 !default;
+
+$gutter_text:					#afafaf !default;
+$gutter_border_color:			#435a5f !default;
+
+$toolbar_collapsed_a:			#5ba1cf !default;
+$toolbar_collapsed_a_hover:		#5ce638 !default;
+$toolbar_collapsed_background:	#000 !default;
+
+$toolbar_a:						#fff !default;
+$toolbar_a_hover:				#e0e8ff !default;
+
+$code_plain:					#b9bdb6 !default;
+$code_comments:					#878a85 !default;
+$code_string:					#5ce638 !default;
+$code_keyword:					#5ba1cf !default;
+$code_preprocessor:				#435a5f !default;
+$code_variable:					#ffaa3e !default;
+$code_value:					#009900 !default;
+$code_functions:				#ffaa3e !default;
+$code_constants:				#e0e8ff !default;
+$code_color1:					#e0e8ff !default;
+$code_color2:					white !default;
+$code_color3:					#ffaa3e !default;
+
+@import "theme_template.scss";

doc-src/content/stylesheets/syntax/_syntax-theme.scss

@@ -0,0 +1,7 @@
+// Default Syntax Highlighter theme.
+//@import "shCore.scss";
+//@import "shThemeRDark.scss";
+
+/*.syntaxhighlighter {
+	.keyword { font-weight: bold !important; }
+}*/

doc-src/content/stylesheets/syntax/shCoreDefault.scss

@@ -1,2 +0,0 @@
-@import "shCore.scss";
-@import "shThemeDefault.scss";

doc-src/content/stylesheets/syntax/shThemeDefault.scss

@@ -1,7 +0,0 @@
-// Default Syntax Highlighter theme.
-
-@import "_theme_template.scss";
-
-.syntaxhighlighter {
-	.keyword { font-weight: bold !important; }
-}

doc-src/layouts/basic.haml

@@ -12,9 +12,8 @@
     %script(src="/javascripts/jquery-1.3.2.min.js")
     %script(src="/javascripts/jquery.cookie.js")
     %script(src="/javascripts/site.js")
+    %script(src="/javascripts/shCore.js" type="text/javascript" deferred)
     %script(src="/javascripts/fixups.js" deferred)
-    %link{:href => "/stylesheets/syntax/shCore.css", :rel => "stylesheet", :type => "text/css"}
-    %link{:href => "/stylesheets/syntax/shThemeDefault.css", :rel => "stylesheet", :type => "text/css"}
     <!--<![endif]-->
     /[if gte IE 7]
       %link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}

doc-src/layouts/main.haml

@@ -33,9 +33,8 @@
       = yield
       -#comments= render "partials/disqus_comments"
     %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/shBrushCss.js", :type => "text/javascript"}
+  -#%script{:src => "/javascripts/shBrushSass.js", :type => "text/javascript"}
-  %script{:src => "/javascripts/shBrushSass.js", :type => "text/javascript"}
+  -#script{:src => "/javascripts/shBrushScss.js", :type => "text/javascript"}
-  %script{:src => "/javascripts/shBrushScss.js", :type => "text/javascript"}
   = @item[:content_for_javascripts]
   = render "partials/analytics"