compass-theme 0.0.2

data/lib/compass-theme/stylesheets/partials/_sidebar.scss

@@ -0,0 +1,31 @@
+aside {
+  padding-top: 15px;
+  text-align: right;
+  padding-right: 22px;
+  h2, h3 {
+    text-align: left;
+    font-size: 1.3em;
+    line-height: 1.45em;
+    padding-bottom: .2em;
+    margin-bottom: .4em;
+    @extend .clear-border-radius;
+  }
+  h3 {
+    padding: 0 0 .5em; line-height: 1.1em;
+  }
+  a {
+    font-size: .85em;
+  }
+  ul ul a {
+    &.selected, &.selected:hover {
+      font-weight: bold;
+      text-decoration: underline;
+    }
+  }
+  .deprecated {
+    text-decoration: line-through;
+  }
+  .beta span:after {
+    content: " (\3B2)";
+  }
+}

data/lib/compass-theme/stylesheets/partials/_theme.scss

@@ -0,0 +1,290 @@
+@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg){
+  background: $page-bg;
+  body { background: $page-bg; color: $text;
+    a { color: $link; } }
+
+  #page { @extend .horizontal-rule-#{$theme}; }
+  header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
+
+  nav a { color: $nav-link; }
+  #main-nav a { color: $main-nav;}
+
+  body#home #main-nav a[rel=home],
+  body#help #main-nav a[rel=help],
+  body.tutorial #main-nav a[rel=help],
+  body.reference #main-nav a[rel=documentation],
+  body#changelog #main-nav a[rel=documentation],
+  body.demo #main-nav a[rel=documentation],
+  body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
+
+  #search-docs input {
+    @extend .inset-panel-#{$theme}; color: $search;
+    &::-webkit-input-placeholder { color: $search; } }
+  #{headings()}{ color: $heading;
+    strong { color: $main-nav-selected; }
+    em { color: $code; } }
+
+  #page > article h2 { @extend .horizontal-rule-top-#{$theme}; }
+  hr { @extend .horizontal-rule-#{$theme};
+    border-bottom-width: 8px}
+  body#home h2 { @extend .horizontal-rule-#{$theme}; }
+
+  #page aside + article { @extend .vertical-rule-left-#{$theme}; }
+
+  aside {
+    h2 a { color: $strong-text; }
+    h2, h3 { @extend .horizontal-rule-#{$theme}; }
+  }
+
+  footer .links li { @extend .vertical-rule-#{$theme}; }
+  code { @extend .code-block-#{$theme}; color: $code; }
+
+  #theme_pref { @extend .theme-switch-#{$theme}; }
+  #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}; } }
+  #featured_sites li { @extend .inset-panel-#{$theme}; }
+  
+  body.tutorial #page article img {
+    @extend .image-border-#{$theme};
+  }
+
+}
+@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){
+
+  #page > article {
+    h1 { @extend .horizontal-rule-#{$theme}; }
+    h2 { @extend .horizontal-rule-top-#{$theme}; }
+    h3 { @extend .heading-panel-#{$theme}; }
+    h1 + h2, hr + h2 {
+      @extend .clear-box-shadow; border-top: 0;
+    margin-top: 0;}
+  }
+
+  #sub-nav { @extend .horizontal-rule-#{$theme}; }
+  #docs-nav { @extend .vertical-rule-#{$theme}; }
+  body.core a[rel=core], body.blueprint a[rel=blueprint]{ @extend .inset-panel-#{$theme}; color: $docs-nav-selected; @extend .round-corners-4;}
+  #main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; float: left; }
+
+  #module-nav {
+    ul { overflow: visible; }}
+  body.getting-started #module-nav li.getting-started,
+  body.tutorial #module-nav li.tutorials,
+  body.support #module-nav li.support,
+  #module-nav li.selected { @extend .selected-marker-#{$theme};
+    a { color: $module-nav-selected; } }
+
+  a[rel=sass], a[rel=scss], a[rel=css], a[rel=html], a[rel=haml] { @extend .syntax-switch-#{$theme}; }
+  &.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css], &.html a[rel=html], &.haml a[rel=haml] { 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, .example-source, .function-source { @extend .mixin-panel-#{$theme};
+    .container textarea { color: $code; }
+  }
+  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);} }
+
+}
+
+// Dark theme
+.inset-panel-dark {
+  @include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
+  background: darken(#2f2f2f, 6); background-color: rgba(#000, .3); }
+
+.horizontal-rule-dark {
+  @include box-shadow(rgba(#fff, .07) 0 1px 0);
+  border-bottom: 1px solid #121212; }
+
+.horizontal-rule-top-dark {
+  @include box-shadow(rgba(#fff, .07) 0 1px 0 inset);
+  border-top: 1px solid #121212; }
+
+.vertical-rule-dark {
+  @include box-shadow(rgba(#fff, .07) 1px 0 0);
+  border-right: 1px solid #121212; }
+
+.vertical-rule-left-dark {
+  @include box-shadow(rgba(#fff, .07) 1px 0 0 inset);
+  border-left: 1px solid #121212; }
+
+.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);
+  @include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
+  a:hover { color: #fff;
+    .arg { color: rgba(#fff, .6);}
+  }
+}
+.doc-panel-dark {
+  background: darken(#2f2f2f, 4);
+  background: rgba(#000, .1);
+  @include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
+}
+
+.syntax-switch-dark {
+  color: #000; text-shadow: rgba(#fff, .08) 0 1px 0;
+  &:hover { color: #fff; text-shadow: #000 0 1px 0; } }
+
+.theme-switch-dark {
+  cursor: pointer;
+  a { color: #000; color: rgba(#000, .8); text-shadow: rgba(#fff, .08) 0 1px 0; }
+  &:hover a { color: #eee; text-shadow: #000 0 1px 0; } }
+
+.selected-marker-dark {
+  a:before{ border-bottom-color: #121212; }
+  &: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); }}
+  .container textarea { background: darken(#2f2f2f, 6); }
+}
+
+.image-border-dark {
+  border:2px solid #BFBFBF;
+  @extend .round-corners-4;
+}
+
+@mixin dark-theme($docs: false) {
+  $page-bg: #2f2f2f;
+
+  $text: #c6c6c6;
+  $heading: white;
+  $strong-text: #dbdbdb;
+
+  $search: #6e6e6e;
+
+  $code: #dadbb1;
+  $nav-link: #bfbfbf;
+  $link: saturate(lighten(#85AFC9, 4), 19);
+
+  $main-nav: white;
+  $main-nav-selected: #fb292d;
+  $docs-nav-selected: $strong-text;
+  $module-nav-selected: $link;
+
+  $option-panel-border: rgba(#000, .5);
+  $option-panel-bg: rgba(#fff, .06);
+
+  @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
+
+  @if($docs){
+    @include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
+    .syntaxhighlighter, pre, pre .code-block:first-child {
+      &::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
+    }
+    .syntaxhighlighter, pre, pre .code-block:first-child {
+      &::-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; }
+    }
+  }
+}
+
+// Light Theme
+.inset-panel-light {
+  @include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset);
+  text-shadow: 0 1px 1px #fff;
+  background: darken(#fff, .04); background-color: rgba(#000, .04); }
+
+.horizontal-rule-light {
+  @include box-shadow(#fff 0 1px 0);
+  border-bottom: 1px solid #bbb; }
+
+.horizontal-rule-top-light {
+  @include box-shadow(#fff 0 1px 0 inset);
+  border-top: 1px solid #bbb; }
+
+.vertical-rule-light {
+  @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
+  border-right: 1px solid #bbb; }
+
+.vertical-rule-left-light {
+  @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0 inset);
+  border-left: 1px solid #bbb; }
+
+.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; }}
+
+.theme-switch-light {
+  cursor: pointer;
+  a {color: rgba(#000, .2); text-shadow: rgba(#fff, 1) 0 1px 0;}
+  &:hover a { color: #000; } }
+
+.heading-panel-light {
+  background: rgba(#fff, .5);
+  @include box-shadow(rgba(#000, .13) 0 0 0 1px inset);
+  a:hover { color: #000;
+    .arg { color: rgba(#000, .6); } }
+}
+
+.selected-marker-light {
+  a:before{ border-bottom-color: #bbbbbb; }
+  &:before { border-bottom-color: #fff; }
+  &:after { border-bottom-color: #e5e5e5; }
+}
+
+.doc-panel-light {
+  background: rgba(#000, .03);
+  text-shadow: rgba(#fff, .9) 0 1px 1px;
+  @include box-shadow(rgba(#000, .15) 0 0 0 1px inset);
+}
+
+.mixin-panel-light {
+  @extend .inset-panel-light;
+  background: rgba(#fff, .8);
+  td.gutter { background: rgba(#000, .08); .line { border-right: 2px solid rgba(#000, .2); color: rgba(#000, .4); } }
+  .container textarea { background: darken(#fff, .04); }
+}
+
+.image-border-light {
+  border:2px solid #444444;
+  @extend .round-corners-4;
+}
+
+@mixin light-theme($docs: false) {
+  $page-bg: #ececec; // image-url('bg-light.jpg');
+
+  $text: #111;
+  $heading: #222;
+  $strong-text: #000;
+
+  $search: #666;
+
+  $link: #307eb6;
+  $nav-link: #444;
+  $code: #222;
+
+  $main-nav: #000;
+  $main-nav-selected: darken(#fb292d, 15);
+  $docs-nav-selected: $strong-text;
+  $module-nav-selected: $link;
+
+  $option-panel-border: rgba(#000, .2);
+  $option-panel-bg: #fff;
+
+  @include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
+
+  @if($docs){
+    @include docs-theme(light, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
+    .syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; background: rgba(#ddd, .8); }
+    .syntaxhighlighter::-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; }
+  }
+}

data/lib/compass-theme/stylesheets/partials/_typography.scss

@@ -0,0 +1,47 @@
+@font-face {
+  font-family: "pictos-web";
+  src: url('/otherfonts/pictos-web.eot');
+  src: local("?"), url('/otherfonts/pictos-web.woff') format('woff'), url('/otherfonts/pictos-web.ttf') format('truetype'), url('/otherfonts/pictos-web.svg#webfontIyfZbseF') format('svg');}
+
+@include font-face("museosans-web", font-files("museosans-web.woff", woff, "museosans-web.ttf", truetype, "museosans-web.svg#webfontJHBEijmD", svg), 'museosans-web.eot');
+
+
+.sans-font { font-family: 'Lucida Grande', Arial, sans-serif; }
+.heading-font { font-family: 'Museo Sans', "museosans-web", 'serif'; }
+.pictos { font-family: pictos, pictos-web; font-weight: normal; font-style: normal;}
+.fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;}
+
+#page {
+  line-height: 1.45em;
+  ol { list-style: outside decimal; padding-left: 2.5em; }
+  ol ol { list-style: outside lower-alpha; padding-left: 2.5em; }
+  ul, ol, dl { margin-bottom: 1.5em;}
+  p { margin-bottom: 1.2em;}
+  #{headings(1,2)}{ @extend .heading-font; line-height: 1.2em; }
+  h1 { font-size: 35px; margin-bottom: 15px; padding-bottom: 6px; }
+  h2 { font-size: 26px; margin: 1em 0 15px; padding-bottom: 6px; }
+  h3 { font-size: 18px; }
+  h4 { font-size: 18px; margin: .4em 0; }
+  ul { list-style: inside disc; }
+  dt { font-weight: bold; }
+}
+#page aside {
+  ul { list-style: none; margin-bottom: 1em;}
+  h2 { line-height: 1.3em; margin-top: 0; padding-top: 3px;}
+}
+em     { font-style: italic; }
+strong { font-weight: bold;  }
+
+#page > article {
+  ul ul { padding-left: 1em; }
+  position: relative;
+  h2 { font-size: 26px; margin: .5em 0 .6em;
+    padding: 1em 0 6px;}
+  hr + h2 { padding-top: 0; }
+  hr + h3, h4, h5 { margin-top: 0; }
+}
+
+dl.table dt, dl.table dd { display: inline-block; }
+dg { display: block; margin-bottom: 1.5em; }
+
+.warning { color: #c00; }

data/lib/compass-theme/stylesheets/screen.scss

@@ -0,0 +1,28 @@
+@import "compass";
+@import "compass/layout";
+@import "core/extensions";
+
+@include global-reset;
+@include reset-html5;
+
+@import "core/base-classes";
+
+@import "partials/theme";
+@import "partials/layout";
+@import "partials/typography";
+
+@import "partials/nav";
+@import "partials/sidebar";
+@import "partials/main";
+@import "partials/code";
+@import "partials/example";
+@import "partials/install";
+@import "partials/blog";
+
+@import "syntax/syntax-theme";
+
+@import "core/clearing-classes";
+
+
+html.dark { @include dark-theme(true); }
+html.light { @include light-theme(true); }

data/lib/compass-theme/stylesheets/syntax/_shCore.scss

@@ -0,0 +1,216 @@
+@mixin round_corners_custom($top, $right, $bottom, $left) {
+	-moz-border-radius: $top $right $bottom $left !important;
+	-webkit-border-radius: $top $right $bottom $left !important;
+}
+
+@mixin round_corners($radius) {
+	@include round_corners_custom($radius, $radius, $radius, $radius);
+}
+
+.syntaxhighlighter {
+	a,
+	div,
+	code,
+	table,
+	table td,
+	table tr,
+	table tbody,
+	table thead,
+	table caption,
+	textarea {
+		@include round_corners(0);
+		
+		background: none !important;
+		border: 0 !important;
+		bottom: auto !important;
+		float: none !important;
+		height: auto !important;
+		left: auto !important;
+		line-height: 1.1em !important;
+		margin: 0 !important;
+		outline: 0 !important;
+		overflow: visible !important;
+		padding: 0 !important;
+		position: static !important;
+		right: auto !important;
+		text-align: left !important;
+		top: auto !important;
+		vertical-align: baseline !important;
+		width: auto !important;
+		box-sizing: content-box !important;
+		font: {
+			family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
+			weight: normal !important;
+			style: normal !important;
+			size: 1em !important;
+		}
+		min: {
+			// For IE8, FF & WebKit
+			height: inherit !important;
+			// For IE7
+			height: auto !important;
+		}
+	}
+}
+
+.syntaxhighlighter {
+	width: 100% !important;
+	margin: 1em 0 1em 0 !important;
+	
+	position: relative !important;
+	overflow: auto !important;
+	font-size: 1em !important;
+	
+	&.source { overflow: hidden !important; }
+	
+	// set up bold and italic
+	.bold { font-weight: bold !important; }
+	.italic { font-style: italic !important; }
+	
+	.line { white-space: pre !important; }
+	
+	// main table and columns
+	table {
+		width: 100% !important;
+		caption {
+			text-align: left !important;
+			padding: .5em 0 0.5em 1em !important;
+		}
+		
+		td.code {
+			width: 100% !important;
+			
+			.container {
+				position: relative !important;
+				
+				textarea {
+					box-sizing: border-box !important;
+					position: absolute !important;
+					left: 0 !important;
+					top: 0 !important;
+					width: 100% !important;
+					height: 100% !important;
+					border: none !important;
+					background: white !important;
+					padding-left: 1em !important;
+					overflow: hidden !important;
+					white-space: pre !important;
+				} 
+			} 
+		}
+		
+		// middle spacing between line numbers and lines
+		td.gutter .line {
+			text-align: right !important;
+			padding: 0 0.5em 0 1em !important; 
+		}
+		
+		td.code .line {
+			padding: 0 1em !important;
+		}
+	}
+	
+	&.nogutter {
+		td.code {
+			.container textarea, .line { padding-left: 0em !important; }
+		}
+	}
+	
+	&.show { display: block !important; }
+	
+	// Adjust some properties when collapsed
+	&.collapsed {
+		table { display: none !important; }
+		
+		.toolbar {
+			padding: 0.1em 0.8em 0em 0.8em !important;
+			font-size: 1em !important;
+			position: static !important;
+			width: auto !important;
+			height: auto !important;
+			
+			span {
+				display: inline !important;
+				margin-right: 1em !important;
+				
+				a {
+					padding: 0 !important;
+					display: none !important;
+					&.expandSource { display: inline !important; } 
+				}
+			}
+		}
+	}
+	
+	// Styles for the toolbar
+	.toolbar {
+		position: absolute !important;
+		right: 1px !important;
+		top: 1px !important;
+		width: 11px !important;
+		height: 11px !important;
+		font-size: 10px !important;
+		z-index: 10 !important;
+		
+		span.title { display: inline !important; }
+		
+		a {
+			display: block !important;
+			text-align: center !important;
+			text-decoration: none !important;
+			padding-top: 1px !important;
+			
+			&.expandSource { display: none !important; }
+		}
+	}
+	
+	&.ie {
+		font-size: .9em !important;
+		padding: 1px 0 1px 0 !important;
+		
+		.toolbar {
+			line-height: 8px !important;
+			a {
+				padding-top: 0px !important;
+			}
+		}
+	}
+	
+	// Print view.
+	// Colors are based on the default theme without background.
+	&.printing {
+		.line.alt1 .content,
+		.line.alt2 .content,
+		.line.highlighted .number,
+		.line.highlighted.alt1 .content,
+		.line.highlighted.alt2 .content { background: none !important; }
+		
+		// Gutter line numbers
+		.line {
+			.number { color: #bbbbbb !important; }
+			// Add border to the lines
+			.content { color: black !important; }
+		}
+		
+		// Toolbar when visible
+		.toolbar { display: none !important; }
+		a { text-decoration: none !important; }
+		.plain, .plain a { color: black !important; }
+		.comments, .comments a { color: #008200 !important; }
+		.string, .string a { color: blue !important; }
+		.keyword {
+			color: #006699 !important;
+			font-weight: bold !important; 
+		}
+		.preprocessor { color: gray !important; }
+		.variable { color: #aa7700 !important; }
+		.value { color: #009900 !important; }
+		.functions { color: #ff1493 !important; }
+		.constants { color: #0066cc !important; }
+		.script { font-weight: bold !important; }
+		.color1, .color1 a { color: gray !important; }
+		.color2, .color2 a { color: #ff1493 !important; }
+		.color3, .color3 a { color: red !important; }
+		.break, .break a { color: black !important; }
+	}
+}