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

improved styling for source code views

Browse Source
This commit is contained in:
B Mathis 2010-11-24 17:43:25 -06:00
parent 9cd80d11b4
commit 1f97ae1221
15 changed files with 136 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc-src/Gemfile.lock
View File

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

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

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

4
doc-src/content/stylesheets/core/_clearing-classes.sass
View File

@ -8,4 +8,6 @@
+border-bottom-right-radius(0)
.hide
display: none
display: none
.clear-box-shadow
+box-shadow(none)

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

@ -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;
.toolbar { position: absolute; right: 0; }
.code-block { background: none; @include box-shadow(none)}
html .syntaxhighlighter {
margin: 0 0 2px;
//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;
@ -42,4 +49,50 @@ 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;}
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; }

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

@ -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: "?";

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

@ -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.light { @include light-theme; }
html.dark {
@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; }
}

2
doc-src/content/stylesheets/partials/_typography.scss
View File

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

2
doc-src/content/stylesheets/screen.sass
View File

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

0
doc-src/content/stylesheets/syntax/shCore.scss → doc-src/content/stylesheets/syntax/_shCore.scss
View File

32
doc-src/content/stylesheets/syntax/_shThemeRDark.scss Normal file
View File

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

7
doc-src/content/stylesheets/syntax/_syntax-theme.scss Normal file
View File

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

2
doc-src/content/stylesheets/syntax/shCoreDefault.scss
View File

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

7
doc-src/content/stylesheets/syntax/shThemeDefault.scss
View File

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

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

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

7
doc-src/layouts/main.haml
View File

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