diff --git a/source/javascripts/app/search.js b/source/javascripts/app/search.js
index 1479b4e..9c8db96 100644
--- a/source/javascripts/app/search.js
+++ b/source/javascripts/app/search.js
@@ -1,40 +1,44 @@
 (function (global) {
 
-  window.topic = topic;
-
   var index = lunr(function () {
-    this.field('title', { boost: 10 });
-    this.field('tags', { boost: 100 });
-    this.field('body');
     this.ref('id');
+    this.field('title', { boost: 10 });
+    // this.field('tags', { boost: 100 });
+    this.field('body');
   });
 
-  $(bindSearch);
+  $(populate);
+  $(bind);
 
-  function bindSearch () {
-    $('#search').on('keyup', function () {
-      if (this.value) {
-        var items = index.search(this.value);
-        $('article, nav li').hide();
-        items.forEach(function (item) {
-          $('#' + item.ref + ', #' + item.ref + '-nav').show();
-        });
-      } else {
-        $('article, nav li').show();
-      }
-    });
+  function populate () {
+    $('h1').each(function () {
+      var title = $(this);
+      var body = title.nextUntil('h1');
+      var wrapper = $('<section id="section-' + title.prop('id') + '"></section>');
 
-    $('form').on('submit', function (event) {
-      event.preventDefault();
+      title.after(wrapper.append(body));
+      wrapper.prepend(title);
+
+      index.add({
+        id: title.prop('id'),
+        title: title.text(),
+        // tags: tags,
+        body: body.text()
+      });
     });
   }
 
-  function topic (title, tags, handle) {
-    index.add({
-      id: handle,
-      title: title,
-      tags: tags,
-      body: $('#' + handle + '-body').text()
+  function bind () {
+    $('#search').on('keyup', function () {
+      if (this.value) {
+        var items = index.search(this.value);
+        $('section, #toc .tocify-item').hide();
+        items.forEach(function (item) {
+          $('#section-' + item.ref + ', .tocify-item[data-unique=' + item.ref).show();
+        });
+      } else {
+        $('section, #toc .tocify-item').show();
+      }
     });
   }
 
diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
index debca3d..e007db8 100644
--- a/source/stylesheets/screen.css.scss
+++ b/source/stylesheets/screen.css.scss
@@ -213,178 +213,178 @@ html, body {
   position: relative;
   z-index: 30;
 
+  section {
+    &>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, &>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-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;
+    }
 
-  // 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 {
+      @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;
-  }
+    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;
+        line-height: 1.6;
+      }
 
-  table {
-    margin-bottom: 1em;
-    overflow: auto;
-    th,td {
-      text-align: left;
-      vertical-align: top;
+      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.warning {
     }
 
-    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;
-  }
-
-  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%);
+    aside:before {
+      vertical-align: middle;
+      padding-right: 0.5em;
+      font-size: 14px;
     }
 
-    &.success {
-      background-color: $aside-success-bg;
-      text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
+    aside.notice:before {
+      @extend %icon-info-sign;
+    }
+
+    aside.warning:before {
+      @extend %icon-exclamation-sign;
+    }
+
+    aside.success:before {
+      @extend %icon-ok-sign;
     }
   }
-
-
-  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;
-  }
-
 }
 
 
@@ -431,4 +431,4 @@ html, body {
       border-bottom: 1px solid #404040;
     }
   }
-}
\ No newline at end of file
+}