Merge pull request #49 from tripit/dev

Search, bug fixes, new features, and more

.gitignore

@@ -19,3 +19,4 @@ build/
 .yardoc
 _yardoc
 doc/
+.idea/
\ No newline at end of file

CONTRIBUTING.md

+# 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!
\ No newline at end of file

Gemfile

@@ -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
\ No newline at end of file

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

README.md

 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)

source/index.md

@@ -13,6 +13,7 @@ toc_footers:
 includes:
   - errors
 
+search: true
 ---
 
 # Introduction

source/javascripts/all.js

-//= require './jquery_ui'
-//= require_tree .
\ No newline at end of file
+//= require_tree ./lib
+//= require_tree ./app

source/javascripts/app/lang.js

+/*
+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);

source/javascripts/app/search.js

+(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);

source/javascripts/app/toc.js

+(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);
+

source/javascripts/lang_selector.js

-/*
-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;
-  });
-
-}

source/javascripts/lib/jquery.highlight.js

+/*
+ * 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);
+    });
+};
+

source/javascripts/jquery.tocify.js → source/javascripts/lib/jquery.tocify.js

+//= 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
\ No newline at end of file
+})); //end of plugin

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>
\ No newline at end of file
+</html>

source/stylesheets/icon-font.scss

@@ -47,3 +47,7 @@
   @extend %icon;
   content: "\e606";
 }
+%icon-search {
+  @extend %icon;
+  content: "\e607";
+}

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;
+  }
 }
\ No newline at end of file

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);
-  }
-
-  &>ul, &>ol {
-    padding-left: $main-padding + 15px;
-  }
-
-  // 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)
-    );
-  }
-
-  // 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))
-    );
-  }
-
-  // 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 {
-    @extend %header-font;
-    font-size: 12px;
-    margin-top: 2.5em;
-    margin-bottom: 0.8em;
-    text-transform: uppercase;
-  }
+    &>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);
+    }
 
-  hr {
-    margin: 2em 0;
-    border-top: 2px solid $examples-bg;
-    border-bottom: 2px solid $main-bg;
-  }
+    &>ul, &>ol {
+      padding-left: $main-padding + 15px;
+    }
 
-  table {
-    margin-bottom: 1em;
-    overflow: auto;
-    th,td {
-      text-align: left;
-      vertical-align: top;
-      line-height: 1.6;
+    // the div is the tocify hidden div for placeholding stuff
+    &>h1, &>h2, &>div {
+      clear:both;
     }
 
-    th {
-      padding: 5px 10px;
+    h1 {
+      @extend %header-font;
+      font-size: 30px;
+      padding-top: 0.5em;
+      padding-bottom: 0.5em;
       border-bottom: 1px solid #ccc;
-      vertical-align: bottom;
+      margin-bottom: $h1-margin-bottom;
+      margin-top: 0;
+      border-top: 1px solid #ddd;
+      @include background-image(
+        linear-gradient(top, #fff, #f9f9f9)
+      );
     }
 
-    td {
-      padding: 10px;
+    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))
+      );
     }
 
-    tr:last-child {
-      border-bottom: 1px solid #ccc;
+    // 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;
     }
 
-    tr:nth-child(odd)>td {
-      background-color: lighten($main-bg,4.2%);
+    h3, h4, h5, h6 {
+      @extend %header-font;
+      font-size: 12px;
+      margin-top: 2.5em;
+      margin-bottom: 0.8em;
+      text-transform: uppercase;
     }
 
-    tr:nth-child(even)>td {
-      background-color: lighten($main-bg,2.4%);
+    h4, h5, h6 {
+      font-size: 10px;
     }
-  }
 
-  dt {
-    font-weight: bold;
-  }
+    hr {
+      margin: 2em 0;
+      border-top: 2px solid $examples-bg;
+      border-bottom: 2px solid $main-bg;
+    }
 
-  dd {
-    margin-left: 15px;
-  }
+    table {
+      margin-bottom: 1em;
+      overflow: auto;
+      th,td {
+        text-align: left;
+        vertical-align: top;
+        line-height: 1.6;
+      }
 
-  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;
+      tr:nth-child(odd)>td {
+        background-color: lighten($main-bg,4.2%);
+      }
 
-    &.warning {
-      background-color: $aside-warning-bg;
-      text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%);
+      tr:nth-child(even)>td {
+        background-color: lighten($main-bg,2.4%);
+      }
     }
 
-    &.success {
-      background-color: $aside-success-bg;
-      text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
+    dt {
+      font-weight: bold;
     }
-  }
 
+    dd {
+      margin-left: 15px;
+    }
 
-  aside.warning {
-  }
+    p, li, dt, dd {
+      line-height: 1.6;
+      margin-top: 0;
+    }
 
-  aside:before {
-    vertical-align: middle;
-    padding-right: 0.5em;
-    font-size: 14px;
-  }
+    img {
+      max-width: 100%;
+    }
 
-  aside.notice:before {
-    @extend %icon-info-sign;
-  }
+    code {
+      background-color: rgba(0,0,0,0.05);
+      padding: 3px;
+      border-radius: 3px;
+      @extend %break-words;
+      @extend %code-font;
+    }
 
-  aside.warning:before {
-    @extend %icon-exclamation-sign;
-  }
+    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%);
+      }
 
-  aside.success:before {
-    @extend %icon-ok-sign;
+      &.success {
+        background-color: $aside-success-bg;
+        text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
+      }
+    }
+
+    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;
+    }
   }
 
+  .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%));
+  }
 }
 
-
 ////////////////////////////////////////////////////////////////////////////////
 // CODE SAMPLE STYLES
 ////////////////////////////////////////////////////////////////////////////////
@@ -431,4 +481,4 @@ html, body {
       border-bottom: 1px solid #404040;
     }
   }
-}
\ No newline at end of file
+}

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;
 
 
 ////////////////////////////////////////////////////////////////////////////////