improved docs theming framework

doc-src/Gemfile.lock

@@ -8,7 +8,7 @@ GIT
 PATH
   remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
   specs:
-    compass (0.11.alpha.0.dabd4f6)
+    compass (0.11.alpha.0.f1a6e28)
       haml (~> 3.0.23)
 
 GEM

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

@@ -9,7 +9,7 @@ body {
   @extend .sans-font;
   line-height: 1.45em;
 }
-#wrap { @extend .group; padding: 0 20px;}
+#wrap { @extend .group; padding: 0 20px 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/_nav.scss

@@ -13,7 +13,7 @@ header { @extend .group;
     @include replace-text-with-dimensions("compass-logo-small.png");
     display: inline-block; }}
 
-#subnav {
+#sub-nav {
   @extend .group;
   padding: 8px 0; }
   
@@ -36,18 +36,9 @@ header { @extend .group;
     @include horizontal-list(10px);}}
     
 #search-docs {
-  display: inline-block;
+  width: 20%; position: absolute; top: 29px; right: 0;
-  width: 23%;
+  input { @extend .sans-font; @extend .round-corners-4;
-  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; }}
+    width: 100%; max-width: 200px; min-width: 60px; border: 0; margin: 0; padding: 5px 8px;
+    font-size: .8em;
+    float: right; } }

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

@@ -1,60 +1,78 @@
-$page-bg: #343434;
+@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border){
-$link-color: #dadbb1;
+  body { background: $page-bg; color: $text;
-$text-color: #b6b6b6;
+    a { color: $link; } }
-$light-text: #dbdbdb;
+  #wrap { @extend .horizontal-rule-#{$theme}; }
-$nav-link-color: #bfbfbf;
+  header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
-$current-main-nav: #fb292d;
+  nav a { color: $nav-link; }
   
-.dark-inset-panel {
+  #main-nav a { color: $main-nav;}
+  body.home a[rel=home],
+  body.help a[rel=help],
+  body.docs a[rel=docs],
+  body.get-involved a[rel=get-involved]{ color: $main-nav-selected; }
+  
+  #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; }
+  #module-nav .selected { color: $module-nav-selected; }
+  
+  #search-docs {
+    input::-webkit-input-placeholder { color: $search; }
+    input { @extend .inset-panel-#{$theme}; background-color: rgba($search-bg, .2); color: $search;}}
+  
+  aside { @extend .vertical-rule-#{$theme};
+    h2 { @extend .horizontal-rule-#{$theme};
+      a { color: $text; } } }
+  
+  #version { background: rgba($version-text, .03); color: rgba($version-text, .4); border: 1px solid rgba($version-border, .3); border-top: 0;
+    a { @include hover-link; color: rgba($version-text, .7); } }
+  
+  #page > article {
+    #{headings()}{ color: $heading; } }
+    h1, h2 { @extend .horizontal-rule-#{$theme}; }
+}
+
+// Dark theme
+.inset-panel-dark {
   @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 {  
+.horizontal-rule-dark {  
   @include single-box-shadow(rgba(#fff, .07), 0, 1px, 0);
   border-bottom: 1px solid #121212; }
   
-.dark-vertical-rule {
+.vertical-rule-dark {
   @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;
+.code-block-dark { @extend .round-corners-4; @extend .inset-panel-dark;
   display: inline-block;
   padding-left: 2px;
   padding-right: 2px; }
 
+@mixin dark-theme {
+  $page-bg: #343434;
 
-// Dark Theme
+  $text: #b6b6b6;
+  $heading: white;
+  $strong-text: #dbdbdb;
 
-body { background: $page-bg; color: $text-color;
+  $search: #6e6e6e;
-  a { color: $link-color; }}
+  $search-bg: black;
 
-header{ @extend .dark-horizontal-rule; }
+  $link: #dadbb1;
+  $nav-link: #bfbfbf;
 
-#main-nav { 
+  $main-nav: $strong-text;
-  a { color: $light-text; }
+  $main-nav-selected: #fb292d;
-  a[rel=documentation] { color: $current-main-nav; }}
+  $docs-nav-selected: $text;
+  $module-nav-selected: $link;
 
-#search-docs {
+  $version-text: white;
-  input::-webkit-input-placeholder { color: #6e6e6e; }
+  $version-border: black;
-  input { @extend .dark-inset-panel; background-color: rgba(#000, .2); color: #6e6e6e;}}
 
-nav a { color: $nav-link-color; }
+  @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border);
-#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;
+html.dark { @include dark-theme; }
-  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/layouts/basic.haml

@@ -1,6 +1,6 @@
 !!!5
 - # This template is just the stuff until the body tag.
-%html.no-js{:dir => "ltr", :lang => "en"}
+%html.dark.no-js{:dir => "ltr", :lang => "en"}
   %head
     %meta{:charset => "utf-8"}/
     %meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}

doc-src/layouts/main.haml

@@ -14,10 +14,10 @@
               
       %form#search-docs{:action => "/docs/search/", :method => "GET"}
         %input#search{:name => "q", :type => "text", :value => "", :placeholder => "Search the docs"}
-    #subnav
+    #sub-nav
       %nav#docs-nav{:role => "navigation"}
-        %a{:href => "/docs/reference/blueprint/"} Blueprint
+        %a{:href => "/docs/reference/blueprint/", :rel => "blueprint"} Blueprint
-        %a{:href => "/docs/reference/compass/"} Core
+        %a{:href => "/docs/reference/compass/", :rel => "core"} Core
       - if @item[:content_for_module_nav]
       %nav#module-nav= @item[:content_for_module_nav]
     #page