added haml/html toggle on examples, improved code styling, added get involved page
This commit is contained in:
Brandon Mathis
parent
e616fa1ea8
commit
34f8763b22
@ -14,7 +14,7 @@ GIT
|
||||
PATH
|
||||
remote: ..
|
||||
specs:
|
||||
compass (0.11.alpha.4.bc93883)
|
||||
compass (0.11.alpha.4.e616fa1)
|
||||
chunky_png (~> 0.10.3)
|
||||
sass (>= 3.1.0.alpha.50)
|
||||
|
||||
|
||||
@ -70,14 +70,14 @@ function getSyntaxPreference(defaultSyntax, defaultMarkup) {
|
||||
|
||||
// add example styling preferences
|
||||
if ($('body').hasClass('demo')){
|
||||
//markupCookie = $.cookie("compass-example-markup");
|
||||
markupCookie = $.cookie("compass-example-markup");
|
||||
styleCookie = $.cookie("compass-example-style");
|
||||
|
||||
//markup = (markupCookie) ? markupCookie : defaultMarkup;
|
||||
markup = (markupCookie) ? markupCookie : defaultMarkup;
|
||||
style = (styleCookie) ? styleCookie : defaultSyntax;
|
||||
|
||||
changeExampleStyleSyntax(style)
|
||||
//changeExampleMarkupSyntax(markup);
|
||||
changeExampleMarkupSyntax(markup);
|
||||
}
|
||||
}
|
||||
|
||||
@ -98,10 +98,11 @@ $('document').ready(function(){
|
||||
// Set Demo page syntax preferences
|
||||
} else if (target.parent().is('.syntax_pref')) {
|
||||
event.preventDefault();
|
||||
//if (target.parent().parent().is('#markup')) {
|
||||
// changeExampleMarkupSyntax(target.attr("rel"), true);
|
||||
//else
|
||||
if (target.parent().parent().is('#markup')) {
|
||||
changeExampleMarkupSyntax(target.attr("rel"), true);
|
||||
} else {
|
||||
changeExampleStyleSyntax(target.attr("rel"), true);
|
||||
}
|
||||
|
||||
// Set Theme preference
|
||||
} else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass History
|
||||
crumb: CHANGELOG
|
||||
body_id: changelog
|
||||
layout: article
|
||||
layout: default
|
||||
---
|
||||
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
|
||||
|
||||
%p
|
||||
The compass tutorials are still a Work-in-progress, but
|
||||
what we have is available for you to peruse.
|
||||
:markdown
|
||||
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
|
||||
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;}
|
||||
.mixin-source, .example-source {
|
||||
position: relative; @extend .fixed-font;
|
||||
.syntaxhighlighter {
|
||||
&.scss, &.sass, &.css { display: none; } } }
|
||||
.syntaxhighlighter, pre {
|
||||
&.scss, &.sass, &.css, &.haml, &.html { display: none; } } }
|
||||
|
||||
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.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; }
|
||||
|
||||
|
||||
@ -20,7 +20,6 @@ html.light #demo, html.dark #demo {
|
||||
section + section { float: right; }
|
||||
|
||||
.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;}
|
||||
|
||||
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 {
|
||||
position: relative;
|
||||
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 {
|
||||
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; }
|
||||
}
|
||||
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
body.tutorial #main-nav a[rel=help],
|
||||
body.reference #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; }
|
||||
|
||||
#search-docs input {
|
||||
@ -65,8 +66,8 @@
|
||||
#module-nav li.selected { @extend .selected-marker-#{$theme};
|
||||
a { color: $module-nav-selected; } }
|
||||
|
||||
a[rel=sass], a[rel=scss], a[rel=css] { @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}; }
|
||||
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], &.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); } }
|
||||
.mixin-source, .example-source { @extend .mixin-panel-#{$theme}; }
|
||||
|
||||
@ -1,21 +1,29 @@
|
||||
!!! Strict
|
||||
%html
|
||||
!!!5
|
||||
- # This template is just the stuff until the body tag.
|
||||
%html.no-js{:dir => "ltr", :lang => "en"}
|
||||
%head
|
||||
%title
|
||||
#{@item[:title]} - Compass
|
||||
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||
%meta{:charset => "utf-8"}/
|
||||
%meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
|
||||
%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{ :href => "/stylesheets/legacy/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
|
||||
%script{:src => "/javascripts/jquery-1.3.2.min.js", :type => "text/javascript"}
|
||||
%body{body_attributes(@item)}
|
||||
#container
|
||||
#main
|
||||
= yield
|
||||
#sidebar
|
||||
= render "partials/sidebar", :default_stylesheet => "_compass.scss"
|
||||
#footer= render "partials/footer"
|
||||
%script(src="/javascripts/fixups.js" deferred)
|
||||
%title
|
||||
#{@item[:title]} | Compass Documentation
|
||||
%link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
|
||||
%script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript")
|
||||
%script(src="/javascripts/jquery.cookie.js" type="text/javascript")
|
||||
%script(src="/javascripts/site.js" type="text/javascript")
|
||||
%script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript")
|
||||
%body.default{body_attributes(@item)}
|
||||
#wrap
|
||||
= 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"
|
||||
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
|
||||
#how
|
||||
%section#markup
|
||||
-#.syntax_pref
|
||||
.syntax_pref
|
||||
%a{:href => "#", :rel => "html" } html
|
||||
%a{:href => "#", :rel => "haml" } haml
|
||||
.example-source
|
||||
%pre.source-code.html= h(example_html)
|
||||
-# %pre.source-code.haml= h(example_haml)
|
||||
%pre.source-code.haml= h(example_haml)
|
||||
%section#styles
|
||||
.syntax_pref
|
||||
%a{:href => "#", :rel => "scss" } scss
|
||||
|
||||
Loading…
Reference in New Issue
Block a user