improved docs styling
This commit is contained in:
parent
78bcd4451a
commit
17ab1d3820
doc-src
@ -8,7 +8,7 @@ GIT
|
||||
PATH
|
||||
remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
|
||||
specs:
|
||||
compass (0.11.alpha.0.df908d3)
|
||||
compass (0.11.alpha.0.78bcd44)
|
||||
haml (~> 3.0.23)
|
||||
|
||||
GEM
|
||||
|
BIN
doc-src/assets/fonts/pictos-web.eot
Normal file
BIN
doc-src/assets/fonts/pictos-web.eot
Normal file
Binary file not shown.
114
doc-src/assets/fonts/pictos-web.svg
Normal file
114
doc-src/assets/fonts/pictos-web.svg
Normal file
File diff suppressed because one or more lines are too long
After (image error) Size: 40 KiB |
BIN
doc-src/assets/fonts/pictos-web.ttf
Normal file
BIN
doc-src/assets/fonts/pictos-web.ttf
Normal file
Binary file not shown.
BIN
doc-src/assets/fonts/pictos-web.woff
Normal file
BIN
doc-src/assets/fonts/pictos-web.woff
Normal file
Binary file not shown.
BIN
doc-src/assets/images/compass-logo-small-light.png
Normal file
BIN
doc-src/assets/images/compass-logo-small-light.png
Normal file
Binary file not shown.
After (image error) Size: 2.3 KiB |
@ -6,5 +6,5 @@ $(function(){
|
||||
$('span.arg[data-default-value]').each(function(i,e){
|
||||
e = $(e);
|
||||
e.attr("title", "Defaults to: " + e.attr("data-default-value"))
|
||||
})
|
||||
});
|
||||
});
|
||||
});
|
96
doc-src/assets/javascripts/jquery.cookie.js
Normal file
96
doc-src/assets/javascripts/jquery.cookie.js
Normal file
@ -0,0 +1,96 @@
|
||||
/**
|
||||
* Cookie plugin
|
||||
*
|
||||
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
|
||||
* Dual licensed under the MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Create a cookie with the given name and value and other optional parameters.
|
||||
*
|
||||
* @example $.cookie('the_cookie', 'the_value');
|
||||
* @desc Set the value of a cookie.
|
||||
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
|
||||
* @desc Create a cookie with all available options.
|
||||
* @example $.cookie('the_cookie', 'the_value');
|
||||
* @desc Create a session cookie.
|
||||
* @example $.cookie('the_cookie', null);
|
||||
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
|
||||
* used when the cookie was set.
|
||||
*
|
||||
* @param String name The name of the cookie.
|
||||
* @param String value The value of the cookie.
|
||||
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
|
||||
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
|
||||
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
|
||||
* If set to null or omitted, the cookie will be a session cookie and will not be retained
|
||||
* when the the browser exits.
|
||||
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
|
||||
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
|
||||
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
|
||||
* require a secure protocol (like HTTPS).
|
||||
* @type undefined
|
||||
*
|
||||
* @name $.cookie
|
||||
* @cat Plugins/Cookie
|
||||
* @author Klaus Hartl/klaus.hartl@stilbuero.de
|
||||
*/
|
||||
|
||||
/**
|
||||
* Get the value of a cookie with the given name.
|
||||
*
|
||||
* @example $.cookie('the_cookie');
|
||||
* @desc Get the value of a cookie.
|
||||
*
|
||||
* @param String name The name of the cookie.
|
||||
* @return The value of the cookie.
|
||||
* @type String
|
||||
*
|
||||
* @name $.cookie
|
||||
* @cat Plugins/Cookie
|
||||
* @author Klaus Hartl/klaus.hartl@stilbuero.de
|
||||
*/
|
||||
jQuery.cookie = function(name, value, options) {
|
||||
if (typeof value != 'undefined') { // name and value given, set cookie
|
||||
options = options || {};
|
||||
if (value === null) {
|
||||
value = '';
|
||||
options.expires = -1;
|
||||
}
|
||||
var expires = '';
|
||||
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
|
||||
var date;
|
||||
if (typeof options.expires == 'number') {
|
||||
date = new Date();
|
||||
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
|
||||
} else {
|
||||
date = options.expires;
|
||||
}
|
||||
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
|
||||
}
|
||||
// CAUTION: Needed to parenthesize options.path and options.domain
|
||||
// in the following expressions, otherwise they evaluate to undefined
|
||||
// in the packed version for some reason...
|
||||
var path = options.path ? '; path=' + (options.path) : '';
|
||||
var domain = options.domain ? '; domain=' + (options.domain) : '';
|
||||
var secure = options.secure ? '; secure' : '';
|
||||
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
|
||||
} else { // only name given, get cookie
|
||||
var cookieValue = null;
|
||||
if (document.cookie && document.cookie != '') {
|
||||
var cookies = document.cookie.split(';');
|
||||
for (var i = 0; i < cookies.length; i++) {
|
||||
var cookie = jQuery.trim(cookies[i]);
|
||||
// Does this cookie string begin with the name we want?
|
||||
if (cookie.substring(0, name.length + 1) == (name + '=')) {
|
||||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return cookieValue;
|
||||
}
|
||||
};
|
75
doc-src/assets/javascripts/site.js
Normal file
75
doc-src/assets/javascripts/site.js
Normal file
@ -0,0 +1,75 @@
|
||||
function changeTheme(theme) {
|
||||
el = $('html');
|
||||
|
||||
if (!theme) theme = el.hasClass('dark') ? 'light': 'dark';
|
||||
else if (el.hasClass(theme)) return;
|
||||
|
||||
el.removeClass('light');
|
||||
el.removeClass('dark');
|
||||
el.addClass(theme);
|
||||
setThemePreference(theme);
|
||||
}
|
||||
|
||||
function changeSyntax(syntax) {
|
||||
el = $('body');
|
||||
|
||||
if (!syntax) {
|
||||
syntax = el.hasClass('scss') ? 'sass': 'scss';
|
||||
} else if (el.hasClass(syntax)) {
|
||||
return;
|
||||
}
|
||||
el.removeClass('scss');
|
||||
el.removeClass('sass');
|
||||
el.addClass(syntax);
|
||||
setSyntaxPreference(syntax);
|
||||
}
|
||||
|
||||
function setThemePreference(theme) {
|
||||
$.cookie("compass-theme", null);
|
||||
$.cookie("compass-theme", theme, {
|
||||
expires: 60 * 60 * 24 * 365 * 10,
|
||||
path: '/'
|
||||
});
|
||||
}
|
||||
function getThemePreference(defaultTheme) {
|
||||
theme = $.cookie("compass-theme");
|
||||
if (theme) {
|
||||
changeTheme(theme);
|
||||
} else {
|
||||
changeTheme(defaultTheme);
|
||||
}
|
||||
}
|
||||
function setSyntaxPreference(syntax) {
|
||||
$.cookie("compass-syntax", null);
|
||||
$.cookie("compass-syntax", syntax, {
|
||||
expires: 60 * 60 * 24 * 365 * 10,
|
||||
path: '/'
|
||||
});
|
||||
}
|
||||
function getSyntaxPreference(defaultSyntax) {
|
||||
syntax = $.cookie("compass-syntax");
|
||||
if (syntax){
|
||||
changeSyntax(syntax);
|
||||
} else {
|
||||
changeSyntax(defaultSyntax);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$('document').ready(function(){
|
||||
$('#page').click(function(event){
|
||||
var target = $(event.target);
|
||||
if (target.parent().is('#syntax_pref')) {
|
||||
changeSyntax(target.attr("rel"));
|
||||
event.preventDefault();
|
||||
} else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) {
|
||||
changeTheme();
|
||||
event.preventDefault();
|
||||
} else if (target.attr("rel") == "view source") {
|
||||
$(target.attr("href")).toggle();
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
getThemePreference('dark');
|
||||
getSyntaxPreference('scss');
|
||||
})
|
@ -11,17 +11,13 @@ classnames:
|
||||
meta_description: Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes.
|
||||
layout: core
|
||||
---
|
||||
%h1 Compass CSS3 Module
|
||||
%p
|
||||
The CSS3 module provides cross-browser mixins for CSS properties
|
||||
introduced in CSS3, for example
|
||||
<a href="/reference/compass/css3/border_radius/"><code>border-radius</code></a>
|
||||
and <a href="/reference/compass/css3/text-shadow/"><code>text-shadow</code></a>.
|
||||
%p
|
||||
What rendering engines you support for the experimental css properties is governed by
|
||||
the configurable variables defined in <a href="/reference/compass/support/">the browser
|
||||
support module</a>.
|
||||
%h3 Importing the Entire CSS3 Library
|
||||
%p
|
||||
To import the CSS3 Module add the following to your stylesheets:<br>
|
||||
<code>@import "compass/css3"</code><br>
|
||||
- render 'reference' do
|
||||
%p
|
||||
The CSS3 module provides cross-browser mixins for CSS properties
|
||||
introduced in CSS3, for example
|
||||
<a href="/reference/compass/css3/border_radius/"><code>border-radius</code></a>
|
||||
and <a href="/reference/compass/css3/text-shadow/"><code>text-shadow</code></a>.
|
||||
%p
|
||||
What rendering engines you support for the experimental css properties is governed by
|
||||
the configurable variables defined in <a href="/reference/compass/support/">the browser
|
||||
support module</a>.
|
@ -8,4 +8,7 @@
|
||||
+border-bottom-right-radius(0)
|
||||
|
||||
.hide
|
||||
display: none
|
||||
display: none
|
||||
|
||||
#theme_pref
|
||||
@extend .hide
|
45
doc-src/content/stylesheets/partials/_code.scss
Normal file
45
doc-src/content/stylesheets/partials/_code.scss
Normal file
@ -0,0 +1,45 @@
|
||||
body.sass .mixin-source .scss, body.scss .mixin-source .sass { @extend .hide;}
|
||||
.mixin-source { display: none; }
|
||||
|
||||
.syntaxhighlighter { padding: 5px 0; @include border-radius;
|
||||
.toolbar { position: absolute; right: 0; }
|
||||
.code-block { background: none; @include box-shadow(none)}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1.5em 0;
|
||||
.code-block { padding: .6em; }
|
||||
}
|
||||
|
||||
.code-block { @extend .round-corners-4; @extend .fixed-font;
|
||||
display: inline-block;
|
||||
font-size: .95em;
|
||||
padding: 0 .4em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.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;
|
||||
position: relative;
|
||||
a { text-decoration: none;}
|
||||
}
|
||||
h3.mixin { @include round-top-corners;}
|
||||
.arg {
|
||||
display: inline-block;
|
||||
padding: 0 2px;
|
||||
&[data-default-value] {
|
||||
font-style: italic;
|
||||
&:before{ content: "[" ; }
|
||||
&:after{ content: "]" ; } }
|
||||
}
|
||||
|
||||
a[rel="view source"]{ float: right; padding: 9px 15px; margin-top: 20px; position: relative; z-index: 2; font-size: .8em; @include hover-link;}
|
||||
h2 + a[rel="view source"]{ margin-top: 12px;}
|
@ -9,7 +9,9 @@ body {
|
||||
@extend .sans-font;
|
||||
line-height: 1.45em;
|
||||
}
|
||||
#wrap { @extend .group; padding: 0 20px 20px;}
|
||||
#wrap { @extend .group; padding: 0 20px 20px; }
|
||||
#page { @extend .group; padding-bottom: 30px;}
|
||||
footer { @extend .group; clear: both; padding-top: 20px;}
|
||||
header { padding: 22px 0 0; position: relative; }
|
||||
#page > article { padding-left: $side-nav-width + 40px; }
|
||||
#page > article { padding-left: $side-nav-width + 45px; }
|
||||
aside { float: left; width: $side-nav-width; }
|
@ -1,10 +1,42 @@
|
||||
#page {
|
||||
position: relative;
|
||||
padding-top: 25px;
|
||||
& > article { padding-top: 14px; font-size: 15px;
|
||||
h1, h2 { padding-bottom: 6px; margin-bottom: 9px; }}}
|
||||
padding-top: 40px;
|
||||
& > article { padding-top: 10px; font-size: 15px; } }
|
||||
|
||||
#version { @include round-bottom-corners;
|
||||
font-size: .7em;
|
||||
#docs_panel {
|
||||
position: absolute; top: 0; right: 0;
|
||||
padding: 2px 8px 4px; }
|
||||
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;}
|
||||
#syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} }
|
||||
}
|
||||
|
||||
#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; } } }
|
||||
}
|
||||
h2 a.help {
|
||||
text-indent: -9999px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
&:before {
|
||||
@extend .pictos;
|
||||
content: "?";
|
||||
text-indent: 0;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
color: #202020;
|
||||
font-size: .9em;
|
||||
text-shadow: #444 0 1px 0;
|
||||
}
|
||||
}
|
@ -3,7 +3,7 @@ nav a { @include hover-link; }
|
||||
header { @extend .group;
|
||||
font-size: 1.25em; font-family: "Museo Sans"; border-width: 4px;}
|
||||
#main-nav {
|
||||
width: 76%;
|
||||
width: 79%;
|
||||
display: inline-block;
|
||||
padding-bottom: 10px;
|
||||
ul {
|
||||
@ -24,13 +24,12 @@ header { @extend .group;
|
||||
padding: 2px 10px;
|
||||
display: inline-block; }}
|
||||
|
||||
#docs-nav { padding-right: 15px; }
|
||||
#docs-nav { padding-right: 20px; }
|
||||
|
||||
#module-nav {
|
||||
display: inline-block;
|
||||
padding-left: 8px;
|
||||
ul {
|
||||
@include horizontal-list(10px);}}
|
||||
padding-left: 10px;
|
||||
ul { @include horizontal-list(10px); } }
|
||||
|
||||
#search-docs {
|
||||
width: 20%; position: absolute; top: 29px; right: 0;
|
||||
|
@ -1,7 +1,7 @@
|
||||
aside {
|
||||
padding-top: 20px;
|
||||
padding-top: 16px;
|
||||
text-align: right;
|
||||
padding-right: 17px;
|
||||
padding-right: 22px;
|
||||
h2 {
|
||||
text-align: left;
|
||||
font-size: 1.3em;
|
||||
|
@ -1,7 +1,7 @@
|
||||
@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border){
|
||||
body { background: $page-bg; color: $text;
|
||||
@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){
|
||||
body {background: $page-bg; color: $text;
|
||||
a { color: $link; } }
|
||||
#wrap { @extend .horizontal-rule-#{$theme}; }
|
||||
#page { @extend .horizontal-rule-#{$theme}; }
|
||||
header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
|
||||
nav a { color: $nav-link; }
|
||||
|
||||
@ -18,51 +18,63 @@
|
||||
|
||||
#search-docs {
|
||||
input::-webkit-input-placeholder { color: $search; }
|
||||
input { @extend .inset-panel-#{$theme}; background-color: rgba($search-bg, .2); color: $search;}}
|
||||
input { @extend .inset-panel-#{$theme}; color: $search;}}
|
||||
|
||||
aside { @extend .vertical-rule-#{$theme};
|
||||
h2 { @extend .horizontal-rule-#{$theme};
|
||||
a { color: $text; } } }
|
||||
a { color: $strong-text; } } }
|
||||
|
||||
#version { background: rgba($version-text, .03); color: rgba($version-text, .4); border: 1px solid rgba($version-border, .3); border-top: 0;
|
||||
a { @include hover-link; color: rgba($version-text, .7); } }
|
||||
#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};}
|
||||
|
||||
#page > article {
|
||||
#{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);}
|
||||
}
|
||||
}
|
||||
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 background-image(linear-gradient(rgba(#000, .5), rgba(#000, 0)));
|
||||
@include single-box-shadow(rgba(#fff, .1), 0, 1px, 0);
|
||||
background-color: rgba(#000, .2); }
|
||||
@include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
|
||||
background-color: rgba(#000, .3); }
|
||||
|
||||
.horizontal-rule-dark {
|
||||
@include single-box-shadow(rgba(#fff, .07), 0, 1px, 0);
|
||||
@include box-shadow(rgba(#fff, .07) 0 1px 0);
|
||||
border-bottom: 1px solid #121212; }
|
||||
|
||||
.vertical-rule-dark {
|
||||
@include single-box-shadow(rgba(#fff, .07), 1px, 0, 0);
|
||||
@include box-shadow(rgba(#fff, .07) 1px 0 0);
|
||||
border-right: 1px solid #121212; }
|
||||
|
||||
.code-block-dark { @extend .round-corners-4; @extend .inset-panel-dark;
|
||||
display: inline-block;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px; }
|
||||
.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
|
||||
|
||||
@mixin dark-theme {
|
||||
$page-bg: #343434;
|
||||
|
||||
$text: #b6b6b6;
|
||||
$text: #c6c6c6;
|
||||
$heading: white;
|
||||
$strong-text: #dbdbdb;
|
||||
|
||||
$search: #6e6e6e;
|
||||
$search-bg: black;
|
||||
|
||||
|
||||
$link: #dadbb1;
|
||||
$nav-link: #bfbfbf;
|
||||
$code: #85AFC9;
|
||||
|
||||
$main-nav: $strong-text;
|
||||
$main-nav-selected: #fb292d;
|
||||
@ -72,7 +84,52 @@
|
||||
$version-text: white;
|
||||
$version-border: black;
|
||||
|
||||
@include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border);
|
||||
@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);
|
||||
}
|
||||
|
||||
html.dark { @include dark-theme; }
|
||||
// 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); }
|
||||
|
||||
.horizontal-rule-light {
|
||||
@include single-box-shadow(rgba(#fff, 1), 0, 1px, 0);
|
||||
border-bottom: 1px solid #bbb; }
|
||||
|
||||
.vertical-rule-light {
|
||||
@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);}
|
||||
|
||||
@mixin light-theme {
|
||||
$page-bg: #eaeaea;
|
||||
|
||||
$text: #222 ;
|
||||
$heading: black;
|
||||
$strong-text: #000;
|
||||
|
||||
$search: #666;
|
||||
$search-bg: white;
|
||||
|
||||
$link: darken(adjust-hue(#dadbb1, 160), 40);
|
||||
$nav-link: #444;
|
||||
|
||||
$main-nav: $strong-text;
|
||||
$main-nav-selected: darken(#fb292d, 10);
|
||||
$docs-nav-selected: $strong-text;
|
||||
$module-nav-selected: $link;
|
||||
|
||||
$version-text: black;
|
||||
$version-border: white;
|
||||
$code: #222;
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
html.dark { @include dark-theme; }
|
||||
html.light { @include light-theme; }
|
@ -1,14 +1,21 @@
|
||||
@font-face { font-family: 'pictos-web'; src: url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.eot'); src: local('☺'), url('http://s3.imathis.com/shared-assets/pictos-font/http://pictos-web.woff') format('woff'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.ttf') format('truetype'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal;}
|
||||
//@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');
|
||||
|
||||
.sans-font { font-family: 'Lucida Grande', Arial, sans-serif; }
|
||||
.heading-font { font-family: 'Museo Sans', 'serif'; }
|
||||
.pictos { font-family: pictos-web; }
|
||||
.pictos { font-family: pictos-web; font-weight: normal; font-style: normal;}
|
||||
.fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;}
|
||||
|
||||
#page > article {
|
||||
line-height: 1.45em;
|
||||
ol { list-style: outside decimal; padding-left: 2.5em;}
|
||||
ul, ol { margin-bottom: 1.5em;}
|
||||
ul, ol, dl { margin-bottom: 1.5em;}
|
||||
p { margin-bottom: 1.2em;}
|
||||
#{headings()}{ @extend .heading-font; line-height: 1.2em; }
|
||||
h1 { font-size: 30px; }
|
||||
h2 { font-size: 20px; }
|
||||
h2 { font-size: 22px; margin: 15px 0 8px; padding-bottom: 6px;}
|
||||
h3 { font-size: 18px; }
|
||||
h1 { padding-bottom: 6px; margin-bottom: 9px; }
|
||||
ul { list-style: inside disc; }
|
||||
dt { font-weight: bold; }
|
||||
}
|
@ -11,5 +11,6 @@
|
||||
@import partials/nav
|
||||
@import partials/sidebar
|
||||
@import partials/main
|
||||
@import partials/code
|
||||
|
||||
@import core/clearing-classes
|
@ -1,6 +1,6 @@
|
||||
!!!5
|
||||
- # This template is just the stuff until the body tag.
|
||||
%html.dark.no-js{:dir => "ltr", :lang => "en"}
|
||||
%html.no-js{:dir => "ltr", :lang => "en"}
|
||||
%head
|
||||
%meta{:charset => "utf-8"}/
|
||||
%meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
|
||||
@ -8,6 +8,10 @@
|
||||
%title
|
||||
#{@item[:title]} | Compass Documentation
|
||||
<!--[if !IE 6]><!-->
|
||||
%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"}
|
||||
|
@ -1,5 +1,4 @@
|
||||
- render 'main' do
|
||||
%aside(role="sidebar")
|
||||
%nav#local-nav
|
||||
%ul=item_tree(reference_item(:stylesheet => "blueprint.scss"), :depth => 2, :omit_self => false, :heading_level => 2)
|
||||
%article= yield
|
||||
%aside(role="sidebar")= render 'partials/sidebar', :default_stylesheet => "_blueprint.scss"
|
||||
%article= yield
|
||||
|
@ -19,16 +19,20 @@
|
||||
%a{:href => "/reference/blueprint/", :rel => "blueprint"} Blueprint
|
||||
%a{:href => "/reference/compass/", :rel => "core"} Core
|
||||
- if @item[:content_for_module_nav]
|
||||
%nav#module-nav= @item[:content_for_module_nav]
|
||||
%nav#module-nav= @item[:content_for_module_nav]
|
||||
#page
|
||||
#version
|
||||
Version:
|
||||
%a.number(href="/CHANGELOG/")= compass_version
|
||||
#docs_panel
|
||||
#theme_pref
|
||||
%a{:href => "#", :rel => "theme", :title => "switch theme" } switch theme
|
||||
#syntax_pref
|
||||
%a{:href => "#", :rel => "scss" } scss
|
||||
%a{:href => "#", :rel => "sass" } sass
|
||||
#version
|
||||
Version:
|
||||
%a.number(href="/CHANGELOG/")= compass_version
|
||||
= yield
|
||||
-#comments= render "partials/disqus_comments"
|
||||
%footer(role="contentinfo")= render "partials/footer"
|
||||
%script(src="/javascripts/jquery-1.3.2.min.js")
|
||||
%script(src="/javascripts/fixups.js" deferred)
|
||||
%footer(role="contentinfo")= render "partials/footer"
|
||||
%script{:src => "/javascripts/shCore.js", :type => "text/javascript"}
|
||||
%script{:src => "/javascripts/shBrushCss.js", :type => "text/javascript"}
|
||||
%script{:src => "/javascripts/shBrushSass.js", :type => "text/javascript"}
|
||||
|
@ -1,14 +1,8 @@
|
||||
.legalese
|
||||
%p
|
||||
:plain
|
||||
<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>
|
||||
%br
|
||||
by Christopher M. Eppstein.
|
||||
- if @item[:content_for_footer]
|
||||
%hr
|
||||
= @item[:content_for_footer]
|
||||
<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
|
||||
@ -19,4 +13,7 @@
|
||||
%li
|
||||
Compass is Open Source -
|
||||
%a(href="http://github.com/chriseppstein/compass") Contribute
|
||||
|
||||
|
||||
- if @item[:content_for_footer]
|
||||
%hr
|
||||
= @item[:content_for_footer]
|
@ -2,10 +2,6 @@
|
||||
- const_id = constant_def.name.gsub(/_/,'-')
|
||||
%h3.constant{:id=>"const-#{const_id}"}
|
||||
%a.permalink{:href => "#const-#{const_id}"}= "$"+constant_def.name
|
||||
%dl.constant-details.source-documentation
|
||||
%dt Value
|
||||
%dd
|
||||
%code= constant_def.expr.to_sass(:format => :html)
|
||||
- if constant_def.comment && constant_def.comment.strip.size > 0
|
||||
%dt Description
|
||||
%dd= format_doc constant_def.comment
|
||||
%code= constant_def.expr.to_sass(:format => :html)
|
||||
- if constant_def.comment && constant_def.comment.strip.size > 0
|
||||
%p= format_doc constant_def.comment
|
||||
|
@ -2,18 +2,12 @@
|
||||
%h2 Mixins
|
||||
|
||||
- mixin_defs.each do |mixin|
|
||||
%span.view-source
|
||||
View Source:
|
||||
%a.view-source{:href=>"#mixin-#{mixin.name}-sass"} Sass
|
||||
\|
|
||||
%a.view-source{:href=>"#mixin-#{mixin.name}-scss"} SCSS
|
||||
%a{:href=>"#mixin-#{mixin.name}-source", :rel => "view source"} view source
|
||||
%h3.mixin{:id=>"mixin-#{mixin.name}"}
|
||||
%a.permalink{:href => "#mixin-#{mixin.name}"}= mixin_signature(mixin)
|
||||
.mixin-source{:id=>"mixin-#{mixin.name}-source"}
|
||||
.elided-code{:id=>"mixin-#{mixin.name}-sass"}
|
||||
%pre.source-code.sass= mixin.to_sass
|
||||
.elided-code{:id=>"mixin-#{mixin.name}-scss"}
|
||||
%pre.source-code.scss= mixin.to_scss
|
||||
%pre.source-code.sass= mixin.to_sass
|
||||
%pre.source-code.scss= mixin.to_scss
|
||||
|
||||
.source-documentation
|
||||
= format_doc(mixin.comment)
|
||||
|
Loading…
Reference in New Issue
Block a user