updated docs design and added a layout for site pages

doc-src/Gemfile.lock

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

doc-src/content/help/index.haml

@@ -3,65 +3,59 @@ title: Compass Help
 crumb: Help
 classnames:
   - help
-layout: main
+  - getting-started
+layout: site
 ---
 %article
-  %h1#logo Compass
+  %h1 Getting started with Compass
 
   :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. It’s 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>
 
-    ## Installing
+  :markdown
+    ## Installing Compass
 
-    Compass is a tool that runs on the command line.
+    Compass is a tool that runs on the command line. On any system with ruby installed, open your terminal and type:
-    
-    On any system with ruby installed, open your terminal and type:
 
         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
 
-    ## 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.
 
-    ## Rails Support
+    ## Manual setup using the Blueprint Framework
 
-        compass init rails /path/to/myrailsproject
+    When starting a project from scrath:
 
-    ## Installing a framework
+        compass create /path/to/project --using blueprint
-    
-    When creating a new project:
-    
-        compass create myproject --using blueprint/basic
 
     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
+
+    Using Blueprint with Rails:
+
+        compass init rails /path/to/myrailsproject --using blueprint
 
-    Send a note to the [mailing list](http://groups.google.com/group/compass-users)
-    and/or [File a bug](http://github.com/chriseppstein/compass/issues).

doc-src/content/help/tutorials/best_practices.markdown

@@ -5,12 +5,15 @@ layout: tutorial
 classnames:
   - 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
 variables and ([often][2]) the framework utilities you plan to use:
 
-#### _base.scss
+### _base.scss
 
     $blueprint-grid-columns : 24;
     $blueprint-grid-width   : 30px;
@@ -28,7 +31,7 @@ they’re available to any stylesheet that includes it.
 
 Then you can include this file in all other stylesheets:
 
-#### application.scss
+### application.scss
 
     @import "base";
 
@@ -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
 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
 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 -- It’s much
 more obvious to read something like `@include round-corners(6px, #f00)` than the whole
 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
 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
 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
 point for your application than it is to contend with unwanted styles bleeding

doc-src/content/help/tutorials/blueprint.haml

@@ -22,8 +22,8 @@ classnames:
   Once you get Compass installed, you are ready to create a new
   blueprint project. In your terminal enter the following commands:
 
-  %code.shell
+  %pre.shell
-    %pre
+    %code
       %span.prompt<> $&nbsp;
       compass create my_project --using blueprint/semantic
       %br>
@@ -54,8 +54,8 @@ classnames:
   Once you get Compass installed, you are ready to create a new
   blueprint project. In your terminal enter the following commands:
 
-  %code.shell
+  %pre.shell
-    %pre
+    %code
       %span.prompt<> $&nbsp;
       compass create my_project --using blueprint/basic
 

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

@@ -14,7 +14,7 @@ html .syntaxhighlighter {
 
 pre {
   margin: 1.5em 0;
-  .code-block { padding: .6em; }
+  .code-block:first-child { padding: .6em; }
 }
 
 .code-block { @extend .round-corners-4; @extend .fixed-font;

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

@@ -14,7 +14,7 @@ body {
 #page { @extend .group; padding-bottom: 30px; overflow: hidden;}
 footer { @extend .group; clear: both; padding-top: 20px;}
 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; }
 
 body#home #page article { padding-left: 0;}

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

@@ -9,7 +9,7 @@ nav a { @include hover-link; }
 nav .selected a:hover { text-decoration: none;}
 
 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 {
   width: 79%;
   display: inline-block;
@@ -29,14 +29,23 @@ header { @extend .group;
     padding: 2px 10px;
     display: inline-block; }}
 
-#docs-nav { padding-right: 20px; }
+#docs-nav { padding-right: 20px;
+  & + #module-nav {
+    padding-left: 10px;
+  }}
 
 #module-nav {
   display: inline-block;
-  padding-left: 10px;
   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;
     border-width: 0 8px 8px;
     z-index: 2;
@@ -78,7 +87,7 @@ header { @extend .group;
   }
   input { @extend .sans-font; @include round-corners;
     @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;
     float: right;
     position: relative; } }

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

@@ -1,14 +1,17 @@
 aside {
-  padding-top: 16px;
+  padding-top: 15px;
   text-align: right;
   padding-right: 22px;
-  h2 {
+  h2, h3 {
     text-align: left;
     font-size: 1.3em;
     line-height: 1.45em;
     padding-bottom: .2em;
     margin-bottom: .4em;
   }
+  h3 {
+    padding: 0 0 .5em; line-height: 1.1em;
+  }
   a {
     font-size: .85em;
   }

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

@@ -23,7 +23,8 @@
   h2 { @extend .horizontal-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}; }
   code { @extend .code-block-#{$theme}; color: $code; }
@@ -48,9 +49,12 @@
   #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; }
+    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}; }
   &.sass a[rel=sass], &.scss a[rel=scss] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
@@ -129,7 +133,7 @@
   $nav-link: #bfbfbf;
   $link: saturate(lighten(#85AFC9, 4), 19);
 
-  $main-nav: $strong-text;
+  $main-nav: white;
   $main-nav-selected: #fb292d;
   $docs-nav-selected: $strong-text;
   $module-nav-selected: $link;

doc-src/content/stylesheets/screen.scss

@@ -15,7 +15,7 @@
 @import "partials/main";
 @import "partials/code";
 
-@import "syntax/syntax-theme";
+//@import "syntax/syntax-theme";
 
 @import "core/clearing-classes";
 

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

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

doc-src/layouts/basic.haml

@@ -13,7 +13,7 @@
     %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/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/site.haml

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

doc-src/layouts/tutorial.haml

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