improved styling for docs
This commit is contained in:
B Mathis
parent
dabd4f6f9d
commit
37a6555fd3
1
Gemfile
1
Gemfile
@ -9,3 +9,4 @@ gem "css_parser"
|
||||
gem "haml"
|
||||
gem "rcov"
|
||||
gem "rubyzip"
|
||||
gem "livereload"
|
||||
19
doc-src/.livereload
Normal file
19
doc-src/.livereload
Normal file
@ -0,0 +1,19 @@
|
||||
# Lines starting with pound sign (#) are ignored.
|
||||
|
||||
# additional extensions to monitor
|
||||
#config.exts << 'haml'
|
||||
|
||||
# exclude files with NAMES matching this mask
|
||||
#config.exclusions << '~*'
|
||||
# exclude files with PATHS matching this mask (if the mask contains a slash)
|
||||
#config.exclusions << '/excluded_dir/*'
|
||||
# exclude files with PATHS matching this REGEXP
|
||||
#config.exclusions << /somedir.*(ab){2,4}.(css|js)$/
|
||||
|
||||
# reload the whole page when .js changes
|
||||
#config.apply_js_live = false
|
||||
# reload the whole page when .css changes
|
||||
#config.apply_css_live = false
|
||||
|
||||
# wait 100ms for more changes before reloading a page
|
||||
#config.grace_period = 0.1
|
||||
@ -8,8 +8,8 @@ GIT
|
||||
PATH
|
||||
remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
|
||||
specs:
|
||||
compass (0.11.alpha.0.c9a684c)
|
||||
haml (>= 3.0.4)
|
||||
compass (0.11.alpha.0.dabd4f6)
|
||||
haml (~> 3.0.23)
|
||||
|
||||
GEM
|
||||
remote: http://rubygems.org/
|
||||
|
||||
BIN
doc-src/assets/images/compass-logo-small.png
Normal file
BIN
doc-src/assets/images/compass-logo-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
19
doc-src/content/.livereload
Normal file
19
doc-src/content/.livereload
Normal file
@ -0,0 +1,19 @@
|
||||
# Lines starting with pound sign (#) are ignored.
|
||||
|
||||
# additional extensions to monitor
|
||||
#config.exts << 'haml'
|
||||
|
||||
# exclude files with NAMES matching this mask
|
||||
#config.exclusions << '~*'
|
||||
# exclude files with PATHS matching this mask (if the mask contains a slash)
|
||||
#config.exclusions << '/excluded_dir/*'
|
||||
# exclude files with PATHS matching this REGEXP
|
||||
#config.exclusions << /somedir.*(ab){2,4}.(css|js)$/
|
||||
|
||||
# reload the whole page when .js changes
|
||||
#config.apply_js_live = false
|
||||
# reload the whole page when .css changes
|
||||
#config.apply_css_live = false
|
||||
|
||||
# wait 100ms for more changes before reloading a page
|
||||
#config.grace_period = 0.1
|
||||
67
doc-src/content/stylesheets/core/_base-classes.sass
Normal file
67
doc-src/content/stylesheets/core/_base-classes.sass
Normal file
@ -0,0 +1,67 @@
|
||||
$default-rounded-corner: 4
|
||||
|
||||
.group
|
||||
+pie-clearfix
|
||||
|
||||
.truncate
|
||||
+ellipsis
|
||||
|
||||
.border-box
|
||||
+box-sizing(border-box)
|
||||
|
||||
.round-corners-4
|
||||
+border-radius(4px)
|
||||
|
||||
=round-corners($num: $default-rounded-corner)
|
||||
@extend .round-corners-#{$num}
|
||||
|
||||
=round-top-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
=round-bottom-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-top-left-corner
|
||||
=round-left-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
=round-right-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-left-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
|
||||
=round-top-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
=round-top-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-left-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
=round-bottom-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-top-left-corner
|
||||
=round-bottom-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-top-left-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
|
||||
=square-top-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-left-corner
|
||||
=square-top-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
=square-bottom-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-bottom-left-corner
|
||||
=square-bottom-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-bottom-right-corner
|
||||
11
doc-src/content/stylesheets/core/_clearing-classes.sass
Normal file
11
doc-src/content/stylesheets/core/_clearing-classes.sass
Normal file
@ -0,0 +1,11 @@
|
||||
.clear-top-left-corner
|
||||
+border-top-left-radius(0)
|
||||
.clear-top-right-corner
|
||||
+border-top-right-radius(0)
|
||||
.clear-bottom-left-corner
|
||||
+border-bottom-left-radius(0)
|
||||
.clear-bottom-right-corner
|
||||
+border-bottom-right-radius(0)
|
||||
|
||||
.hide
|
||||
display: none
|
||||
10
doc-src/content/stylesheets/core/_extensions.scss
Normal file
10
doc-src/content/stylesheets/core/_extensions.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@mixin reset($reset-type: false){
|
||||
@if($reset-type){
|
||||
@if($reset-type == global){
|
||||
@include global-reset;
|
||||
}
|
||||
@if($reset-type == html5){
|
||||
@include reset-html5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
/* Welcome to Susy. Use this file to write IE specific override styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <!--[if IE]>
|
||||
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
* <![endif]-->
|
||||
|
||||
@import base
|
||||
15
doc-src/content/stylesheets/partials/_layout.scss
Normal file
15
doc-src/content/stylesheets/partials/_layout.scss
Normal file
@ -0,0 +1,15 @@
|
||||
$min-width: 530px;
|
||||
$side-nav-width: 150px;
|
||||
$main-min-width: $min-width - $side-nav-width;
|
||||
|
||||
body {
|
||||
max-width: 1500px;
|
||||
min-width: $min-width;
|
||||
margin: 0 auto;
|
||||
@extend .sans-font;
|
||||
line-height: 1.45em;
|
||||
}
|
||||
#wrap { @extend .group; padding: 0 20px;}
|
||||
header { padding: 22px 0 0; position: relative; }
|
||||
#page > article { padding-left: $side-nav-width + 40px; }
|
||||
aside { float: left; width: $side-nav-width; }
|
||||
10
doc-src/content/stylesheets/partials/_main.scss
Normal file
10
doc-src/content/stylesheets/partials/_main.scss
Normal file
@ -0,0 +1,10 @@
|
||||
#page {
|
||||
position: relative;
|
||||
padding-top: 25px;
|
||||
& > article { padding-top: 14px; font-size: 15px;
|
||||
h1, h2 { padding-bottom: 6px; margin-bottom: 9px; }}}
|
||||
|
||||
#version { @include round-bottom-corners;
|
||||
font-size: .7em;
|
||||
position: absolute; top: 0; right: 0;
|
||||
padding: 2px 8px 4px; }
|
||||
53
doc-src/content/stylesheets/partials/_nav.scss
Normal file
53
doc-src/content/stylesheets/partials/_nav.scss
Normal file
@ -0,0 +1,53 @@
|
||||
nav a { @include hover-link; }
|
||||
|
||||
header { @extend .group;
|
||||
font-size: 1.25em; font-family: "Museo Sans"; border-width: 4px;}
|
||||
#main-nav {
|
||||
width: 76%;
|
||||
display: inline-block;
|
||||
padding-bottom: 10px;
|
||||
ul {
|
||||
@include horizontal-list(10px);
|
||||
line-height: 2em; }
|
||||
a[rel=home] {
|
||||
@include replace-text-with-dimensions("compass-logo-small.png");
|
||||
display: inline-block; }}
|
||||
|
||||
#subnav {
|
||||
@extend .group;
|
||||
padding: 8px 0; }
|
||||
|
||||
#docs-nav, #module-nav {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
a {
|
||||
padding: 2px 10px;
|
||||
display: inline-block; }}
|
||||
|
||||
#docs-nav {
|
||||
padding-right: 15px;
|
||||
a:last-child {
|
||||
@extend .round-corners-4; }}
|
||||
|
||||
#module-nav {
|
||||
display: inline-block;
|
||||
padding-left: 8px;
|
||||
ul {
|
||||
@include horizontal-list(10px);}}
|
||||
|
||||
#search-docs {
|
||||
display: inline-block;
|
||||
width: 23%;
|
||||
vertical-align: top;
|
||||
float: right;
|
||||
position: relative;
|
||||
input {
|
||||
@extend .sans-font;
|
||||
@extend .round-corners-4;
|
||||
position: relative; top: 6px;
|
||||
margin: 0; padding: 5px 8px;
|
||||
font-size: .8em;
|
||||
float: right;
|
||||
width: 100%; max-width: 200px; min-width: 80px;
|
||||
@include box-sizing(border-box);
|
||||
border: 0; }}
|
||||
18
doc-src/content/stylesheets/partials/_sidebar.scss
Normal file
18
doc-src/content/stylesheets/partials/_sidebar.scss
Normal file
@ -0,0 +1,18 @@
|
||||
aside {
|
||||
padding-top: 20px;
|
||||
text-align: right;
|
||||
padding-right: 17px;
|
||||
h2 {
|
||||
text-align: left;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.45em;
|
||||
padding-bottom: .2em;
|
||||
margin-bottom: .4em;
|
||||
}
|
||||
a {
|
||||
font-size: .85em;
|
||||
}
|
||||
.deprecated {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
60
doc-src/content/stylesheets/partials/_theme.scss
Normal file
60
doc-src/content/stylesheets/partials/_theme.scss
Normal file
@ -0,0 +1,60 @@
|
||||
$page-bg: #343434;
|
||||
$link-color: #dadbb1;
|
||||
$text-color: #b6b6b6;
|
||||
$light-text: #dbdbdb;
|
||||
$nav-link-color: #bfbfbf;
|
||||
$current-main-nav: #fb292d;
|
||||
|
||||
.dark-inset-panel {
|
||||
@include background-image(linear-gradient(rgba(#000, .5), rgba(#000, 0)));
|
||||
@include single-box-shadow(rgba(#fff, .1), 0, 1px, 0);
|
||||
background-color: rgba(#000, .2); }
|
||||
|
||||
.dark-horizontal-rule {
|
||||
@include single-box-shadow(rgba(#fff, .07), 0, 1px, 0);
|
||||
border-bottom: 1px solid #121212; }
|
||||
|
||||
.dark-vertical-rule {
|
||||
@include single-box-shadow(rgba(#fff, .07), 1px, 0, 0);
|
||||
border-right: 1px solid #121212; }
|
||||
|
||||
.dark-code-block { @extend .round-corners-4; @extend .inset-panel;
|
||||
display: inline-block;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px; }
|
||||
|
||||
|
||||
// Dark Theme
|
||||
|
||||
body { background: $page-bg; color: $text-color;
|
||||
a { color: $link-color; }}
|
||||
|
||||
header{ @extend .dark-horizontal-rule; }
|
||||
|
||||
#main-nav {
|
||||
a { color: $light-text; }
|
||||
a[rel=documentation] { color: $current-main-nav; }}
|
||||
|
||||
#search-docs {
|
||||
input::-webkit-input-placeholder { color: #6e6e6e; }
|
||||
input { @extend .dark-inset-panel; background-color: rgba(#000, .2); color: #6e6e6e;}}
|
||||
|
||||
nav a { color: $nav-link-color; }
|
||||
#subnav { @extend .dark-horizontal-rule; }
|
||||
#version {
|
||||
background: rgba(#fff, .03);
|
||||
color: rgba(#fff, .4);
|
||||
a { @include hover-link; color: rgba(#fff, .7);}
|
||||
border: 1px solid rgba(#000, .3); border-top: 0; }
|
||||
|
||||
aside { @extend .dark-vertical-rule;
|
||||
h2 { @extend .dark-horizontal-rule;
|
||||
a { color: $light-text; }}}
|
||||
#page > article {
|
||||
h1, h2 { @extend .dark-horizontal-rule; }
|
||||
#{headings()}{ color: #fff; }}
|
||||
|
||||
#docs-nav { @extend .dark-vertical-rule;
|
||||
a:last-child { @extend .dark-inset-panel; color: $light-text; }}
|
||||
|
||||
#module-nav .selected a { color: $link-color; }
|
||||
14
doc-src/content/stylesheets/partials/_typography.scss
Normal file
14
doc-src/content/stylesheets/partials/_typography.scss
Normal file
@ -0,0 +1,14 @@
|
||||
@font-face { font-family: 'pictos-web'; src: url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.eot'); src: local('☺'), url('http://s3.imathis.com/shared-assets/pictos-font/http://pictos-web.woff') format('woff'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.ttf') format('truetype'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal;}
|
||||
|
||||
.sans-font { font-family: 'Lucida Grande', Arial, sans-serif; }
|
||||
.heading-font { font-family: 'Museo Sans', 'serif'; }
|
||||
.pictos { font-family: pictos-web; }
|
||||
|
||||
#page > article {
|
||||
ol { list-style: outside decimal; padding-left: 2.5em;}
|
||||
ul, ol { margin-bottom: 1.5em;}
|
||||
p { margin-bottom: 1.2em;}
|
||||
#{headings()}{ @extend .heading-font; line-height: 1.2em; }
|
||||
h1 { font-size: 30px; }
|
||||
h2 { font-size: 20px; }
|
||||
}
|
||||
@ -1,295 +1,15 @@
|
||||
/* Welcome to Susy. Use this file to define screen styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
@charset "UTF-8"
|
||||
@import defaults
|
||||
@import slideshow
|
||||
@import shared
|
||||
@import compass/layout
|
||||
@import compass/utilities
|
||||
@import compass
|
||||
@import core/extensions
|
||||
+reset(global)
|
||||
+reset(html5)
|
||||
@import core/base-classes
|
||||
|
||||
/* @group STRUCTURE
|
||||
@import partials/theme
|
||||
@import partials/layout
|
||||
@import partials/typography
|
||||
|
||||
+susy
|
||||
@import partials/nav
|
||||
@import partials/sidebar
|
||||
@import partials/main
|
||||
|
||||
header[role="banner"] h1, #compass-nav
|
||||
+columns(6)
|
||||
|
||||
header[role="banner"]
|
||||
background: #f9f9f9
|
||||
div
|
||||
+container
|
||||
h1
|
||||
+alpha
|
||||
+adjust-font-size-to(18px)
|
||||
text-transform: uppercase
|
||||
a
|
||||
display: block
|
||||
+padding-leader(2, 18px)
|
||||
+padding-trailer(1.5, 18px)
|
||||
|
||||
header[role="banner"],
|
||||
#page,
|
||||
#docs-nav,
|
||||
#module-nav,
|
||||
footer[role="contentinfo"]
|
||||
+pad(0.5,0.5)
|
||||
+box-sizing(border-box)
|
||||
+min-width(784px / $base-font-size * 1em)
|
||||
|
||||
#compass-nav
|
||||
+omega
|
||||
text-align: right
|
||||
ul
|
||||
+inline-block-list
|
||||
+padding-leader(2)
|
||||
+trailer(1.5)
|
||||
a
|
||||
+inline-block
|
||||
+adjust-font-size-to(14px)
|
||||
padding: 0 1em
|
||||
+border-top-left-radius(0.5em)
|
||||
+border-bottom-right-radius(0.5em)
|
||||
|
||||
=active-compass-nav($id, $url)
|
||||
#{append-selector(body, $id)}
|
||||
#compass-nav a[href="#{$url}"]
|
||||
background: #cccccc
|
||||
cursor: default
|
||||
|
||||
#docs-nav
|
||||
+pie-clearfix
|
||||
+leading-border(1px, 0.25)
|
||||
+trailing-border(1px, 0.25)
|
||||
position: relative
|
||||
// CE: the 1.5 here is because the padding is included
|
||||
// in the height due to having box-sizing applied.
|
||||
height: $base-rhythm-unit * 1.5
|
||||
border-color: #cccccc
|
||||
background-color: #eeeeee
|
||||
.container
|
||||
+container
|
||||
+pie-clearfix
|
||||
overflow: visible
|
||||
ul
|
||||
+horizontal-list
|
||||
overflow: visible
|
||||
position: relative
|
||||
li
|
||||
top: -$base-rhythm-unit * 0.5
|
||||
margin-bottom: -$base-rhythm-unit * 0.5
|
||||
position: relative
|
||||
a
|
||||
&:link, &:visited
|
||||
display: block
|
||||
padding: 0 $side-gutter-width
|
||||
border: 1px solid #eeeeee
|
||||
+leading-border(1px, 0.5)
|
||||
+trailing-border(1px, 0.25)
|
||||
border-bottom: 0
|
||||
+border-top-radius(0.5em)
|
||||
background: #dddddd
|
||||
&:hover, &:focus, &:active
|
||||
background-color: #eeeeee
|
||||
border-color: #dddddd
|
||||
|
||||
=active-docs($type, $url)
|
||||
body#{$type} #docs-nav a[href="#{$url}"]
|
||||
&:link, &:visited
|
||||
+trailing-border(1px, 0.25)
|
||||
cursor: default
|
||||
background: white
|
||||
border-color: #cccccc
|
||||
border-bottom-color: white
|
||||
|
||||
+active-docs("#home", "/docs/")
|
||||
+active-docs(".core", "/docs/reference/compass/")
|
||||
+active-docs(".blueprint", "/docs/reference/blueprint/")
|
||||
+active-docs(".tutorial", "/docs/tutorials/")
|
||||
|
||||
|
||||
#version
|
||||
+adjust-font-size-to(14px)
|
||||
+float(left)
|
||||
margin-left: 1.5em
|
||||
color: #999
|
||||
.number
|
||||
color: #666
|
||||
|
||||
#search-docs
|
||||
color: #999
|
||||
p
|
||||
margin: 0
|
||||
+columns(3)
|
||||
+omega
|
||||
label
|
||||
+float(left)
|
||||
width: columns(1,3) + gutter(3)*.5
|
||||
margin: 0
|
||||
text-align: right
|
||||
input
|
||||
+columns(2,3)
|
||||
+omega
|
||||
|
||||
#page
|
||||
+container
|
||||
+leader(3)
|
||||
|
||||
#comments
|
||||
+columns(9)
|
||||
+omega
|
||||
|
||||
$footer-height: 5em + $base-rhythm-unit
|
||||
+sticky-footer($footer-height, "#wrap", "#wrap-footer", "footer")
|
||||
|
||||
footer[role="contentinfo"]
|
||||
+container
|
||||
// This height adjustment is because of the leading border
|
||||
height: $footer-height - $base-rhythm-unit
|
||||
color: #999999
|
||||
+leading-border(2px)
|
||||
.legalese
|
||||
+columns(3)
|
||||
+alpha
|
||||
+adjust-font-size-to(14px)
|
||||
p
|
||||
margin: 0 0 1em 0
|
||||
.links
|
||||
+columns(9)
|
||||
+omega
|
||||
+adjust-font-size-to(14px)
|
||||
ul
|
||||
+horizontal-list
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group COMPONENTS by type
|
||||
|
||||
article
|
||||
text-align: left
|
||||
|
||||
article
|
||||
> nav
|
||||
border-top: $px2em*1px solid #ccc
|
||||
margin-top: -$px2em*1px
|
||||
color: #ccc
|
||||
ul
|
||||
+no-style-list
|
||||
li
|
||||
+columns(6,12)
|
||||
&:last-child
|
||||
+omega(12)
|
||||
text-align: right
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group OVERRIDES by content
|
||||
|
||||
aside[role="sidebar"] + article
|
||||
+columns(9)
|
||||
+omega
|
||||
h1
|
||||
+adjust-font-size-to(36px)
|
||||
+trailer(1,36px)
|
||||
.demo &
|
||||
float: none
|
||||
display: block
|
||||
margin: 0
|
||||
width: auto
|
||||
+full
|
||||
h1
|
||||
text-align: center
|
||||
|
||||
#module-nav
|
||||
+leader(.25)
|
||||
+trailing-border(1px,.25)
|
||||
+trailer(.5)
|
||||
border-color: #ccc
|
||||
clear: both
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
+container
|
||||
li
|
||||
+float(left)
|
||||
margin-right: 1.5em
|
||||
&:first-child
|
||||
+alpha
|
||||
a.selected:before
|
||||
content: "▸"
|
||||
+ #page
|
||||
+leader(1.5)
|
||||
|
||||
=active-module($type, $url)
|
||||
body#{$type} #module-nav a[href^="#{$url}"]
|
||||
&:link, &:visited
|
||||
text-decoration: underline
|
||||
+text-shadow
|
||||
|
||||
+active-module(".core.css3", "/docs/reference/compass/css3/")
|
||||
+active-module(".core.layout", "/docs/reference/compass/layout/")
|
||||
+active-module(".core.misc", "/docs/reference/compass/misc/")
|
||||
+active-module(".core.reset", "/docs/reference/compass/reset/")
|
||||
+active-module(".core.utilities", "/docs/reference/compass/utilities/")
|
||||
+active-module(".core.helpers", "/docs/reference/compass/helpers/")
|
||||
|
||||
#code
|
||||
+full(12)
|
||||
+pie-clearfix
|
||||
+adjust-font-size-to(12px)
|
||||
+h-borders(1px,1,12px)
|
||||
+code-text
|
||||
border-color: #ccc
|
||||
nav
|
||||
background: #eee
|
||||
+trailer(1,12px)
|
||||
ul
|
||||
+inline-block-list(.4em)
|
||||
text-align: right
|
||||
section
|
||||
position: relative
|
||||
+columns(6,12)
|
||||
+slideshow
|
||||
&#styles
|
||||
+omega(12)
|
||||
.slides
|
||||
li
|
||||
overflow: auto
|
||||
table
|
||||
.lino
|
||||
color: #666
|
||||
background: #ddd
|
||||
padding: 0 .4em
|
||||
.source
|
||||
width: 100%
|
||||
padding: 0 .4em
|
||||
|
||||
#demo
|
||||
+full(12)
|
||||
+padding-leader
|
||||
+trailing-border(1px)
|
||||
border-color: #ccc
|
||||
.gradient
|
||||
margin: 1.5em 0
|
||||
height: 6em
|
||||
+linear-gradient(color_stops(#fff, #ddd), "left top")
|
||||
|
||||
/* @end
|
||||
|
||||
@import reference
|
||||
@import examples
|
||||
@import sidebar
|
||||
@import specifics
|
||||
|
||||
/* @group OVERRIDES by page
|
||||
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group DEBUG
|
||||
|
||||
// Uncomment, adjust and use for debugging
|
||||
// #page
|
||||
// +show-grid("grid.png")
|
||||
|
||||
/* @end
|
||||
@import core/clearing-classes
|
||||
@ -1,37 +1,31 @@
|
||||
- render "basic" do
|
||||
#wrap
|
||||
%header#banner{:role => "banner"}
|
||||
%div
|
||||
%h1.vcard
|
||||
%a.fn.org.url.uid{:href => "/", :rel => "home"} Compass
|
||||
%nav#docs-nav{:role => "navigation"}
|
||||
.container
|
||||
%nav#main-nav{:role => "navigation"}
|
||||
%ul
|
||||
%li.vcard
|
||||
%a.fn.org.url.uid{:href => "/", :rel => "home"} Compass
|
||||
%li
|
||||
%a{:href => "/docs/"} introduction
|
||||
%a.here{:href => "/docs/reference/compass/", :rel => "documentation"} Docs
|
||||
%li
|
||||
%a{:href => "/docs/reference/compass/"} core
|
||||
%a{:href => "/help", :rel=> "help"} Get Help
|
||||
%li
|
||||
%a{:href => "/docs/reference/blueprint/"} blueprint
|
||||
%li
|
||||
%a{:href => "/docs/tutorials/"} tutorials
|
||||
/
|
||||
%li
|
||||
%a{:href => "/docs/plugins/"} plugins
|
||||
#version
|
||||
Current Version:
|
||||
%a.number(href="/docs/CHANGELOG/")= compass_version
|
||||
#search-docs
|
||||
%form{:action => "/docs/search/", :method => "GET"}
|
||||
%p
|
||||
%label{:for => "search"} search
|
||||
%input#search{:name => "q", :type => "text", :value => ""}
|
||||
%a{:href => "/get-involved", :rel=> "contribute"} Get Involved
|
||||
|
||||
%form#search-docs{:action => "/docs/search/", :method => "GET"}
|
||||
%input#search{:name => "q", :type => "text", :value => "", :placeholder => "Search the docs"}
|
||||
#subnav
|
||||
%nav#docs-nav{:role => "navigation"}
|
||||
%a{:href => "/docs/reference/blueprint/"} Blueprint
|
||||
%a{:href => "/docs/reference/compass/"} Core
|
||||
- if @item[:content_for_module_nav]
|
||||
%nav#module-nav= @item[:content_for_module_nav]
|
||||
#page
|
||||
#version
|
||||
Version:
|
||||
%a.number(href="/docs/CHANGELOG/")= compass_version
|
||||
= yield
|
||||
#comments= render "partials/disqus_comments"
|
||||
#wrap-footer
|
||||
-#comments= render "partials/disqus_comments"
|
||||
%footer(role="contentinfo")= render "partials/footer"
|
||||
%script(src="/docs/javascripts/jquery-1.3.2.min.js")
|
||||
%script(src="/docs/javascripts/fixups.js" deferred)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user