improved styling for docs

Gemfile

@@ -9,3 +9,4 @@ gem "css_parser"
 gem "haml"
 gem "rcov"
 gem "rubyzip"
+gem "livereload"

doc-src/.livereload

@@ -0,0 +1,19 @@
+# Lines starting with pound sign (#) are ignored.
+
+# additional extensions to monitor
+#config.exts << 'haml'
+
+# exclude files with NAMES matching this mask
+#config.exclusions << '~*'
+# exclude files with PATHS matching this mask (if the mask contains a slash)
+#config.exclusions << '/excluded_dir/*'
+# exclude files with PATHS matching this REGEXP
+#config.exclusions << /somedir.*(ab){2,4}.(css|js)$/
+
+# reload the whole page when .js changes
+#config.apply_js_live = false
+# reload the whole page when .css changes
+#config.apply_css_live = false
+
+# wait 100ms for more changes before reloading a page
+#config.grace_period = 0.1

doc-src/Gemfile.lock

@@ -8,8 +8,8 @@ GIT
 PATH
   remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
   specs:
-    compass (0.11.alpha.0.c9a684c)
-      haml (>= 3.0.4)
+    compass (0.11.alpha.0.dabd4f6)
+      haml (~> 3.0.23)
 
 GEM
   remote: http://rubygems.org/

doc-src/content/.livereload

@@ -0,0 +1,19 @@
+# Lines starting with pound sign (#) are ignored.
+
+# additional extensions to monitor
+#config.exts << 'haml'
+
+# exclude files with NAMES matching this mask
+#config.exclusions << '~*'
+# exclude files with PATHS matching this mask (if the mask contains a slash)
+#config.exclusions << '/excluded_dir/*'
+# exclude files with PATHS matching this REGEXP
+#config.exclusions << /somedir.*(ab){2,4}.(css|js)$/
+
+# reload the whole page when .js changes
+#config.apply_js_live = false
+# reload the whole page when .css changes
+#config.apply_css_live = false
+
+# wait 100ms for more changes before reloading a page
+#config.grace_period = 0.1

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

@@ -0,0 +1,67 @@
+$default-rounded-corner: 4
+
+.group
+  +pie-clearfix
+
+.truncate
+  +ellipsis
+
+.border-box
+  +box-sizing(border-box)
+
+.round-corners-4
+  +border-radius(4px)
+  
+=round-corners($num: $default-rounded-corner)
+  @extend .round-corners-#{$num}
+
+=round-top-corners($num: $default-rounded-corner)
+  +round-corners($num)
+  @extend .clear-bottom-right-corner
+  @extend .clear-bottom-left-corner
+=round-bottom-corners($num: $default-rounded-corner)
+  +round-corners($num)
+  @extend .clear-top-right-corner
+  @extend .clear-top-left-corner
+=round-left-corners($num: $default-rounded-corner)
+  +round-corners($num)
+  @extend .clear-top-right-corner
+  @extend .clear-bottom-right-corner
+=round-right-corners($num: $default-rounded-corner)
+  +round-corners($num)
+  @extend .clear-top-left-corner
+  @extend .clear-bottom-left-corner
+
+=round-top-left-corner($num: $default-rounded-corner)
+  +round-corners($num)
+  @extend .clear-top-right-corner
+  @extend .clear-bottom-right-corner
+  @extend .clear-bottom-left-corner
+=round-top-right-corner($num: $default-rounded-corner)
+  +round-corners($num)
+  @extend .clear-top-left-corner
+  @extend .clear-bottom-right-corner
+  @extend .clear-bottom-left-corner
+=round-bottom-left-corner($num: $default-rounded-corner)
+  +round-corners($num)
+  @extend .clear-top-right-corner
+  @extend .clear-bottom-right-corner
+  @extend .clear-top-left-corner
+=round-bottom-right-corner($num: $default-rounded-corner)
+  +round-corners($num)
+  @extend .clear-top-right-corner
+  @extend .clear-top-left-corner
+  @extend .clear-bottom-left-corner
+
+=square-top-left-corner($num: $default-rounded-corner)
+  +round-corners($num)
+  @extend .clear-top-left-corner
+=square-top-right-corner($num: $default-rounded-corner)
+  +round-corners($num)
+  @extend .clear-top-right-corner
+=square-bottom-left-corner($num: $default-rounded-corner)
+  +round-corners($num)
+  @extend .clear-bottom-left-corner
+=square-bottom-right-corner($num: $default-rounded-corner)
+  +round-corners($num)
+  @extend .clear-bottom-right-corner

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

@@ -0,0 +1,11 @@
+.clear-top-left-corner
+  +border-top-left-radius(0)
+.clear-top-right-corner
+  +border-top-right-radius(0)
+.clear-bottom-left-corner
+  +border-bottom-left-radius(0)
+.clear-bottom-right-corner
+  +border-bottom-right-radius(0)
+
+.hide
+  display: none

doc-src/content/stylesheets/core/_extensions.scss

@@ -0,0 +1,10 @@
+@mixin reset($reset-type: false){
+  @if($reset-type){
+    @if($reset-type == global){
+      @include global-reset;
+    }
+    @if($reset-type == html5){
+      @include reset-html5;
+    }
+  }
+}

doc-src/content/stylesheets/ie.sass

@@ -1,7 +0,0 @@
-/* Welcome to Susy. Use this file to write IE specific override styles.
- * Import this file using the following HTML or equivalent:
- * <!--[if IE]>
- *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
- * <![endif]-->
-
-@import base

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

@@ -0,0 +1,15 @@
+$min-width: 530px;
+$side-nav-width: 150px;
+$main-min-width: $min-width - $side-nav-width;
+
+body { 
+  max-width: 1500px;
+  min-width: $min-width;
+  margin: 0 auto;
+  @extend .sans-font;
+  line-height: 1.45em;
+}
+#wrap { @extend .group; padding: 0 20px;}
+header { padding: 22px 0 0; position: relative; }
+#page > article { padding-left: $side-nav-width + 40px; }
+aside { float: left; width: $side-nav-width; }

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

@@ -0,0 +1,10 @@
+#page {
+  position: relative;
+  padding-top: 25px;
+  & > article { padding-top: 14px; font-size: 15px;
+    h1, h2 { padding-bottom: 6px; margin-bottom: 9px; }}}
+
+#version { @include round-bottom-corners;
+  font-size: .7em;
+  position: absolute; top: 0; right: 0;
+  padding: 2px 8px 4px; }

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

@@ -0,0 +1,53 @@
+nav a { @include hover-link; }
+
+header { @extend .group;
+  font-size: 1.25em; font-family: "Museo Sans"; border-width: 4px;}
+#main-nav {
+  width: 76%;
+  display: inline-block;
+  padding-bottom: 10px;
+  ul {
+    @include horizontal-list(10px);
+    line-height: 2em; }
+  a[rel=home] {
+    @include replace-text-with-dimensions("compass-logo-small.png");
+    display: inline-block; }}
+
+#subnav {
+  @extend .group;
+  padding: 8px 0; }
+  
+#docs-nav, #module-nav {
+  display: inline-block;
+  float: left;
+  a {
+    padding: 2px 10px;
+    display: inline-block; }}
+    
+#docs-nav {
+  padding-right: 15px;
+  a:last-child {
+    @extend .round-corners-4; }}
+    
+#module-nav {
+  display: inline-block;
+  padding-left: 8px;
+  ul {
+    @include horizontal-list(10px);}}
+    
+#search-docs {
+  display: inline-block;
+  width: 23%;
+  vertical-align: top;
+  float: right;
+  position: relative;
+  input {
+    @extend .sans-font;
+    @extend .round-corners-4;
+    position: relative; top: 6px;
+    margin: 0; padding: 5px 8px;
+    font-size: .8em;
+    float: right;
+    width: 100%; max-width: 200px; min-width: 80px;
+    @include box-sizing(border-box);
+    border: 0; }}

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

@@ -0,0 +1,18 @@
+aside {
+  padding-top: 20px;
+  text-align: right;
+  padding-right: 17px;
+  h2 {
+    text-align: left;
+    font-size: 1.3em;
+    line-height: 1.45em;
+    padding-bottom: .2em;
+    margin-bottom: .4em;
+  }
+  a {
+    font-size: .85em;
+  }
+  .deprecated {
+    text-decoration: line-through;
+  }
+}

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

@@ -0,0 +1,60 @@
+$page-bg: #343434;
+$link-color: #dadbb1;
+$text-color: #b6b6b6;
+$light-text: #dbdbdb;
+$nav-link-color: #bfbfbf;
+$current-main-nav: #fb292d;
+
+.dark-inset-panel {
+  @include background-image(linear-gradient(rgba(#000, .5), rgba(#000, 0)));
+  @include single-box-shadow(rgba(#fff, .1), 0, 1px, 0);
+  background-color: rgba(#000, .2); }
+  
+.dark-horizontal-rule {  
+  @include single-box-shadow(rgba(#fff, .07), 0, 1px, 0);
+  border-bottom: 1px solid #121212; }
+  
+.dark-vertical-rule {
+  @include single-box-shadow(rgba(#fff, .07), 1px, 0, 0);
+  border-right: 1px solid #121212; }
+  
+.dark-code-block { @extend .round-corners-4; @extend .inset-panel;
+  display: inline-block;
+  padding-left: 2px;
+  padding-right: 2px; }
+
+
+// Dark Theme
+
+body { background: $page-bg; color: $text-color;
+  a { color: $link-color; }}
+
+header{ @extend .dark-horizontal-rule; }
+  
+#main-nav { 
+  a { color: $light-text; }
+  a[rel=documentation] { color: $current-main-nav; }}
+
+#search-docs {
+  input::-webkit-input-placeholder { color: #6e6e6e; }
+  input { @extend .dark-inset-panel; background-color: rgba(#000, .2); color: #6e6e6e;}}
+
+nav a { color: $nav-link-color; }
+#subnav { @extend .dark-horizontal-rule; }
+#version {
+  background: rgba(#fff, .03);
+  color: rgba(#fff, .4);
+  a { @include hover-link; color: rgba(#fff, .7);}
+  border: 1px solid rgba(#000, .3); border-top: 0; }
+
+aside { @extend .dark-vertical-rule;
+  h2 { @extend .dark-horizontal-rule;
+    a { color: $light-text; }}}
+#page > article {
+  h1, h2 { @extend .dark-horizontal-rule; }
+  #{headings()}{ color: #fff; }}
+
+#docs-nav { @extend .dark-vertical-rule;
+  a:last-child { @extend .dark-inset-panel; color: $light-text; }}
+
+#module-nav .selected a { color: $link-color; }

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

@@ -0,0 +1,14 @@
+@font-face { font-family: 'pictos-web';	src: url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.eot');	src: local('☺'), url('http://s3.imathis.com/shared-assets/pictos-font/http://pictos-web.woff') format('woff'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.ttf') format('truetype'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal;}
+
+.sans-font { font-family: 'Lucida Grande', Arial, sans-serif; }
+.heading-font { font-family: 'Museo Sans', 'serif'; }
+.pictos { font-family: pictos-web; }
+
+#page > article {
+  ol { list-style: outside decimal; padding-left: 2.5em;}
+  ul, ol { margin-bottom: 1.5em;}
+  p { margin-bottom: 1.2em;}
+  #{headings()}{ @extend .heading-font; line-height: 1.2em; }
+  h1 { font-size: 30px; }
+  h2 { font-size: 20px; }
+}

doc-src/content/stylesheets/screen.sass

@@ -1,295 +1,15 @@
-/* Welcome to Susy. Use this file to define screen styles.
- * Import this file using the following HTML or equivalent:
- * <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />
-@charset "UTF-8"
-@import defaults
-@import slideshow
-@import shared
-@import compass/layout
-@import compass/utilities
+@import compass
+@import core/extensions
++reset(global)
++reset(html5)
+@import core/base-classes
 
-/* @group STRUCTURE
+@import partials/theme
+@import partials/layout
+@import partials/typography
 
-+susy
+@import partials/nav
+@import partials/sidebar
+@import partials/main
 
-header[role="banner"] h1, #compass-nav
-  +columns(6)
-
-header[role="banner"]
-  background: #f9f9f9
-  div
-    +container
-  h1
-    +alpha
-    +adjust-font-size-to(18px)
-    text-transform: uppercase
-    a
-      display: block
-      +padding-leader(2, 18px)
-      +padding-trailer(1.5, 18px)
-
-header[role="banner"],
-#page,
-#docs-nav,
-#module-nav,
-footer[role="contentinfo"]
-  +pad(0.5,0.5)
-  +box-sizing(border-box)
-  +min-width(784px / $base-font-size * 1em)
-
-#compass-nav
-  +omega
-  text-align: right
-  ul
-    +inline-block-list
-    +padding-leader(2)
-    +trailer(1.5)
-  a
-    +inline-block
-    +adjust-font-size-to(14px)
-    padding: 0 1em
-    +border-top-left-radius(0.5em)
-    +border-bottom-right-radius(0.5em)
-
-=active-compass-nav($id, $url)
-  #{append-selector(body, $id)}
-    #compass-nav a[href="#{$url}"]
-      background: #cccccc
-      cursor: default
-
-#docs-nav
-  +pie-clearfix
-  +leading-border(1px, 0.25)
-  +trailing-border(1px, 0.25)
-  position: relative
-  // CE: the 1.5 here is because the padding is included
-  // in the height due to having box-sizing applied.
-  height: $base-rhythm-unit * 1.5
-  border-color: #cccccc
-  background-color: #eeeeee
-  .container
-    +container
-    +pie-clearfix
-    overflow: visible
-  ul
-    +horizontal-list
-    overflow: visible
-    position: relative
-    li
-      top: -$base-rhythm-unit * 0.5
-      margin-bottom: -$base-rhythm-unit * 0.5
-      position: relative
-    a
-      &:link, &:visited
-        display: block
-        padding: 0 $side-gutter-width
-        border: 1px solid #eeeeee
-        +leading-border(1px, 0.5)
-        +trailing-border(1px, 0.25)
-        border-bottom: 0
-        +border-top-radius(0.5em)
-        background: #dddddd
-    &:hover, &:focus, &:active
-      background-color: #eeeeee
-      border-color: #dddddd
-
-=active-docs($type, $url)
-  body#{$type} #docs-nav a[href="#{$url}"]
-    &:link, &:visited
-      +trailing-border(1px, 0.25)
-      cursor: default
-      background: white
-      border-color: #cccccc
-      border-bottom-color: white
-
-+active-docs("#home", "/docs/")
-+active-docs(".core", "/docs/reference/compass/")
-+active-docs(".blueprint", "/docs/reference/blueprint/")
-+active-docs(".tutorial", "/docs/tutorials/")
-
-
-#version
-  +adjust-font-size-to(14px)
-  +float(left)
-  margin-left: 1.5em
-  color: #999
-  .number
-    color: #666
-    
-#search-docs
-  color: #999
-  p
-    margin: 0
-    +columns(3)
-    +omega
-    label
-      +float(left)
-      width: columns(1,3) + gutter(3)*.5
-      margin: 0
-      text-align: right
-    input
-      +columns(2,3)
-      +omega
-
-#page
-  +container
-  +leader(3)
-
-#comments
-  +columns(9)
-  +omega
-
-$footer-height: 5em + $base-rhythm-unit
-+sticky-footer($footer-height, "#wrap", "#wrap-footer", "footer")
-
-footer[role="contentinfo"]
-  +container
-  // This height adjustment is because of the leading border
-  height: $footer-height - $base-rhythm-unit
-  color: #999999
-  +leading-border(2px)
-  .legalese
-    +columns(3)
-    +alpha
-    +adjust-font-size-to(14px)
-    p
-      margin: 0 0 1em 0
-  .links
-    +columns(9)
-    +omega
-    +adjust-font-size-to(14px)
-    ul
-      +horizontal-list
-
-/* @end
-
-/* @group COMPONENTS by type
-
-article
-  text-align: left
-
-article
-  > nav
-    border-top: $px2em*1px solid #ccc
-    margin-top: -$px2em*1px
-    color: #ccc
-    ul
-      +no-style-list
-    li
-      +columns(6,12)
-      &:last-child
-        +omega(12)
-        text-align: right
-
-/* @end
-
-/* @group OVERRIDES by content
-
-aside[role="sidebar"] + article
-  +columns(9)
-  +omega
-  h1
-    +adjust-font-size-to(36px)
-    +trailer(1,36px)
-  .demo &
-    float: none
-    display: block
-    margin: 0
-    width: auto
-    +full
-    h1
-      text-align: center
-
-#module-nav
-  +leader(.25)
-  +trailing-border(1px,.25)
-  +trailer(.5)
-  border-color: #ccc
-  clear: both
-  ul
-    margin: 0
-    padding: 0
-    +container
-    li
-      +float(left)
-      margin-right: 1.5em
-      &:first-child
-        +alpha
-  a.selected:before
-    content: "▸"
-  + #page
-    +leader(1.5)
-
-=active-module($type, $url)
-  body#{$type} #module-nav a[href^="#{$url}"]
-    &:link, &:visited
-      text-decoration: underline
-      +text-shadow
-
-+active-module(".core.css3", "/docs/reference/compass/css3/")
-+active-module(".core.layout", "/docs/reference/compass/layout/")
-+active-module(".core.misc", "/docs/reference/compass/misc/")
-+active-module(".core.reset", "/docs/reference/compass/reset/")
-+active-module(".core.utilities", "/docs/reference/compass/utilities/")
-+active-module(".core.helpers", "/docs/reference/compass/helpers/")
-
-#code
-  +full(12)
-  +pie-clearfix
-  +adjust-font-size-to(12px)
-  +h-borders(1px,1,12px)
-  +code-text
-  border-color: #ccc
-  nav
-    background: #eee
-    +trailer(1,12px)
-    ul
-      +inline-block-list(.4em)
-      text-align: right
-  section
-    position: relative
-    +columns(6,12)
-    +slideshow
-    &#styles
-      +omega(12)
-  .slides
-    li
-      overflow: auto
-  table
-    .lino
-      color: #666
-      background: #ddd
-      padding: 0 .4em
-    .source
-      width: 100%
-      padding: 0 .4em
-
-#demo
-  +full(12)
-  +padding-leader
-  +trailing-border(1px)
-  border-color: #ccc
-  .gradient
-    margin: 1.5em 0
-    height: 6em
-    +linear-gradient(color_stops(#fff, #ddd), "left top")
-    
-/* @end
-
-@import reference
-@import examples
-@import sidebar
-@import specifics
-
-/* @group OVERRIDES by page
-
-
-/* @end
-
-/* @group DEBUG
-
-// Uncomment, adjust and use for debugging
-// #page
-//   +show-grid("grid.png")
-
-/* @end
+@import core/clearing-classes

doc-src/layouts/main.haml

@@ -1,37 +1,31 @@
 - render "basic" do
   #wrap
     %header#banner{:role => "banner"}
-      %div
-        %h1.vcard
-          %a.fn.org.url.uid{:href => "/", :rel => "home"} Compass
-    %nav#docs-nav{:role => "navigation"}
-      .container
+      %nav#main-nav{:role => "navigation"}
         %ul
+          %li.vcard
+            %a.fn.org.url.uid{:href => "/", :rel => "home"} Compass
           %li
-            %a{:href => "/docs/"} introduction
+            %a.here{:href => "/docs/reference/compass/", :rel => "documentation"} Docs
           %li
-            %a{:href => "/docs/reference/compass/"} core
+            %a{:href => "/help", :rel=> "help"} Get Help
           %li
-            %a{:href => "/docs/reference/blueprint/"} blueprint
-          %li
-            %a{:href => "/docs/tutorials/"} tutorials
-          /
-            %li
-              %a{:href => "/docs/plugins/"} plugins
-        #version
-          Current Version:
-          %a.number(href="/docs/CHANGELOG/")= compass_version
-        #search-docs
-          %form{:action => "/docs/search/", :method => "GET"}
-            %p
-              %label{:for => "search"} search
-              %input#search{:name => "q", :type => "text", :value => ""}
-    - if @item[:content_for_module_nav]
-      %nav#module-nav= @item[:content_for_module_nav]
+            %a{:href => "/get-involved", :rel=> "contribute"} Get Involved
+              
+      %form#search-docs{:action => "/docs/search/", :method => "GET"}
+        %input#search{:name => "q", :type => "text", :value => "", :placeholder => "Search the docs"}
+    #subnav
+      %nav#docs-nav{:role => "navigation"}
+        %a{:href => "/docs/reference/blueprint/"} Blueprint
+        %a{:href => "/docs/reference/compass/"} Core
+      - if @item[:content_for_module_nav]
+        %nav#module-nav= @item[:content_for_module_nav]
     #page
+      #version
+        Version:
+        %a.number(href="/docs/CHANGELOG/")= compass_version
       = yield
-      #comments= render "partials/disqus_comments"
-    #wrap-footer
+      -#comments= render "partials/disqus_comments"
   %footer(role="contentinfo")= render "partials/footer"
   %script(src="/docs/javascripts/jquery-1.3.2.min.js")
   %script(src="/docs/javascripts/fixups.js" deferred)