Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

documentation improvements

  • Loading branch information...
commit 0e8df03055721182382c810669a2ecce7045b01e 1 parent 635ee37
tomhuda authored
View
30 config.rb
@@ -36,35 +36,15 @@ def initialize
def header(text, level)
@toc_count += 1
- return if level > 3
-
- result = @result
-
- if level > @current_level
- while level > @current_level
- result << "<ul>\n<li>\n"
- @current_level += 1
- end
- elsif level < @current_level
- result << "</li>\n"
-
- while level < @current_level
- result << "</ul>\n</li>\n"
- @current_level -= 1
- end
-
- result << "<li>\n"
- else
- result << "</li>\n<li>\n"
- end
-
- result << "<a href=\"#toc_#{@toc_count-1}\">#{text}</a>"
+ return "" if level > 3
+ link = "<a href=\"#toc_#{@toc_count-1}\">#{text}</a>"
+ @result << %Q{<li class="level-#{level}">#{link}</li>}
""
end
def postprocess(text)
- @result.join("")
+ "<ol>" + @result.join("") + "</ol>"
end
end
@@ -151,7 +131,7 @@ def block_code(code, language)
activate :directory_indexes
-page "documentation.html" do
+page "/doc*" do
@chapters = data.docs.chapters
end
View
10 source/docs/introduction.md
@@ -6,7 +6,7 @@ Ember is a JavaScript framework for creating ambitious web applications
that eliminates boilerplate and provides a standard application
architecture.
-### Eliminate Boilerplate
+#### Eliminate Boilerplate
There are some tasks that are common to every web application. For example,
taking data from the server, rendering it to the screen, then updating that
@@ -38,7 +38,7 @@ or age changes.
You specify your template once, and Ember.js makes sure it's always up to date.
-### Provides Architecture
+#### Provides Architecture
Since web applications evolved from web pages, which were nothing more than
static documents, browsers give you just enough rope to hang yourself with.
@@ -81,7 +81,7 @@ These are the three features that make Ember a joy to use:
2. Computed properties
3. Auto-updating templates
-### Bindings
+#### Bindings
Use bindings to keep properties between two different objects in sync. You just
declare a binding once, and Ember will make sure changes get propagated in either
@@ -108,7 +108,7 @@ MyApp.country.get('presidentName');
Bindings allow you to architect your application using the MVC (Model-View-Controller)
pattern, then rest easy knowing that data will always flow correctly from layer to layer.
-### Computed Properties
+#### Computed Properties
Computed properties allow you to treat a function like a property:
@@ -152,7 +152,7 @@ MyApp.president = Ember.Object.create({
Make sure you list these dependencies so Ember knows when to update bindings that connect
to a computed property.
-### Auto-updating Templates
+#### Auto-updating Templates
Ember uses Handlebars, a semantic templating library. To take data from your JavaScript application
and put it into the DOM, create a `<script>` tag and put it into your HTML, wherever you'd like the
View
3  source/documentation.html.erb
@@ -3,11 +3,10 @@ title: "Documentation"
---
<% content_for :sidebar do %>
- <h3>Table of Contents</h2>
<%= table_of_contents %>
<% end %>
-<% @chapters.each do |chapter| %>
+<% data.docs.chapters.each do |chapter| %>
<div class="chapter" id="<%= chapter %>">
<%= render :markdown, "docs/#{chapter}.md" %>
</div>
View
75 source/stylesheets/site.css.scss
@@ -132,42 +132,26 @@ body {
}
}
+$sidebar-width: $col_width * 4 + $col_spacing * 3;
+
#content {
width: $page_width;
&.has-sidebar {
- width: $content_width - $padding * 2;
+ margin-left: $sidebar-width + $col_spacing;
+ width: $page_width - $sidebar-width - $col_spacing;
}
}
#sidebar {
+ width: $sidebar-width;
+ margin-top: 43px;
position: absolute;
- width: $sidebar_width - $padding;
- margin-left: $content_width - $padding;
- text-align: left;
- color: #aaa;
-
- &:hover {
- color: #000;
-
- a {
- @include single-transition(color, 0.1s);
- color: #000;
- }
-
- }
-
- h3 {
- font-size: 15px;
- text-transform: uppercase;
- letter-spacing: 1px;
- line-height: 20px;
- }
+ font-family: "MavenProMedium";
+ font-size: 14px;
a {
- font-size: 16px;
text-decoration: none;
- color: #888;
line-height: 21px;
&:hover {
@@ -180,25 +164,38 @@ body {
}
}
- & > ul {
- margin: 0px;
-
- ul {
- margin-left: 15px;
- }
- }
-
- ul {
+ ol {
list-style-type: none;
- font-size: $extra_small_font;
+ border-left: 3px solid #e3dddb;
li {
- margin: 7px 0;
+ margin: 14px 0;
+ padding-left: 8px;
+ text-transform: uppercase;
+
+ &:first-of-type {
+ margin-top: 0;
+ }
+
+ &.level-3, &.level-4 {
+ text-transform: none;
+ padding-left: 20px;
+ margin: 3px 0;
+ }
+
+ &:hover {
+ border-left: 3px solid #491500;
+ margin-left: -3px;
+
+ a {
+ border-bottom: none;
+ color: #491500;
+ }
+ }
a {
- color: #aaa;
- font-size: $extra_small_font;
- @include single-transition(color, 0.4s);
+ display: block;
+ color: #e1563f;
}
}
}
@@ -351,7 +348,7 @@ body {
**/
.chapter {
- margin: 90px 0;
+ margin: 43px 0 90px 0;
$h3-indent: 32px;
$body-indent: $h3-indent + 24px;
Please sign in to comment.
Something went wrong with that request. Please try again.