diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index 8da50845..14ee08f5 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.9cd80d1) + compass (0.11.alpha.1.8f9cce8) haml (~> 3.0.23) GEM diff --git a/doc-src/assets/images/compass-logo.png b/doc-src/assets/images/compass-logo.png new file mode 100644 index 00000000..64d03b2e Binary files /dev/null and b/doc-src/assets/images/compass-logo.png differ diff --git a/doc-src/assets/images/sites/addons.heroku.jpg b/doc-src/assets/images/sites/addons.heroku.jpg new file mode 100644 index 00000000..ca3d5a2e Binary files /dev/null and b/doc-src/assets/images/sites/addons.heroku.jpg differ diff --git a/doc-src/assets/images/sites/busyconf.jpg b/doc-src/assets/images/sites/busyconf.jpg new file mode 100644 index 00000000..6dcc2eec Binary files /dev/null and b/doc-src/assets/images/sites/busyconf.jpg differ diff --git a/doc-src/assets/images/sites/caring.jpg b/doc-src/assets/images/sites/caring.jpg new file mode 100644 index 00000000..1963e9de Binary files /dev/null and b/doc-src/assets/images/sites/caring.jpg differ diff --git a/doc-src/assets/images/sites/cofamilies.jpg b/doc-src/assets/images/sites/cofamilies.jpg new file mode 100644 index 00000000..f3612329 Binary files /dev/null and b/doc-src/assets/images/sites/cofamilies.jpg differ diff --git a/doc-src/assets/images/sites/cornell.jpg b/doc-src/assets/images/sites/cornell.jpg new file mode 100644 index 00000000..0c6363c1 Binary files /dev/null and b/doc-src/assets/images/sites/cornell.jpg differ diff --git a/doc-src/assets/images/sites/dailymile.jpg b/doc-src/assets/images/sites/dailymile.jpg new file mode 100644 index 00000000..07874576 Binary files /dev/null and b/doc-src/assets/images/sites/dailymile.jpg differ diff --git a/doc-src/assets/images/sites/hubblesite.jpg b/doc-src/assets/images/sites/hubblesite.jpg new file mode 100644 index 00000000..019bb568 Binary files /dev/null and b/doc-src/assets/images/sites/hubblesite.jpg differ diff --git a/doc-src/assets/images/sites/jumpstartlab.jpg b/doc-src/assets/images/sites/jumpstartlab.jpg new file mode 100644 index 00000000..41880b00 Binary files /dev/null and b/doc-src/assets/images/sites/jumpstartlab.jpg differ diff --git a/doc-src/assets/images/sites/sencha.jpg b/doc-src/assets/images/sites/sencha.jpg new file mode 100644 index 00000000..ae31aeda Binary files /dev/null and b/doc-src/assets/images/sites/sencha.jpg differ diff --git a/doc-src/assets/javascripts/fixups.js b/doc-src/assets/javascripts/fixups.js index 00f5ebe3..f1b1c18c 100644 --- a/doc-src/assets/javascripts/fixups.js +++ b/doc-src/assets/javascripts/fixups.js @@ -7,4 +7,16 @@ $(function(){ e = $(e); e.attr("title", "Defaults to: " + e.attr("data-default-value")) }); -}); \ No newline at end of file +}); + +;(function() +{ + typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null; + function Brush(){}; + Brush.prototype = new SyntaxHighlighter.Highlighter(); + Brush.aliases = ['sass', 'scss']; + + SyntaxHighlighter.brushes.Sass = Brush; + + typeof(exports) != 'undefined' ? exports.Brush = Brush : null; +})(); \ No newline at end of file diff --git a/doc-src/assets/javascripts/modernizr-1.6.min.js b/doc-src/assets/javascripts/modernizr-1.6.min.js new file mode 100644 index 00000000..c6a800a9 --- /dev/null +++ b/doc-src/assets/javascripts/modernizr-1.6.min.js @@ -0,0 +1,30 @@ +/* + * Modernizr v1.6 + * http://www.modernizr.com + * + * Developed by: + * - Faruk Ates http://farukat.es/ + * - Paul Irish http://paulirish.com/ + * + * Copyright (c) 2009-2010 + * Dual-licensed under the BSD or MIT licenses. + * http://www.modernizr.com/license/ + */ +window.Modernizr=function(i,e,u){function s(a,b){return(""+a).indexOf(b)!==-1}function D(a,b){for(var c in a)if(j[a[c]]!==u&&(!b||b(a[c],E)))return true}function n(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1);c=(a+" "+F.join(c+" ")+c).split(" ");return!!D(c,b)}function S(){f.input=function(a){for(var b=0,c=a.length;b7)};d.history=function(){return!!(i.history&&history.pushState)};d.draganddrop=function(){return o("drag")&& +o("dragstart")&&o("dragenter")&&o("dragover")&&o("dragleave")&&o("dragend")&&o("drop")};d.websockets=function(){return"WebSocket"in i};d.rgba=function(){j.cssText="background-color:rgba(150,255,150,.5)";return s(j.backgroundColor,"rgba")};d.hsla=function(){j.cssText="background-color:hsla(120,40%,100%,.5)";return s(j.backgroundColor,"rgba")||s(j.backgroundColor,"hsla")};d.multiplebgs=function(){j.cssText="background:url(//:),url(//:),red url(//:)";return/(url\s*\(.*?){3}/.test(j.background)};d.backgroundsize= +function(){return n("backgroundSize")};d.borderimage=function(){return n("borderImage")};d.borderradius=function(){return n("borderRadius","",function(a){return s(a,"orderRadius")})};d.boxshadow=function(){return n("boxShadow")};d.textshadow=function(){return e.createElement("div").style.textShadow===""};d.opacity=function(){var a=q.join("opacity:.5;")+"";j.cssText=a;return s(j.opacity,"0.5")};d.cssanimations=function(){return n("animationName")};d.csscolumns=function(){return n("columnCount")};d.cssgradients= +function(){var a=("background-image:"+q.join("gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:")+q.join("linear-gradient(left top,#9f9, white);background-image:")).slice(0,-17);j.cssText=a;return s(j.backgroundImage,"gradient")};d.cssreflections=function(){return n("boxReflect")};d.csstransforms=function(){return!!D(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])};d.csstransforms3d=function(){var a=!!D(["perspectiveProperty","WebkitPerspective", +"MozPerspective","OPerspective","msPerspective"]);if(a)a=Q("@media ("+q.join("transform-3d),(")+"modernizr)");return a};d.csstransitions=function(){return n("transitionProperty")};d.fontface=function(){var a,b=e.head||e.getElementsByTagName("head")[0]||l,c=e.createElement("style"),k=e.implementation||{hasFeature:function(){return false}};c.type="text/css";b.insertBefore(c,b.firstChild);a=c.sheet||c.styleSheet;b=k.hasFeature("CSS2","")?function(g){if(!(a&&g))return false;var r=false;try{a.insertRule(g, +0);r=!/unknown/i.test(a.cssRules[0].cssText);a.deleteRule(a.cssRules.length-1)}catch(x){}return r}:function(g){if(!(a&&g))return false;a.cssText=g;return a.cssText.length!==0&&!/unknown/i.test(a.cssText)&&a.cssText.replace(/\r+|\n+/g,"").indexOf(g.split(" ")[0])===0};f._fontfaceready=function(g){g(f.fontface)};return b('@font-face { font-family: "font"; src: "font.ttf"; }')};d.video=function(){var a=e.createElement("video"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('video/ogg; codecs="theora"'); +b.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"')||a.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');b.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return b};d.audio=function(){var a=e.createElement("audio"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('audio/ogg; codecs="vorbis"');b.mp3=a.canPlayType("audio/mpeg;");b.wav=a.canPlayType('audio/wav; codecs="1"');b.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")}return b};d.localstorage=function(){try{return"localStorage"in +i&&i.localStorage!==null}catch(a){return false}};d.sessionstorage=function(){try{return"sessionStorage"in i&&i.sessionStorage!==null}catch(a){return false}};d.webWorkers=function(){return!!i.Worker};d.applicationcache=function(){return!!i.applicationCache};d.svg=function(){return!!e.createElementNS&&!!e.createElementNS(v.svg,"svg").createSVGRect};d.inlinesvg=function(){var a=document.createElement("div");a.innerHTML="";return(a.firstChild&&a.firstChild.namespaceURI)==v.svg};d.smil=function(){return!!e.createElementNS&& +/SVG/.test(O.call(e.createElementNS(v.svg,"animate")))};d.svgclippaths=function(){return!!e.createElementNS&&/SVG/.test(O.call(e.createElementNS(v.svg,"clipPath")))};for(var H in d)if(R(d,H)){w=H.toLowerCase();f[w]=d[H]();P.push((f[w]?"":"no-")+w)}f.input||S();f.crosswindowmessaging=f.postmessage;f.historymanagement=f.history;f.addTest=function(a,b){a=a.toLowerCase();if(!f[a]){b=!!b();l.className+=" "+(b?"":"no-")+a;f[a]=b;return f}};j.cssText="";E=h=null;i.attachEvent&&function(){var a=e.createElement("div"); +a.innerHTML="";return a.childNodes.length!==1}()&&function(a,b){function c(p){for(var m=-1;++m

An introduction to Compass from Lorin Tackett on Vimeo.

+ + ## Installing + + Compass is a tool that runs on the command line. + + On any system with ruby installed, open your terminal and type: + + gem install compass + + This will install Compass and Sass too. Verify that compass is installed: + + compass version + + ## Creating a stand-alone project + + compass create myproject + mate myproject + compass watch myproject + + If you don't have TextMate, substitute the `mate myproject` part with the text + editor of your choice. Edit the `*.scss` files in the `sass` directory. + These files are yours and you can change them as you see fit, delete them, + make new ones, etc. Compass will automatically compile them into css in the + `stylesheets` directory whenever they change. + + ## Rails Support + + compass init rails /path/to/myrailsproject + + ## Installing a framework + + When creating a new project: + + compass create myproject --using blueprint/basic + + When installing into an existing project: + + cd myproject + compass install blueprint/semantic + + With Rails: + + compass init rails /path/to/myrailsproject --using blueprint/semantic + + ## Bugs Reports, Discussions, Support + + Send a note to the [mailing list](http://groups.google.com/group/compass-users) + and/or [File a bug](http://github.com/chriseppstein/compass/issues). \ No newline at end of file diff --git a/doc-src/content/index.haml b/doc-src/content/index.haml index 264997e1..74b49789 100644 --- a/doc-src/content/index.haml +++ b/doc-src/content/index.haml @@ -1,65 +1,66 @@ --- -title: Compass Documentation -crumb: Docs +title: Compass Home +crumb: Home body_id: home +layout: homepage --- -%article - %h1#logo Compass - - :markdown - Compass is a stylesheet authoring tool that uses the Sass stylesheet - language to make your stylesheets smaller and your web site easier to - maintain. Compass provides ports of the best of breed css frameworks - that you can use without forcing you to use their presentational class - names. It’s a new way of thinking about stylesheets that must be seen - in action! - -

An introduction to Compass from Lorin Tackett on Vimeo.

- - ## Installing - - Compass is a tool that runs on the command line. - - On any system with ruby installed, open your terminal and type: - - gem install compass - - This will install Compass and Sass too. Verify that compass is installed: - - compass version - - ## Creating a stand-alone project - - compass create myproject - mate myproject - compass watch myproject - - If you don't have TextMate, substitute the `mate myproject` part with the text - editor of your choice. Edit the `*.scss` files in the `sass` directory. - These files are yours and you can change them as you see fit, delete them, - make new ones, etc. Compass will automatically compile them into css in the - `stylesheets` directory whenever they change. - - ## Rails Support - - compass init rails /path/to/myrailsproject - - ## Installing a framework - - When creating a new project: - - compass create myproject --using blueprint/basic - - When installing into an existing project: - - cd myproject - compass install blueprint/semantic - - With Rails: - - compass init rails /path/to/myrailsproject --using blueprint/semantic - - ## Bugs Reports, Discussions, Support - - Send a note to the [mailing list](http://groups.google.com/group/compass-users) - and/or [File a bug](http://github.com/chriseppstein/compass/issues). \ No newline at end of file +%h1#logo Compass +%h2 Compass is an open-source CSS Authoring Framework. +.overview + .compass + %h4 Why designers love Compass. + %ol + %li Get cleaner markup with no presentational classes. + %li It’s chock full of the web’s best reusable patterns. + %li Developing a personal framework is simple. + %li Compass mixins make CSS3 easy. + .sass + %h4 Compass uses Sass. + %p Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS. +%h3 Brilliant people use Compass, including these wildly talented folks: +%ul#featured_sites + %li + %a(href="http://addons.heroku.com/") + %img(src="/images/sites/addons.heroku.jpg") + %span.title Heroku Addons + %span.url http://addons.heroku.com + %li + %a(href="http://sencha.com/products/touch/") + %img(src="/images/sites/sencha.jpg") + %span.title Sencha Touch + %span.url http://sencha.com/products/touch + %li + %a(href="http://caring.com/") + %img(src="/images/sites/caring.jpg") + %span.title Caring.com + %span.url http://caring.com + %li + %a(href="http://hubblesite.org/") + %img(src="/images/sites/hubblesite.jpg") + %span.title HubbleSite + %span.url http://hubblesite.org + %li + %a(href="http://dailymile.com/") + %img(src="/images/sites/dailymile.jpg") + %span.title DailyMile + %span.url http://dailymile.com + %li + %a(href="http://cofamilies.com/") + %img(src="/images/sites/cofamilies.jpg") + %span.title Cofamilies + %span.url http://cofamilies.com + %li + %a(href="http://jumpstartlab.com") + %img(src="/images/sites/jumpstartlab.jpg") + %span.title Jumpstart Lab + %span.url http://jumpstartlab.com + %li + %a(href="http://green.cals.cornell.edu/") + %img(src="/images/sites/cornell.jpg") + %span.title Corenell University - CALS + %span.url http://green.cals.cornell.edu + %li + %a(href="http://busyconf.com/") + %img(src="/images/sites/busyconf.jpg") + %span.title BusyConf + %span.url http://busyconf.com \ No newline at end of file diff --git a/doc-src/content/stylesheets/home.scss b/doc-src/content/stylesheets/home.scss new file mode 100644 index 00000000..8f607170 --- /dev/null +++ b/doc-src/content/stylesheets/home.scss @@ -0,0 +1,17 @@ +@import "compass"; +@import "core/extensions"; +@include reset(global); +@include reset(html5); +@import "core/base-classes"; + +@import "partials/theme"; +@import "partials/layout"; +@import "partials/nav"; +@import "partials/typography"; +@import "partials/main"; +@import "partials/home"; + +html.dark { @include dark-theme; } +html.light { @include light-theme; } + +@import "core/clearing-classes"; \ No newline at end of file diff --git a/doc-src/content/stylesheets/ie.scss b/doc-src/content/stylesheets/ie.scss new file mode 100644 index 00000000..fc03b854 --- /dev/null +++ b/doc-src/content/stylesheets/ie.scss @@ -0,0 +1,5 @@ +ul#featured_sites li { + margin-left: 4px; + margin-top: 4px; + &:hover{ padding: 6px; + img { width: 240px; }}} \ 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 e0d86154..ec393373 100644 --- a/doc-src/content/stylesheets/partials/_code.scss +++ b/doc-src/content/stylesheets/partials/_code.scss @@ -12,7 +12,6 @@ html .syntaxhighlighter { //a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; } } - pre { margin: 1.5em 0; .code-block { padding: .6em; } @@ -30,6 +29,7 @@ pre { padding: 10px 15px; @include round-bottom-corners } + h3 { @include round-corners; padding: 10px 15px; margin: 20px 0 20px; @@ -82,17 +82,8 @@ h2 + a[rel="view source"]{ margin-top: 12px;} .toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10; span.title { display: inline; } a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } } -} -::-webkit-scrollbar { - width: 12px; - height: 12px; } - -::-webkit-scrollbar-button { - &:start:decrement, &:end:increment { - display: block; - width: 0; - height: 0; } } - -::-webkit-scrollbar-thumb:horizontal { - -webkit-border-radius: 5px; -webkit-background-clip: padding-box; } \ No newline at end of file + &::-webkit-scrollbar { width: 12px; height: 12px; } + &::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } } + &::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; } +} \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_home.scss b/doc-src/content/stylesheets/partials/_home.scss new file mode 100644 index 00000000..62f2dbc4 --- /dev/null +++ b/doc-src/content/stylesheets/partials/_home.scss @@ -0,0 +1,82 @@ +body#home { + width: 810px; + #page { padding-top: 31px;} + h1#logo { + $logo: 'compass-logo.png'; + background: image-url($logo) no-repeat; + text-indent: -9999px; + overflow: hidden; + width: image-width($logo); + height: image-height($logo)/2; + padding: 0; + margin: 0 auto 18px; + } + #{headings()}{ @extend .heading-font; } + h2 { + text-align: center; + font-size: 30px; + padding-bottom: 15px; + margin-bottom: 30px; + line-height: 1.1em; + } + h3 { + text-align: center; + font-size: 25px; + margin-top: 32px; + } + h4 { font-size: 1.5em; } + .overview { + @extend .group; + .compass { width: 406px; float: left; + h4:before { content: "k"; } } + .sass { width: 275px; float: right; + h4:before { content: "2"; } } + div { + padding: 20px; + h4 { + padding-bottom: 12px; + margin-bottom: 12px; + &:before { + @extend .pictos; + color: #fb292d; + display: inline-block; + font-size: 1.2em; + padding-right: .3em; + } + } + } + ol { padding-left: 0; list-style: inside decimal; margin-bottom: 0; } + p { margin-bottom: 0; } + ol, p { line-height: 1.8em; font-size: .95em;} + } +} +ul#featured_sites { + @extend .group; + overflow: visible; + margin-top: 30px; + list-style: none; + padding: 0px; + li { + float: left; + text-shadow: none; + overflow: visible; + position: relative; + &:nth-child(3n+2){ margin: 0 7px; } + &:nth-child(1n+4){ margin-top: 7px; } + &:nth-child(3n+4){ clear: left; } + padding: 6px; + a { text-decoration: none; } + img { float: left; width: 240px; } + span { display: none;} + &:hover { z-index: 100; + padding: 3px 2px; + img { width: 248px; } + span { display: block; position: absolute; text-shadow: none;} + } + .url { + bottom: 2px; left: 2px; right: 2px; background: #000; background: rgba(#000, .8); z-index: 102; padding: 2.2em 10px 6px; + font-size: .8em; border-top: 1px solid rgba(#fff, .2); } + .title { bottom: 1.7em; left: 0; z-index: 103; text-decoration: none; padding: 0 11px; color: #fff; } + } +} +html.light body#home { h1#logo { background-position: bottom;} } \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_layout.scss b/doc-src/content/stylesheets/partials/_layout.scss index a0fd5c85..f1b185c4 100644 --- a/doc-src/content/stylesheets/partials/_layout.scss +++ b/doc-src/content/stylesheets/partials/_layout.scss @@ -9,9 +9,12 @@ body { @extend .sans-font; line-height: 1.45em; } + #wrap { @extend .group; padding: 0 20px 20px; } -#page { @extend .group; padding-bottom: 30px;} +#page { @extend .group; padding-bottom: 30px; overflow: hidden;} footer { @extend .group; clear: both; padding-top: 20px;} header { padding: 22px 0 0; position: relative; } -#page > article { padding-left: $side-nav-width + 45px; } -aside { float: left; width: $side-nav-width; } \ No newline at end of file +#page article { padding-left: $side-nav-width + 45px;} +aside { float: left; width: $side-nav-width; } + +body#home #page article { padding-left: 0;} \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_main.scss b/doc-src/content/stylesheets/partials/_main.scss index a29fe8ba..288cfc3f 100644 --- a/doc-src/content/stylesheets/partials/_main.scss +++ b/doc-src/content/stylesheets/partials/_main.scss @@ -3,26 +3,27 @@ padding-top: 40px; & > article { padding-top: 10px; font-size: 15px; } } +#theme_pref { + a { display: block; font-size: 18px; width: .9em; position: relative; text-decoration: none; @extend .pictos; } } + #docs_panel { position: absolute; top: 0; right: 0; width: 100%; & > div { float: right; margin-left: 10px; } - #theme_pref { padding: 3px 12px 6px; } + #theme_pref { padding: 3px 12px 6px; a { position: relative; top: 2px;} } #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; } + & > div { @include round-bottom-corners; } } -#theme_pref { - a { display: block; text-indent: -9999px; font-size: 18px; width: .9em; position: relative; text-decoration: none; } - a:before { text-indent: 0; position: absolute; left: 0; top: 2px; content: 'Q'; @extend .pictos; } } - footer { - .legalese { font-size: .75em; float: left; - span { display: block; } } .links { float: left; font-size: .9em; - ul { @include horizontal-list(10px); - li:last-child {border: 0; } } } + img { vertical-align: middle; padding-right: 5px; position: relative; top: -2px;} + span { position: relative; top: -1px; } + ul { @include horizontal-list(15px); overflow: visible; + li {padding-top: 3px;} + li:last-child {border: 0; @include box-shadow(none); } } } } h2 a.help { text-indent: -9999px; diff --git a/doc-src/content/stylesheets/partials/_nav.scss b/doc-src/content/stylesheets/partials/_nav.scss index 1d39f2a3..909ca043 100644 --- a/doc-src/content/stylesheets/partials/_nav.scss +++ b/doc-src/content/stylesheets/partials/_nav.scss @@ -4,7 +4,7 @@ height: 0; width: 0; position: absolute; border-style: solid; } - + nav a { @include hover-link; } nav .selected a:hover { text-decoration: none;} @@ -64,9 +64,21 @@ header { @extend .group; } #search-docs { - width: 20%; position: absolute; top: 29px; right: 0; - input { @extend .sans-font; @extend .round-corners-4; - @include box-sizing(border-box); - width: 100%; max-width: 200px; min-width: 60px; border: 0; margin: 0; padding: 5px 8px; + position: absolute; top: 29px; right: 0; + &:before { + content: "s"; + display: block; + @extend .pictos; + position: absolute; + left: 6px; + top: 4px; font-size: .8em; - float: right; } } \ No newline at end of file + z-index: 20; + @include opacity(.8) + } + input { @extend .sans-font; @include round-corners; + @include box-sizing(border-box); + max-width: 200px; min-width: 75px; border: 0; margin: 0; padding: 5px 8px 5px 23px; + font-size: .8em; + float: right; + position: relative; } } \ 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 06e64756..1b45885b 100644 --- a/doc-src/content/stylesheets/partials/_theme.scss +++ b/doc-src/content/stylesheets/partials/_theme.scss @@ -1,66 +1,77 @@ -@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; +@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $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; } + nav a { color: $nav-link; } #main-nav a { color: $main-nav;} - body.home #main-nav a[rel=home], - body.help #main-nav a[rel=help], - body.docs #main-nav a[rel=documentation], - body.get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; } + + body#home #main-nav a[rel=home], + body#help #main-nav a[rel=help], + body.reference #main-nav a[rel=documentation], + body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; } + + #search-docs input { + @extend .inset-panel-#{$theme}; color: $search; + &::-webkit-input-placeholder { color: $search; } } + #{headings()}{ color: $heading; + strong { color: $main-nav-selected; } + em { color: $code; } } + + h2 { @extend .horizontal-rule-#{$theme}; } + + aside { @extend .vertical-rule-#{$theme}; + h2 a { color: $strong-text; } } + + footer .links li { @extend .vertical-rule-#{$theme}; } + code { @extend .code-block-#{$theme}; color: $code; } + + #theme_pref { @extend .theme-switch-#{$theme}; } + #docs_panel div { background: $option-panel-bg; border: 1px solid $option-panel-border; border-top: 0; } + + body#home .overview div { @extend .inset-panel-#{$theme}; + h4 { @extend .horizontal-rule-#{$theme}; } } + #featured_sites li { @extend .inset-panel-#{$theme}; } + +} +@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){ + + #page > article { + h1, h2 { @extend .horizontal-rule-#{$theme}; } + h3 { @extend .heading-panel-#{$theme}; } } #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;} + #main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; float: left; } + #module-nav { ul { overflow: visible; } li.selected { @extend .selected-marker-#{$theme}; a { color: $module-nav-selected; } } } - #search-docs { - input::-webkit-input-placeholder { color: $search; } - input { @extend .inset-panel-#{$theme}; color: $search;}} + a[rel=sass], a[rel=scss] { @extend .syntax-switch-#{$theme}; } + &.sass a[rel=sass], &.scss a[rel=scss] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; } - aside { @extend .vertical-rule-#{$theme}; - h2 { @extend .horizontal-rule-#{$theme}; - a { color: $strong-text; } } } - - #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); } } - - &.sass a[rel=sass], &.scss a[rel=scss] { color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; } + #version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } } .mixin-source { @extend .mixin-panel-#{$theme}; } + h2 a.help { color: $heading;} - #page > article { - #{headings()}{ color: $heading; } - h1, h2 { @extend .horizontal-rule-#{$theme}; } - h3 { @extend .heading-panel-#{$theme}; } - h2 a.help { color: $heading;} - .source-documentation { @extend .doc-panel-#{$theme}; } - } - footer .links li { @extend .vertical-rule-#{$theme}; } + .source-documentation { @extend .doc-panel-#{$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);} } + } // Dark theme .inset-panel-dark { @include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset); - background-color: rgba(#000, .3); } + background: darken(#2f2f2f, 4); background-color: rgba(#000, .3); } .horizontal-rule-dark { @include box-shadow(rgba(#fff, .07) 0 1px 0); @@ -73,6 +84,7 @@ .code-block-dark { @extend .code-block; @extend .inset-panel-dark; } .heading-panel-dark { + background: darken(#2f2f2f, 6); background: rgba(#000, .2); @include box-shadow(rgba(#000, .2) 0 0 0 1px inset); a:hover { color: #fff; @@ -80,6 +92,7 @@ } } .doc-panel-dark { + background: darken(#2f2f2f, 4); background: rgba(#000, .1); @include box-shadow(rgba(#000, .2) 0 0 0 1px inset); } @@ -89,8 +102,9 @@ &: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; } } + cursor: pointer; + a { color: #000; color: rgba(#000, .8); text-shadow: rgba(#fff, .08) 0 1px 0; } + &:hover a { color: #eee; text-shadow: #000 0 1px 0; } } .selected-marker-dark { a:before{ border-bottom-color: #121212; } @@ -102,8 +116,8 @@ td.gutter { background: rgba(#fff, .05); .line { border-right: 2px solid rgba(#fff, .15); color: rgba(#fff, .5); }} } -@mixin dark-theme { - $page-bg: #343434; +@mixin dark-theme($docs: false) { + $page-bg: #2f2f2f; $text: #c6c6c6; $heading: white; @@ -111,20 +125,25 @@ $search: #6e6e6e; - $link: #dadbb1; + $code: #dadbb1; $nav-link: #bfbfbf; - $code: #85AFC9; + $link: saturate(lighten(#85AFC9, 4), 19); $main-nav: $strong-text; $main-nav-selected: #fb292d; $docs-nav-selected: $strong-text; $module-nav-selected: $link; - $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, $option-panel-text, $option-panel-border, $option-panel-bg); + + @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg); + + @if($docs){ + @include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected); + .syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); } + .syntaxhighlighter::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; } + } } // Light Theme @@ -141,19 +160,20 @@ @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0); border-right: 1px solid #bbb; } -.code-block-light { @extend .code-block; @extend .inset-panel-light;} +.code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); } .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; } } + cursor: pointer; + a {color: rgba(#000, .2); text-shadow: rgba(#fff, 1) 0 1px 0;} + &:hover a { color: #000; } } .heading-panel-light { - background: #fff; - @include box-shadow(rgba(#000, .2) 0 0 0 1px inset); + background: rgba(#fff, .5); + @include box-shadow(rgba(#000, .13) 0 0 0 1px inset); a:hover { color: #000; .arg { color: rgba(#000, .6); } } } @@ -165,20 +185,22 @@ } .doc-panel-light { - background: rgba(#fff, .5); + background: rgba(#000, .03); + text-shadow: rgba(#fff, .9) 0 1px 1px; @include box-shadow(rgba(#000, .15) 0 0 0 1px inset); } .mixin-panel-light { @extend .inset-panel-light; + background: rgba(#fff, .8); td.gutter { background: rgba(#000, .08); .line { border-right: 2px solid rgba(#000, .2); color: rgba(#000, .4); } } } -@mixin light-theme { +@mixin light-theme($docs: false) { $page-bg: #ececec; // image-url('bg-light.jpg'); $text: #222 ; - $heading: black; + $heading: #444; $strong-text: #000; $search: #666; @@ -192,24 +214,14 @@ $docs-nav-selected: $strong-text; $module-nav-selected: $link; - $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, $option-panel-text, $option-panel-border, $option-panel-bg); -} - -html.dark { - @include dark-theme; - ::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); } - ::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; } -} -html.light { - @include light-theme; - ::-webkit-scrollbar-track-piece { - -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; - background: rgba(#ddd, .8); } - ::-webkit-scrollbar-thumb:horizontal { - background: -webkit(linear-gradient(rgba(#000, 0) 40%, rgba(#000, .2))) #fff; - -webkit-box-shadow: rgba(black, 0.2) 0px 0 0 1px inset; } + @include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg); + + @if($docs){ + @include docs-theme(light, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected); + .syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; background: rgba(#ddd, .8); } + .syntaxhighlighter::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#000, 0) 40%, rgba(#000, .2))) #fff; -webkit-box-shadow: rgba(black, 0.2) 0px 0 0 1px inset; } + } } diff --git a/doc-src/content/stylesheets/partials/_typography.scss b/doc-src/content/stylesheets/partials/_typography.scss index 62fb6797..50423ac1 100644 --- a/doc-src/content/stylesheets/partials/_typography.scss +++ b/doc-src/content/stylesheets/partials/_typography.scss @@ -7,13 +7,14 @@ .sans-font { font-family: 'Lucida Grande', Arial, sans-serif; } -.heading-font { font-family: 'museosans-web', 'serif'; } +.heading-font { font-family: 'Museo Sans', 'serif'; } .pictos { font-family: pictos, pictos-web; font-weight: normal; font-style: normal;} .fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;} -#page > article { +#page { line-height: 1.45em; - ol { list-style: outside decimal; padding-left: 2.5em;} + ol { list-style: outside decimal; padding-left: 2.5em; } + ol ol { list-style: outside lower-alpha; padding-left: 2.5em; } ul, ol, dl { margin-bottom: 1.5em;} p { margin-bottom: 1.2em;} #{headings(1,2)}{ @extend .heading-font; line-height: 1.2em; } @@ -23,4 +24,8 @@ h1 { padding-bottom: 6px; margin-bottom: 9px; } ul { list-style: inside disc; } dt { font-weight: bold; } +} +#page aside { + ul { list-style: none; margin-bottom: 1em;} + h2 { line-height: 1.4em; margin-top: 0;} } \ No newline at end of file diff --git a/doc-src/content/stylesheets/screen.scss b/doc-src/content/stylesheets/screen.scss new file mode 100644 index 00000000..a28f7845 --- /dev/null +++ b/doc-src/content/stylesheets/screen.scss @@ -0,0 +1,24 @@ +@import "compass"; +@import "core/extensions"; + +@include global-reset; +@include reset-html5; + +@import "core/base-classes"; + +@import "partials/theme"; +@import "partials/layout"; +@import "partials/typography"; + +@import "partials/nav"; +@import "partials/sidebar"; +@import "partials/main"; +@import "partials/code"; + +@import "syntax/syntax-theme"; + +@import "core/clearing-classes"; + + +html.dark { @include dark-theme(true); } +html.light { @include light-theme(true); } \ No newline at end of file diff --git a/doc-src/layouts/basic.haml b/doc-src/layouts/basic.haml index f453c8c7..774a2710 100644 --- a/doc-src/layouts/basic.haml +++ b/doc-src/layouts/basic.haml @@ -7,18 +7,15 @@ %link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png") %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/modernizr-1.6.min.js" type="text/javascript") + %script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript") + %script(src="/javascripts/jquery.cookie.js" type="text/javascript") + %script(src="/javascripts/site.js" type="text/javascript") %script(src="/javascripts/shCore.js" type="text/javascript" deferred) - %script(src="/javascripts/fixups.js" deferred) - - /[if gte IE 7] + %script(src="/javascripts/fixups.js" type="text/javascript" deferred) + /[if lte IE 8] %link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"} - /[if IE 6] - %link{:charset => "utf-8", :href => "http://universal-ie6-css.googlecode.com/files/ie6.0.3.css", :rel => "stylesheet", :type => "text/css"} - if @item[:content_for_additional_css] %style(type="text/css")= @item[:content_for_additional_css] %body{body_attributes(@item)}= yield \ No newline at end of file diff --git a/doc-src/layouts/homepage.haml b/doc-src/layouts/homepage.haml index c46caa63..b3604488 100644 --- a/doc-src/layouts/homepage.haml +++ b/doc-src/layouts/homepage.haml @@ -1,15 +1,28 @@ -!!! Strict -%html +!!!5 +- # This template is just the stuff until the body tag. +%html.no-js{:dir => "ltr", :lang => "en"} %head - %title - #{@item[:title]} - Compass - %meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" } - - if @item[:meta_description] - %meta{:name => "description", :content => @item[:meta_description]} + %meta{:charset => "utf-8"}/ + %meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"} %link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png") - %link{ :href => "/stylesheets/legacy/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" } - %script{:src => "/javascripts/jquery-1.3.2.min.js", :type => "text/javascript"} + %title + #{@item[:title]} | Compass Documentation + %link{:charset => "utf-8", :href => "/stylesheets/home.css", :rel => "stylesheet", :type => "text/css"} + %script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript") + %script(src="/javascripts/jquery.cookie.js" type="text/javascript") + %script(src="/javascripts/site.js" type="text/javascript") + %script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript") + /[if lte IE 8] + %link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"} + - if @item[:content_for_additional_css] + %style(type="text/css")= @item[:content_for_additional_css] %body{body_attributes(@item)} - = yield - %script(src="/javascripts/fixups.js" deferred) - = render "partials/analytics" + #wrap + = render "partials/main-navigation" + #page + #docs_panel + #theme_pref + %a{:href => "#", :rel => "theme", :title => "switch theme" } Q + = yield + %footer(role="contentinfo")= render "partials/footer" + = render "partials/analytics" \ No newline at end of file diff --git a/doc-src/layouts/main.haml b/doc-src/layouts/main.haml index f86c179e..98ec9061 100644 --- a/doc-src/layouts/main.haml +++ b/doc-src/layouts/main.haml @@ -1,19 +1,6 @@ - render "basic" do #wrap - %header#banner{:role => "banner"} - %nav#main-nav{:role => "navigation"} - %ul - %li.vcard - %a.fn.org.url.uid{:href => "/", :rel => "home"} Compass - %li - %a{:href => "/reference/compass/", :rel => "documentation"} Docs - %li - %a{:href => "/help", :rel=> "help"} Get Help - %li - %a{:href => "/get-involved", :rel=> "get-involved"} Get Involved - - %form#search-docs{:action => "/search/", :method => "GET"} - %input#search{:name => "q", :type => "text", :value => "", :placeholder => "Search the docs"} + = render "partials/main-navigation" #sub-nav %nav#docs-nav{:role => "navigation"} %a{:href => "/reference/blueprint/", :rel => "blueprint"} Blueprint @@ -23,7 +10,7 @@ #page #docs_panel #theme_pref - %a{:href => "#", :rel => "theme", :title => "switch theme" } switch theme + %a{:href => "#", :rel => "theme", :title => "switch theme" } Q #syntax_pref %a{:href => "#", :rel => "scss" } scss %a{:href => "#", :rel => "sass" } sass diff --git a/doc-src/layouts/partials/footer.haml b/doc-src/layouts/partials/footer.haml index 286eab87..4587a737 100644 --- a/doc-src/layouts/partials/footer.haml +++ b/doc-src/layouts/partials/footer.haml @@ -1,18 +1,11 @@ -.legalese - %p - - %span by Christopher M. Eppstein. - .links %ul %li - %a(href="http://compass-style.org/" rel="home") Compass Homepage + + %span by Christopher M. Eppstein. %li Compass is Charityware - %a(href="http://umdf.org/compass") Donate Now! - %li - Compass is Open Source - - %a(href="http://github.com/chriseppstein/compass") Contribute - if @item[:content_for_footer] %hr diff --git a/doc-src/layouts/partials/main-navigation.haml b/doc-src/layouts/partials/main-navigation.haml new file mode 100644 index 00000000..b1363bf1 --- /dev/null +++ b/doc-src/layouts/partials/main-navigation.haml @@ -0,0 +1,14 @@ +%header#banner{:role => "banner"} + %nav#main-nav{:role => "navigation"} + %ul + %li.vcard + %a.fn.org.url.uid{:href => "/", :rel => "home"} Home + %li + %a{:href => "/reference/compass/", :rel => "documentation"} Docs + %li + %a{:href => "/help", :rel=> "help"} Get Help + %li + %a{:href => "/get-involved", :rel=> "get-involved"} Get Involved + + %form#search-docs{:action => "/search/", :method => "GET"} + %input#search{:name => "q", :type => "text", :value => "", :placeholder => "Search the docs"} \ No newline at end of file diff --git a/doc-src/lib/default.rb b/doc-src/lib/default.rb index fbe33e8d..df863c53 100644 --- a/doc-src/lib/default.rb +++ b/doc-src/lib/default.rb @@ -7,7 +7,7 @@ include Nanoc3::Helpers::Rendering include Nanoc3::Helpers::Breadcrumbs def body_class(item) - classes = ["docs"] + classes = [""] classes += item[:classnames] || [] classes << "demo" if item.identifier =~ /^\/examples/ classes.join(" ")