From df908d3854a4c99efa8fc265c105cb61a622bd19 Mon Sep 17 00:00:00 2001 From: B Mathis Date: Sun, 21 Nov 2010 17:33:58 -0600 Subject: [PATCH] improved docs theming framework --- doc-src/Gemfile.lock | 2 +- .../content/stylesheets/partials/_layout.scss | 2 +- .../content/stylesheets/partials/_nav.scss | 21 ++--- .../content/stylesheets/partials/_theme.scss | 94 +++++++++++-------- doc-src/layouts/basic.haml | 2 +- doc-src/layouts/main.haml | 8 +- 6 files changed, 69 insertions(+), 60 deletions(-) diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index 605c870d..830ce315 100644 --- a/doc-src/Gemfile.lock +++ b/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 diff --git a/doc-src/content/stylesheets/partials/_layout.scss b/doc-src/content/stylesheets/partials/_layout.scss index 52756dd4..8e64dba7 100644 --- a/doc-src/content/stylesheets/partials/_layout.scss +++ b/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; } \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_nav.scss b/doc-src/content/stylesheets/partials/_nav.scss index 30396f6e..ed4fa89a 100644 --- a/doc-src/content/stylesheets/partials/_nav.scss +++ b/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: 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; + width: 20%; position: absolute; top: 29px; right: 0; + input { @extend .sans-font; @extend .round-corners-4; @include box-sizing(border-box); - border: 0; }} \ No newline at end of file + width: 100%; max-width: 200px; min-width: 60px; border: 0; margin: 0; padding: 5px 8px; + font-size: .8em; + float: right; } } \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_theme.scss b/doc-src/content/stylesheets/partials/_theme.scss index 54af9244..a38c0d7c 100644 --- a/doc-src/content/stylesheets/partials/_theme.scss +++ b/doc-src/content/stylesheets/partials/_theme.scss @@ -1,60 +1,78 @@ -$page-bg: #343434; -$link-color: #dadbb1; -$text-color: #b6b6b6; -$light-text: #dbdbdb; -$nav-link-color: #bfbfbf; -$current-main-nav: #fb292d; +@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){ + body { background: $page-bg; color: $text; + a { color: $link; } } + #wrap { @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 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-inset-panel { +// 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; - a { color: $link-color; }} + $search: #6e6e6e; + $search-bg: black; -header{ @extend .dark-horizontal-rule; } - -#main-nav { - a { color: $light-text; } - a[rel=documentation] { color: $current-main-nav; }} + $link: #dadbb1; + $nav-link: #bfbfbf; -#search-docs { - input::-webkit-input-placeholder { color: #6e6e6e; } - input { @extend .dark-inset-panel; background-color: rgba(#000, .2); color: #6e6e6e;}} + $main-nav: $strong-text; + $main-nav-selected: #fb292d; + $docs-nav-selected: $text; + $module-nav-selected: $link; -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; } + $version-text: white; + $version-border: black; -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; }} + @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); +} -#docs-nav { @extend .dark-vertical-rule; - a:last-child { @extend .dark-inset-panel; color: $light-text; }} - -#module-nav .selected a { color: $link-color; } \ No newline at end of file +html.dark { @include dark-theme; } \ No newline at end of file diff --git a/doc-src/layouts/basic.haml b/doc-src/layouts/basic.haml index 4a3a7841..b18d315a 100644 --- a/doc-src/layouts/basic.haml +++ b/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"} diff --git a/doc-src/layouts/main.haml b/doc-src/layouts/main.haml index 715ea579..51cf843c 100644 --- a/doc-src/layouts/main.haml +++ b/doc-src/layouts/main.haml @@ -14,12 +14,12 @@ %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/compass/"} Core + %a{:href => "/docs/reference/blueprint/", :rel => "blueprint"} Blueprint + %a{:href => "/docs/reference/compass/", :rel => "core"} Core - if @item[:content_for_module_nav] - %nav#module-nav= @item[:content_for_module_nav] + %nav#module-nav= @item[:content_for_module_nav] #page #version Version: