From 37a6555fd3afc3d0abd5080b9f2c921dd5ce6568 Mon Sep 17 00:00:00 2001 From: B Mathis Date: Tue, 16 Nov 2010 23:03:42 -0600 Subject: [PATCH] improved styling for docs --- Gemfile | 1 + doc-src/.livereload | 19 ++ doc-src/Gemfile.lock | 4 +- doc-src/assets/images/compass-logo-small.png | Bin 0 -> 6575 bytes doc-src/content/.livereload | 19 ++ .../stylesheets/core/_base-classes.sass | 67 ++++ .../stylesheets/core/_clearing-classes.sass | 11 + .../content/stylesheets/core/_extensions.scss | 10 + doc-src/content/stylesheets/ie.sass | 7 - .../content/stylesheets/partials/_layout.scss | 15 + .../content/stylesheets/partials/_main.scss | 10 + .../content/stylesheets/partials/_nav.scss | 53 +++ .../stylesheets/partials/_sidebar.scss | 18 ++ .../content/stylesheets/partials/_theme.scss | 60 ++++ .../stylesheets/partials/_typography.scss | 14 + doc-src/content/stylesheets/screen.sass | 304 +----------------- doc-src/layouts/main.haml | 44 ++- 17 files changed, 330 insertions(+), 326 deletions(-) create mode 100644 doc-src/.livereload create mode 100644 doc-src/assets/images/compass-logo-small.png create mode 100644 doc-src/content/.livereload create mode 100644 doc-src/content/stylesheets/core/_base-classes.sass create mode 100644 doc-src/content/stylesheets/core/_clearing-classes.sass create mode 100644 doc-src/content/stylesheets/core/_extensions.scss create mode 100644 doc-src/content/stylesheets/partials/_layout.scss create mode 100644 doc-src/content/stylesheets/partials/_main.scss create mode 100644 doc-src/content/stylesheets/partials/_nav.scss create mode 100644 doc-src/content/stylesheets/partials/_sidebar.scss create mode 100644 doc-src/content/stylesheets/partials/_theme.scss create mode 100644 doc-src/content/stylesheets/partials/_typography.scss diff --git a/Gemfile b/Gemfile index 437c930e..b09845d8 100644 --- a/Gemfile +++ b/Gemfile @@ -9,3 +9,4 @@ gem "css_parser" gem "haml" gem "rcov" gem "rubyzip" +gem "livereload" \ No newline at end of file diff --git a/doc-src/.livereload b/doc-src/.livereload new file mode 100644 index 00000000..b185045d --- /dev/null +++ b/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 diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index e74462c1..605c870d 100644 --- a/doc-src/Gemfile.lock +++ b/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/ diff --git a/doc-src/assets/images/compass-logo-small.png b/doc-src/assets/images/compass-logo-small.png new file mode 100644 index 0000000000000000000000000000000000000000..001ccfa25aeb34f1cbf99566cb031d9d95472257 GIT binary patch literal 6575 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 literal 0 HcmV?d00001 diff --git a/doc-src/content/.livereload b/doc-src/content/.livereload new file mode 100644 index 00000000..b185045d --- /dev/null +++ b/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 diff --git a/doc-src/content/stylesheets/core/_base-classes.sass b/doc-src/content/stylesheets/core/_base-classes.sass new file mode 100644 index 00000000..c82e39ff --- /dev/null +++ b/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 \ No newline at end of file diff --git a/doc-src/content/stylesheets/core/_clearing-classes.sass b/doc-src/content/stylesheets/core/_clearing-classes.sass new file mode 100644 index 00000000..7a31d0d0 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/doc-src/content/stylesheets/core/_extensions.scss b/doc-src/content/stylesheets/core/_extensions.scss new file mode 100644 index 00000000..0b979edf --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/doc-src/content/stylesheets/ie.sass b/doc-src/content/stylesheets/ie.sass index 67edc67a..e69de29b 100644 --- a/doc-src/content/stylesheets/ie.sass +++ b/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: - * - -@import base diff --git a/doc-src/content/stylesheets/partials/_layout.scss b/doc-src/content/stylesheets/partials/_layout.scss new file mode 100644 index 00000000..52756dd4 --- /dev/null +++ b/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; } \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_main.scss b/doc-src/content/stylesheets/partials/_main.scss new file mode 100644 index 00000000..077f0105 --- /dev/null +++ b/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; } \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_nav.scss b/doc-src/content/stylesheets/partials/_nav.scss new file mode 100644 index 00000000..30396f6e --- /dev/null +++ b/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; }} \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_sidebar.scss b/doc-src/content/stylesheets/partials/_sidebar.scss new file mode 100644 index 00000000..167de6fa --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_theme.scss b/doc-src/content/stylesheets/partials/_theme.scss new file mode 100644 index 00000000..54af9244 --- /dev/null +++ b/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; } \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_typography.scss b/doc-src/content/stylesheets/partials/_typography.scss new file mode 100644 index 00000000..356765b3 --- /dev/null +++ b/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; } +} \ No newline at end of file diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass index 3a13856a..96c9c450 100644 --- a/doc-src/content/stylesheets/screen.sass +++ b/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: - * -@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 \ No newline at end of file diff --git a/doc-src/layouts/main.haml b/doc-src/layouts/main.haml index cc188771..715ea579 100644 --- a/doc-src/layouts/main.haml +++ b/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)