Merge pull request #49 from tripit/dev

Search, bug fixes, new features, and more
2026-04-25 20:45:01 +08:00 · 2014-05-03 17:22:36 -07:00
parent 26eef2f000 938a056fcc
commit 0eb4caa425
24 changed files with 2546 additions and 290 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,4 @@ build/
 .yardoc
 _yardoc
 doc/
+.idea/
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -0,0 +1,3 @@
+# Contributing to Slate
+
+Thanks for contributing to Slate! Please point your pull requests at the `dev` branch, and keep your commit messages clear and informative. Also, please make sure your contributions work in the most recent version of Chrome, Firefox, and IE. Thanks!
--- a/2
+++ b/2
@@ -23,6 +23,6 @@ platforms :mri_18 do
  gem "ruby18_source_location"
 end

-gem "rake", "~> 10.2.0"
+gem "rake", "~> 10.3.0"

 gem 'therubyracer', :platforms => :ruby
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -12,7 +12,7 @@ GEM
      coffee-script-source
      execjs
    coffee-script-source (1.7.0)
-    compass (0.12.5)
+    compass (0.12.6)
      chunky_png (~> 1.2)
      fssm (>= 0.2.7)
      sass (~> 3.2.19)
@@ -69,11 +69,11 @@ GEM
      em-websocket (~> 0.5.0)
      middleman-core (~> 3.2)
      rack-livereload (~> 0.3.15)
-    middleman-sprockets (3.3.2)
+    middleman-sprockets (3.3.3)
      middleman-core (>= 3.2)
      sprockets (~> 2.2)
      sprockets-helpers (~> 1.1.0)
-      sprockets-sass (~> 1.0.0)
+      sprockets-sass (~> 1.1.0)
    middleman-syntax (2.0.0)
      middleman-core (~> 3.2)
      rouge (~> 1.0)
@@ -90,7 +90,7 @@ GEM
      rack
    rack-test (0.6.2)
      rack (>= 1.0)
-    rake (10.2.2)
+    rake (10.3.1)
    rb-fsevent (0.9.4)
    rb-inotify (0.9.3)
      ffi (>= 0.5.0)
@@ -101,14 +101,14 @@ GEM
    rouge (1.3.3)
    ruby18_source_location (0.2)
    sass (3.2.19)
-    sprockets (2.12.0)
+    sprockets (2.12.1)
      hike (~> 1.2)
      multi_json (~> 1.0)
      rack (~> 1.0)
      tilt (~> 1.1, != 1.3.0)
    sprockets-helpers (1.1.0)
      sprockets (~> 2.0)
-    sprockets-sass (1.0.3)
+    sprockets-sass (1.1.0)
      sprockets (~> 2.0)
      tilt (~> 1.1)
    therubyracer (0.12.1)
@@ -131,7 +131,7 @@ DEPENDENCIES
  middleman-gh-pages
  middleman-livereload (~> 3.3.0)
  middleman-syntax
-  rake (~> 10.2.0)
+  rake (~> 10.3.0)
  redcarpet (~> 3.1.1)
  ruby18_source_location
  therubyracer
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 Slate
 ========

-[![Build Status](https://travis-ci.org/tripit/slate.png?branch=master)](https://travis-ci.org/tripit/slate) [![Dependency Status](https://gemnasium.com/tripit/slate.png)](https://gemnasium.com/tripit/slate)
+[![Build Status](https://travis-ci.org/tripit/slate.svg?branch=master)](https://travis-ci.org/tripit/slate) [![Dependency Status](https://gemnasium.com/tripit/slate.png)](https://gemnasium.com/tripit/slate)

 Slate helps you create beautiful single-page API documentation. Think of it as an intelligent, modern documentation template for your API.

@@ -75,3 +75,11 @@ Special Thanks
 - [middleman-syntax](https://github.com/middleman/middleman-syntax)
 - [middleman-gh-pages](https://github.com/neo/middleman-gh-pages)
 - [Font Awesome](http://fortawesome.github.io/Font-Awesome/)
+
+Contributors
+--------------------
+
+Thanks to the following people who have submitted pull requests:
+
+- [@chrissrogers](https://github.com/chrissrogers)
+- [@bootstraponline](https://github.com/bootstraponline)
--- a/source/fonts/icomoon.eot
+++ b/source/fonts/icomoon.eot
--- a/source/fonts/icomoon.svg
+++ b/source/fonts/icomoon.svg
@@ -3,15 +3,16 @@
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>Generated by IcoMoon</metadata>
 <defs>
-<font id="icomoon" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
-<glyph unicode="&#xe600;" d="M438.857 950.857q119.429 0 220.286-58.857t159.714-159.714 58.857-220.286-58.857-220.286-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857zM512 238.286v108.571q0 8-5.143 13.429t-12.571 5.429h-109.714q-7.429 0-13.143-5.714t-5.714-13.143v-108.571q0-7.429 5.714-13.143t13.143-5.714h109.714q7.429 0 12.571 5.429t5.143 13.429zM510.857 434.857l10.286 354.857q0 6.857-5.714 10.286-5.714 4.571-13.714 4.571h-125.714q-8 0-13.714-4.571-5.714-3.429-5.714-10.286l9.714-354.857q0-5.714 5.714-10t13.714-4.286h105.714q8 0 13.429 4.286t6 10z" horiz-adv-x="878" />
-<glyph unicode="&#xe601;" d="M512 237.714v109.714q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-109.714q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM658.286 621.714q0 50.286-31.714 93.143t-79.143 66.286-97.143 23.429q-138.857 0-212-121.714-8.571-13.714 4.571-24l75.429-57.143q4-3.429 10.857-3.429 9.143 0 14.286 6.857 30.286 38.857 49.143 52.571 19.429 13.714 49.143 13.714 27.429 0 48.857-14.857t21.429-33.714q0-21.714-11.429-34.857t-38.857-25.714q-36-16-66-49.429t-30-71.714v-20.571q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143q0 10.857 12.286 28.286t31.143 28.286q18.286 10.286 28 16.286t26.286 20 25.429 27.429 16 34.571 7.143 46.286zM877.714 512q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" horiz-adv-x="878" />
-<glyph unicode="&#xe602;" d="M585.143 237.714v91.429q0 8-5.143 13.143t-13.143 5.143h-54.857v292.571q0 8-5.143 13.143t-13.143 5.143h-182.857q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h54.857v-182.857h-54.857q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h256q8 0 13.143 5.143t5.143 13.143zM512 749.714v91.429q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM877.714 512q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" horiz-adv-x="878" />
-<glyph unicode="&#xe603;" d="M656.571 382.857q0 14.857-10.857 25.714l-103.429 103.429 103.429 103.429q10.857 10.857 10.857 25.714 0 15.429-10.857 26.286l-51.429 51.429q-10.857 10.857-26.286 10.857-14.857 0-25.714-10.857l-103.429-103.429-103.429 103.429q-10.857 10.857-25.714 10.857-15.429 0-26.286-10.857l-51.429-51.429q-10.857-10.857-10.857-26.286 0-14.857 10.857-25.714l103.429-103.429-103.429-103.429q-10.857-10.857-10.857-25.714 0-15.429 10.857-26.286l51.429-51.429q10.857-10.857 26.286-10.857 14.857 0 25.714 10.857l103.429 103.429 103.429-103.429q10.857-10.857 25.714-10.857 15.429 0 26.286 10.857l51.429 51.429q10.857 10.857 10.857 26.286zM877.714 512q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" horiz-adv-x="878" />
-<glyph unicode="&#xe604;" d="M694.857 475.429v73.143q0 14.857-10.857 25.714t-25.714 10.857h-146.286v146.286q0 14.857-10.857 25.714t-25.714 10.857h-73.143q-14.857 0-25.714-10.857t-10.857-25.714v-146.286h-146.286q-14.857 0-25.714-10.857t-10.857-25.714v-73.143q0-14.857 10.857-25.714t25.714-10.857h146.286v-146.286q0-14.857 10.857-25.714t25.714-10.857h73.143q14.857 0 25.714 10.857t10.857 25.714v146.286h146.286q14.857 0 25.714 10.857t10.857 25.714zM877.714 512q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" horiz-adv-x="878" />
-<glyph unicode="&#xe605;" d="M694.857 475.429v73.143q0 14.857-10.857 25.714t-25.714 10.857h-438.857q-14.857 0-25.714-10.857t-10.857-25.714v-73.143q0-14.857 10.857-25.714t25.714-10.857h438.857q14.857 0 25.714 10.857t10.857 25.714zM877.714 512q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" horiz-adv-x="878" />
-<glyph unicode="&#xe606;" d="M733.714 604.571q0 16-10.286 26.286l-52 51.429q-10.857 10.857-25.714 10.857t-25.714-10.857l-233.143-232.571-129.143 129.143q-10.857 10.857-25.714 10.857t-25.714-10.857l-52-51.429q-10.286-10.286-10.286-26.286 0-15.429 10.286-25.714l206.857-206.857q10.857-10.857 25.714-10.857 15.429 0 26.286 10.857l310.286 310.286q10.286 10.286 10.286 25.714zM877.714 512q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" horiz-adv-x="878" />
+<font id="icomoon" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
+<glyph unicode="&#xe600;" d="M219.429 475.428q59.715 0 110.143-29.428t79.857-79.857 29.428-110.143-29.428-110.143-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428zM256 119.143v54.286q0 4-2.571 6.714t-6.286 2.714h-54.857q-3.714 0-6.572-2.857t-2.857-6.572v-54.286q0-3.714 2.857-6.572t6.572-2.857h54.857q3.714 0 6.286 2.714t2.571 6.714zM255.429 217.428l5.143 177.428q0 3.429-2.857 5.143-2.857 2.286-6.857 2.286h-62.857q-4 0-6.857-2.286-2.857-1.714-2.857-5.143l4.857-177.428q0-2.857 2.857-5t6.857-2.143h52.857q4 0 6.714 2.143t3 5z" horiz-adv-x="439" />
+<glyph unicode="&#xe601;" d="M256 118.857v54.857q0 4-2.571 6.572t-6.571 2.572h-54.857q-4 0-6.571-2.572t-2.571-6.572v-54.857q0-4 2.571-6.572t6.572-2.572h54.857q4 0 6.571 2.572t2.572 6.572zM329.143 310.857q0 25.143-15.857 46.572t-39.572 33.143-48.572 11.714q-69.428 0-106-60.857-4.285-6.857 2.285-12l37.715-28.571q2-1.714 5.428-1.714 4.572 0 7.143 3.428 15.143 19.429 24.571 26.286 9.714 6.857 24.572 6.857 13.714 0 24.428-7.429t10.714-16.857q0-10.857-5.714-17.428t-19.428-12.857q-18-8-33-24.715t-15-35.857v-10.286q0-4 2.571-6.572t6.571-2.572h54.857q4 0 6.571 2.572t2.572 6.572q0 5.428 6.143 14.143t15.572 14.143q9.143 5.143 14 8.143t13.143 10 12.714 13.714 8 17.286 3.572 23.143zM438.857 256q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" />
+<glyph unicode="&#xe602;" d="M292.572 118.857v45.714q0 4-2.572 6.572t-6.572 2.572h-27.428v146.286q0 4-2.571 6.572t-6.571 2.571h-91.428q-4 0-6.572-2.571t-2.571-6.572v-45.714q0-4 2.571-6.572t6.572-2.572h27.428v-91.428h-27.428q-4 0-6.572-2.572t-2.571-6.572v-45.714q0-4 2.571-6.572t6.572-2.572h128q4 0 6.572 2.572t2.572 6.572zM256 374.857v45.715q0 4-2.571 6.572t-6.571 2.571h-54.857q-4 0-6.571-2.571t-2.571-6.572v-45.715q0-4 2.571-6.571t6.572-2.572h54.857q4 0 6.571 2.572t2.572 6.571zM438.857 256q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" />
+<glyph unicode="&#xe603;" d="M328.286 191.428q0 7.428-5.428 12.857l-51.714 51.714 51.714 51.714q5.428 5.428 5.428 12.857 0 7.715-5.428 13.143l-25.714 25.714q-5.428 5.429-13.143 5.429-7.428 0-12.857-5.429l-51.714-51.714-51.714 51.714q-5.428 5.429-12.857 5.429-7.714 0-13.143-5.429l-25.715-25.714q-5.428-5.428-5.428-13.143 0-7.428 5.428-12.857l51.715-51.714-51.715-51.714q-5.428-5.428-5.428-12.857 0-7.714 5.428-13.143l25.715-25.714q5.428-5.428 13.143-5.428 7.429 0 12.857 5.428l51.714 51.714 51.714-51.714q5.428-5.428 12.857-5.428 7.714 0 13.143 5.428l25.714 25.714q5.428 5.428 5.428 13.143zM438.857 256q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" />
+<glyph unicode="&#xe604;" d="M347.428 237.714v36.572q0 7.428-5.428 12.857t-12.857 5.428h-73.143v73.143q0 7.428-5.428 12.857t-12.857 5.428h-36.571q-7.428 0-12.857-5.428t-5.429-12.857v-73.143h-73.143q-7.428 0-12.857-5.428t-5.428-12.857v-36.572q0-7.428 5.428-12.857t12.857-5.429h73.143v-73.143q0-7.428 5.428-12.857t12.857-5.428h36.571q7.428 0 12.857 5.428t5.429 12.857v73.143h73.143q7.428 0 12.857 5.428t5.428 12.857zM438.857 256q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" />
+<glyph unicode="&#xe605;" d="M347.428 237.714v36.572q0 7.428-5.428 12.857t-12.857 5.428h-219.429q-7.428 0-12.857-5.428t-5.428-12.857v-36.572q0-7.428 5.428-12.857t12.857-5.429h219.429q7.428 0 12.857 5.428t5.428 12.857zM438.857 256q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" />
+<glyph unicode="&#xe606;" d="M366.857 302.286q0 8-5.143 13.143l-26 25.715q-5.428 5.428-12.857 5.428t-12.857-5.428l-116.572-116.286-64.572 64.572q-5.428 5.428-12.857 5.428t-12.857-5.428l-26-25.714q-5.143-5.143-5.143-13.143 0-7.714 5.143-12.857l103.428-103.428q5.428-5.428 12.857-5.428 7.714 0 13.143 5.428l155.143 155.143q5.143 5.143 5.143 12.857zM438.857 256q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" />
+<glyph unicode="&#xe607;" d="M496.131 44.302l-121.276 103.147c-12.537 11.283-25.945 16.463-36.776 15.963 28.628 33.534 45.921 77.039 45.921 124.588 0 106.039-85.961 192-192 192-106.038 0-192-85.961-192-192 0-106.039 85.961-192 192-192 47.549 0 91.054 17.293 124.588 45.922-0.5-10.831 4.68-24.239 15.963-36.776l103.147-121.276c17.661-19.623 46.511-21.277 64.11-3.678s15.946 46.449-3.677 64.11zM192 160c-70.692 0-128 57.308-128 128s57.308 128 128 128 128-57.308 128-128-57.307-128-128-128z" />
 </font></defs></svg>
--- a/source/fonts/icomoon.ttf
+++ b/source/fonts/icomoon.ttf
--- a/source/fonts/icomoon.woff
+++ b/source/fonts/icomoon.woff
--- a/source/index.md
+++ b/source/index.md
@@ -13,6 +13,7 @@ toc_footers:
 includes:
  - errors

+search: true
 ---

 # Introduction
--- a/source/javascripts/all.js
+++ b/source/javascripts/all.js
@@ -1,2 +1,2 @@
-//= require './jquery_ui'
-//= require_tree .
+//= require_tree ./lib
+//= require_tree ./app
--- a/source/javascripts/app/lang.js
+++ b/source/javascripts/app/lang.js
@@ -0,0 +1,75 @@
+/*
+Copyright 2008-2013 Concur Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may
+not use this file except in compliance with the License. You may obtain
+a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations
+under the License.
+*/
+(function (global) {
+  var languages = [];
+
+  global.setupLanguages = setupLanguages;
+  global.activateLanguage = activateLanguage;
+
+  function activateLanguage(language) {
+    $("#lang-selector a").removeClass('active');
+    $("#lang-selector a[data-language-name='" + language + "']").addClass('active');
+    for (var i=0; i < languages.length; i++) {
+      $(".highlight." + languages[i]).hide();
+    }
+    $(".highlight." + language).show();
+  }
+
+  function setupLanguages(l) {
+    var currentLanguage = l[0];
+    var defaultLanguage = localStorage.getItem("language");
+
+    languages = l;
+    
+    if ((location.search.substr(1) != "") && (jQuery.inArray(location.search.substr(1), languages)) != -1) {
+      // the language is in the URL, so use that language!
+      activateLanguage(location.search.substr(1));
+
+      // set this language as the default for next time, if the URL has no language
+      localStorage.setItem("language", location.search.substr(1));
+    } else if ((defaultLanguage !== null) && (jQuery.inArray(defaultLanguage, languages) != -1)) {
+      // the language was the last selected one saved in localstorage, so use that language!
+      activateLanguage(defaultLanguage);
+    } else {
+      // no language selected, so use the default
+      activateLanguage(languages[0]);
+    }
+
+    // if we click on a language tab, reload the page with that language in the URL
+    $("#lang-selector a").bind("click", function() {
+      window.location.replace("?" + $(this).data("language-name") + window.location.hash);
+      return false;
+    });
+
+  }
+
+  // if we click on a language tab, activate that language
+  $(function() {
+    $("#lang-selector a").on("click", function() {
+      var lang = $(this).data("language-name");
+      var hash = window.location.hash;
+      if (hash) hash = hash.replace(/^#+/, '');
+      // do not reload the page every time the language is changed
+      if (history) history.pushState({}, '', '?' + lang + '#' + hash);
+
+      activateLanguage(lang);
+      return false;
+    });
+    window.onpopstate = function(event) {
+      activateLanguage(window.location.search.substr(1));
+    };
+  });
+})(window);
--- a/source/javascripts/app/search.js
+++ b/source/javascripts/app/search.js
@@ -0,0 +1,135 @@
+(function (global) {
+
+  var $global = $(global);
+  var content, darkBox, searchInfo;
+  var highlightOpts = { element: 'span', className: 'search-highlight' };
+
+  var index = new lunr.Index;
+
+  index.ref('id');
+  index.field('title', { boost: 10 });
+  index.field('body');
+  index.pipeline.add(lunr.trimmer, lunr.stopWordFilter);
+
+  $(populate);
+  $(bind);
+
+  function populate () {
+    $('h1').each(function () {
+      var title = $(this);
+      var body = title.nextUntil('h1');
+      var wrapper = $('<section id="section-' + title.prop('id') + '"></section>');
+
+      title.after(wrapper.append(body));
+      wrapper.prepend(title);
+
+      index.add({
+        id: title.prop('id'),
+        title: title.text(),
+        body: body.text()
+      });
+    });
+  }
+
+  function bind () {
+    content = $('.content');
+    darkBox = $('.dark-box');
+    searchInfo = $('.search-info');
+
+    $('#input-search')
+      .on('keyup', search)
+      .on('focus', active)
+      .on('blur', inactive);
+  }
+
+  function refToHeader (itemRef) {
+    return $('.tocify-item[data-unique=' + itemRef + ']').closest('.tocify-header');
+  }
+
+  function sortDescending (obj2, obj1) {
+    var s1 = parseInt(obj1.id.replace(/[^\d]/g, ''), 10);
+    var s2 = parseInt(obj2.id.replace(/[^\d]/g, ''), 10);
+    return s1 === s2 ? 0 : s1 < s2 ? -1 : 1;
+  }
+
+  function resetHeaderLocations () {
+    var headers = $(".tocify-header").sort(sortDescending);
+    $.each(headers, function (index, item) {
+      $(item).insertBefore($("#toc ul:first-child"));
+    });
+  }
+
+  function search (event) {
+    var sections = $('section, #toc .tocify-header');
+
+    searchInfo.hide();
+    unhighlight();
+
+    // ESC clears the field
+    if (event.keyCode === 27) this.value = '';
+
+    if (this.value) {
+      sections.hide();
+      // results are sorted by score in descending order
+      var tmpResults = index.search(this.value);
+      var results = [];
+
+      // remove low score matches
+      $.each(tmpResults, function (index, item) {
+        if (item.score >= 0.0001) results.push(item);
+      });
+
+      if (results.length) {
+        lastRef = null;
+        resetHeaderLocations();
+        $.each(results, function (index, item) {
+          var itemRef = item.ref;
+          $('#section-' + itemRef).show();
+          // headers must be repositioned in the DOM
+          var closestHeader = refToHeader(itemRef);
+          if (lastRef) {
+            refToHeader(lastRef).insertBefore(closestHeader);
+          }
+          closestHeader.show();
+          lastRef = itemRef;
+        });
+
+        // position first element. it wasn't positioned above if len > 1
+        if (results.length > 1) {
+          var firstRef = results[0].ref;
+          var secondRef = results[1].ref
+          refToHeader(firstRef).insertBefore(refToHeader(secondRef));
+        }
+
+        highlight.call(this);
+      } else {
+        sections.show();
+        searchInfo.text('No Results Found for "' + this.value + '"').show();
+      }
+    } else {
+      sections.show();
+    }
+
+    // HACK trigger tocify height recalculation
+    $global.triggerHandler('scroll.tocify');
+    $global.triggerHandler('resize');
+  }
+
+  function active () {
+    search.call(this, {});
+  }
+
+  function inactive () {
+    unhighlight();
+    searchInfo.hide();
+  }
+
+  function highlight () {
+    if (this.value) content.highlight(this.value, highlightOpts);
+  }
+
+  function unhighlight () {
+    content.unhighlight(highlightOpts);
+  }
+
+})(window);
--- a/source/javascripts/app/toc.js
+++ b/source/javascripts/app/toc.js
@@ -0,0 +1,37 @@
+(function (global) {
+
+  var toc;
+
+  global.toc = toc;
+
+  $(toc);
+  $(animate);
+
+  function toc () {
+    toc = $("#toc").tocify({
+      selectors: 'h1, h2',
+      extendPage: false,
+      theme: 'none',
+      smoothScroll: false,
+      showEffectSpeed: 0,
+      hideEffectSpeed: 180,
+      ignoreSelector: '.toc-ignore',
+      highlightOffset: 60,
+      scrollTo: -2,
+      scrollHistory: true,
+      hashGenerator: function (text, element) {
+        return element.prop('id');
+      }
+    }).data('toc-tocify');
+  }
+
+  // Hack to make already open sections to start opened,
+  // instead of displaying an ugly animation
+  function animate () {
+    setTimeout(function() {
+      toc.setOption('showEffectSpeed', 180);
+    }, 50);
+  }
+
+})(window);
+
--- a/source/javascripts/lang_selector.js
+++ b/source/javascripts/lang_selector.js
@@ -1,52 +0,0 @@
-/*
-Copyright 2008-2013 Concur Technologies, Inc.
-
-Licensed under the Apache License, Version 2.0 (the "License"); you may
-not use this file except in compliance with the License. You may obtain
-a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations
-under the License.
-*/
-languages = []
-function activateLanguage(language) {
-  $("#lang-selector a").removeClass('active');
-  $("#lang-selector a[data-language-name='" + language + "']").addClass('active');
-  for (var i=0; i < languages.length; i++) {
-    $(".highlight." + languages[i]).hide();
-  }
-  $(".highlight." + language).show();
-
-}
-
-function setupLanguages(l) {
-  languages = l;
-  currentLanguage = languages[0];
-  defaultLanguage = localStorage.getItem("language");
-
-  if ((location.search.substr(1) != "") && (jQuery.inArray(location.search.substr(1), languages)) != -1) {
-    // the language is in the URL, so use that language!
-    activateLanguage(location.search.substr(1));
-
-    // set this language as the default for next time, if the URL has no language
-    localStorage.setItem("language", location.search.substr(1));
-  } else if ((defaultLanguage !== null) && (jQuery.inArray(defaultLanguage, languages) != -1)) {
-    // the language was the last selected one saved in localstorage, so use that language!
-    activateLanguage(defaultLanguage);
-  } else {
-    // no language selected, so use the default
-    activateLanguage(languages[0]);
-  }
-
-  // if we click on a language tab, reload the page with that language in the URL
-  $("#lang-selector a").bind("click", function() {
-    window.location.replace("?" + $(this).data("language-name") + window.location.hash);
-    return false;
-  });
-
-}
--- a/source/javascripts/lib/jquery.highlight.js
+++ b/source/javascripts/lib/jquery.highlight.js
@@ -0,0 +1,108 @@
+/*
+ * jQuery Highlight plugin
+ *
+ * Based on highlight v3 by Johann Burkard
+ * http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
+ *
+ * Code a little bit refactored and cleaned (in my humble opinion).
+ * Most important changes:
+ *  - has an option to highlight only entire words (wordsOnly - false by default),
+ *  - has an option to be case sensitive (caseSensitive - false by default)
+ *  - highlight element tag and class names can be specified in options
+ *
+ * Usage:
+ *   // wrap every occurrance of text 'lorem' in content
+ *   // with <span class='highlight'> (default options)
+ *   $('#content').highlight('lorem');
+ *
+ *   // search for and highlight more terms at once
+ *   // so you can save some time on traversing DOM
+ *   $('#content').highlight(['lorem', 'ipsum']);
+ *   $('#content').highlight('lorem ipsum');
+ *
+ *   // search only for entire word 'lorem'
+ *   $('#content').highlight('lorem', { wordsOnly: true });
+ *
+ *   // don't ignore case during search of term 'lorem'
+ *   $('#content').highlight('lorem', { caseSensitive: true });
+ *
+ *   // wrap every occurrance of term 'ipsum' in content
+ *   // with <em class='important'>
+ *   $('#content').highlight('ipsum', { element: 'em', className: 'important' });
+ *
+ *   // remove default highlight
+ *   $('#content').unhighlight();
+ *
+ *   // remove custom highlight
+ *   $('#content').unhighlight({ element: 'em', className: 'important' });
+ *
+ *
+ * Copyright (c) 2009 Bartek Szopka
+ *
+ * Licensed under MIT license.
+ *
+ */
+
+jQuery.extend({
+    highlight: function (node, re, nodeName, className) {
+        if (node.nodeType === 3) {
+            var match = node.data.match(re);
+            if (match) {
+                var highlight = document.createElement(nodeName || 'span');
+                highlight.className = className || 'highlight';
+                var wordNode = node.splitText(match.index);
+                wordNode.splitText(match[0].length);
+                var wordClone = wordNode.cloneNode(true);
+                highlight.appendChild(wordClone);
+                wordNode.parentNode.replaceChild(highlight, wordNode);
+                return 1; //skip added node in parent
+            }
+        } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
+                !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
+                !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
+            for (var i = 0; i < node.childNodes.length; i++) {
+                i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
+            }
+        }
+        return 0;
+    }
+});
+
+jQuery.fn.unhighlight = function (options) {
+    var settings = { className: 'highlight', element: 'span' };
+    jQuery.extend(settings, options);
+
+    return this.find(settings.element + "." + settings.className).each(function () {
+        var parent = this.parentNode;
+        parent.replaceChild(this.firstChild, this);
+        parent.normalize();
+    }).end();
+};
+
+jQuery.fn.highlight = function (words, options) {
+    var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
+    jQuery.extend(settings, options);
+    
+    if (words.constructor === String) {
+        words = [words];
+    }
+    words = jQuery.grep(words, function(word, i){
+      return word != '';
+    });
+    words = jQuery.map(words, function(word, i) {
+      return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+    });
+    if (words.length == 0) { return this; };
+
+    var flag = settings.caseSensitive ? "" : "i";
+    var pattern = "(" + words.join("|") + ")";
+    if (settings.wordsOnly) {
+        pattern = "\\b" + pattern + "\\b";
+    }
+    var re = new RegExp(pattern, flag);
+    
+    return this.each(function () {
+        jQuery.highlight(this, re, settings.element, settings.className);
+    });
+};
+
--- a/source/javascripts/lib/jquery.tocify.js
+++ b/source/javascripts/lib/jquery.tocify.js
@@ -1,3 +1,4 @@
+//= require ./jquery_ui
 /* jquery Tocify - v1.8.0 - 2013-09-16
 * http://www.gregfranko.com/jquery.tocify.js/
 * Copyright (c) 2013 Greg Franko; Licensed MIT
@@ -594,9 +595,7 @@
            // Reset height cache on scroll

            $(window).on('resize', function() {
-                console.log("resizing" + self.cachedHeights);
                self.calculateHeights();
-                console.log("done" + self.cachedHeights);
            });

            // Window scroll event handler
@@ -1022,4 +1021,4 @@

    });

-})); //end of plugin
+})); //end of plugin
--- a/source/javascripts/lib/jquery_ui.js
+++ b/source/javascripts/lib/jquery_ui.js
--- a/source/javascripts/lib/lunr.js
+++ b/source/javascripts/lib/lunr.js
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -13,96 +13,68 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations
 under the License.
 %>
+<% language_tabs = current_page.data.language_tabs %>
 <!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
-
-    <!-- Always force latest IE rendering engine or request Chrome Frame -->
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-
-    <!-- Use title if it's in the page YAML frontmatter -->
    <title><%= current_page.data.title || "API Documentation" %></title>

-    <%= stylesheet_link_tag "screen", media: 'screen' %>
-    <%= stylesheet_link_tag "print", media: 'print' %>
-    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
+    <%= stylesheet_link_tag :screen, media: :screen %>
+    <%= stylesheet_link_tag :print, media: :print %>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <%= javascript_include_tag  "all" %>

-    <script>
-      $(function() {
-        var toc = $("#toc").tocify({
-          selectors: "h1,h2",
-          extendPage: false,
-          theme: "none",
-          smoothScroll: false,
-          showEffectSpeed: 0,
-          hideEffectSpeed: 180,
-          ignoreSelector: ".toc-ignore",
-          hashGenerator: 'pretty',
-          highlightOffset: 60,
-          scrollTo: -2,
-          scrollHistory: true,
-          hashGenerator: function(text, element) {
-            return element[0].getAttribute('id');
-          }
-        }).data("toc-tocify");
-        // Hack to make already open sections to start opened,
-        // instead of displaying an ugly animation
-        setTimeout(function() {
-          toc.setOption("showEffectSpeed", 180);
-        },50);
-        setupLanguages([
-          <% if current_page.data.language_tabs %>
-            <% current_page.data.language_tabs.each do |lang| %>
-              <% if lang.is_a? Hash %>
-                '<%= lang.keys[0] %>',
-              <% else %>
-                '<%= lang %>',
-              <% end %>
-            <% end %>
-          <% end %>
-        ]);
-      });
-    </script>
+    <% if language_tabs %>
+      <script>
+        $(function() {
+          setupLanguages(<%= language_tabs.map{ |lang| lang.is_a?(Hash) ? lang.keys.first : lang }.to_json %>);
+        });
+      </script>
+    <% end %>
  </head>

  <body class="<%= page_classes %>">
    <div class="tocify-wrapper">
      <%= image_tag "logo.png" %>
+      <% if current_page.data.search %>
+        <div class="search">
+          <input type="text" class="search" id="input-search">
+        </div>
+        <div class="search-info"></div>
+      <% end %>
      <div id="toc">
      </div>
      <% if current_page.data.toc_footers %>
-      <ul class="toc-footer">
-        <% current_page.data.toc_footers.each do |footer| %>
-          <li><%= footer %></li>
-        <% end %>
-      </ul>
+        <ul class="toc-footer">
+          <% current_page.data.toc_footers.each do |footer| %>
+            <li><%= footer %></li>
+          <% end %>
+        </ul>
      <% end %>
    </div>
    <div class="page-wrapper">
      <div class="dark-box"></div>
      <div class="content">
        <%= yield %>
-        <% if current_page.data.includes %>
-          <% current_page.data.includes.each do |include| %>
-            <%= partial "includes/#{include}" %>
-          <% end %>
+        <% current_page.data.includes && current_page.data.includes.each do |include| %>
+          <%= partial "includes/#{include}" %>
        <% end %>
      </div>
      <div class="dark-box">
-        <div id="lang-selector">
-          <% if current_page.data.language_tabs %>
-            <% current_page.data.language_tabs.each do |lang| %>
+        <% if language_tabs %>
+          <div id="lang-selector">
+            <% language_tabs.each do |lang| %>
              <% if lang.is_a? Hash %>
-                <a href="#" data-language-name="<%= lang.keys[0] %>"><%= lang.values[0] %></a>
+                <a href="#" data-language-name="<%= lang.keys.first %>"><%= lang.values.first %></a>
              <% else %>
                <a href="#" data-language-name="<%= lang %>"><%= lang %></a>
              <% end %>
            <% end %>
-          <% end %>
-        </div>
+          </div>
+        <% end %>
      </div>
    </div>
  </body>
-</html>
+</html>
--- a/source/stylesheets/icon-font.scss
+++ b/source/stylesheets/icon-font.scss
@@ -47,3 +47,7 @@
  @extend %icon;
  content: "\e606";
 }
+%icon-search {
+  @extend %icon;
+  content: "\e607";
+}
--- a/source/stylesheets/print.css.scss
+++ b/source/stylesheets/print.css.scss
@@ -2,6 +2,7 @@
@import 'normalize';
@import 'compass';
@import 'variables';
+@import 'icon-font';

 /*
 Copyright 2008-2013 Concur Technologies, Inc.
@@ -100,11 +101,42 @@ body {
    margin-top: 0;
  }

-  h3 {
+  h3, h4 {
    @extend %header-font;
    font-size: 0.8em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    text-transform: uppercase;
  }
+
+  h5, h6 {
+    text-transform: uppercase;
+  }
+
+  aside {
+    padding: 1em;
+    border: 1px solid $print-color-light;
+    border-radius: 5px;
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+    line-height: 1.6;
+  }
+
+  aside:before {
+    vertical-align: middle;
+    padding-right: 0.5em;
+    font-size: 14px;
+  }
+
+  aside.notice:before {
+    @extend %icon-info-sign;
+  }
+
+  aside.warning:before {
+    @extend %icon-exclamation-sign;
+  }
+
+  aside.success:before {
+    @extend %icon-ok-sign;
+  }
 }
--- a/source/stylesheets/screen.css.scss
+++ b/source/stylesheets/screen.css.scss
@@ -33,6 +33,7 @@ html, body {
  -moz-osx-font-smoothing: grayscale;
  @extend %default-font;
  background-color: $main-bg;
+  height: 100%;
 }

 ////////////////////////////////////////////////////////////////////////////////
@@ -54,13 +55,53 @@ html, body {
  // This is the logo at the top of the ToC
  &>img {
    display: block;
-    margin-bottom: $logo-margin;
  }

+  &>.search {
+    position: relative;
+
+    input {
+      background: $nav-bg;
+      border-width: 0 0 1px 0;
+      border-color: $search-box-border-color;
+      padding: 6px 0 6px 20px;
+      @include box-sizing(border-box);
+      margin: 10px 15px;
+      width: $nav-width - 30;
+      outline: none;
+      color: $nav-text;
+    }
+
+    &:before {
+      position: absolute;
+      top: 17px;
+      left: 15px;
+      color: $nav-text;
+      @extend %icon-search;
+    }
+  }
+
+  img+.tocify {
+    margin-top: $logo-margin;
+  }
+
+  .search-info {
+    margin-top: 0;
+    padding: 1em $nav-padding;
+    font-size: 0.9em;
+    font-weight: bold;
+    text-shadow: 0 1px 0 lighten($search-notice-bg, 15%);
+    background: $search-notice-bg;
+    display: none;
+
+    @include box-sizing(border-box);
+  }
+
+
  .tocify-item>a, .toc-footer li {
    padding: 0 $nav-padding 0 $nav-padding;
-    display:block;
-    overflow-x:hidden;
+    display: block;
+    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
@@ -152,6 +193,7 @@ html, body {
  position: relative;
  z-index: 10;
  background-color: $main-bg;
+  min-height: 100%;

  padding-bottom: 1px; // prevent margin overflow

@@ -213,181 +255,189 @@ html, body {
  position: relative;
  z-index: 30;

+  &, section {
+    padding-bottom: 6em;
+    &:after {
+      content: '';
+      display: block;
+      clear: both;
+    }

-  &>h1, &>h2, &>h3, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
-    margin-right: $examples-width;
-    padding: 0 $main-padding;
-    @include box-sizing(border-box);
-    display: block;
-    @include text-shadow($main-embossed-text-shadow);
-  }
+    &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
+      margin-right: $examples-width;
+      padding: 0 $main-padding;
+      @include box-sizing(border-box);
+      display: block;
+      @include text-shadow($main-embossed-text-shadow);
+    }

-  &>ul, &>ol {
-    padding-left: $main-padding + 15px;
-  }
+    &>ul, &>ol {
+      padding-left: $main-padding + 15px;
+    }

-  // the div is the tocify hidden div for placeholding stuff
-  &>h1, &>h2, &>div {
-    clear:both;
-  }
+    // the div is the tocify hidden div for placeholding stuff
+    &>h1, &>h2, &>div {
+      clear:both;
+    }

-  h1 {
-    @extend %header-font;
-    font-size: 30px;
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-    border-bottom: 1px solid #ccc;
-    margin-top: 2em;
-    margin-bottom: $h1-margin-bottom;
-    border-top: 1px solid #ddd;
-    @include background-image(
-      linear-gradient(top, #fff, #f9f9f9)
-    );
-  }
+    h1 {
+      @extend %header-font;
+      font-size: 30px;
+      padding-top: 0.5em;
+      padding-bottom: 0.5em;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: $h1-margin-bottom;
+      margin-top: 0;
+      border-top: 1px solid #ddd;
+      @include background-image(
+        linear-gradient(top, #fff, #f9f9f9)
+      );
+    }

-  // The header at the very top of the page
-  // shouldn't have top margin.
-  // (the div is because of tocify)
-  h1:first-child, div:first-child + h1 {
-    margin-top: 0;
-  }
+    h2 {
+      @extend %header-font;
+      font-size: 20px;
+      margin-top: 4em;
+      margin-bottom: 0;
+      border-top: 1px solid #ccc;
+      padding-top: 1.2em;
+      padding-bottom: 1.2em;
+      @include background-image(
+        linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0))
+      );
+    }

-  h2 {
-    @extend %header-font;
-    font-size: 20px;
-    margin-top: 4em;
-    margin-bottom: 0;
-    border-top: 1px solid #ccc;
-    padding-top: 1.2em;
-    padding-bottom: 1.2em;
-    @include background-image(
-      linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0))
-    );
-  }
+    // h2s right after h1s should bump right up
+    // against the h1s.
+    h1 + h2, h1 + div + h2 {
+      margin-top: $h1-margin-bottom * -1;
+      border-top: none;
+    }

-  // h2s right after h1s should bump right up
-  // against the h1s.
-  h1 + h2, h1 + div + h2 {
-    margin-top: $h1-margin-bottom * -1;
-    border-top: none;
-  }
+    h3, h4, h5, h6 {
+      @extend %header-font;
+      font-size: 12px;
+      margin-top: 2.5em;
+      margin-bottom: 0.8em;
+      text-transform: uppercase;
+    }

-  h3 {
-    @extend %header-font;
-    font-size: 12px;
-    margin-top: 2.5em;
-    margin-bottom: 0.8em;
-    text-transform: uppercase;
-  }
+    h4, h5, h6 {
+      font-size: 10px;
+    }

-  hr {
-    margin: 2em 0;
-    border-top: 2px solid $examples-bg;
-    border-bottom: 2px solid $main-bg;
-  }
+    hr {
+      margin: 2em 0;
+      border-top: 2px solid $examples-bg;
+      border-bottom: 2px solid $main-bg;
+    }

-  table {
-    margin-bottom: 1em;
-    overflow: auto;
-    th,td {
-      text-align: left;
-      vertical-align: top;
+    table {
+      margin-bottom: 1em;
+      overflow: auto;
+      th,td {
+        text-align: left;
+        vertical-align: top;
+        line-height: 1.6;
+      }
+
+      th {
+        padding: 5px 10px;
+        border-bottom: 1px solid #ccc;
+        vertical-align: bottom;
+      }
+
+      td {
+        padding: 10px;
+      }
+
+      tr:last-child {
+        border-bottom: 1px solid #ccc;
+      }
+
+      tr:nth-child(odd)>td {
+        background-color: lighten($main-bg,4.2%);
+      }
+
+      tr:nth-child(even)>td {
+        background-color: lighten($main-bg,2.4%);
+      }
+    }
+
+    dt {
+      font-weight: bold;
+    }
+
+    dd {
+      margin-left: 15px;
+    }
+
+    p, li, dt, dd {
      line-height: 1.6;
+      margin-top: 0;
    }

-    th {
-      padding: 5px 10px;
-      border-bottom: 1px solid #ccc;
-      vertical-align: bottom;
+    img {
+      max-width: 100%;
    }

-    td {
-      padding: 10px;
+    code {
+      background-color: rgba(0,0,0,0.05);
+      padding: 3px;
+      border-radius: 3px;
+      @extend %break-words;
+      @extend %code-font;
    }

-    tr:last-child {
-      border-bottom: 1px solid #ccc;
+    aside {
+      padding-top: 1em;
+      padding-bottom: 1em;
+      text-shadow: 0 1px 0 lighten($aside-notice-bg, 15%);
+      margin-top: 1.5em;
+      margin-bottom: 1.5em;
+      background: $aside-notice-bg;
+      line-height: 1.6;
+
+      &.warning {
+        background-color: $aside-warning-bg;
+        text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%);
+      }
+
+      &.success {
+        background-color: $aside-success-bg;
+        text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
+      }
    }

-    tr:nth-child(odd)>td {
-      background-color: lighten($main-bg,4.2%);
+    aside:before {
+      vertical-align: middle;
+      padding-right: 0.5em;
+      font-size: 14px;
    }

-    tr:nth-child(even)>td {
-      background-color: lighten($main-bg,2.4%);
+    aside.notice:before {
+      @extend %icon-info-sign;
+    }
+
+    aside.warning:before {
+      @extend %icon-exclamation-sign;
+    }
+
+    aside.success:before {
+      @extend %icon-ok-sign;
    }
  }

-  dt {
-    font-weight: bold;
+  .search-highlight {
+    padding: 2px;
+    margin: -2px;
+    border-radius: 4px;
+    border: 1px solid #F7E633;
+    text-shadow: 1px 1px 0 #666;
+    @include background(linear-gradient(bottom right, #F7E633 0%, #F1D32F 100%));
  }
-
-  dd {
-    margin-left: 15px;
-  }
-
-  p, li, dt, dd {
-    line-height: 1.6;
-    margin-top: 0;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  code {
-    background-color: rgba(0,0,0,0.05);
-    padding: 3px;
-    border-radius: 3px;
-    @extend %break-words;
-    @extend %code-font;
-  }
-
-  aside {
-    padding-top: 1em;
-    padding-bottom: 1em;
-    text-shadow: 0 1px 0 lighten($aside-notice-bg, 15%);
-    margin-top: 1.5em;
-    margin-bottom: 1.5em;
-    background: $aside-notice-bg;
-    line-height: 1.6;
-
-    &.warning {
-      background-color: $aside-warning-bg;
-      text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%);
-    }
-
-    &.success {
-      background-color: $aside-success-bg;
-      text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
-    }
-  }
-
-
-  aside.warning {
-  }
-
-  aside:before {
-    vertical-align: middle;
-    padding-right: 0.5em;
-    font-size: 14px;
-  }
-
-  aside.notice:before {
-    @extend %icon-info-sign;
-  }
-
-  aside.warning:before {
-    @extend %icon-exclamation-sign;
-  }
-
-  aside.success:before {
-    @extend %icon-ok-sign;
-  }
-
 }

-
 ////////////////////////////////////////////////////////////////////////////////
 // CODE SAMPLE STYLES
 ////////////////////////////////////////////////////////////////////////////////
@@ -431,4 +481,4 @@ html, body {
      border-bottom: 1px solid #404040;
    }
  }
-}
+}
--- a/source/stylesheets/variables.scss
+++ b/source/stylesheets/variables.scss
@@ -37,6 +37,7 @@ $main-bg: #eaf2f6;
 $aside-notice-bg: #8fbcd4;
 $aside-warning-bg: #c97a7e;
 $aside-success-bg: #6ac174;
+$search-notice-bg: #c97a7e;


 // TEXT COLORS
@@ -53,7 +54,7 @@ $lang-select-pressed-text: #fff; // color of language tab text when mouse is pre
 ////////////////////
 $nav-width: 230px; // width of the navbar
 $examples-width: 50%; // portion of the screen taken up by code examples
-$logo-margin: 20px; // margin between nav items and logo
+$logo-margin: 20px; // margin between nav items and logo, ignored if search is active
 $main-padding: 28px; // padding to left and right of content & examples
 $nav-padding: 15px; // padding to left and right of navbar
 $nav-indent: 10px; // extra padding for ToC subitems
@@ -86,6 +87,7 @@ $nav-footer-border-color: #666;
 $nav-embossed-border-top: 1px solid #000;
 $nav-embossed-border-bottom: 1px solid #404040;
 $main-embossed-text-shadow: 0px 1px 0px #fff;
+$search-box-border-color: #666;


 ////////////////////////////////////////////////////////////////////////////////