Permalink
Browse files

Mega Website stuff

- fix guide landing page heading. (should be dynamic)
- WIP improve style/typography
- API's sidebar is now generated correctly.
- add pry for dev.
- ignore vim swapfiles
- General OCD and refactory (some unfactoring...)
  • Loading branch information...
1 parent d7091f2 commit d0efe49f20cc400fd23803b0f555085fecafdd25 @stefanpenner stefanpenner committed Jan 13, 2013
View
2 .gitignore
@@ -8,4 +8,4 @@ build/
source/examples
.mm-pid-*
/b
-
+*.swp
View
4 Gemfile
@@ -11,3 +11,7 @@ gem "thin"
gem "rack"
gem "listen"
gem "builder"
+
+group :development do
+ gem "pry"
+end
View
7 Gemfile.lock
@@ -40,6 +40,7 @@ GEM
rb-inotify (~> 0.8.8)
maruku (0.6.0)
syntax (>= 1.0.0)
+ method_source (0.8.1)
middleman (3.0.0)
middleman-core (= 3.0.0)
middleman-more (= 3.0.0)
@@ -81,6 +82,10 @@ GEM
padrino-helpers (0.10.7)
i18n (~> 0.6)
padrino-core (= 0.10.7)
+ pry (0.9.10)
+ coderay (~> 1.0.5)
+ method_source (~> 0.8)
+ slop (~> 3.3.1)
rack (1.4.1)
rack-protection (1.2.0)
rack
@@ -98,6 +103,7 @@ GEM
rack (~> 1.3, >= 1.3.6)
rack-protection (~> 1.2)
tilt (~> 1.3, >= 1.3.3)
+ slop (3.3.3)
sprockets (2.4.5)
hike (~> 1.2)
multi_json (~> 1.0)
@@ -130,6 +136,7 @@ DEPENDENCIES
listen
middleman (~> 3.0)
middleman-blog (~> 3.0)
+ pry
rack
rake
redcarpet
View
36 config.rb
@@ -1,12 +1,11 @@
-require "redcarpet"
-require "active_support/core_ext"
+require 'redcarpet'
+require 'active_support/core_ext'
-Dir["./lib/*"].each{|f| require f }
+Dir['./lib/*'].each { |f| require f }
# Debugging
set(:logging, ENV['RACK_ENV'] != 'production')
-
set :markdown_engine, :redcarpet
set :markdown, :layout_engine => :erb,
:fenced_code_blocks => true,
@@ -18,46 +17,41 @@
activate :highlighter
activate :api_docs,
- :default_class => "Ember",
- :repo_url => "https://github.com/emberjs/ember.js"
-
+ default_class: 'Ember',
+ repo_url: 'https://github.com/emberjs/ember.js'
###
# Blog
###
activate :blog do |blog|
- blog.prefix = "blog"
- blog.layout = "blog_layout"
+ blog.prefix = 'blog'
+ blog.layout = 'layouts/blog'
blog.summary_separator = %r{(<p>READMORE</p>)} # Markdown adds the <p>
end
-page "/blog/feed.xml", :layout => false
-
+page '/blog/feed.xml', layout: false
###
# Pages
###
-page 'guides*', :layout => :guide do
+page 'guides*', layout: :guide do
@guides = data.guides
end
-page "community.html"
+page 'community.html'
-page "index.html", :proxy => "about.html"
-
-page "404.html", :directory_index => false
+page 'index.html', proxy: 'about.html'
+page '404.html', directory_index: false
# Don't build layouts standalone
-ignore "*_layout.erb"
+ignore '*_layout.erb'
# Don't build API layouts
-ignore "api/class.html.erb"
-ignore "api/module.html.erb"
-
-
+ignore 'api/class.html.erb'
+ignore 'api/module.html.erb'
###
# Helpers
View
4 data/guides.yml
@@ -1,3 +1,7 @@
+"Ember.js Guides":
+ - title: 'Ember.js Guides'
+ url: 'index.html'
+ skip_sidebar: true
Getting Started with Ember.js:
- title: "Core Concepts"
url: "getting-started/core-concepts"
View
110 lib/api_docs.rb
@@ -14,24 +14,24 @@ def registered(app, options={})
app.after_configuration do
ApiClass.data = data.api
- page "/api*", :directory_index => false, :layout => "api_layout"
+ page '/api*', directory_index: false, layout: 'layouts/api'
- data.api['classes'].each do |name, data|
- page "/api/classes/#{name}.html", :proxy => "api/class.html", :layout => "api_layout" do
+ data.api.fetch('classes').each do |name, data|
+ page "/api/classes/#{name}.html", proxy: 'api/class.html', layout: 'layouts/api' do
@title = name
@class = ApiClass.find(name)
end
if name == options[:default_class]
- page "/api/index.html", :proxy => "api/class.html", :layout => "api_layout" do
+ page '/api/index.html', proxy: 'api/class.html', layout: 'layouts/api' do
@title = name
@class = ApiClass.find(name)
end
end
end
- data.api['modules'].each do |name, data|
- page "/api/modules/#{name}.html", :proxy => "api/module.html", :layout => "api_layout" do
+ data.api.fetch('modules').each do |name, data|
+ page "/api/modules/#{name}.html", proxy: 'api/module.html', layout: 'layouts/api' do
@title = name
@module = data
end
@@ -146,6 +146,104 @@ def method_missing(method, *args)
end
module Helpers
+ def current?(key)
+ request_key = _request_as_key
+
+ category_match = request_key[:category] == key[:category]
+ name_match = request_key[:name] == key[:name]
+
+ if key[:name].present?
+ category_match and name_match
+ else
+ category_match
+ end
+ end
+
+ def _file_to_category(file)
+ lookup ||= begin
+ obj = {}
+
+ api_modules.map(&:first).each_with_object(obj) do |file, hash|
+ hash[file] = :modules
+ end
+
+ api_classes.map(&:first).each_with_object(obj) do |file, hash|
+ hash[file] = :classes
+ end
+
+ api_namespaces.map(&:first).each_with_object(obj) do |file, hash|
+ hash[file] = :namespaces
+ end
+ end
+
+ lookup[file]
+ end
+
+
+ def _request_as_key
+ path = request.path.split('/')
+ file = File.basename(path.pop, '.html')
+
+ category = _file_to_category(file)
+
+ {
+ name: file,
+ category: category
+ }
+ end
+
+ def _level
+ @level ||= 0
+ @level += 1
+ yield(@level)
+ @level -= 1
+ end
+
+ def li_for(category, options = {}, &block)
+ class_name = options[:class]
+ key = {
+ category: category,
+ name: options[:name]
+ }
+
+ _level do |level|
+ concat(%Q{
+ <li class="level-#{level} #{selected_class(key, class_name)}">
+ #{capture(&block)}
+ </li>
+ })
+ end
+ end
+
+ def ol_for(category, options = {}, &block)
+ class_name = options[:class]
+
+ key = {
+ category: category,
+ name: options[:name]
+ }
+
+ _level do |level|
+ concat(%Q{
+ <ol class="#{selected_class(key, class_name)}">
+ #{capture(&block)}
+ </ol>
+ })
+ end
+ end
+
+ def selected_class(key, class_name = nil)
+ class_name || 'selected' if current?(key)
+ end
+
+ def sha
+ data.api.fetch('project')['sha']
+ end
+
+ def sha_url
+ "#{APIDocs.repo_url}/commit/#{sha}"
+ end
+
def api_modules
data.api['modules'].sort
end
View
0 lib/index.rb
No changes.
View
96 lib/toc.rb
@@ -1,4 +1,4 @@
-require "redcarpet"
+require 'redcarpet'
module TOC
class << self
@@ -8,50 +8,36 @@ def registered(app)
alias :included :registered
end
- class TableOfContents < Redcarpet::Render::Base
- def self.anchorify(text)
- text.gsub(/&#?\w+;/, '-').gsub(/\W+/, '-').gsub(/^-|-$/, '').downcase
- end
-
- def initialize
- @current_level = 0
- @toc_count = 0
- @result = []
- super
- end
-
- def header(text, level)
- @toc_count += 1
-
- return "" if level > 3
- link = "<a href=\"#toc_#{TableOfContents.anchorify(text)}\">#{text}</a>"
- @result << %Q{<li class="level-#{level}">#{link}</li>}
+ module TableOfContents
+ extend self
- ""
- end
-
- def postprocess(text)
- "<ol>" + @result.join("") + "</ol>"
+ def anchorify(text)
+ text.gsub(/&#?\w+;/, '-').gsub(/\W+/, '-').gsub(/^-|-$/, '').downcase
end
end
module Helpers
- def guides_index
- guides = data.guides
+ def index_for(data)
+ result = '<ol id="toc-list">'
- result = '<ol id="guide_list">'
- guides.each_entry do |section, entries|
+ data.each_entry do |section, entries|
+ next if entries.any? do |entry|
+ entry[:skip_sidebar]
+ end
- current_url = request.path.split("/")[2]
- sub_url = request.path.split("/")[3]
- intro_page = sub_url == "index.html"
+ current_url = request.path.split('/')[2]
+ sub_url = request.path.split('/')[3]
+ intro_page = sub_url == 'index.html'
sub_url = nil if intro_page
chapter = entries[0].url.split("/")[0]
current = (chapter == current_url)
- result += %Q{<li class="level-1#{current ? ' selected' : ''}"><a href="/guides/#{entries[0].url}">#{section}</a>}
- result += %Q{<ol#{current ? " class='selected'" : ''}>}
+ result << %Q{
+ <li class="level-1#{current ? ' selected' : ''}">
+ <a href="/guides/#{entries[0].url}">#{section}</a>
+ <ol#{current ? " class='selected'" : ''}>
+ }
entries.each do |entry|
current_segment = entry.url.split("/")[1]
@@ -64,19 +50,29 @@ def guides_index
false
end
- result += %Q{<li class="level-3#{sub_current ? ' sub-selected' : ''}"><a href="/guides/#{entry.url}">#{entry.title}</a></li>}
+ result << %Q{
+ <li class="level-3#{sub_current ? ' sub-selected' : ''}">
+ <a href="/guides/#{entry.url}">#{entry.title}</a>
+ </li>
+ }
end
- result += '</ol></li>'
+
+ result << '</ol></li>'
end
- result += '</ol>'
+
+ result << '</ol>'
+
+ result
end
def chapter_name
guides = data.guides
- heading = ""
+ sub_url = request.path.split('/')[2]
+ heading = ''
+
guides.each_entry do |section, entries|
- if entries[0].url.split("/")[0] == request.path.split("/")[2]
+ if entries[0].url.split('/')[0] == sub_url
heading = section
break
end
@@ -87,7 +83,7 @@ def chapter_name
def chapter_heading
name = chapter_name.strip
return if name.blank?
- %Q{<h1> #{name} </h1>}
+ %Q{<h1>#{name}</h1>}
end
def section_slug
@@ -100,7 +96,7 @@ def guide_slug
def current_section
data.guides.find do |section, entries|
- entries[0].url.split("/")[0] == section_slug
+ entries[0].url.split('/')[0] == section_slug
end
end
@@ -161,26 +157,6 @@ def next_chapter
nil
end
end
-
- def table_of_contents
- chapters = data.documentation.chapters
- chapters = chapters.collect_concat do |file|
- File.read("source/documentation/#{file}.md")+"\n"
- end
-
- toc = TableOfContents.new()
- markdown = Redcarpet::Markdown.new(toc, fenced_code_blocks: true)
- markdown.render(chapters.join(''))
- end
-
- def table_of_contents_for(file)
- document = File.read("source/#{file}")
-
- toc = TableOfContents.new()
- markdown = Redcarpet::Markdown.new(toc, fenced_code_blocks: true)
-
- markdown.render(document)
- end
end
end
View
29 source/api/_item.html.erb
@@ -41,7 +41,6 @@
<% end %>
<div class="meta">
- <p>
<% if item['overwritten_from'] %>
Inherited from
<%= api_class_link item['overwritten_from']['class'], "method_#{item['overwritten_from']['name']}" %>
@@ -59,12 +58,11 @@
<% end %>
<% end %>
<%= api_file_link item %>
- </p>
<%# TODO: Handle deprecation message %>
<% if item['since'] %>
- <p>Available since <%= item['since'] %></p>
+ <br/>Available since <%= item['since'] %>
<% end %>
</div>
@@ -74,9 +72,11 @@
</div>
<% end %>
- <% if item['default'] %>
- <p><strong>Default:</strong> <%= item['default'] %></p>
- <% end %>
+ <p>
+ <% if item['default'] %>
+ <strong>Default:</strong> <code><%= item['default'] %></code>
+ <% end %>
+ </p>
<% if item['example'] %>
<div class="example">
@@ -94,23 +94,22 @@
<div class="params">
<h3>Parameters:</h3>
- <ul>
+ <dl>
<% item['params'].each do |param| %>
- <li>
- <strong><%= param['name'] %></strong> <%= param['type'] %><br>
- <%= param['description'] %>
- </li>
+ <dt><strong><%= param['name'] %></strong> <span class="type"><%= param['type'] %></span></dt>
+ <dd><%= param['description'] %></dd>
<% end %>
- </ul>
+ </dl>
</div>
<% end %>
<% if item['return'] %>
<div class="return">
<h3>Returns:</h3>
-
- <%= item['return']['type'] %>: <%= item['return']['description'] %>
+ <dl>
+ <dt><span class="type"><%= item['return']['type'] %></span>
+ <dd> <%= item['return']['description'] %></dd>
+ </dl>
</div>
<% end %>
-
</div>
View
2 source/api/class.html.erb
@@ -45,7 +45,7 @@
<div class="pane" id="index">
<% types.each do |type| %>
- <h2><%= type.pluralize.titleize %></h2>
+ <p><h2><%= type.pluralize.titleize %></h2></p>
<ul class="index-list">
<% @class.classitems[type].sort.each do |(name, data)| %>
<li class="<%= type %> <%= api_classes_for_item(data) %>">
View
2 source/guides/index.md
@@ -1,5 +1,3 @@
-# Ember.js Guides
-
Welcome to the Ember.js guides! This documentation will take you from
total beginner to Ember expert. It is designed to start from the most
basic concepts, and slowly increase to more sophisticated concepts until
View
101 source/api_layout.erb → source/layouts/api.erb
@@ -72,63 +72,92 @@
$(window).on('hashchange', checkHash);
checkHash();
});
+ $(function(){
+ $("#toc-list .level-1 > a").click(function() {
+ $(this).parent().find('> ol').slideToggle(function() {
+ positionBackToTop(true);
+ });
+
+ return false;
+ });
+
+ $(function(){
+ $('.anchorable-toc').each(function(){
+ var toc = $(this),
+ id = toc.attr('id'),
+ href = "#" + id,
+ anchor = '<a class="toc-anchor" href="'+href+'"></a>';
+
+ toc.prepend(anchor);
+ });
+ });
+
+ });
</script>
<% end %>
<% content_for :sidebar do %>
- <h3>SHA: <%= link_to data.api['project']['sha'], "#{APIDocs.repo_url}/commit/#{data.api['project']['sha']}" %></h3>
-
- <h2>Modules</h2>
- <ul>
- <% api_modules.each do |id, data| %>
- <li>
- <%= api_module_link data['name'] %>
- <%= api_file_link data, title: 'github', target: '_blank' %>
- </li>
- <% end %>
- </ul>
-
- <h2>Namespaces</h2>
- <ul>
- <% api_namespaces.each do |id, data| %>
- <li class="<%= api_classes_for_namespace data %>">
- <%= api_namespace_link data['name'] %>
- <%= api_file_link data, title: 'github', target: '_blank' %>
- </li>
- <% end %>
- </ul>
-
- <h2>Classes</h2>
- <ul>
- <% api_classes.each do |id, data| %>
- <li class="<%= api_classes_for_class data %>">
- <%= api_class_link data['name'] %>
- <%= api_file_link data, title: 'github', target: '_blank' %>
- </li>
- <% end %>
- </ul>
+ <h3>SHA: <%= link_to sha, sha_url %></h3>
+
+ <ol id='toc-list'>
+
+ <% li_for(:modules) do %>
+ <a href='#'>Modules</a>
+ <% ol_for(:modules) do %>
+ <% api_modules.each do |id, data| %>
+ <% li_for(:modules, name: data['name'], class: 'sub-selected') do %>
+ <%= api_module_link data['name'] %>
+ <%= api_file_link data, title: 'github', target: '_blank' %>
+ <% end %>
+ <% end %>
+ <% end %>
+ <% end %>
+
+ <% li_for(:namespaces) do %>
+ <a href='#'>Namespaces</a>
+ <% ol_for(:namespaces) do %>
+ <% api_namespaces.each do |id, data| %>
+ <% li_for(:namespaces, name: data['name'], class: 'sub-selected') do %>
+ <%= api_namespace_link data['name'] %>
+ <%= api_file_link data, title: 'github', target: '_blank' %>
+ <% end %>
+ <% end %>
+ <% end %>
+ <% end %>
+
+ <% li_for(:classes) do %>
+ <a href='#'>Classes</a>
+ <% ol_for(:classes) do %>
+ <% api_classes.each do |id, data| %>
+ <% li_for(:classes, name:data['name'], class: 'sub-selected') do %>
+ <%= api_class_link data['name'] %>
+ <%= api_file_link data, title: 'github', target: '_blank' %>
+ <% end %>
+ <% end %>
+ <% end %>
+ <% end %>
<% end %>
- <div id="api-options">
+ <div id='api-options'>
Show:
<label>
- <input type="checkbox" data-type="inherited" checked>
+ <input type='checkbox' data-type='inherited' checked>
Inherited
</label>
<label>
- <input type="checkbox" data-type="protected">
+ <input type='checkbox' data-type='protected'>
Protected
</label>
<label>
- <input type="checkbox" data-type="private">
+ <input type='checkbox' data-type='private'>
Private
</label>
<label>
- <input type="checkbox" data-type="deprecated">
+ <input type='checkbox' data-type='deprecated'>
Deprecated
</label>
</div>
View
0 source/blog_layout.erb → source/layouts/blog.erb
File renamed without changes.
View
15 source/layouts/guide.erb
@@ -1,16 +1,11 @@
<%
@title = chapter_name
-@title = "Guides" if chapter_name.blank?
+@title = 'Guides' if chapter_name.blank?
%>
-<% wrap_layout :layout do %>
- <% content_for :sidebar do %>
- <%#<div id="guide_search">%>
- <%#[> TODO: search form here <]%>
- <%#<label><input placeholder="search ember docs..."></label>%>
- <%#<button></button>%>
- <%#</div>%>
- <%= guides_index %>
+<% wrap_layout(:layout) do %>
+ <% content_for(:sidebar) do %>
+ <%= index_for(data.guides) %>
<% end %>
<div class="chapter">
@@ -21,7 +16,7 @@
<script>
$(function(){
- $("#guide_list .level-1 > a").click(function() {
+ $("#toc-list .level-1 > a").click(function() {
$(this).parent().find('> ol').slideToggle(function() {
positionBackToTop(true);
});
View
2 source/stylesheets/highlight.css.scss
@@ -13,7 +13,7 @@ $green: #007700;
font-size: 12px;
font-family: Menlo, monospace;
line-height: 16px;
- margin-bottom: 22px;
+ margin-bottom: 25px;
overflow: hidden;
position: relative;
@include box-shadow(0 1px #fff, inset -1px 1px 4px rgba(0,0,0,0.1));
View
761 source/stylesheets/site.css.scss
@@ -22,24 +22,30 @@ body {
background: url(/images/background-shades.png) no-repeat top center #faf4f1;
margin: 60px 0 0 0;
padding: 0;
- font-family: Lato, Arial, sans-serif;
- line-height: 23px;
- font-size: 13px;
- line-height: 20px;
- min-width: $page-width;
+ font-family: Helvetica neue;
+ font-size: 14px;
+ line-height: 1.4em;
+ color: #444444;
+ font-weight: 200;
}
* {
@include box-sizing(border-box);
}
+// Typography
+
a {
- color: $orange-color;
+ color: #f23818;
text-decoration: none;
}
+a:hover {
+ border-bottom: 1px dotted #f23818;
+}
+
p {
- margin: 24px 0;
+ margin: 1.5em 0;
}
em {
@@ -55,12 +61,37 @@ code {
@include border-radius(5px);
}
+h1,h2,h3,h4,h5,h6 {
+ text-transform: uppercase;
+ font-family: "MavenProBold";
+}
+
h1 {
font-size: 32px;
- margin-bottom: 32px;
line-height: 40px;
}
+h2 {
+ font-size: 22px;
+}
+
+h2,h3{
+ font-family: "MavenProBold";
+ color: $black-color;
+}
+
+h3 {
+ font-size: 18px;
+}
+
+h4 {
+ font-size: 12px;
+ line-height: 18px;
+ color: $orange-color;
+ letter-spacing: 1px;
+ margin: 24px 0 12px 0;
+}
+
strong {
font-weight: bold;
}
@@ -72,29 +103,241 @@ hr {
background-color: $black-color;
}
+ul {
+ list-style-type: none;
+}
+
+ol {
+ list-style-type: decimal;
+}
+// Structure
+
+.section {
+ margin: 0 auto;
+ width: 960px;
+}
+
+// components
/**
Tabs
**/
.tabs {
+ border: 1px solid #e0e0e0;
+ border-radius: 5px;
+ -o-border-radius: 5px;
+ -ms-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+
> ul {
list-style: none;
overflow: hidden; // Clearfix
+ display: table;
+ width: 100%;
li {
- display: block;
- float: left;
- padding-right: 10px;
- margin-right: 10px;
- border-right: solid 1px gray;
+ display: table-cell;
+ a {
+ display: block;
+ border-top: solid 1px rgb(250, 250, 250);
+ border-right: solid 1px #e6e4e3;
+ background-color: #f3f3f3;
+ background-image: linear-gradient( #f3f3f3, #ebebeb);
+ background-image: -o-linear-gradient( #f3f3f3, #ebebeb);
+ background-image: -moz-linear-gradient( #f3f3f3, #ebebeb);
+ background-image: -ms-linear-gradient( #f3f3f3, #ebebeb);
+ background-image: -webkit-linear-gradient( #f3f3f3, #ebebeb);
+ padding: 0.5em 1em;
+ text-align: center;
+ text-transform: uppercase;
+ font-weight: normal;
+ color: #443331;
+ font-family: helvetica neue;
+
+ &:hover {
+ background-color: #ebebeb;
+ background-image: linear-gradient( #ebebeb, #f3f3f3);
+ background-image: -o-linear-gradient( #ebebeb, #f3f3f3);
+ background-image: -moz-linear-gradient( #ebebeb, #f3f3f3);
+ background-image: -ms-linear-gradient( #ebebeb, #f3f3f3);
+ background-image: -webkit-linear-gradient( #ebebeb, #f3f3f3);
+ color: black;
+ border-bottom: none;
+ }
+
+ }
}
- border-bottom: solid 1px gray;
+ border-bottom: solid 1px #e6e4e3;
margin-bottom: 20px;
}
+ .pane {
+ margin: 2em 1.5em;
+ }
}
/**
+ Sidebar
+**/
+
+#sidebar {
+ margin-top: 29px;
+ width: 218px;
+ min-height: 475px;
+ margin-bottom: 28px;
+ padding-bottom: 120px;
+ background: #f4ece9;
+ border-left: 1px solid #d4ccc8;
+ border-right: 1px solid #d4ccc8;
+ position: relative;
+
+ ol#toc-list {
+ background: #f9e7e4;
+ li {
+ font-size: 12px;
+ list-style: none;
+ margin: 0px;
+ padding: 0px;
+
+ p {
+ padding-left: 7px;
+ }
+
+ a {
+ padding: 0 0 0 1em;
+ line-height: 1.2em;
+ }
+
+ > ol {
+ display: none;
+ margin: 10px 0;
+
+ &.selected {
+ display: block;
+ }
+
+ li.sub-selected {
+ background-color: #fcc;
+ }
+
+ li {
+ a.api-file-link {
+ display: none;
+ color: #717171;
+ font-size: 11px;
+ margin: 0;
+ padding: 0 0 0 0.5em;
+ &:hover {
+ color: black;
+ }
+ }
+
+ &:hover a.api-file-link{
+ display: inline-block;
+ }
+ }
+ }
+
+ &.level-1 {
+ text-transform: uppercase;
+
+ > a {
+ color: #443331;
+ outline: 1px solid #d5ccc8;
+ padding: 12px 12px 10px 12px;
+ margin-top: 1px;
+ background-color: rgb(244, 236, 233);
+ }
+
+ &.selected > a {
+ background-color: #f16f58;
+ background-image: -webkit-linear-gradient(-90deg, #f67862, #e7624b);
+ outline: 1px solid #b23e2a;
+ color: white;
+ border-top: 1px solid rgba(255,255,255,0.4);
+ }
+
+ &:last-of-type ol {
+ border-bottom: 1px solid #d5ccc8;
+ }
+ }
+
+ &.level-2, &.level-3 {
+ padding: 3px 0 3px 0;
+
+ a {
+ display: inline;
+ text-transform: none;
+ color: #d84a32;
+ font-weight: normal;
+ font-size: 12px;
+ }
+ &.sub-selected {
+ // fancy me up.
+ }
+ }
+ }
+ }
+
+ &:after {
+ @include background-image(linear-gradient(rgba(250, 244, 241, 0), rgba(251, 245, 241, 1)));
+ position: absolute;
+ bottom: 0px;
+ left: -2px;
+ right: 0;
+ width: 220px;
+ height: 120px;
+ content: '';
+ }
+}
+
+#guide_search {
+ background-color: #fbf8f7;
+ border: 1px solid #ccc;
+ position: relative;
+ color: #423432;
+ display: block;
+ width: 100%;
+ height: 40px;
+
+ label {
+ padding: 0px 0px 5px 15px;
+ padding-right: 10px;
+ margin-left: 10px;
+ background: no-repeat url(/images/search-icon.png);
+ }
+
+ border: 0;
+ input::-webkit-input-placeholder { font-style: italic; }
+ input:-moz-placeholder { font-style: italic; }
+ input::-moz-placeholder { font-style: italic; }
+
+ input {
+ background: none;
+ font-size: 12px;
+ border: 0px;
+ padding: 5px 0px 5px 5px;
+ height: 100%;
+ width: 165px;
+ outline: none;
+ font-style: normal;
+ }
+
+ button {
+ background: no-repeat url(/images/search-erase.png);
+ width: 14px;
+ border: 0px;
+ height: 14px;
+ position: absolute;
+ cursor: pointer;
+ right: 10px;
+ top: 15px;
+ }
+}
+// pages
+
+/**
Header
**/
#header {
@@ -222,7 +465,7 @@ hr {
#content-wrapper {
@include clearfix;
- width: $page-width;
+ width: 960px;
margin: 0 auto 40px auto;
padding: 20px 0px;
position: relative;
@@ -237,15 +480,11 @@ $sidebar-width: $col-width * 4 + $col-spacing * 3;
$content-width: $page-width - $sidebar-width - $col-spacing * 2;
#content {
- width: $page-width;
-
&.has-sidebar {
- margin-left: $sidebar-width + $col-spacing * 2;
+ margin-left: 1.5em;
+ margin-top: 15px;
width: $content-width;
- }
-
- & > h1:first-child {
- margin-top: 43px;
+ float: left;
}
}
@@ -266,7 +505,7 @@ $content-width: $page-width - $sidebar-width - $col-spacing * 2;
text-decoration: none;
line-height: 21px;
border-bottom: none;
- color: $orange-color;
+ color: #d84a32;
&:hover {
color: $black-color;
@@ -314,8 +553,6 @@ $content-width: $page-width - $sidebar-width - $col-spacing * 2;
}
h2 {
- font-family: "MavenProBold";
- color: $black-color;
margin-bottom: 10px;
}
@@ -325,22 +562,6 @@ $content-width: $page-width - $sidebar-width - $col-spacing * 2;
text-transform: none;
margin: 2px 0;
}
-
- li {
-
- a.api-file-link {
- display: none;
- color: #717171;
- font-size: 11px;
- &:hover {
- color: black;
- }
- }
-
- &:hover a.api-file-link{
- display: inline-block;
- }
- }
}
/**
@@ -383,25 +604,15 @@ $content-width: $page-width - $sidebar-width - $col-spacing * 2;
}
.section {
- margin: 60px 0;
+ margin-top: 60px;
overflow: hidden;
h2 {
width: 100%;
text-align: center;
- font-size: 18px;
- color: $black-color;
- text-transform: uppercase;
- font-family: "MavenProBold";
margin-bottom: 28px;
}
- h3 {
- font-size: 14px;
- text-transform: uppercase;
- font-family: "MavenProBold";
- }
-
table.columns {
margin: 0 auto;
@@ -450,7 +661,6 @@ $content-width: $page-width - $sidebar-width - $col-spacing * 2;
}
.users.section {
-
.surround {
@include border-radius(3px);
@include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1), 0 1px 0 #fff);
@@ -648,78 +858,43 @@ $content-width: $page-width - $sidebar-width - $col-spacing * 2;
}
}
+
/**
- Documentation Page
+ Guides Page
**/
-.chapter {
- margin: 23px 0 90px 0;
-
- $h3-indent: 32px;
- $body-indent: $h3-indent;
-
- h1 {
- font-family: "MavenProBold";
- font-size: 22px;
- text-transform: uppercase;
- color: $orange-color;
- padding: 0px 0px 15px 25px;
- background: no-repeat url(/images/chapter-mark.png) 0px 7px;
- border-bottom: 1px solid #dfd7d4;
- }
-
- h2 {
- width: 100%;
- font-size: 22px;
- color: $black-color;
- font-family: "MavenProBold";
- }
-
- h3 {
- font-family: "MavenProBold";
- font-size: 18px;
- color: $black-color;
- margin: 30px 0;
- }
+.guides {
+ .chapter {
+ margin: 23px 0 90px 0;
- h4 {
- font-family: "MavenProBold";
- font-size: 12px;
- color: $orange-color;
- text-transform: uppercase;
- letter-spacing: 1px;
- margin: 24px 0 12px 0;
- line-height: 18px;
- }
+ $h3-indent: 32px;
+ $body-indent: $h3-indent;
- p {
- color: #222;
- font-size: 15px;
- line-height: 22px;
- }
+ h1 {
+ font-size: 22px;
+ color: $orange-color;
+ padding: 0px 0px 1em 2em;
+ margin-bottom: 1.5em;
+ background: no-repeat url(/images/chapter-mark.png) 0px 7px;
+ border-bottom: 1px solid #dfd7d4;
+ }
- ul, ol {
- margin-left: $body-indent;
- list-style-type: disc;
- margin-bottom: 28px;
+ ul, ol {
+ margin-left: $body-indent;
+ list-style-type: disc;
+ margin-bottom: 28px;
- li {
- font-size: 15px;
- margin: 10px 0 10px 0;
+ li {
+ font-size: 15px;
+ margin: 10px 0 10px 0;
- p {
- padding-left: 7px;
+ p {
+ padding-left: 7px;
+ }
}
}
}
-}
-
-
-/**
- Guides Page
-**/
-.guides {
#content-wrapper {
padding: 0px 0px 20px 0px;
}
@@ -741,146 +916,10 @@ $content-width: $page-width - $sidebar-width - $col-spacing * 2;
height: 13px;
background: url(/images/link.png) no-repeat;
background-size: 18px 9px;
- left: -21px;
+ left: -19px;
margin-top: 5px;
}
- #sidebar {
- margin-top: 29px;
- width: 218px;
- margin-bottom: 28px;
- padding-bottom: 120px;
- background: #f4ece9;
- border-left: 1px solid #d4ccc8;
- border-right: 1px solid #d4ccc8;
- position: relative;
-
- ol#guide_list {
- li {
- font-size: 12px;
- list-style: none;
- margin: 0px;
- padding: 0px;
- background-color: #f9e7e4;
-
- p {
- padding-left: 7px;
- }
-
- a {
- padding: 0 10px;
- line-height: 1.2em;
- }
-
- > ol {
- display: none;
- margin: 10px 0;
-
- &.selected {
- display: block;
- }
-
- li.sub-selected {
- background-color: #fcc;
- }
- }
-
- &.level-1 {
- text-transform: uppercase;
-
- > a {
- color: #443331;
- outline: 1px solid #d5ccc8;
- padding: 12px 12px 10px 12px;
- margin-top: 1px;
- background-color: rgb(244, 236, 233);
- }
-
- &.selected > a {
- background-color: #f16f58;
- background-image: -webkit-linear-gradient(-90deg, #f67862, #e7624b);
- outline: 1px solid #b23e2a;
- color: white;
- border-top: 1px solid rgba(255,255,255,0.4);
- }
-
- &:last-of-type ol {
- border-bottom: 1px solid #d5ccc8;
- }
- }
-
- &.level-2, &.level-3 {
- padding: 5px 0 4px 0;
-
- a {
- text-transform: none;
- color: #d84a32;
- font-weight: normal;
- font-size: 12px;
- }
- &.sub-selected {
- // fancy me up.
- }
- }
- }
- }
-
- &:after {
- @include background-image(linear-gradient(rgba(250, 244, 241, 0), rgba(251, 245, 241, 1)));
- position: absolute;
- bottom: 0px;
- left: -2px;
- right: 0;
- width: 220px;
- height: 120px;
- content: '';
- }
- }
-
- #guide_search {
- background-color: #fbf8f7;
- border: 1px solid #ccc;
- position: relative;
- color: #423432;
- display: block;
- width: 100%;
- height: 40px;
-
- label {
- padding: 0px 0px 5px 15px;
- padding-right: 10px;
- margin-left: 10px;
- background: no-repeat url(/images/search-icon.png);
- }
-
- border: 0;
- input::-webkit-input-placeholder { font-style: italic; }
- input:-moz-placeholder { font-style: italic; }
- input::-moz-placeholder { font-style: italic; }
-
- input {
- background: none;
- font-size: 12px;
- border: 0px;
- padding: 5px 0px 5px 5px;
- height: 100%;
- width: 165px;
- outline: none;
- font-style: normal;
- }
-
- button {
- background: no-repeat url(/images/search-erase.png);
- width: 14px;
- border: 0px;
- height: 14px;
- position: absolute;
- cursor: pointer;
- right: 10px;
- top: 15px;
- }
- }
-
table {
width: 100%;
@@ -912,7 +951,7 @@ $content-width: $page-width - $sidebar-width - $col-spacing * 2;
**/
article {
- margin: 43px 0 90px 0;
+ margin: 3em 0;
$h3-indent: 0;
$body-indent: $h3-indent;
@@ -932,6 +971,10 @@ article {
/*max-width: $content-width;*/
}
+ ul, ol {
+ margin-left: 1.5em;
+ }
+
table.figure {
float: left;
margin-bottom: 20px;
@@ -958,62 +1001,6 @@ article {
}
}
- h2 {
- margin: 50px 0 0 0;
- width: 100%;
- font-size: 24px;
- color: $black-color;
- text-transform: uppercase;
- font-family: "MavenProBold";
- }
-
- :not(h2) + h3 {
- margin-top: 50px;
- }
-
- h3 {
- font-size: 16px;
- font-weight: bold;
- margin: 30px 0;
- text-transform: uppercase;
- padding-left: $h3-indent;
- }
-
- h4 {
- font-size: 16px;
- padding-left: $body-indent;
- margin: 24px 0;
- line-height: 23px;
- }
-
- p {
- color: #222;
- padding-left: $body-indent;
- font-size: 15px;
- line-height: 23px;
- }
-
- .highlight {
- margin-left: $body-indent;
- }
-
- ul, ol {
- margin-left: $body-indent;
- margin-bottom: 28px;
-
- li {
- font-size: 15px;
- margin: 10px 0 10px $body-indent+20px;
- }
- }
-
- ul {
- list-style-type: disc;
- }
-
- ol {
- list-style-type: decimal;
- }
}
@@ -1022,29 +1009,18 @@ article {
**/
body.community #content {
- width: 700px;
margin: 0 auto;
+ width: 54em;;
h1, h1:first-child {
margin-top: 0;
color: $orange-color;
- text-transform: uppercase;
- font-size: 22px;
- font-weight: bold;
border-bottom: solid 1px #d0d0d0;
padding-bottom: 20px;
}
- h2 {
- margin-bottom: 20px;
- text-align: left;
- }
-
.section {
- margin: 40px 0 50px;
- font-size: 15px;
- text-align: left;
-
+ width: auto;
img {
float: left;
margin: 0 20px 15px 0;
@@ -1054,20 +1030,6 @@ body.community #content {
float: right;
margin: 0 0 15px 20px;
}
-
- p {
- margin: 15px 0;
- }
- }
-
- ul.blogs {
- li {
- margin-bottom: 10px;
-
- a {
- font-weight: bold;
- }
- }
}
}
@@ -1217,85 +1179,96 @@ body.community #content {
**/
body.api {
- #sidebar {
- h3 {
- font-weight: bold;
- margin: 0 0 20px;
- }
-
- h2 {
- margin: 10px 0;
- }
-
- ul {
- li {
- font-family: "MavenProBold";
- }
+ h3 {
+ &.name {
+ text-transform: none;
+ float: left;
+ margin-right: 5px;
}
}
+ .meta {
+ line-height: 16px;
+ font-size: 11px;
+ clear: left;
+ }
- #content {
- position: relative;
- padding-top: 43px;
+ .args {
+ font-style: italic;
+ color: #444444;
+ }
- #api-options {
- position: absolute;
- top: 0;
- right: 0;
+ .method h3{
+ text-transform: none;
+ }
+ dl {
+ margin: 1em 0 1em 1em;
+ dt {
}
- h2 {
- font-size: 18px;
- font-weight: bold;
- margin: 10px 0;
+ dd {
+ margin: 0em 0 0.5em 0;
}
+ }
- h3 {
- font-size: 16px;
- }
+ .type {
+ border-bottom: 1px dotted #afafaf;
+ font-size: 13px;
+ color: gray;
+ }
- .class-info {
- margin-bottom: 50px;
+ #api-options {
+ position: absolute;
+ top: 0;
+ right: 0;
+ }
- p {
- margin: 0;
+ .class-info {
+ p {
+ margin: 0;
+ text-transform: uppercase;
+ a {
+ text-transform: none;
}
}
+ }
- .description {
- margin: 50px 0;
+ .description {
+ p {
+ font-family: Helvetica neue;
+ font-weight: 200;
}
+ }
- ul.index-list {
- overflow: hidden; // Clearfix
+ ul.index-list {
+ margin-left: 1.5em;
+ overflow: hidden; // Clearfix
- li {
- float: left;
- width: 160px;
- padding-right: 10px;
- display: block;
- overflow: hidden;
- @include ellipsis;
- }
+ li {
+ float: left;
+ width: 300px;
+ padding-right: 1em;
+ display: block;
+ overflow: hidden;
+ @include ellipsis;
}
+ }
- div.method, div.property, div.event {
- padding-bottom: 15px;
- border-bottom: solid 1px gray;
- margin-bottom: 30px;
- }
+ div.method, div.property, div.event {
+ padding-bottom: 1em;
+ border-bottom: solid 1px #e0e0e0;
+ margin-bottom: 2em;
+ }
- h3.name code {
- background-color: transparent;
- color: black;
- padding: 0;
- font-weight: bold;
- }
+ h3.name code {
+ background-color: transparent;
+ color: black;
+ padding: 0;
+ font-weight: bold;
+ }
- span.flag {
- background-color: gray;
- color: white;
- border-radius: 3px;
- }
+ span.flag {
+ background-color: gray;
+ color: white;
+ border-radius: 3px;
}
}

0 comments on commit d0efe49

Please sign in to comment.