added haml/html toggle on examples, improved code styling, added get involved page
This commit is contained in:
parent
e616fa1ea8
commit
34f8763b22
@ -14,7 +14,7 @@ GIT
|
|||||||
PATH
|
PATH
|
||||||
remote: ..
|
remote: ..
|
||||||
specs:
|
specs:
|
||||||
compass (0.11.alpha.4.bc93883)
|
compass (0.11.alpha.4.e616fa1)
|
||||||
chunky_png (~> 0.10.3)
|
chunky_png (~> 0.10.3)
|
||||||
sass (>= 3.1.0.alpha.50)
|
sass (>= 3.1.0.alpha.50)
|
||||||
|
|
||||||
|
@ -70,14 +70,14 @@ function getSyntaxPreference(defaultSyntax, defaultMarkup) {
|
|||||||
|
|
||||||
// add example styling preferences
|
// add example styling preferences
|
||||||
if ($('body').hasClass('demo')){
|
if ($('body').hasClass('demo')){
|
||||||
//markupCookie = $.cookie("compass-example-markup");
|
markupCookie = $.cookie("compass-example-markup");
|
||||||
styleCookie = $.cookie("compass-example-style");
|
styleCookie = $.cookie("compass-example-style");
|
||||||
|
|
||||||
//markup = (markupCookie) ? markupCookie : defaultMarkup;
|
markup = (markupCookie) ? markupCookie : defaultMarkup;
|
||||||
style = (styleCookie) ? styleCookie : defaultSyntax;
|
style = (styleCookie) ? styleCookie : defaultSyntax;
|
||||||
|
|
||||||
changeExampleStyleSyntax(style)
|
changeExampleStyleSyntax(style)
|
||||||
//changeExampleMarkupSyntax(markup);
|
changeExampleMarkupSyntax(markup);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -98,10 +98,11 @@ $('document').ready(function(){
|
|||||||
// Set Demo page syntax preferences
|
// Set Demo page syntax preferences
|
||||||
} else if (target.parent().is('.syntax_pref')) {
|
} else if (target.parent().is('.syntax_pref')) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
//if (target.parent().parent().is('#markup')) {
|
if (target.parent().parent().is('#markup')) {
|
||||||
// changeExampleMarkupSyntax(target.attr("rel"), true);
|
changeExampleMarkupSyntax(target.attr("rel"), true);
|
||||||
//else
|
} else {
|
||||||
changeExampleStyleSyntax(target.attr("rel"), true);
|
changeExampleStyleSyntax(target.attr("rel"), true);
|
||||||
|
}
|
||||||
|
|
||||||
// Set Theme preference
|
// Set Theme preference
|
||||||
} else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) {
|
} else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) {
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
title: Compass History
|
title: Compass History
|
||||||
crumb: CHANGELOG
|
crumb: CHANGELOG
|
||||||
body_id: changelog
|
body_id: changelog
|
||||||
layout: article
|
layout: default
|
||||||
---
|
---
|
||||||
COMPASS CHANGELOG
|
COMPASS CHANGELOG
|
||||||
=================
|
=================
|
||||||
|
33
doc-src/content/get-involved/index.haml
Normal file
33
doc-src/content/get-involved/index.haml
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
---
|
||||||
|
title: Get involved with the Compass community
|
||||||
|
crumb: Get Involved
|
||||||
|
classnames:
|
||||||
|
- get-involved
|
||||||
|
layout: default
|
||||||
|
---
|
||||||
|
|
||||||
|
%h1 Get Involved With Compass
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
|
||||||
|
Many [wonderful people](https://github.com/chriseppstein/compass/contributors) have helped to make Compass awesome.
|
||||||
|
Here are some ways you can get involved with the Compass community.
|
||||||
|
|
||||||
|
## Share Sweet Stylesheets
|
||||||
|
|
||||||
|
So you've written some smashing Sass and you want to share them with others. Here are some ways you can.
|
||||||
|
|
||||||
|
1. [**Contribute to Compass**](/help/tutorials/contributing).
|
||||||
|
2. [**Develop a Compass Extension**](/help/tutorials/extensions).
|
||||||
|
3. [**Contribute to Sass Recipies**](http://chriseppstein.github.com/sass-recipes/).
|
||||||
|
4. Publish your code somewhere and email a link to the [mailing list](http://groups.google.com/group/compass-users).
|
||||||
|
|
||||||
|
## Help Others
|
||||||
|
|
||||||
|
Join the [mailing list](http://groups.google.com/group/compass-users) and help answer questions and share from your experience. If you're
|
||||||
|
writing a blog post about Sass or Compass send a link to the mailing list and we'll help you spread the word.
|
||||||
|
|
||||||
|
## Give Financially
|
||||||
|
|
||||||
|
Compass is charityware. We ask users to [donate to United Mitochondrial Disease Foundation](http://umdf.org/compass)
|
||||||
|
to support their efforts to find a cure for this disease.
|
@ -7,6 +7,15 @@ layout: tutorial
|
|||||||
---
|
---
|
||||||
%h1 Compass Tutorials
|
%h1 Compass Tutorials
|
||||||
|
|
||||||
%p
|
:markdown
|
||||||
The compass tutorials are still a Work-in-progress, but
|
These tutorials are still a work-in-progress, if you have questions that aren't covered here let us know on the [Compass users mailing list](http://groups.google.com/group/compass-users) where there are lots of
|
||||||
what we have is available for you to peruse.
|
friendly Compass users standing by to help you out.
|
||||||
|
|
||||||
|
## New to Compass?
|
||||||
|
|
||||||
|
If you're new to Compass, you might be interested in [best practices](/help/tutorials/best-practices), the [configuration reference](/help/tutorials/configuration-reference), [configurable variables](/help/tutorials/configurable-variables),
|
||||||
|
or the [command line documentation](/help/tutorials/command-line).
|
||||||
|
|
||||||
|
## Want to contribute?
|
||||||
|
|
||||||
|
If you've been using Compass for a while and you'd like to give back, check out the tutorials on [contributing](/help/tutorials/contributing) and [creating extensions](/help/tutorials/extensions).
|
||||||
|
@ -1,12 +1,16 @@
|
|||||||
//html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;}
|
//html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;}
|
||||||
.mixin-source, .example-source {
|
.mixin-source, .example-source {
|
||||||
position: relative; @extend .fixed-font;
|
position: relative; @extend .fixed-font;
|
||||||
.syntaxhighlighter {
|
.syntaxhighlighter, pre {
|
||||||
&.scss, &.sass, &.css { display: none; } } }
|
&.scss, &.sass, &.css, &.haml, &.html { display: none; } } }
|
||||||
|
|
||||||
html.sass { .mixin-source .syntaxhighlighter.sass, .example-source .syntaxhighlighter.sass { display: block; } }
|
html.sass { .mixin-source .syntaxhighlighter.sass, .example-source .syntaxhighlighter.sass { display: block; } }
|
||||||
html.scss { .mixin-source .syntaxhighlighter.scss, .example-source .syntaxhighlighter.scss { display: block; } }
|
html.scss { .mixin-source .syntaxhighlighter.scss, .example-source .syntaxhighlighter.scss { display: block; } }
|
||||||
html.css .example-source .syntaxhighlighter.css { display: block; }
|
html.css .example-source .syntaxhighlighter.css { display: block; }
|
||||||
|
html.html .example-source .html { display: block; }
|
||||||
|
html.haml .example-source .haml { display: block; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.mixin-source { display: none; }
|
.mixin-source { display: none; }
|
||||||
|
|
||||||
|
@ -20,7 +20,6 @@ html.light #demo, html.dark #demo {
|
|||||||
section + section { float: right; }
|
section + section { float: right; }
|
||||||
|
|
||||||
.example-source { clear: both; }
|
.example-source { clear: both; }
|
||||||
#markup { margin-top: 12px; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -18,4 +18,4 @@ header { padding: 22px 0 0; position: relative; }
|
|||||||
aside { float: left; width: $side-nav-width; position: relative; z-index: 2;}
|
aside { float: left; width: $side-nav-width; position: relative; z-index: 2;}
|
||||||
|
|
||||||
body#home #page article { padding-left: 0;}
|
body#home #page article { padding-left: 0;}
|
||||||
body.site, body#changelog { max-width: 1024px; }
|
body.site, body#changelog, body.default { max-width: 1024px; }
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
body.get-involved h1 + p { font-size: 1.2em; line-height: 1.45em; }
|
||||||
|
|
||||||
#page {
|
#page {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
@ -19,7 +21,7 @@
|
|||||||
#syntax_pref, .syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} }
|
#syntax_pref, .syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} }
|
||||||
|
|
||||||
.syntax_pref {
|
.syntax_pref {
|
||||||
float: right; @include round-top-corners; border: 1px solid; border-bottom: 0;
|
float: left; @include round-top-corners; border: 1px solid; border-bottom: 0;
|
||||||
a { text-decoration: none; }
|
a { text-decoration: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13,6 +13,7 @@
|
|||||||
body.tutorial #main-nav a[rel=help],
|
body.tutorial #main-nav a[rel=help],
|
||||||
body.reference #main-nav a[rel=documentation],
|
body.reference #main-nav a[rel=documentation],
|
||||||
body#changelog #main-nav a[rel=documentation],
|
body#changelog #main-nav a[rel=documentation],
|
||||||
|
body.demo #main-nav a[rel=documentation],
|
||||||
body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
|
body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
|
||||||
|
|
||||||
#search-docs input {
|
#search-docs input {
|
||||||
@ -65,8 +66,8 @@
|
|||||||
#module-nav li.selected { @extend .selected-marker-#{$theme};
|
#module-nav li.selected { @extend .selected-marker-#{$theme};
|
||||||
a { color: $module-nav-selected; } }
|
a { color: $module-nav-selected; } }
|
||||||
|
|
||||||
a[rel=sass], a[rel=scss], a[rel=css] { @extend .syntax-switch-#{$theme}; }
|
a[rel=sass], a[rel=scss], a[rel=css], a[rel=html], a[rel=haml] { @extend .syntax-switch-#{$theme}; }
|
||||||
&.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
|
&.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css], &.html a[rel=html], &.haml a[rel=haml] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
|
||||||
|
|
||||||
#version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
|
#version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
|
||||||
.mixin-source, .example-source { @extend .mixin-panel-#{$theme}; }
|
.mixin-source, .example-source { @extend .mixin-panel-#{$theme}; }
|
||||||
|
@ -1,21 +1,29 @@
|
|||||||
!!! Strict
|
!!!5
|
||||||
%html
|
- # This template is just the stuff until the body tag.
|
||||||
|
%html.no-js{:dir => "ltr", :lang => "en"}
|
||||||
%head
|
%head
|
||||||
%title
|
%meta{:charset => "utf-8"}/
|
||||||
#{@item[:title]} - Compass
|
%meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
|
||||||
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
|
||||||
%meta(name="viewport" content="width=780")
|
%meta(name="viewport" content="width=780")
|
||||||
- if @item[:meta_description]
|
|
||||||
%meta{:name => "description", :content => @item[:meta_description]}
|
|
||||||
%link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
|
%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" }
|
%title
|
||||||
%script{:src => "/javascripts/jquery-1.3.2.min.js", :type => "text/javascript"}
|
#{@item[:title]} | Compass Documentation
|
||||||
%body{body_attributes(@item)}
|
%link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
|
||||||
#container
|
%script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript")
|
||||||
#main
|
%script(src="/javascripts/jquery.cookie.js" type="text/javascript")
|
||||||
= yield
|
%script(src="/javascripts/site.js" type="text/javascript")
|
||||||
#sidebar
|
%script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript")
|
||||||
= render "partials/sidebar", :default_stylesheet => "_compass.scss"
|
%body.default{body_attributes(@item)}
|
||||||
#footer= render "partials/footer"
|
#wrap
|
||||||
%script(src="/javascripts/fixups.js" deferred)
|
= render "partials/main-navigation"
|
||||||
|
#page
|
||||||
|
#docs_panel
|
||||||
|
#theme_pref
|
||||||
|
%a{:href => "#", :rel => "theme", :title => "switch theme" } Q
|
||||||
|
#version
|
||||||
|
Version:
|
||||||
|
%a.number(href="/CHANGELOG/")= compass_version
|
||||||
|
%article= yield
|
||||||
|
%footer(role="contentinfo")= render "partials/footer"
|
||||||
= render "partials/analytics"
|
= render "partials/analytics"
|
||||||
|
|
||||||
|
@ -5,12 +5,12 @@
|
|||||||
|
|
||||||
#how
|
#how
|
||||||
%section#markup
|
%section#markup
|
||||||
-#.syntax_pref
|
.syntax_pref
|
||||||
%a{:href => "#", :rel => "html" } html
|
%a{:href => "#", :rel => "html" } html
|
||||||
%a{:href => "#", :rel => "haml" } haml
|
%a{:href => "#", :rel => "haml" } haml
|
||||||
.example-source
|
.example-source
|
||||||
%pre.source-code.html= h(example_html)
|
%pre.source-code.html= h(example_html)
|
||||||
-# %pre.source-code.haml= h(example_haml)
|
%pre.source-code.haml= h(example_haml)
|
||||||
%section#styles
|
%section#styles
|
||||||
.syntax_pref
|
.syntax_pref
|
||||||
%a{:href => "#", :rel => "scss" } scss
|
%a{:href => "#", :rel => "scss" } scss
|
||||||
|
Loading…
Reference in New Issue
Block a user