updated docs design and added a layout for site pages

This commit is contained in:
Brandon Mathis 2010-12-07 17:28:52 -06:00
parent caafd963a3
commit 4ab7a6ca9d
14 changed files with 192 additions and 144 deletions

View File

@ -12,9 +12,9 @@ GIT
sass (3.1.0.alpha.50) sass (3.1.0.alpha.50)
PATH PATH
remote: .. remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
specs: specs:
compass (0.11.alpha.3.d0c39f9) compass (0.11.alpha.3.caafd96)
chunky_png (~> 0.10.3) chunky_png (~> 0.10.3)
sass (>= 3.1.0.alpha.50) sass (>= 3.1.0.alpha.50)

View File

@ -3,65 +3,59 @@ title: Compass Help
crumb: Help crumb: Help
classnames: classnames:
- help - help
layout: main - getting-started
layout: site
--- ---
%article %article
%h1#logo Compass %h1 Getting started with Compass
:markdown :markdown
Compass is a stylesheet authoring tool that uses the Sass stylesheet Compass is an open-source CSS authoring framework which uses the [Sass stylesheet
language to make your stylesheets smaller and your web site easier to language](http://sass-lang.com) to make writing stylesheets powerful and easy. If you're
maintain. Compass provides ports of the best of breed css frameworks not familiar with Sass, you can take a look at [these simple tutorials](http://sass-lang.com/tutorial.html)
that you can use without forcing you to use their presentational class to get caught up.
names. Its a new way of thinking about stylesheets that must be seen
in action! <object width="700" height="438"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11671458&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11671458&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="438"></embed></object><p><a href="http://vimeo.com/11671458">An introduction to Compass</a> from <a href="http://vimeo.com/ltackett">Lorin Tackett</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<object width="700" height="438"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11671458&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11671458&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="438"></embed></object><p><a href="http://vimeo.com/11671458">An introduction to Compass</a> from <a href="http://vimeo.com/ltackett">Lorin Tackett</a> on <a href="http://vimeo.com">Vimeo</a>.</p> :markdown
## Installing Compass
## Installing
Compass is a tool that runs on the command line. On any system with ruby installed, open your terminal and type:
Compass is a tool that runs on the command line.
On any system with ruby installed, open your terminal and type:
gem install compass gem install compass
This will install Compass and Sass too. Verify that compass is installed: This will install Compass and Sass too. If you want to verify that compass is installed:
compass version compass version
## Creating a stand-alone project ## Manual Setup
compass create myproject compass create /path/to/project
mate myproject cd /path/to/project
compass watch myproject compass watch
If you don't have TextMate, substitute the `mate myproject` part with the text Now you can edit the `*.scss` files in the `sass` directory with the text editor of your choice.
editor of your choice. Edit the `*.scss` files in the `sass` directory. the `compass watch` process will automatically compile your them into css in the stylesheets directory whenever they change.
These files are yours and you can change them as you see fit, delete them, The files in the `sass` directory are yours and you can change them, delete them, add new ones, etc.
make new ones, etc. Compass will automatically compile them into css in the
`stylesheets` directory whenever they change. ## Manual setup using the Blueprint Framework
## Rails Support When starting a project from scrath:
compass init rails /path/to/myrailsproject compass create /path/to/project --using blueprint
## Installing a framework
When creating a new project:
compass create myproject --using blueprint/basic
When installing into an existing project: When installing into an existing project:
cd myproject cd /path/to/project
compass install blueprint/semantic compass install blueprint
With Rails: To read more about using the Blueprint framework with Compass, [see the docs](/reference/blueprint/)
compass init rails /path/to/myrailsproject --using blueprint/semantic ## Rails Setup
## Bugs Reports, Discussions, Support compass init rails /path/to/myrailsproject
Send a note to the [mailing list](http://groups.google.com/group/compass-users) Using Blueprint with Rails:
and/or [File a bug](http://github.com/chriseppstein/compass/issues).
compass init rails /path/to/myrailsproject --using blueprint

View File

@ -5,22 +5,25 @@ layout: tutorial
classnames: classnames:
- tutorial - tutorial
--- ---
### Use a Base stylesheet file
# Best Practices
## Use a Base stylesheet file
Create a `_base.scss` [partial][1] to initialize your stylesheets with common Create a `_base.scss` [partial][1] to initialize your stylesheets with common
variables and ([often][2]) the framework utilities you plan to use: variables and ([often][2]) the framework utilities you plan to use:
#### _base.scss ### _base.scss
$blueprint-grid-columns : 24; $blueprint-grid-columns : 24;
$blueprint-grid-width : 30px; $blueprint-grid-width : 30px;
$blueprint-grid-margin : 10px; $blueprint-grid-margin : 10px;
$font-color : #333; $font-color : #333;
@import "compass/reset"; @import "compass/reset";
@import "compass/utilities"; @import "compass/utilities";
@import "blueprint"; @import "blueprint";
// etc. // etc.
The `_base.scss` file is also a great place to keep your own custom mixins, so The `_base.scss` file is also a great place to keep your own custom mixins, so
@ -28,14 +31,14 @@ theyre available to any stylesheet that includes it.
Then you can include this file in all other stylesheets: Then you can include this file in all other stylesheets:
#### application.scss ### application.scss
@import "base"; @import "base";
#wrapper { #wrapper {
@include container; @include container;
} }
// etc. // etc.
It is important to define any compass/framework constants that you want to override It is important to define any compass/framework constants that you want to override
@ -44,7 +47,7 @@ Constants][3] , for an example of where the number of grid columns for blueprint
is overridden/set to 32. Note that you can refer to `_base.scss` without the is overridden/set to 32. Note that you can refer to `_base.scss` without the
leading underscore and without the extension, since it is a [partial][1]. leading underscore and without the extension, since it is a [partial][1].
### Write your own Custom Mixins ## Write your own Custom Mixins
Mixins let you insert any number of style rules into a selector (and its Mixins let you insert any number of style rules into a selector (and its
descendants!) with a single line. This is a great way to [DRY][4] up your descendants!) with a single line. This is a great way to [DRY][4] up your
@ -53,7 +56,7 @@ also make your stylesheet look like self-documented source code -- Its much
more obvious to read something like `@include round-corners(6px, #f00)` than the whole more obvious to read something like `@include round-corners(6px, #f00)` than the whole
list of rules which define that appearance. list of rules which define that appearance.
#### Presentation-free Markup ## Presentation-free Markup
CSS was created to extract the presentational concerns of a website from the CSS was created to extract the presentational concerns of a website from the
webpage content. Following this best practice theoretically results in a website webpage content. Following this best practice theoretically results in a website
@ -87,7 +90,7 @@ Instead, ask yourself "what non-presentational quality do these pages share in
common?" In this case, they are all pages of content, so it's better to apply a common?" In this case, they are all pages of content, so it's better to apply a
body class of "content" to these pages and then style against that class. body class of "content" to these pages and then style against that class.
#### Nest selectors, but not too much. ## Nest selectors, but not too much.
It's easier to style a webpage from scratch or starting from some common base It's easier to style a webpage from scratch or starting from some common base
point for your application than it is to contend with unwanted styles bleeding point for your application than it is to contend with unwanted styles bleeding

View File

@ -22,8 +22,8 @@ classnames:
Once you get Compass installed, you are ready to create a new Once you get Compass installed, you are ready to create a new
blueprint project. In your terminal enter the following commands: blueprint project. In your terminal enter the following commands:
%code.shell %pre.shell
%pre %code
%span.prompt<> $&nbsp; %span.prompt<> $&nbsp;
compass create my_project --using blueprint/semantic compass create my_project --using blueprint/semantic
%br> %br>
@ -46,16 +46,16 @@ classnames:
If you want to get started with the Basic Template because it feels If you want to get started with the Basic Template because it feels
more familiar to you, that's fine. It's very easy to transition to more familiar to you, that's fine. It's very easy to transition to
<a href="#semantic-blueprint">semantic selectors</a> when you're ready. <a href="#semantic-blueprint">semantic selectors</a> when you're ready.
%h2 Getting Started with Basic Blueprint %h2 Getting Started with Basic Blueprint
%p %p
Once you get Compass installed, you are ready to create a new Once you get Compass installed, you are ready to create a new
blueprint project. In your terminal enter the following commands: blueprint project. In your terminal enter the following commands:
%code.shell %pre.shell
%pre %code
%span.prompt<> $&nbsp; %span.prompt<> $&nbsp;
compass create my_project --using blueprint/basic compass create my_project --using blueprint/basic

View File

@ -7,14 +7,14 @@ html .syntaxhighlighter {
text-shadow: none; text-shadow: none;
.code-block { background: none; @extend .clear-box-shadow; } .code-block { background: none; @extend .clear-box-shadow; }
&, table td.code .container { position: static !important; } &, table td.code .container { position: static !important; }
table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } } table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } }
.toolbar { display: none; } .toolbar { display: none; }
//a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; } //a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
} }
pre { pre {
margin: 1.5em 0; margin: 1.5em 0;
.code-block { padding: .6em; } .code-block:first-child { padding: .6em; }
} }
.code-block { @extend .round-corners-4; @extend .fixed-font; .code-block { @extend .round-corners-4; @extend .fixed-font;
@ -25,12 +25,12 @@ pre {
} }
.source-documentation { .source-documentation {
@extend .round-corners-4; @extend .round-corners-4;
padding: 10px 15px; padding: 10px 15px;
@include round-bottom-corners @include round-bottom-corners
} }
h3 { @include round-corners; h3 { @include round-corners;
padding: 10px 15px; padding: 10px 15px;
margin: 20px 0 20px; margin: 20px 0 20px;
font-weight: bold; font-weight: bold;
@ -66,18 +66,18 @@ h2 + a[rel="view source"]{ margin-top: 12px;}
} }
.syntaxhighlighter { width: 100%; margin: 1em 0 1em 0; position: relative; overflow: auto; font-size: 1em; .syntaxhighlighter { width: 100%; margin: 1em 0 1em 0; position: relative; overflow: auto; font-size: 1em;
// set up bold and italic // set up bold and italic
.bold { font-weight: bold; } .bold { font-weight: bold; }
.italic { font-style: italic; } .italic { font-style: italic; }
.line { white-space: pre; } .line { white-space: pre; }
// main table and columns // main table and columns
table { width: 100%; table { width: 100%;
td.code { width: 100%; td.code { width: 100%;
.line { padding: 0 .6em; } } .line { padding: 0 .6em; } }
td.gutter .line { text-align: right; padding: 0 0.8em 0 1em; } } // middle spacing between line numbers and lines td.gutter .line { text-align: right; padding: 0 0.8em 0 1em; } } // middle spacing between line numbers and lines
// Styles for the toolbar // Styles for the toolbar
.toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10; .toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
span.title { display: inline; } span.title { display: inline; }
@ -86,4 +86,4 @@ h2 + a[rel="view source"]{ margin-top: 12px;}
&::-webkit-scrollbar { width: 12px; height: 12px; } &::-webkit-scrollbar { width: 12px; height: 12px; }
&::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } } &::-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; } &::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }
} }

View File

@ -2,7 +2,7 @@ $min-width: 530px;
$side-nav-width: 150px; $side-nav-width: 150px;
$main-min-width: $min-width - $side-nav-width; $main-min-width: $min-width - $side-nav-width;
body { body {
max-width: 1500px; max-width: 1500px;
min-width: $min-width; min-width: $min-width;
margin: 0 auto; margin: 0 auto;
@ -14,7 +14,7 @@ body {
#page { @extend .group; padding-bottom: 30px; overflow: hidden;} #page { @extend .group; padding-bottom: 30px; overflow: hidden;}
footer { @extend .group; clear: both; padding-top: 20px;} footer { @extend .group; clear: both; padding-top: 20px;}
header { padding: 22px 0 0; position: relative; } header { padding: 22px 0 0; position: relative; }
#page article { padding-left: $side-nav-width + 45px;} #page aside + article { padding-left: $side-nav-width + 45px;}
aside { float: left; width: $side-nav-width; } aside { float: left; width: $side-nav-width; }
body#home #page article { padding-left: 0;} body#home #page article { padding-left: 0;}

View File

@ -4,12 +4,12 @@
height: 0; width: 0; height: 0; width: 0;
position: absolute; position: absolute;
border-style: solid; } border-style: solid; }
nav a { @include hover-link; } nav a { @include hover-link; }
nav .selected a:hover { text-decoration: none;} nav .selected a:hover { text-decoration: none;}
header { @extend .group; header { @extend .group;
font-size: 1.25em; font-family: "Museo Sans"; border-width: 4px;} font-size: 1.3em; @extend .heading-font; border-width: 4px;}
#main-nav { #main-nav {
width: 79%; width: 79%;
display: inline-block; display: inline-block;
@ -21,22 +21,31 @@ header { @extend .group;
#sub-nav { #sub-nav {
@extend .group; @extend .group;
padding: 8px 0; } padding: 8px 0; }
#docs-nav, #module-nav { #docs-nav, #module-nav {
display: inline-block; display: inline-block;
float: left; float: left;
a { a {
padding: 2px 10px; padding: 2px 10px;
display: inline-block; }} display: inline-block; }}
#docs-nav { padding-right: 20px; } #docs-nav { padding-right: 20px;
& + #module-nav {
padding-left: 10px;
}}
#module-nav { #module-nav {
display: inline-block; display: inline-block;
padding-left: 10px;
ul { @include horizontal-list(false); }} ul { @include horizontal-list(false); }}
#module-nav li.selected { position: relative; body.getting-started #module-nav li.getting-started,
body.tutorial #module-nav li.tutorials,
body.support #module-nav li.support,
#module-nav li.selected {
position: relative;
a {
text-decoration: none;
}
a:before{ @extend .triangle-marker; a:before{ @extend .triangle-marker;
border-width: 0 8px 8px; border-width: 0 8px 8px;
z-index: 2; z-index: 2;
@ -62,7 +71,7 @@ header { @extend .group;
margin-left: -5px; margin-left: -5px;
} }
} }
#search-docs { #search-docs {
position: absolute; top: 29px; right: 0; position: absolute; top: 29px; right: 0;
&:before { &:before {
@ -78,7 +87,7 @@ header { @extend .group;
} }
input { @extend .sans-font; @include round-corners; input { @extend .sans-font; @include round-corners;
@include box-sizing(border-box); @include box-sizing(border-box);
max-width: 200px; min-width: 75px; border: 0; margin: 0; padding: 5px 8px 5px 23px; max-width: 200px; min-width: 75px; border: 0; margin: 0; padding: 5px 8px 5px 26px;
font-size: .8em; font-size: .8em;
float: right; float: right;
position: relative; } } position: relative; } }

View File

@ -1,14 +1,17 @@
aside { aside {
padding-top: 16px; padding-top: 15px;
text-align: right; text-align: right;
padding-right: 22px; padding-right: 22px;
h2 { h2, h3 {
text-align: left; text-align: left;
font-size: 1.3em; font-size: 1.3em;
line-height: 1.45em; line-height: 1.45em;
padding-bottom: .2em; padding-bottom: .2em;
margin-bottom: .4em; margin-bottom: .4em;
} }
h3 {
padding: 0 0 .5em; line-height: 1.1em;
}
a { a {
font-size: .85em; font-size: .85em;
} }
@ -18,4 +21,4 @@ aside {
.beta span:after { .beta span:after {
content: " (\3B2)"; content: " (\3B2)";
} }
} }

View File

@ -1,86 +1,90 @@
@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){ @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){
body { background: $page-bg; color: $text; body { background: $page-bg; color: $text;
a { color: $link; } } a { color: $link; } }
#page { @extend .horizontal-rule-#{$theme}; } #page { @extend .horizontal-rule-#{$theme}; }
header { @extend .horizontal-rule-#{$theme}; border-width: 4px; } header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
nav a { color: $nav-link; } nav a { color: $nav-link; }
#main-nav a { color: $main-nav;} #main-nav a { color: $main-nav;}
body#home #main-nav a[rel=home], body#home #main-nav a[rel=home],
body#help #main-nav a[rel=help], body#help #main-nav a[rel=help],
body.reference #main-nav a[rel=documentation], body.reference #main-nav a[rel=documentation],
body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; } body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
#search-docs input { #search-docs input {
@extend .inset-panel-#{$theme}; color: $search; @extend .inset-panel-#{$theme}; color: $search;
&::-webkit-input-placeholder { color: $search; } } &::-webkit-input-placeholder { color: $search; } }
#{headings()}{ color: $heading; #{headings()}{ color: $heading;
strong { color: $main-nav-selected; } strong { color: $main-nav-selected; }
em { color: $code; } } em { color: $code; } }
h2 { @extend .horizontal-rule-#{$theme}; } h2 { @extend .horizontal-rule-#{$theme}; }
aside { @extend .vertical-rule-#{$theme}; aside { @extend .vertical-rule-#{$theme};
h2 a { color: $strong-text; } } h2 a { color: $strong-text; }
h3 { @extend .horizontal-rule-#{$theme}; }}
footer .links li { @extend .vertical-rule-#{$theme}; } footer .links li { @extend .vertical-rule-#{$theme}; }
code { @extend .code-block-#{$theme}; color: $code; } code { @extend .code-block-#{$theme}; color: $code; }
#theme_pref { @extend .theme-switch-#{$theme}; } #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 { background: $option-panel-bg; border: 1px solid $option-panel-border; border-top: 0; }
body#home .overview div { @extend .inset-panel-#{$theme}; body#home .overview div { @extend .inset-panel-#{$theme};
h4 { @extend .horizontal-rule-#{$theme}; } } h4 { @extend .horizontal-rule-#{$theme}; } }
#featured_sites li { @extend .inset-panel-#{$theme}; } #featured_sites li { @extend .inset-panel-#{$theme}; }
} }
@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){ @mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){
#page > article { #page > article {
h1, h2 { @extend .horizontal-rule-#{$theme}; } h1, h2 { @extend .horizontal-rule-#{$theme}; }
h3 { @extend .heading-panel-#{$theme}; } } h3 { @extend .heading-panel-#{$theme}; } }
#sub-nav { @extend .horizontal-rule-#{$theme}; } #sub-nav { @extend .horizontal-rule-#{$theme}; }
#docs-nav { @extend .vertical-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;} 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; } #main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; float: left; }
#module-nav { #module-nav {
ul { overflow: visible; } ul { overflow: visible; }}
li.selected { @extend .selected-marker-#{$theme}; body.getting-started #module-nav li.getting-started,
a { color: $module-nav-selected; } } } 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] { @extend .syntax-switch-#{$theme}; } 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}; } &.sass a[rel=sass], &.scss a[rel=scss] { 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); } } #version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
.mixin-source { @extend .mixin-panel-#{$theme}; } .mixin-source { @extend .mixin-panel-#{$theme}; }
h2 a.help { color: $heading;} h2 a.help { color: $heading;}
.source-documentation { @extend .doc-panel-#{$theme}; } .source-documentation { @extend .doc-panel-#{$theme}; }
.arg { color: $code; } .arg { color: $code; }
.arg[data-default-value] { color: rgba($code, .7); } .arg[data-default-value] { color: rgba($code, .7); }
a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} } a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} }
} }
// Dark theme // Dark theme
.inset-panel-dark { .inset-panel-dark {
@include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset); @include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
background: darken(#2f2f2f, 4); background-color: rgba(#000, .3); } background: darken(#2f2f2f, 4); background-color: rgba(#000, .3); }
.horizontal-rule-dark { .horizontal-rule-dark {
@include box-shadow(rgba(#fff, .07) 0 1px 0); @include box-shadow(rgba(#fff, .07) 0 1px 0);
border-bottom: 1px solid #121212; } border-bottom: 1px solid #121212; }
.vertical-rule-dark { .vertical-rule-dark {
@include box-shadow(rgba(#fff, .07) 1px 0 0); @include box-shadow(rgba(#fff, .07) 1px 0 0);
border-right: 1px solid #121212; } border-right: 1px solid #121212; }
.code-block-dark { @extend .code-block; @extend .inset-panel-dark; } .code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
.heading-panel-dark { .heading-panel-dark {
@ -124,22 +128,22 @@
$strong-text: #dbdbdb; $strong-text: #dbdbdb;
$search: #6e6e6e; $search: #6e6e6e;
$code: #dadbb1; $code: #dadbb1;
$nav-link: #bfbfbf; $nav-link: #bfbfbf;
$link: saturate(lighten(#85AFC9, 4), 19); $link: saturate(lighten(#85AFC9, 4), 19);
$main-nav: $strong-text; $main-nav: white;
$main-nav-selected: #fb292d; $main-nav-selected: #fb292d;
$docs-nav-selected: $strong-text; $docs-nav-selected: $strong-text;
$module-nav-selected: $link; $module-nav-selected: $link;
$option-panel-border: rgba(#000, .3); $option-panel-border: rgba(#000, .3);
$option-panel-bg: rgba(#fff, .03); $option-panel-bg: rgba(#fff, .03);
@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); @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){ @if($docs){
@include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected); @include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
.syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); } .syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
.syntaxhighlighter::-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; } .syntaxhighlighter::-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; }
@ -151,15 +155,15 @@
@include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset); @include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset);
text-shadow: 0 1px 1px #fff; text-shadow: 0 1px 1px #fff;
background-color: rgba(#000, .04); } background-color: rgba(#000, .04); }
.horizontal-rule-light { .horizontal-rule-light {
@include single-box-shadow(rgba(#fff, 1), 0, 1px, 0); @include single-box-shadow(rgba(#fff, 1), 0, 1px, 0);
border-bottom: 1px solid #bbb; } border-bottom: 1px solid #bbb; }
.vertical-rule-light { .vertical-rule-light {
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0); @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
border-right: 1px solid #bbb; } border-right: 1px solid #bbb; }
.code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); } .code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); }
.syntax-switch-light { .syntax-switch-light {
@ -218,7 +222,7 @@
$option-panel-bg: #fff; $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); @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){ @if($docs){
@include docs-theme(light, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected); @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-track-piece { -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; background: rgba(#ddd, .8); }

View File

@ -15,10 +15,10 @@
@import "partials/main"; @import "partials/main";
@import "partials/code"; @import "partials/code";
@import "syntax/syntax-theme"; //@import "syntax/syntax-theme";
@import "core/clearing-classes"; @import "core/clearing-classes";
html.dark { @include dark-theme(true); } html.dark { @include dark-theme(true); }
html.light { @include light-theme(true); } html.light { @include light-theme(true); }

View File

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

View File

@ -13,10 +13,10 @@
%script(src="/javascripts/jquery.cookie.js" type="text/javascript") %script(src="/javascripts/jquery.cookie.js" type="text/javascript")
%script(src="/javascripts/site.js" type="text/javascript") %script(src="/javascripts/site.js" type="text/javascript")
%script(src="/javascripts/shCore.js" type="text/javascript" deferred) %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/fixups.js" type="text/javascript" deferred) %script(src="/javascripts/fixups.js" type="text/javascript" deferred)
/[if lte IE 8] /[if lte IE 8]
%link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"} %link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}
- if @item[:content_for_additional_css] - if @item[:content_for_additional_css]
%style(type="text/css")= @item[:content_for_additional_css] %style(type="text/css")= @item[:content_for_additional_css]
%body{body_attributes(@item)}= yield %body{body_attributes(@item)}= yield

35
doc-src/layouts/site.haml Normal file
View File

@ -0,0 +1,35 @@
!!!5
- # This template is just the stuff until the body tag.
%html.no-js{:dir => "ltr", :lang => "en"}
%head
%meta{:charset => "utf-8"}/
%meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
%link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
%title
#{@item[:title]} | Compass Documentation
%link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
%script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript")
%script(src="/javascripts/jquery.cookie.js" type="text/javascript")
%script(src="/javascripts/site.js" type="text/javascript")
%script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript")
%body{body_attributes(@item)}
#wrap
= render "partials/main-navigation"
#sub-nav
%nav#module-nav
%ul
%li.getting-started
%a{:href => "/help/", :rel => "getting started"} <span>Getting Started</span>
%li.tutorials
%a{:href => "/help/tutorials/", :rel => "getting started"} <span>Tutorials</span>
%li.support
%a{:href => "http://groups.google.com/group/compass-users", :rel => "support"} <span>Support</span>
%li
%a{:href => "http://github.com/chriseppstein/compass/issues", :rel => "bugs"} <span>Bugs</span>
#page
#docs_panel
#theme_pref
%a{:href => "#", :rel => "theme", :title => "switch theme" } Q
= yield
%footer(role="contentinfo")= render "partials/footer"
= render "partials/analytics"

View File

@ -1,5 +1,5 @@
- render 'main' do - render 'site' do
%aside(role="sidebar") %aside(role="sidebar")
%nav#local-nav %nav#local-nav
%ul= item_tree(tutorial_item(:root), :depth => 2, :omit_self => false, :heading_level => 2) %ul= item_tree(tutorial_item(:root), :depth => 2, :omit_self => false, :heading_level => 2)
%article= yield %article= yield