added home page and improved site styles for IE
This commit is contained in:
B Mathis
parent
8f9cce83c3
commit
38b372bbbf
@ -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
|
||||
|
||||
BIN
doc-src/assets/images/compass-logo.png
Normal file
BIN
doc-src/assets/images/compass-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
doc-src/assets/images/sites/addons.heroku.jpg
Normal file
BIN
doc-src/assets/images/sites/addons.heroku.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
doc-src/assets/images/sites/busyconf.jpg
Normal file
BIN
doc-src/assets/images/sites/busyconf.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
doc-src/assets/images/sites/caring.jpg
Normal file
BIN
doc-src/assets/images/sites/caring.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
doc-src/assets/images/sites/cofamilies.jpg
Normal file
BIN
doc-src/assets/images/sites/cofamilies.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
doc-src/assets/images/sites/cornell.jpg
Normal file
BIN
doc-src/assets/images/sites/cornell.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
doc-src/assets/images/sites/dailymile.jpg
Normal file
BIN
doc-src/assets/images/sites/dailymile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
doc-src/assets/images/sites/hubblesite.jpg
Normal file
BIN
doc-src/assets/images/sites/hubblesite.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
doc-src/assets/images/sites/jumpstartlab.jpg
Normal file
BIN
doc-src/assets/images/sites/jumpstartlab.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
doc-src/assets/images/sites/sencha.jpg
Normal file
BIN
doc-src/assets/images/sites/sencha.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@ -8,3 +8,15 @@ $(function(){
|
||||
e.attr("title", "Defaults to: " + e.attr("data-default-value"))
|
||||
});
|
||||
});
|
||||
|
||||
;(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;
|
||||
})();
|
||||
30
doc-src/assets/javascripts/modernizr-1.6.min.js
vendored
Normal file
30
doc-src/assets/javascripts/modernizr-1.6.min.js
vendored
Normal file
@ -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;b<c;b++)L[a[b]]=!!(a[b]in h);return L}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));f.inputtypes=function(a){for(var b=0,c,k=a.length;b<
|
||||
k;b++){h.setAttribute("type",a[b]);if(c=h.type!=="text"){h.value=M;if(/^range$/.test(h.type)&&h.style.WebkitAppearance!==u){l.appendChild(h);c=e.defaultView;c=c.getComputedStyle&&c.getComputedStyle(h,null).WebkitAppearance!=="textfield"&&h.offsetHeight!==0;l.removeChild(h)}else/^(search|tel)$/.test(h.type)||(c=/^(url|email)$/.test(h.type)?h.checkValidity&&h.checkValidity()===false:h.value!=M)}N[a[b]]=!!c}return N}("search tel url email datetime date month week time datetime-local number range color".split(" "))}
|
||||
var f={},l=e.documentElement,E=e.createElement("modernizr"),j=E.style,h=e.createElement("input"),M=":)",O=Object.prototype.toString,q=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),F="Webkit Moz O ms Khtml".split(" "),v={svg:"http://www.w3.org/2000/svg"},d={},N={},L={},P=[],w,Q=function(a){var b=document.createElement("style"),c=e.createElement("div");b.textContent=a+"{#modernizr{height:3px}}";(e.head||e.getElementsByTagName("head")[0]).appendChild(b);c.id="modernizr";l.appendChild(c);a=c.offsetHeight===
|
||||
3;b.parentNode.removeChild(b);c.parentNode.removeChild(c);return!!a},o=function(){var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return function(b,c){c=c||document.createElement(a[b]||"div");b="on"+b;var k=b in c;if(!k){c.setAttribute||(c=document.createElement("div"));if(c.setAttribute&&c.removeAttribute){c.setAttribute(b,"");k=typeof c[b]=="function";if(typeof c[b]!="undefined")c[b]=u;c.removeAttribute(b)}}return k}}(),G={}.hasOwnProperty,R;R=
|
||||
typeof G!=="undefined"&&typeof G.call!=="undefined"?function(a,b){return G.call(a,b)}:function(a,b){return b in a&&typeof a.constructor.prototype[b]==="undefined"};d.flexbox=function(){var a=e.createElement("div"),b=e.createElement("div");(function(k,g,r,x){g+=":";k.style.cssText=(g+q.join(r+";"+g)).slice(0,-g.length)+(x||"")})(a,"display","box","width:42px;padding:0;");b.style.cssText=q.join("box-flex:1;")+"width:10px;";a.appendChild(b);l.appendChild(a);var c=b.offsetWidth===42;a.removeChild(b);
|
||||
l.removeChild(a);return c};d.canvas=function(){var a=e.createElement("canvas");return!!(a.getContext&&a.getContext("2d"))};d.canvastext=function(){return!!(f.canvas&&typeof e.createElement("canvas").getContext("2d").fillText=="function")};d.webgl=function(){var a=e.createElement("canvas");try{if(a.getContext("webgl"))return true}catch(b){}try{if(a.getContext("experimental-webgl"))return true}catch(c){}return false};d.touch=function(){return"ontouchstart"in i||Q("@media ("+q.join("touch-enabled),(")+
|
||||
"modernizr)")};d.geolocation=function(){return!!navigator.geolocation};d.postmessage=function(){return!!i.postMessage};d.websqldatabase=function(){return!!i.openDatabase};d.indexedDB=function(){for(var a=-1,b=F.length;++a<b;){var c=F[a].toLowerCase();if(i[c+"_indexedDB"]||i[c+"IndexedDB"])return true}return false};d.hashchange=function(){return o("hashchange",i)&&(document.documentMode===u||document.documentMode>7)};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="<svg/>";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="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function c(p){for(var m=-1;++m<r;)p.createElement(g[m])}function k(p,m){for(var I=p.length,t=-1,y,J=[];++t<I;){y=p[t];m=y.media||m;J.push(k(y.imports,m));J.push(y.cssText)}return J.join("")}var g="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video".split("|"),r=g.length,x=RegExp("<(/*)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)",
|
||||
"gi"),T=RegExp("\\b(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)\\b(?!.*[;}])","gi"),z=b.createDocumentFragment(),A=b.documentElement,K=A.firstChild,B=b.createElement("style"),C=b.createElement("body");B.media="all";c(b);c(z);a.attachEvent("onbeforeprint",function(){for(var p=-1;++p<r;)for(var m=b.getElementsByTagName(g[p]),I=m.length,t=-1;++t<I;)if(m[t].className.indexOf("iepp_")<0)m[t].className+=" iepp_"+
|
||||
g[p];K.insertBefore(B,K.firstChild);B.styleSheet.cssText=k(b.styleSheets,"all").replace(T,".iepp_$1");z.appendChild(b.body);A.appendChild(C);C.innerHTML=z.firstChild.innerHTML.replace(x,"<$1bdo")});a.attachEvent("onafterprint",function(){C.innerHTML="";A.removeChild(C);K.removeChild(B);A.appendChild(z.firstChild)})}(this,document);f._enableHTML5=true;f._version="1.6";l.className=l.className.replace(/\bno-js\b/,"")+" js";l.className+=" "+P.join(" ");return f}(this,this.document);
|
||||
67
doc-src/content/help/index.haml
Normal file
67
doc-src/content/help/index.haml
Normal file
@ -0,0 +1,67 @@
|
||||
---
|
||||
title: Compass Help
|
||||
crumb: Help
|
||||
classnames:
|
||||
- help
|
||||
layout: main
|
||||
---
|
||||
%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!
|
||||
|
||||
<object width="700" height="438"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11671458&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11671458&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="438"></embed></object><p><a href="http://vimeo.com/11671458">An introduction to Compass</a> from <a href="http://vimeo.com/ltackett">Lorin Tackett</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
|
||||
|
||||
## 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).
|
||||
@ -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!
|
||||
|
||||
<object width="700" height="438"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11671458&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11671458&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="438"></embed></object><p><a href="http://vimeo.com/11671458">An introduction to Compass</a> from <a href="http://vimeo.com/ltackett">Lorin Tackett</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
|
||||
|
||||
## 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).
|
||||
%h2 <strong>Compass</strong> is an open-source <em>CSS Authoring Framework</em>.
|
||||
.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 <a href="http://sass-lang.com/">Sass</a> 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 <em>wildly talented</em> 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
|
||||
17
doc-src/content/stylesheets/home.scss
Normal file
17
doc-src/content/stylesheets/home.scss
Normal file
@ -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";
|
||||
5
doc-src/content/stylesheets/ie.scss
Normal file
5
doc-src/content/stylesheets/ie.scss
Normal file
@ -0,0 +1,5 @@
|
||||
ul#featured_sites li {
|
||||
margin-left: 4px;
|
||||
margin-top: 4px;
|
||||
&:hover{ padding: 6px;
|
||||
img { width: 240px; }}}
|
||||
@ -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; }
|
||||
}
|
||||
|
||||
::-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; }
|
||||
82
doc-src/content/stylesheets/partials/_home.scss
Normal file
82
doc-src/content/stylesheets/partials/_home.scss
Normal file
@ -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;} }
|
||||
@ -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; }
|
||||
#page article { padding-left: $side-nav-width + 45px;}
|
||||
aside { float: left; width: $side-nav-width; }
|
||||
|
||||
body#home #page article { padding-left: 0;}
|
||||
@ -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;
|
||||
|
||||
@ -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; } }
|
||||
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; } }
|
||||
@ -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){
|
||||
@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}; }
|
||||
|
||||
#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}; }
|
||||
|
||||
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);
|
||||
}
|
||||
@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);
|
||||
|
||||
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; }
|
||||
@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; }
|
||||
}
|
||||
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; }
|
||||
}
|
||||
|
||||
@ -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 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; }
|
||||
@ -24,3 +25,7 @@
|
||||
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;}
|
||||
}
|
||||
24
doc-src/content/stylesheets/screen.scss
Normal file
24
doc-src/content/stylesheets/screen.scss
Normal file
@ -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); }
|
||||
@ -7,18 +7,15 @@
|
||||
%link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
|
||||
%title
|
||||
#{@item[:title]} | Compass Documentation
|
||||
<!--[if !IE 6]><!-->
|
||||
%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)
|
||||
<!--<![endif]-->
|
||||
/[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
|
||||
@ -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)}
|
||||
#wrap
|
||||
= render "partials/main-navigation"
|
||||
#page
|
||||
#docs_panel
|
||||
#theme_pref
|
||||
%a{:href => "#", :rel => "theme", :title => "switch theme" } Q
|
||||
= yield
|
||||
%script(src="/javascripts/fixups.js" deferred)
|
||||
%footer(role="contentinfo")= render "partials/footer"
|
||||
= render "partials/analytics"
|
||||
@ -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
|
||||
|
||||
@ -1,18 +1,11 @@
|
||||
.legalese
|
||||
%p
|
||||
<a rel="license" href="/copyright/" id="cc-logo"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/us/88x31.png" /></a>
|
||||
%span by Christopher M. Eppstein.
|
||||
|
||||
.links
|
||||
%ul
|
||||
%li
|
||||
%a(href="http://compass-style.org/" rel="home") Compass Homepage
|
||||
<a rel="license" href="/copyright/" id="cc-logo"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/us/88x31.png" /></a>
|
||||
%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
|
||||
|
||||
14
doc-src/layouts/partials/main-navigation.haml
Normal file
14
doc-src/layouts/partials/main-navigation.haml
Normal file
@ -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"}
|
||||
@ -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(" ")
|
||||
|
||||
Loading…
Reference in New Issue
Block a user