From 568fb47d0bdfbd710d8f3f6a5eec607d6f7d011b Mon Sep 17 00:00:00 2001 From: B Mathis Date: Sun, 2 May 2010 20:38:31 -0700 Subject: [PATCH] [Docs] Refactored stylesheets, improved sidebar navigation styles --- doc-src/content/stylesheets/_examples.sass | 2 - doc-src/content/stylesheets/_shared.sass | 3 + doc-src/content/stylesheets/_sidebar.sass | 77 ++ .../content/stylesheets/legacy/example.scss | 25 - doc-src/content/stylesheets/legacy/main.scss | 157 ---- .../stylesheets/legacy/partials/_syntax.scss | 2 - .../legacy/partials/syntax/_coderay.scss | 211 ------ .../legacy/partials/syntax/_pygments.scss | 151 ---- .../content/stylesheets/legacy/screen.scss | 675 ------------------ doc-src/content/stylesheets/screen.sass | 35 +- doc-src/layouts/partials/sidebar.haml | 2 +- 11 files changed, 85 insertions(+), 1255 deletions(-) create mode 100644 doc-src/content/stylesheets/_shared.sass create mode 100644 doc-src/content/stylesheets/_sidebar.sass delete mode 100644 doc-src/content/stylesheets/legacy/example.scss delete mode 100644 doc-src/content/stylesheets/legacy/main.scss delete mode 100644 doc-src/content/stylesheets/legacy/partials/_syntax.scss delete mode 100644 doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss delete mode 100644 doc-src/content/stylesheets/legacy/partials/syntax/_pygments.scss delete mode 100644 doc-src/content/stylesheets/legacy/screen.scss diff --git a/doc-src/content/stylesheets/_examples.sass b/doc-src/content/stylesheets/_examples.sass index 3bce0dd5..125b9a7e 100644 --- a/doc-src/content/stylesheets/_examples.sass +++ b/doc-src/content/stylesheets/_examples.sass @@ -21,8 +21,6 @@ position: relative +columns(6,12) +slideshow - &#markup - +alpha(12) &#styles +omega(12) .code diff --git a/doc-src/content/stylesheets/_shared.sass b/doc-src/content/stylesheets/_shared.sass new file mode 100644 index 00000000..acee2682 --- /dev/null +++ b/doc-src/content/stylesheets/_shared.sass @@ -0,0 +1,3 @@ +=gradient-bg(!color, !up=5, !down=!up) + background-color: #{!color} + +linear-gradient(color_stops(lighten(!color, !up), darken(!color,!down))) \ No newline at end of file diff --git a/doc-src/content/stylesheets/_sidebar.sass b/doc-src/content/stylesheets/_sidebar.sass new file mode 100644 index 00000000..f518d114 --- /dev/null +++ b/doc-src/content/stylesheets/_sidebar.sass @@ -0,0 +1,77 @@ +aside[role="sidebar"] + padding-bottom: 1em + +columns(3) + +alpha + +adjust-font-size-to(14px) + color: #999999 + section, p + +leader(1,14px) + +trailer(1,14px) + +#local-nav ul + margin-top: 0em + border: 0 + padding: 0 + margin: 0 + list-style: none + li + a + display: block + h2 + margin: 0 + text-align: left + a + +border-top-radius(3px) + +text-shadow(#fff) + padding: 5px 0 + font-size: 1.3em + display: inline-block + border-bottom: 0 + text-decoration: underline + &.selected + color: #222 + ul + list-style: none + margin: 0 0 1em 0 + padding: 0 + li + list-style-image: none + list-style-type: none + margin-left: 0px + $c: #eaeaea + //mix(#e6e6e6, #005498, 50%) + &:last-child a + +border-bottom-radius(3px) + &:first-child a + +border-top-radius(3px) + border-top-color: #eaeaea + &:hover, &:focus, &.selected + border-top-color: #{$c} !important + a + //color: #444 + border: 1px solid + border-color: #fff transparent #e7e7e7 + padding: 3px 8px + background: #f5f5f5 + &.selected + font-weight: bold + &:hover, &:focus, &.selected + +border-radius + +text-shadow(#{lighten($c, 15)}, 0, 1px) + background: #{$c} + +linear-gradient(color_stops(lighten($c, 1), $c)) + position: relative + z-index: 2 + padding: 3px 12px 3px 10px + margin: 0 -4px 0 -2px + color: #{desaturate(darken(#005498, 14), 20)} + border-color: #{lighten($c, 5)} #{$c} #{darken($c, 7)} #{$c} + &:after + color: #{darken($c, 22)} !important + //+text-shadow(darken($c, 22), 0, -1px) + &:after + content: "\25B8" + font-style: normal + float: right + color: #ddd + font-weight: normal \ No newline at end of file diff --git a/doc-src/content/stylesheets/legacy/example.scss b/doc-src/content/stylesheets/legacy/example.scss deleted file mode 100644 index 1cd611c9..00000000 --- a/doc-src/content/stylesheets/legacy/example.scss +++ /dev/null @@ -1,25 +0,0 @@ -body { - font-family: "Lucida Grande", Arial, sans-serif; } - -#example { - width: 100%; - > tbody > tr > td { - border: 2px solid black; - vertical-align: top; - width: 48%; - min-width: 400px; - pre { - margin: 0; - overflow: auto; } } - td.line_numbers, td.linenos { - padding: 6px 3px; - border-right: 1px solid #333333; - background-color: #cccccc; } - td.code { - padding: 6px 3px; - max-width: 400px; - pre { - margin: 0; - overflow: auto; } } } - -@import "partials/syntax"; diff --git a/doc-src/content/stylesheets/legacy/main.scss b/doc-src/content/stylesheets/legacy/main.scss deleted file mode 100644 index ecc251fe..00000000 --- a/doc-src/content/stylesheets/legacy/main.scss +++ /dev/null @@ -1,157 +0,0 @@ -@import "compass/utilities"; -@import "compass/css3"; -@import "blueprint"; - -body { - font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif; - line-height: 1.5; - font-size: 13px; } - -// Layout -#container { - @include pie-clearfix; } - -#main { - @include column(16, true); - @include prepend(8); } - -#sidebar { - @include column(8); - @include pull(24, true); - background: #f5f5f5; - h2 { - font-size: 16px; } - ul, ol { - list-style-position: inside; - padding-left: 10px; } - .selected { - font-weight: bold; } - a { - @include hover-link; } } - -#footer { - @include column(24); - background: #f5f5f5; - border-top: 2px solid #dddddd; - margin: 1em 0; - .legalese { - @include column(12); } - hr { - @include colruler; } - .links { - @include column(12, true); - ul { - @include no-bullets; - a { - @include hover-link; } } } } - -// Typography - -blockquote { - font-style: italic; } - -hr { - background: none; - height: 0; - font-size: 0; - line-height: 0; - border: none; - border-top: 2px solid #cccccc; } - -// Regular data tables -table.datagrid { - border-collapse: collapse; - th { - background: #eeeeee; } - td, - th { - border: 1px solid #cccccc; - text-align: left; - padding: 5px; - cell-spacing: 0; } } - -// Reference - -body.reference { - h3 { - &.mixin, &.constant { - font-family: Monaco, courier; - font-weight: 200; - @include text-shadow; - background-color: #eeeeee; - border: 1px solid #aaaaaa; - padding: 0.75em; - margin-bottom: 0; - a.permalink { - @include hover-link; - @include link-colors(inherit, inherit); } } - .arg[data-default-value] { - color: #666666; - &:before { - content: "["; } - &:after { - content: "]"; } } } - .source-documentation { - background-color: #eeeeee; - border: 1px solid #aaaaaa; - border-top-width: 0; - padding: 0.75em; } - dl.source-documentation { - margin-top: 0; - dt { - font-weight: bold; - float: left; - margin-right: 15px; } - dt:not(:first-child) { - margin-top: 1em; } } - a.view-source { - float: right; - margin: 1.25em; } - span.color + span.swatch { - margin: 0 3px 3px; - border: 1px solid #333333; - width: 1em; - height: 1em; - @include inline-block; } - .color-snippet { - width: 100px; - height: 20px; - @include border-radius(3px); } - a.help { - font-size: 75%; } } - -table.constants { - width: 100%; - @include alternating-rows-and-columns(#eeeeee, #bbbbbb, #191919); - @include outer-table-borders(1px); - @include inner-table-borders(1px); - td, th { - padding: 0.25em 0.5em; } } - -ol#breadcrumbs { - @include horizontal-list; - @include no-bullets; - li:after { - content: " > "; } - li.last:after { - content: ""; } - li.last { - visibility: hidden; } } - -body#home #logo { - @include replace-text(unquote("compass.png"), 0px); - height: 159px; } - -p code { - border: 1px solid #cccccc; - background-color: #f2f2f2; - padding: 2px; } - -body#reference-compass-css3 { - #border-radius { - padding: 2px 8px; - @include border-radius(0.75em); } - #text-shadow { - @include text-shadow(red); } } - -@import "partials/syntax"; diff --git a/doc-src/content/stylesheets/legacy/partials/_syntax.scss b/doc-src/content/stylesheets/legacy/partials/_syntax.scss deleted file mode 100644 index 848cc852..00000000 --- a/doc-src/content/stylesheets/legacy/partials/_syntax.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "syntax/coderay"; -@import "syntax/pygments"; diff --git a/doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss b/doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss deleted file mode 100644 index 9b91e48c..00000000 --- a/doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss +++ /dev/null @@ -1,211 +0,0 @@ -.CodeRay { - .debug { - color: white !important; - background: blue !important; } - .af { - color: #0000cc; } - .an { - color: #000077; } - .at { - color: #ff0088; } - .av { - color: #770000; } - .aw { - color: #cc0000; } - .bi { - color: #550099; - font-weight: bold; } - .c { - color: #888888; } - .ch { - color: #0044dd; - .k { - color: #0044dd; } - .dl { - color: #003399; } } - .cl { - color: #bb0066; - font-weight: bold; } - .cm { - color: #aa0088; - font-weight: bold; } - .co { - color: #003366; - font-weight: bold; } - .cr { - color: #00aa00; } - .cv { - color: #336699; } - .de { - color: #bb00bb; } - .df { - color: #009999; - font-weight: bold; } - .di { - color: #008888; - font-weight: bold; } - .dl { - color: black; } - .do { - color: #997700; } - .dt { - color: #3344bb; } - .ds { - color: #dd4422; - font-weight: bold; } - .e { - color: #666666; - font-weight: bold; } - .en { - color: #880000; - font-weight: bold; } - .er { - color: red; - background-color: #ffaaaa; } - .ex { - color: #cc0000; - font-weight: bold; } - .fl { - color: #6600ee; - font-weight: bold; } - .fu { - color: #0066bb; - font-weight: bold; } - .gv { - color: #dd7700; - font-weight: bold; } - .hx { - color: #005588; - font-weight: bold; } - .i { - color: #0000dd; - font-weight: bold; } - .ic { - color: #bb4444; - font-weight: bold; } - .il { - background: #dddddd; - color: black; - .il { - background: #cccccc; - .il { - background: #bbbbbb; } } - .idl { - background: #dddddd; - font-weight: bold; - color: #666666; } } - .idl { - background-color: #bbbbbb; - font-weight: bold; - color: #666666; } - .im { - color: red; } - .in { - color: #bb22bb; - font-weight: bold; } - .iv { - color: #3333bb; } - .la { - color: #997700; - font-weight: bold; } - .lv { - color: #996633; } - .oc { - color: #4400ee; - font-weight: bold; } - .of { - color: black; - font-weight: bold; } - .pc { - color: #003388; - font-weight: bold; } - .pd { - color: #336699; - font-weight: bold; } - .pp { - color: #557799; } - .ps { - color: #0000cc; - font-weight: bold; } - .pt { - color: #007744; - font-weight: bold; } - .r, .kw { - color: #008800; - font-weight: bold; } - .ke { - color: #880088; - .dl { - color: #660066; } - .ch { - color: #8800ff; } } - .vl { - color: #008888; } - .rx { - background-color: #fff0ff; - .k { - color: #880088; } - .dl { - color: #440044; } - .mod { - color: #cc22cc; } - .fu { - color: #440044; - font-weight: bold; } } - .s { - background-color: #fff0f0; - color: #dd2200; - .s { - background-color: #ffe0e0; - .s { - background-color: #ffd0d0; } } - .ch { - color: #bb00bb; } - .dl { - color: #771100; } } - .sh { - background-color: #f0fff0; - color: #22bb22; - .dl { - color: #116611; } } - .sy { - color: #aa6600; - .k { - color: #aa6600; } - .dl { - color: #663300; } } - .ta { - color: #007700; } - .tf { - color: #007700; - font-weight: bold; } - .ts { - color: #dd7700; - font-weight: bold; } - .ty { - color: #333399; - font-weight: bold; } - .v { - color: #003366; } - .xt { - color: #444444; } - .ins { - background: #aaffaa; } - .del { - background: #ffaaaa; } - .chg { - color: #aaaaff; - background: #000077; } - .head { - color: #ff88ff; - background: #550055; } - .ins .ins { - color: #008800; - font-weight: bold; } - .del .del { - color: #880000; - font-weight: bold; } - .chg .chg { - color: #6666ff; } - .head .head { - color: #ff44ff; } } diff --git a/doc-src/content/stylesheets/legacy/partials/syntax/_pygments.scss b/doc-src/content/stylesheets/legacy/partials/syntax/_pygments.scss deleted file mode 100644 index 8622ad5f..00000000 --- a/doc-src/content/stylesheets/legacy/partials/syntax/_pygments.scss +++ /dev/null @@ -1,151 +0,0 @@ -.highlight { - .hll { - background-color: #ffffcc; } - .c { - color: #606060; - font-style: italic; } - .err { - color: #f00000; - background-color: #f0a0a0; } - .k { - color: #208090; - font-weight: bold; } - .o { - color: #303030; } - .cm { - color: #606060; - font-style: italic; } - .cp { - color: #507090; } - .c1 { - color: #606060; - font-style: italic; } - .cs { - color: #c00000; - font-weight: bold; - font-style: italic; } - .gd { - color: #a00000; } - .ge { - font-style: italic; } - .gr { - color: red; } - .gh { - color: navy; - font-weight: bold; } - .gi { - color: #00a000; } - .go { - color: gray; } - .gp { - color: #c65d09; - font-weight: bold; } - .gs { - font-weight: bold; } - .gu { - color: purple; - font-weight: bold; } - .gt { - color: #0040d0; } - .kc, .kd, .kn { - color: #208090; - font-weight: bold; } - .kp { - color: #0080f0; - font-weight: bold; } - .kr { - color: #208090; - font-weight: bold; } - .kt { - color: #6060f0; - font-weight: bold; } - .m { - color: #6000e0; - font-weight: bold; } - .s { - background-color: #e0e0ff; } - .na { - color: #000070; } - .nb { - color: #007020; } - .nc { - color: #e090e0; - font-weight: bold; } - .no { - color: #50e0d0; - font-weight: bold; } - .nd { - color: #505050; - font-weight: bold; } - .ni { - color: maroon; } - .ne { - color: #f00000; - font-weight: bold; } - .nf { - color: #50e0d0; - font-weight: bold; } - .nl { - color: #907000; - font-weight: bold; } - .nn { - color: #0e84b5; - font-weight: bold; } - .nt { - color: #007000; } - .nv { - color: #003060; } - .ow { - color: black; - font-weight: bold; } - .w { - color: #bbbbbb; } - .mf { - color: #6000e0; - font-weight: bold; } - .mh { - color: #005080; - font-weight: bold; } - .mi { - color: #6060f0; - font-weight: bold; } - .mo { - color: #4000e0; - font-weight: bold; } - .sb { - background-color: #e0e0ff; } - .sc { - color: #8080f0; } - .sd { - color: #d04020; } - .s2 { - background-color: #e0e0ff; } - .se { - color: #606060; - font-weight: bold; - background-color: #e0e0ff; } - .sh { - background-color: #e0e0ff; } - .si { - background-color: #e0e0e0; } - .sx { - color: #f08080; - background-color: #e0e0ff; } - .sr { - color: black; - background-color: #e0e0ff; } - .s1 { - background-color: #e0e0ff; } - .ss { - color: #f0c080; } - .bp { - color: #007020; } - .vc { - color: #c0c0f0; } - .vg { - color: #f08040; } - .vi { - color: #a0a0f0; } - .il { - color: #6060f0; - font-weight: bold; } } diff --git a/doc-src/content/stylesheets/legacy/screen.scss b/doc-src/content/stylesheets/legacy/screen.scss deleted file mode 100644 index f52702dd..00000000 --- a/doc-src/content/stylesheets/legacy/screen.scss +++ /dev/null @@ -1,675 +0,0 @@ -// XXX Placeholder -#skip-links { - position: relative; - a { - position: absolute; - top: -9999em; - display: block; - width: 100%; - &:focus { - top: 0; - z-index: 999; } } } - -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; } - -*:focus { - outline: 0; } - -body { - line-height: 1; - color: black; - background: white; } - -ol, ul { - list-style: none; } - -table { - border-collapse: separate; - border-spacing: 0; - vertical-align: middle; } - -caption, th, td { - text-align: left; - font-weight: normal; - vertical-align: middle; } - -q, blockquote { - quotes: "" ""; } - -q { - &:before, &:after { - content: ""; } } - -blockquote { - &:before, &:after { - content: ""; } } - -a img { - border: none; } - -section, article, aside, header, footer, nav, dialog, figure { - display: block; } - -body { - font-family: Helvetica, Arial, sans-serif; - color: black; } - -:focus { - outline: 1px dotted #005498; } - -a { - &:link, &:visited { - color: #005498; - text-decoration: none; } - &:focus, &:hover, &:active { - color: #003276; } } - -cite, em { - font-style: italic; } - -strong { - font-weight: bold; } - -ins { - text-decoration: underline; } - -del { - text-decoration: line-through; } - -q { - font-style: italic; - em { - font-style: normal; } } - -img { - vertical-align: bottom; } - -h1, h2, h3, h4, h5, h6 { - font-weight: bold; } - -p { - margin-top: 1.5em; - margin-bottom: 1.5em; } - -ol { - margin-top: 1.5em; - margin-bottom: 1.5em; - margin-left: 3em; - list-style: decimal; } - -ul { - margin-top: 1.5em; - margin-bottom: 1.5em; - margin-left: 3em; - list-style: disc; } - -blockquote { - margin: 1.5em; - font-family: Baskerville, Palatino, serif; } - -table { - width: 100%; } - -th { - font-weight: bold; } - -fieldset { - margin-bottom: 1.5em; } - -legend { - font-weight: bold; - font-variant: small-caps; } - -label { - display: block; } - -legend + label { - margin-top: 0; } - -textarea, input:not([type="radio"]) { - /* Mozilla (FireFox, Camino) */ - -moz-box-sizing: border-box; - /* Webkit (Safari, Chrome) */ - -webkit-box-sizing: border-box; - /* IE (8) */ - -ms-box-sizing: border-box; - /* CSS3 */ - box-sizing: border-box; - width: 100%; } - -button { - vertical-align: top; } - -body { - font-size: 100%; - line-height: 1.5em; } - -html > body { - font-size: 16px; } - -body { - text-align: center; } - -header[role="banner"] h1, #compass-nav { - display: inline; - float: left; - width: 46.97%; - margin-right: 3.03%; } - -header[role="banner"] { - background: #f9f9f9; - div { - overflow: hidden; - display: inline-block; - text-align: left; - margin-left: auto; - margin-right: auto; - width: 66em; - max-width: 100%; - display: block; } - h1 { - margin-left: 1.515%; - font-size: 1.125em; - line-height: 1.333em; - text-transform: uppercase; - a { - display: block; - padding-top: 2.667em; - padding-bottom: 2em; } } } - -#compass-nav { - display: inline; - float: right; - margin-right: 1.515%; - /* ugly hacks for IE6-7 */ - #margin-left: -2em; - /* end ugly hacks */ - text-align: right; - ul { - margin: 0; - padding: 0; - border: 0; - outline: 0; - overflow: hidden; - display: inline-block; - padding-top: 3em; - margin-bottom: 2.25em; - display: block; - li { - list-style-image: none; - list-style-type: none; - margin-left: 0px; - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: middle; - /* ugly hacks for IE6-7 */ - #display: inline; - #vertical-align: auto; - /* end ugly hacks */ - white-space: no-wrap; - padding-left: 0; - padding-right: 0; } } - a { - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: middle; - /* ugly hacks for IE6-7 */ - #display: inline; - #vertical-align: auto; - /* end ugly hacks */ - font-size: 0.875em; - line-height: 1.714em; - padding: 0 1em; - border-top-left-radius: 0.5em; - -moz-border-radius-topleft: 0.5em; - -webkit-border-top-left-radius: 0.5em; - border-bottom-right-radius: 0.5em; - -moz-border-radius-bottomright: 0.5em; - -webkit-border-bottom-right-radius: 0.5em; } } - -body[id="home"], body[id$="-docs"] { - #compass-nav a[href="/docs/"] { - background: #cccccc; - cursor: default; } } - -#docs-nav { - display: inline-block; - border-top-style: solid; - border-top-width: 0.063em; - padding-top: 0.313em; - border-bottom-style: solid; - border-bottom-width: 0.063em; - padding-bottom: 0.313em; - position: relative; - height: 1.5em; - border-color: #cccccc; - background-color: #eeeeee; - &:after { - content: " "; - display: block; - height: 0; - clear: both; - overflow: hidden; - visibility: hidden; } - display: block; - ul { - margin: 0; - padding: 0; - border: 0; - outline: 0; - overflow: hidden; - display: inline-block; - overflow: hidden; - display: inline-block; - text-align: left; - margin-left: auto; - margin-right: auto; - width: 66em; - max-width: 100%; - position: relative; - z-index: 2; - overflow: visible; - display: block; - li { - list-style-image: none; - list-style-type: none; - margin-left: 0px; - white-space: nowrap; - display: inline; - float: left; - padding-left: 4px; - padding-right: 4px; - &:first-child, &.first { - padding-left: 0px; } - &:last-child, &.last { - padding-right: 0px; } - top: -0.75em; - margin-bottom: -0.75em; - position: relative; } - display: block; } - a { - &:link, &:visited { - display: block; - padding: 0 1em; - border: 1px solid #eeeeee; - border-top-style: solid; - border-top-width: 0.063em; - padding-top: 0.688em; - border-bottom-style: solid; - border-bottom-width: 0.063em; - padding-bottom: 0.313em; - border-bottom: 0; - border-top-left-radius: 0.5em; - -moz-border-radius-topleft: 0.5em; - -webkit-border-top-left-radius: 0.5em; - border-top-right-radius: 0.5em; - -moz-border-radius-topright: 0.5em; - -webkit-border-top-right-radius: 0.5em; - background: #dddddd; } - &:hover, &:focus, &:active { - background-color: #eeeeee; - border-color: #dddddd; } } } - -.home #docs-nav a[href="index.php"] { - &:link, &:visited { - border-bottom-style: solid; - border-bottom-width: 0.063em; - padding-bottom: 0.313em; - cursor: default; - background: white; - border-color: #cccccc; - border-bottom-color: white; } } - -.core #docs-nav a[href="core.php"] { - &:link, &:visited { - border-bottom-style: solid; - border-bottom-width: 0.063em; - padding-bottom: 0.313em; - cursor: default; - background: white; - border-color: #cccccc; - border-bottom-color: white; } } - -/* line 83, ../src/screen.sass */ - -.css3 #docs-nav a[href="core.php"] { - &:link, &:visited { - border-bottom-style: solid; - border-bottom-width: 0.063em; - padding-bottom: 0.313em; - cursor: default; - background: white; - border-color: #cccccc; - border-bottom-color: white; } } - -.utils #docs-nav a[href="core.php"] { - &:link, &:visited { - border-bottom-style: solid; - border-bottom-width: 0.063em; - padding-bottom: 0.313em; - cursor: default; - background: white; - border-color: #cccccc; - border-bottom-color: white; } } - -.gradient #docs-nav a[href="core.php"] { - &:link, &:visited { - border-bottom-style: solid; - border-bottom-width: 0.063em; - padding-bottom: 0.313em; - cursor: default; - background: white; - border-color: #cccccc; - border-bottom-color: white; } } - -.demo #docs-nav a[href="core.php"] { - &:link, &:visited { - border-bottom-style: solid; - border-bottom-width: 0.063em; - padding-bottom: 0.313em; - cursor: default; - background: white; - border-color: #cccccc; - border-bottom-color: white; } } - -#search-docs { - position: absolute; - z-index: 1; - top: 0; - left: 0; - width: 100%; - color: #999999; - form { - overflow: hidden; - display: inline-block; - text-align: left; - margin-left: auto; - margin-right: auto; - width: 66em; - max-width: 100%; - display: block; } - p { - display: inline; - float: left; - width: 21.97%; - margin-right: 3.03%; - display: inline; - float: right; - margin-right: 1.515%; - /* ugly hacks for IE6-7 */ - #margin-left: -2em; - /* end ugly hacks */ - margin-top: 0.375em; - margin-bottom: 0em; - label { - display: inline; - float: left; - width: 31.034%; - margin: 0; - text-align: right; } - input { - display: inline; - float: left; - width: 62.069%; - margin-right: 13.793%; - display: inline; - float: right; - margin-right: 1.515%; - /* ugly hacks for IE6-7 */ - #margin-left: -2em; } } } - -#page { - overflow: hidden; - display: inline-block; - text-align: left; - margin-left: auto; - margin-right: auto; - width: 66em; - max-width: 100%; - margin-top: 4.5em; - display: block; } - -aside[role="sidebar"] { - display: inline; - float: left; - width: 21.97%; - margin-right: 3.03%; - margin-left: 1.515%; - font-size: 0.875em; - line-height: 1.714em; - margin-top: 3.429em; - color: #999999; - section, p { - margin-top: 1.714em; - margin-bottom: 1.714em; } } - -footer[role="contentinfo"] { - overflow: hidden; - display: inline-block; - text-align: left; - margin-left: auto; - margin-right: auto; - width: 66em; - max-width: 100%; - margin-top: 4.5em; - color: #999999; - display: block; - .license { - clear: both; - margin-right: 1.515%; - margin-left: 1.515%; - font-size: 0.875em; - line-height: 1.714em; } } - -article > nav { - border-top: 0.063em solid #cccccc; - margin-top: -0.063em; - color: #cccccc; - ul { - list-style: none; - margin: 0; - padding: 0; - li { - list-style-image: none; - list-style-type: none; - margin-left: 0px; } } - li { - display: inline; - float: left; - width: 48.438%; - margin-right: 3.125%; - &:last-child { - display: inline; - float: right; - margin-right: 0; - /* ugly hacks for IE6-7 */ - #margin-left: -2em; - /* end ugly hacks */ - text-align: right; } } } - -#content { - display: inline; - float: left; - width: 71.97%; - margin-right: 3.03%; - display: inline; - float: right; - margin-right: 1.515%; - /* ugly hacks for IE6-7 */ - #margin-left: -2em; - /* end ugly hacks */ - h1 { - font-size: 2.25em; - line-height: 1.333em; - margin-bottom: 0.667em; } } - -.demo #content { - float: none; - display: block; - margin: 0; - width: auto; - clear: both; - margin-right: 1.515%; - margin-left: 1.515%; - h1 { - text-align: center; } } - -#module-nav { - margin-top: 0.375em; - border-bottom-style: solid; - border-bottom-width: 0.063em; - padding-bottom: 0.313em; - margin-bottom: 0.75em; - border-color: #cccccc; - clear: both; - ul { - margin: 0; - padding: 0; - overflow: hidden; - display: inline-block; - text-align: left; - margin-left: auto; - margin-right: auto; - width: 66em; - max-width: 100%; - display: block; - li { - display: inline; - float: left; - margin-right: 1.5em; - &:first-child { - margin-left: 1.515%; } } } - + #page { - margin-top: 2.25em; } } - -#local-nav { - margin-top: 1.714em; - ul { - list-style: none; - margin: 0; - padding: 0; - text-align: right; - li { - list-style-image: none; - list-style-type: none; - margin-left: 0px; } } - h2 { - margin-top: 1.714em; - border-bottom: 1px solid #cccccc; - margin-bottom: 0.602em; - text-align: left; } } - -#code { - clear: both; - display: inline-block; - font-size: 0.75em; - line-height: 2em; - border-top-style: solid; - border-top-width: 0.083em; - padding-top: 1.917em; - border-bottom-style: solid; - border-bottom-width: 0.083em; - padding-bottom: 1.917em; - border-color: #cccccc; - font-family: monospace; - &:after { - content: " "; - display: block; - height: 0; - clear: both; - overflow: hidden; - visibility: hidden; } - display: block; - nav { - background: #eeeeee; - margin-bottom: 2em; - ul { - margin: 0; - padding: 0; - border: 0; - outline: 0; - overflow: hidden; - display: inline-block; - text-align: right; - display: block; - li { - list-style-image: none; - list-style-type: none; - margin-left: 0px; - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: middle; - /* ugly hacks for IE6-7 */ - #display: inline; - #vertical-align: auto; - /* end ugly hacks */ - white-space: no-wrap; - padding-left: 0.4em; - padding-right: 0.4em; } } } - section { - position: relative; - display: inline; - float: left; - width: 48.438%; - margin-right: 3.125%; - .slides { - width: 100%; - overflow: hidden; - > ul { - margin: 0; - padding: 0; - width: 1030%; - list-style: none; - overflow: hidden; - display: inline-block; - li { - list-style-image: none; - list-style-type: none; - margin-left: 0px; } - display: block; - > li { - display: inline; - float: left; - width: 9.709%; - margin-right: 0.049%; } } } - &#styles { - display: inline; - float: right; - margin-right: 0; - /* ugly hacks for IE6-7 */ - #margin-left: -2em; } } - .slides li { - overflow: auto; } - table { - .lino { - color: #666666; - background: #dddddd; - padding: 0 0.4em; } - .source { - width: 100%; - padding: 0 0.4em; } } } - -#demo { - clear: both; - padding-top: 1.5em; - border-bottom-style: solid; - border-bottom-width: 0.063em; - padding-bottom: 1.438em; - border-color: #cccccc; - .gradient { - margin: 1.5em 0; - height: 6em; - background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, white), color-stop(100%, #dddddd)); - background-image: -moz-linear-gradient(left top, white 0%, #dddddd 100%); } } diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass index b557ea8f..886f7fb8 100644 --- a/doc-src/content/stylesheets/screen.sass +++ b/doc-src/content/stylesheets/screen.sass @@ -4,6 +4,7 @@ @import defaults @import slideshow +@import shared @import compass/layout @import compass/utilities @@ -124,15 +125,6 @@ header[role="banner"] +container +leader(3) -aside[role="sidebar"] - +columns(3) - +alpha - +adjust-font-size-to(14px) - +leader(2,14px) - color: #999999 - section, p - +leader(1,14px) - +trailer(1,14px) $footer-height: 4em + $base-rhythm-unit +sticky-footer($footer-height, "#wrap", "#wrap-footer", "footer") @@ -226,24 +218,6 @@ aside[role="sidebar"] + article +active-module(".core.utilities", "/docs/reference/compass/utilities/") +active-module(".core.helpers", "/docs/reference/compass/helpers/") -#local-nav - +leader(1,14px) - ul - +no-style-list - text-align: left - h2 - +leader(1,14px) - border-bottom: 1px solid #ccc - margin-bottom: ($base_rhythm_unit*.5 - $px2em*1px) * (14/16) - a:hover - +text-shadow - a.selected - font-weight: bold - a.selected:before - content: "»" - a.selected:after - content: "«" - #code +full(12) +pie-clearfix @@ -261,8 +235,6 @@ aside[role="sidebar"] + article position: relative +columns(6,12) +slideshow - &#markup - +alpha(12) &#styles +omega(12) .slides @@ -289,8 +261,9 @@ aside[role="sidebar"] + article /* @end -@import "reference" -@import "examples" +@import reference +@import examples +@import sidebar /* @group OVERRIDES by page diff --git a/doc-src/layouts/partials/sidebar.haml b/doc-src/layouts/partials/sidebar.haml index bebd3393..456f9fb2 100644 --- a/doc-src/layouts/partials/sidebar.haml +++ b/doc-src/layouts/partials/sidebar.haml @@ -1,2 +1,2 @@ %nav#local-nav - %ul= item_tree(reference_item(:stylesheet => (@item[:nav_stylesheet] || @default_stylesheet)), :depth => 2, :omit_self => get_var(:omit_self){true}, :heading_level => get_var(:heading_level){1}) + = item_tree(reference_item(:stylesheet => (@item[:nav_stylesheet] || @default_stylesheet)), :depth => 2, :omit_self => get_var(:omit_self){true}, :heading_level => get_var(:heading_level){1})