diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index 4fccd828..1cb6ac25 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.78bcd44) + compass (0.11.alpha.0.d34e05c) haml (~> 3.0.23) GEM diff --git a/doc-src/assets/fonts/museosans-web.eot b/doc-src/assets/fonts/museosans-web.eot new file mode 100755 index 00000000..4e1c50f7 Binary files /dev/null and b/doc-src/assets/fonts/museosans-web.eot differ diff --git a/doc-src/assets/fonts/museosans-web.svg b/doc-src/assets/fonts/museosans-web.svg new file mode 100755 index 00000000..2b4a36e4 --- /dev/null +++ b/doc-src/assets/fonts/museosans-web.svg @@ -0,0 +1,241 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2008 by Jos Buivenga All rights reserved +Designer : Jos Buivenga +Foundry : Jos Buivenga +Foundry URL : httpwwwjosbuivengademonnl + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/doc-src/assets/fonts/museosans-web.ttf b/doc-src/assets/fonts/museosans-web.ttf new file mode 100755 index 00000000..a158eb5f Binary files /dev/null and b/doc-src/assets/fonts/museosans-web.ttf differ diff --git a/doc-src/assets/fonts/museosans-web.woff b/doc-src/assets/fonts/museosans-web.woff new file mode 100755 index 00000000..97442ec9 Binary files /dev/null and b/doc-src/assets/fonts/museosans-web.woff differ diff --git a/doc-src/assets/fonts/pictos-web.eot b/doc-src/assets/fonts/pictos-web.eot deleted file mode 100644 index f34d23f5..00000000 Binary files a/doc-src/assets/fonts/pictos-web.eot and /dev/null differ diff --git a/doc-src/assets/fonts/pictos-web.svg b/doc-src/assets/fonts/pictos-web.svg deleted file mode 100644 index 2d168314..00000000 --- a/doc-src/assets/fonts/pictos-web.svg +++ /dev/null @@ -1,114 +0,0 @@ - - - - -This is a custom SVG webfont generated by Font Squirrel. -Designer : Drew Wilson -Foundry : Drew Wilson -Foundry URL : httppictosdrewwilsoncom - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/doc-src/assets/fonts/pictos-web.ttf b/doc-src/assets/fonts/pictos-web.ttf deleted file mode 100644 index 3ad12d5e..00000000 Binary files a/doc-src/assets/fonts/pictos-web.ttf and /dev/null differ diff --git a/doc-src/assets/fonts/pictos-web.woff b/doc-src/assets/fonts/pictos-web.woff deleted file mode 100644 index 90e53628..00000000 Binary files a/doc-src/assets/fonts/pictos-web.woff and /dev/null differ diff --git a/doc-src/assets/images/bg-light.jpg b/doc-src/assets/images/bg-light.jpg new file mode 100644 index 00000000..3d1fd2b1 Binary files /dev/null and b/doc-src/assets/images/bg-light.jpg differ diff --git a/doc-src/assets/images/compass-logo-small.png b/doc-src/assets/images/compass-logo-small-dark.png similarity index 100% rename from doc-src/assets/images/compass-logo-small.png rename to doc-src/assets/images/compass-logo-small-dark.png diff --git a/doc-src/assets/images/compass-logo-small-light.png b/doc-src/assets/images/compass-logo-small-light.png index 34ce9a49..4eee305c 100644 Binary files a/doc-src/assets/images/compass-logo-small-light.png and b/doc-src/assets/images/compass-logo-small-light.png differ diff --git a/doc-src/content/stylesheets/core/_base-classes.sass b/doc-src/content/stylesheets/core/_base-classes.sass index c82e39ff..c7cc0b66 100644 --- a/doc-src/content/stylesheets/core/_base-classes.sass +++ b/doc-src/content/stylesheets/core/_base-classes.sass @@ -11,6 +11,9 @@ $default-rounded-corner: 4 .round-corners-4 +border-radius(4px) + +.round-corners-em + +border-radius(1em) =round-corners($num: $default-rounded-corner) @extend .round-corners-#{$num} diff --git a/doc-src/content/stylesheets/core/_clearing-classes.sass b/doc-src/content/stylesheets/core/_clearing-classes.sass index 4e3f2ba5..7a31d0d0 100644 --- a/doc-src/content/stylesheets/core/_clearing-classes.sass +++ b/doc-src/content/stylesheets/core/_clearing-classes.sass @@ -8,7 +8,4 @@ +border-bottom-right-radius(0) .hide - display: none - -#theme_pref - @extend .hide \ No newline at end of file + display: none \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_code.scss b/doc-src/content/stylesheets/partials/_code.scss index d8f3b6b3..12c2736f 100644 --- a/doc-src/content/stylesheets/partials/_code.scss +++ b/doc-src/content/stylesheets/partials/_code.scss @@ -21,15 +21,15 @@ pre { .source-documentation { @extend .round-corners-4; padding: 10px 15px; - background: rgba(#000, .1); - @include box-shadow(rgba(#000, .2) 0 0 0 1px inset); @include round-bottom-corners } h3 { @include round-corners; padding: 10px 15px; margin: 20px 0 2px; + font-weight: bold; position: relative; a { text-decoration: none;} + code, .arg { font-weight: normal; } } h3.mixin { @include round-top-corners;} .arg { diff --git a/doc-src/content/stylesheets/partials/_main.scss b/doc-src/content/stylesheets/partials/_main.scss index 8c3abe1f..03399777 100644 --- a/doc-src/content/stylesheets/partials/_main.scss +++ b/doc-src/content/stylesheets/partials/_main.scss @@ -8,8 +8,9 @@ width: 100%; & > div { float: right; margin-left: 10px; } #theme_pref { padding: 3px 12px 6px; } - #version { font-size: .75em; padding: 4px 0 5px; background: none; border: none; position: absolute; left: 0;} + #version { font-size: .75em; padding: 4px 0 5px; background: none; border: none; position: absolute; left: 0; a { @include hover-link; } } #syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} } + a { text-decoration: none; } } #theme_pref { @@ -28,6 +29,8 @@ h2 a.help { display: inline-block; position: relative; text-decoration: none; + @include opacity(.3); + &:hover{ @include opacity(.7); } &:before { @extend .pictos; content: "?"; @@ -35,8 +38,6 @@ h2 a.help { position: absolute; top: 2px; left: 0; - color: #202020; - font-size: .9em; - text-shadow: #444 0 1px 0; + font-size: .85em; } } \ 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 72017cca..1d39f2a3 100644 --- a/doc-src/content/stylesheets/partials/_nav.scss +++ b/doc-src/content/stylesheets/partials/_nav.scss @@ -1,4 +1,12 @@ +.triangle-marker { + border-color: transparent transparent; + content: "\00a0"; + height: 0; width: 0; + position: absolute; + border-style: solid; } + 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;} @@ -8,10 +16,7 @@ header { @extend .group; 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; }} + line-height: 2em; }} #sub-nav { @extend .group; @@ -29,7 +34,34 @@ header { @extend .group; #module-nav { display: inline-block; padding-left: 10px; - ul { @include horizontal-list(10px); } } + ul { @include horizontal-list(false); }} + +#module-nav li.selected { position: relative; + a:before{ @extend .triangle-marker; + border-width: 0 8px 8px; + z-index: 2; + bottom: -9px; + left: 50%; + margin-left: -8px; + border-bottom-color: #121212; + } + &:before { @extend .triangle-marker; + border-bottom-color: #414141; + border-width: 0 6px 6px; + z-index: 3; + bottom: -9px; + left: 50%; + margin-left: -6px; + } + &:after { @extend .triangle-marker; + border-bottom-color: #343434; + border-width: 0 5px 5px; + z-index: 3; + bottom: -10px; + left: 50%; + margin-left: -5px; + } +} #search-docs { width: 20%; position: absolute; top: 29px; right: 0; diff --git a/doc-src/content/stylesheets/partials/_theme.scss b/doc-src/content/stylesheets/partials/_theme.scss index 7ec83fcf..41cf3890 100644 --- a/doc-src/content/stylesheets/partials/_theme.scss +++ b/doc-src/content/stylesheets/partials/_theme.scss @@ -1,8 +1,9 @@ -@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border){ +@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $option-panel-text, $option-panel-border, $option-panel-bg){ body {background: $page-bg; color: $text; a { color: $link; } } #page { @extend .horizontal-rule-#{$theme}; } header { @extend .horizontal-rule-#{$theme}; border-width: 4px; } + #main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; } nav a { color: $nav-link; } #main-nav a { color: $main-nav;} @@ -14,7 +15,10 @@ #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; @extend .round-corners-4;} - #module-nav .selected { color: $module-nav-selected; } + #module-nav { + ul { overflow: visible; } + li.selected { @extend .selected-marker-#{$theme}; + a { color: $module-nav-selected; } } } #search-docs { input::-webkit-input-placeholder { color: $search; } @@ -24,28 +28,33 @@ h2 { @extend .horizontal-rule-#{$theme}; a { color: $strong-text; } } } - #docs_panel > div { background: rgba($version-text, .03); color: rgba($version-text, .4); border: 1px solid rgba($version-border, .3); border-top: 0; @include round-bottom-corners; - a { text-decoration: none; color: rgba($version-text, .7); } - a[rel=theme] { color: rgba($version-border, .8); text-shadow: rgba($version-text, .08) 0 1px 0; &:hover { text-decoration: none; color: $strong-text; text-shadow: $version-border 0 1px 0; } } - a[rel=sass], a[rel=scss] { color: rgba($version-border, .6); text-shadow: rgba($version-text, .08) 0 1px 0;} } - body.sass #docs_panel a[rel=sass], body.scss #docs_panel a[rel=scss] { color: rgba($version-text, .5); @include border-radius(1em); @extend .inset-panel-#{$theme};} + #docs_panel > div { + @include round-bottom-corners; + background: $option-panel-bg; border: 1px solid $option-panel-border; border-top: 0; + + a[rel=theme] { @extend .theme-switch-#{$theme}; } } + + a[rel=sass], a[rel=scss] { @extend .syntax-switch-#{$theme} } + + #version { color: $option-panel-text; a { color: rgba($nav-link, .7); } } + + body.sass a[rel=sass], body.scss a[rel=scss] { color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; } + #page > article { - #{headings()}{ color: $heading; } } + #{headings()}{ color: $heading; } h1, h2 { @extend .horizontal-rule-#{$theme}; } - h3 { - background: rgba(#000, .2); - @include box-shadow(rgba(#000, .2) 0 0 0 1px inset); - a:hover { color: $heading; - .arg { color: rgba($heading, .6);} - } - } + h3 { @extend .heading-panel-#{$theme}; } + h2 a.help { color: $heading;} + .source-documentation { @extend .doc-panel-#{$theme}; } + } + footer .links li { @extend .vertical-rule-#{$theme}; } - code { @extend .code-block-#{$theme}; color: $code;} - .arg { color: $code;} - .arg[data-default-value] { color: rgba($code, .7);} - a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);};} + code { @extend .code-block-#{$theme}; color: $code; } + .arg { color: $code; } + .arg[data-default-value] { color: rgba($code, .7); } + a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} } } // Dark theme @@ -63,6 +72,32 @@ .code-block-dark { @extend .code-block; @extend .inset-panel-dark; } +.heading-panel-dark { + background: rgba(#000, .2); + @include box-shadow(rgba(#000, .2) 0 0 0 1px inset); + a:hover { color: #fff; + .arg { color: rgba(#fff, .6);} + } +} +.doc-panel-dark { + background: rgba(#000, .1); + @include box-shadow(rgba(#000, .2) 0 0 0 1px inset); +} + +.syntax-switch-dark { + color: #000; text-shadow: rgba(#fff, .08) 0 1px 0; + &:hover { color: #fff; text-shadow: #000 0 1px 0; } } + +.theme-switch-dark { + color: rgba(#000, .8); text-shadow: rgba(#fff, .08) 0 1px 0; + &:hover { color: #eee; text-shadow: #000 0 1px 0; } } + +.selected-marker-dark { + a:before{ border-bottom-color: #121212; } + &:before { border-bottom-color: #414141; } + &:after { border-bottom-color: #323232; } +} + @mixin dark-theme { $page-bg: #343434; @@ -81,17 +116,18 @@ $docs-nav-selected: $strong-text; $module-nav-selected: $link; - $version-text: white; - $version-border: black; + $option-panel-text: rgba(#fff, .2); + $option-panel-border: rgba(#000, .3); + $option-panel-bg: rgba(#fff, .03); - @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border); + @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $option-panel-text, $option-panel-border, $option-panel-bg); } // Light Theme .inset-panel-light { - @include background-image(linear-gradient(rgba(#000, .15), rgba(#000, 0))); - @include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .25) 0 -1px 0); - background-color: rgba(#fff, .2); } + @include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset); + text-shadow: 0 1px 1px #fff; + background-color: rgba(#000, .04); } .horizontal-rule-light { @include single-box-shadow(rgba(#fff, 1), 0, 1px, 0); @@ -101,35 +137,58 @@ @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0); border-right: 1px solid #bbb; } -.code-block-light { @extend .code-block; - //@include background-image(linear-gradient(rgba(#000, .1), rgba(#000, 0))); - @include box-shadow(rgba(#000, .2) 0 0 1px 1px inset); - background-color: rgba(#fff, 1);} +.code-block-light { @extend .code-block; @extend .inset-panel-light;} + +.syntax-switch-light { + color: rgba(#000, .3); text-shadow: rgba(#fff, .08) 0 1px 0; + &:hover { color: #000; text-shadow: #fff 0 1px 0; }} + +.theme-switch-light { + color: rgba(#000, .2); text-shadow: rgba(#fff, 1) 0 1px 0; + &:hover { color: #000; } } + +.heading-panel-light { + background: #fff; + @include box-shadow(rgba(#000, .2) 0 0 0 1px inset); + a:hover { color: #000; + .arg { color: rgba(#000, .6); } } +} + +.selected-marker-light { + a:before{ border-bottom-color: #bbbbbb; } + &:before { border-bottom-color: #fff; } + &:after { border-bottom-color: #e5e5e5; } +} + +.doc-panel-light { + background: rgba(#fff, .5); + @include box-shadow(rgba(#000, .15) 0 0 0 1px inset); +} @mixin light-theme { - $page-bg: #eaeaea; + $page-bg: #ececec; // image-url('bg-light.jpg'); $text: #222 ; $heading: black; $strong-text: #000; $search: #666; - $search-bg: white; - $link: darken(adjust-hue(#dadbb1, 160), 40); - $nav-link: #444; + $link: #307eb6; + $nav-link: #555; + $code: #222; - $main-nav: $strong-text; - $main-nav-selected: darken(#fb292d, 10); + $main-nav: #555; + $main-nav-selected: darken(#fb292d, 15); $docs-nav-selected: $strong-text; $module-nav-selected: $link; - $version-text: black; - $version-border: white; - $code: #222; + $option-panel-text: rgba(#000, .3); + $option-panel-border: rgba(#000, .2); + $option-panel-bg: #fff; - @include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border); + @include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $option-panel-text, $option-panel-border, $option-panel-bg); } html.dark { @include dark-theme; } -html.light { @include light-theme; } \ No newline at end of file +html.light { @include light-theme; } diff --git a/doc-src/content/stylesheets/partials/_typography.scss b/doc-src/content/stylesheets/partials/_typography.scss index 4e19cd5b..1a87a02a 100644 --- a/doc-src/content/stylesheets/partials/_typography.scss +++ b/doc-src/content/stylesheets/partials/_typography.scss @@ -1,8 +1,13 @@ -//@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/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;} -@include font-face("pictos-web", font-files("pictos-web.woff", woff, "pictos-web.ttf", truetype, "pictos-web.svg#webfontIyfZbseF", svg), 'pictos-web.eot'); +@font-face { + font-family: "pictos-web"; + src: url('/otherfonts/pictos-web.eot'); + src: local("?"), url('/otherfonts/pictos-web.woff') format('woff'), url('/otherfonts/pictos-web.ttf') format('truetype'), url('/otherfonts/pictos-web.svg#webfontIyfZbseF') format('svg');} + +@include font-face("museosans-web", font-files("museosans-web.woff", woff, "museosans-web.ttf", truetype, "museosans-web.svg#webfontJHBEijmD", svg), 'museosans-web.eot'); + .sans-font { font-family: 'Lucida Grande', Arial, sans-serif; } -.heading-font { font-family: 'Museo Sans', 'serif'; } +.heading-font { font-family: 'museosans-web', 'serif'; } .pictos { font-family: pictos-web; font-weight: normal; font-style: normal;} .fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;} @@ -11,7 +16,7 @@ ol { list-style: outside decimal; padding-left: 2.5em;} ul, ol, dl { margin-bottom: 1.5em;} p { margin-bottom: 1.2em;} - #{headings()}{ @extend .heading-font; line-height: 1.2em; } + #{headings(1,2)}{ @extend .heading-font; line-height: 1.2em; } h1 { font-size: 30px; } h2 { font-size: 22px; margin: 15px 0 8px; padding-bottom: 6px;} h3 { font-size: 18px; } diff --git a/doc-src/layouts/basic.haml b/doc-src/layouts/basic.haml index d5ed6968..c6f58b34 100644 --- a/doc-src/layouts/basic.haml +++ b/doc-src/layouts/basic.haml @@ -8,11 +8,11 @@ %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") %script(src="/javascripts/jquery.cookie.js") %script(src="/javascripts/site.js") %script(src="/javascripts/fixups.js" deferred) - %link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"} %link{:href => "/stylesheets/syntax/shCore.css", :rel => "stylesheet", :type => "text/css"} %link{:href => "/stylesheets/syntax/shThemeDefault.css", :rel => "stylesheet", :type => "text/css"} diff --git a/frameworks/compass/stylesheets/compass/css3/_background-clip.scss b/frameworks/compass/stylesheets/compass/css3/_background-clip.scss index 2d35fdb4..47a78f64 100644 --- a/frameworks/compass/stylesheets/compass/css3/_background-clip.scss +++ b/frameworks/compass/stylesheets/compass/css3/_background-clip.scss @@ -5,7 +5,7 @@ // If you wish to do so, you can override the default constant with `border-box` // // To override to the default border-box model, use this code: -// $default-background-clip = border-box +// $default-background-clip: border-box $default-background-clip: padding-box !default;