Refactored navigation and drawer

2024-11-27 17:00:54 +01:00 · 2016-09-23 11:56:25 +02:00 · 2016-09-23 11:56:25 +02:00 · 9338045887
commit 9338045887
parent b387f2abee
66 changed files with 1385 additions and 547 deletions
--- a/10
+++ b/10
@ -10,20 +10,26 @@ mkdocs-material-1.0.0-rc.1 (2016-XX-XX)
  * Introduced Webpack for more sophisticated JavaScript bundling
  * Introduced ESLint and SassLint for code style checks
  * Introduced more accurate Material Design colors and shadows
-  * Introduced Modular Scales for harmonic font sizing
-  * Rewrite of CSS using the BEM methodology and SassDoc styles
+  * Introduced modular scales for harmonic font sizing
+  * Rewrite of CSS using the BEM methodology and SassDoc guidelines
  * Rewrite of JavaScript using ES6 and Babel as a transpiler
  * Rewrite of Admonition, Permalinks and Codehilite integration
  * Rewrite of the complete typographical system
  * Removed Bower as a dependency in favor of npm
  * Removed custom icon build in favor of the Material Design iconset
  * Removed _blank targets on links due to vulnerability: http://bit.ly/1Mk2Rtw
+  * Removed unversioned assets from build directory
+  * Restructured templates into base templates and partials
  * Added build and watch scripts in package.json
  * Added support for Metadata and Footnotes Markdown extensions
+  * Added support for pymdownx.* Markdown extensions
  * Added support for collapsible sections in navigation
  * Added support for separate table of contents
  * Added support for better accessibility through REM-based layout
+  * Added icons for GitHub, GitLab and BitBucket integrations
  * Added more detailed documentation on specimen, extensions etc.
+  * Added a 404.html error page for deployment on GitHub Pages
+  * Fixed live reload chain in watch mode when saving a template

 mkdocs-material-0.2.4 (2016-06-26)

--- a/Gulpfile.js
+++ b/Gulpfile.js
@ -262,6 +262,7 @@ gulp.task('assets:build:modernizr', [
 */
 gulp.task('assets:build:images:svg', function() {
  return gulp.src('src/assets/images/**/*.svg')
+    .pipe(gulpif(watch, changed('material/assets/images')))
    .pipe(gulpif(args.production, minsvg()))
    .pipe(gulpif(args.production, rev()))
    .pipe(gulp.dest('material/assets/images'))
@ -302,7 +303,7 @@ gulp.task('assets:build:views', args.production ? [
  'assets:build:images'
 ] : [], function() {
  var metadata = require('./package.json');
-  return gulp.src('src/*.html')
+  return gulp.src('src/**/*.html')
    .pipe(gulpif(watch, changed('material')))
    .pipe(
      minhtml({
@ -354,7 +355,7 @@ gulp.task('assets:watch', function() {

  /* Minify views */
  gulp.watch([
-    'src/*.html'
+    'src/**/*.html'
  ], ['assets:build:views']);
 });

@ -413,7 +414,8 @@ gulp.task('build', [
 * Start asset and MkDocs watchdogs.
 */
 gulp.task('watch', [
-  'assets:build',
+  'assets:clean',
+  'assets:build'
 ], function() {
  return gulp.start([
    'assets:watch'
--- a/docs/extensions/admonition.md
+++ b/docs/extensions/admonition.md
@ -41,6 +41,9 @@ TODO: NESTED...

 !!! hint "hint, note <small>default</small>"

+!!! summary "summary, tldr"
+    This is a very long text, yes. I'm so sorry.
+
 !!! tip "tip, idea"

 !!! success "success, check, done"
--- a/docs/extensions/footnotes.md
+++ b/docs/extensions/footnotes.md
@ -29,6 +29,8 @@ sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
 Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.

 ## [Some headline <small>with</small> a link](http://www.google.de)
+### Third level
+#### Fourth level

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
 urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
--- a/docs/extensions/meta.md
+++ b/docs/extensions/meta.md
@ -0,0 +1,304 @@
+# Command Line Interface (```CLI```)
+
+Sequelize `2.0.0` introduces a new CLI which is based on [gulp][0] and combines [sequelize-cli][1] and [gulp-sequelize][2]. The CLI ships support for migrations and project bootstrapping. With migrations you can transfer your existing database into another state and vice versa: Those state transitions are saved in migration files, which describe the way how to get to the new state and how to revert the changes in order to get back to the old state.
+
+## The CLI
+
+In order to use the CLI you need to install the respective package:
+
+```bash
+$ npm install --save sequelize-cli
+```
+
+As with any npm package, you can use the global flag (`-g`) to install the CLI globally. If you have installed the CLI without the global flag, use `node_modules/.bin/sequelize [command]` instead of `sequelize [command]`.
+
+The CLI currently supports the following commands:
+
+```bash
+$ sequelize db:migrate        # Run pending migrations.
+$ sequelize db:migrate:undo   # Revert the last migration run.
+$ sequelize help              # Display this help text.
+$ sequelize init              # Initializes the project.
+$ sequelize migration:create  # Generates a new migration file.
+$ sequelize version           # Prints the version number.
+```
+
+Further and more detailed information about the available commands
+can be obtained via the help command:
+
+```bash
+$ sequelize help:init
+$ sequelize help:db:migrate
+$ sequelize help:db:migrate:undo
+# etc
+```
+
+The latter one for example will print out the following output:
+
+```bash
+Sequelize [CLI: v0.0.2, ORM: v1.7.5]
+
+COMMANDS
+    sequelize db:migrate:undo -- Revert the last migration run.
+
+DESCRIPTION
+    Revert the last migration run.
+
+OPTIONS
+    --env           The environment to run the command in. Default: development
+    --options-path  The path to a JSON file with additional options. Default: none
+    --coffee        Enables coffee script support. Default: false
+    --config        The path to the config file. Default: config/config.json
+```
+
+## Skeleton
+
+The following skeleton shows a typical migration file. All migrations are expected to be located in a folder called `migrations` at the very top of the project. The sequelize binary can generate a migration skeleton. See the above section for more details.
+
+```js
+module.exports = {
+  up: function(queryInterface, Sequelize) {
+    // logic for transforming into the new state
+  },
+
+  down: function(queryInterface, Sequelize) {
+    // logic for reverting the changes
+  }
+}
+```
+
+The passed `queryInterface` object can be used to modify the database. The `Sequelize` object stores the available data types such as `STRING` or `INTEGER`. Function `up` or `down` should return a `Promise`. Here is some code:
+
+```js
+module.exports = {
+  up: function(queryInterface, Sequelize) {
+    return queryInterface.dropAllTables();
+  }
+}
+```
+
+The available methods of the queryInterface object are the following.
+
+## Functions
+
+Using the `queryInterface` object describe before, you will have access to most of already introduced functions. Furthermore there are some other methods, which are designed to actually change the database schema.
+
+### createTable(tableName, attributes, options)
+
+This method allows creation of new tables. It is allowed to pass simple or complex attribute definitions. You can define the encoding of the table and the table's engine via options
+
+```js
+queryInterface.createTable(
+  'nameOfTheNewTable',
+  {
+    id: {
+      type: Sequelize.INTEGER,
+      primaryKey: true,
+      autoIncrement: true
+    },
+    createdAt: {
+      type: Sequelize.DATE
+    },
+    updatedAt: {
+      type: Sequelize.DATE
+    },
+    attr1: Sequelize.STRING,
+    attr2: Sequelize.INTEGER,
+    attr3: {
+      type: Sequelize.BOOLEAN,
+      defaultValue: false,
+      allowNull: false
+    },
+    //foreign key usage
+    attr4: {
+        type: Sequelize.INTEGER,
+        references: {
+            model: 'another_table_name',
+            key: 'id'
+        },
+        onUpdate: 'cascade',
+        onDelete: 'cascade'
+    }
+  },
+  {
+    engine: 'MYISAM',                     // default: 'InnoDB'
+    charset: 'latin1',                    // default: null
+    schema: 'public'                      // default: public, PostgreSQL only.
+  }
+)
+```
+
+### ```:::js dropTable(var tableName, options)```
+
+This method allows deletion of an existing table.
+
+```js
+queryInterface.dropTable('nameOfTheExistingTable')
+```
+
+### dropAllTables(options)
+
+This method allows deletion of all existing tables in the database.
+
+```js
+queryInterface.dropAllTables()
+```
+
+### renameTable(before, after, options)
+
+This method allows renaming of an existing table.
+
+```js
+queryInterface.renameTable('Person', 'User')
+```
+
+### showAllTables(options)
+
+This method returns the name of all existing tables in the database.
+
+```js
+queryInterface.showAllTables().then(function(tableNames) {})
+```
+
+### describeTable(tableName, options)
+
+This method returns an array of hashes containing information about all attributes in the table.
+
+```js
+queryInterface.describeTable('Person').then(function(attributes) {
+  /*
+    attributes will be something like:
+
+    {
+      name: {
+        type:         'VARCHAR(255)', // this will be 'CHARACTER VARYING' for pg!
+        allowNull:    true,
+        defaultValue: null
+      },
+      isBetaMember: {
+        type:         'TINYINT(1)', // this will be 'BOOLEAN' for pg!
+        allowNull:    false,
+        defaultValue: false
+      }
+    }
+  */
+})
+```
+
+### addColumn(tableNameOrOptions, attributeName, dataTypeOrOptions, options)
+
+This method allows adding columns to an existing table. The data type can be simple or complex.
+
+```js
+queryInterface.addColumn(
+  'nameOfAnExistingTable',
+  'nameOfTheNewAttribute',
+  Sequelize.STRING
+)
+
+// or
+
+queryInterface.addColumn(
+  'nameOfAnExistingTable',
+  'nameOfTheNewAttribute',
+  {
+    type: Sequelize.STRING,
+    allowNull: false
+  }
+)
+
+// or with an explicit schema:
+
+queryInterface.addColumn({
+    tableName: 'Person',
+    schema: 'public'
+  },
+  'signature',
+  Sequelize.STRING
+)
+
+```
+
+### removeColumn(tableNameOrOptions, attributeName, options)
+
+This method allows deletion of a specific column of an existing table.
+
+```js
+queryInterface.removeColumn('Person', 'signature')
+
+// or with an explicit schema:
+
+queryInterface.removeColumn({
+  tableName: 'Person',
+  schema: 'public'
+}, 'signature');
+```
+
+### changeColumn(tableName, attributeName, dataTypeOrOptions, options)
+
+This method changes the meta data of an attribute. It is possible to change the default value, allowance of null or the data type. Please make sure, that you are completely describing the new data type.
+
+```js
+queryInterface.changeColumn(
+  'nameOfAnExistingTable',
+  'nameOfAnExistingAttribute',
+  {
+    type: Sequelize.FLOAT,
+    allowNull: false,
+    defaultValue: 0.0
+  }
+)
+```
+
+### renameColumn(tableName, attrNameBefore, attrNameAfter, options)
+
+This methods allows renaming attributes.
+
+```js
+queryInterface.renameColumn('Person', 'signature', 'sig')
+```
+
+### addIndex(tableName, attributes, options)
+
+This methods creates indexes for specific attributes of a table. The index name will be automatically generated if it is not passed via in the options (see below).
+
+```js
+// This example will create the index person_firstname_lastname
+queryInterface.addIndex('Person', ['firstname', 'lastname'])
+
+// This example will create a unique index with the name SuperDuperIndex using the optional 'options' field.
+// Possible options:
+// - indicesType: UNIQUE|FULLTEXT|SPATIAL
+// - indexName: The name of the index. Default is __
+// - parser: For FULLTEXT columns set your parser
+// - indexType: Set a type for the index, e.g. BTREE. See the documentation of the used dialect
+// - logging: A function that receives the sql query, e.g. console.log
+queryInterface.addIndex(
+  'Person',
+  ['firstname', 'lastname'],
+  {
+    indexName: 'SuperDuperIndex',
+    indicesType: 'UNIQUE'
+  }
+)
+```
+
+### removeIndex(tableName, indexNameOrAttributes, options)
+
+This method deletes an existing index of a table.
+
+```js
+queryInterface.removeIndex('Person', 'SuperDuperIndex')
+
+// or
+
+queryInterface.removeIndex('Person', ['firstname', 'lastname'])
+```
+
+## Programmatic use
+Sequelize has a [sister library](https://github.com/sequelize/umzug) for programmatically handling execution and logging of migration tasks.
+
+
+[0]: http://gulpjs.com/
+[1]: https://github.com/sequelize/cli
+[2]: https://github.com/sequelize/gulp-sequelize
--- a/docs/specimen.md
+++ b/docs/specimen.md
@ -1,4 +1,4 @@
-# Specimen
+# Specimen should get a very long name, so we see how it behaves with the new edit url feature that is awesome

 ## Typography

@ -39,6 +39,86 @@ the `<small>` tag directly inside Markdown.

 ### Unordered lists

+## Checklists
+
+This is inline hilighted text `#!js var test = 0;` that is just awesome LOL
+
+* [ ] foo
+* [x] bar
+* [ ] baz
+    * [ ] foo
+    * [x] bar
+    * [ ] baz
+
+<ul>
+  <li class="task-list-item">
+    <input type="checkbox" disabled><label></label> This needs to be done
+  </li>
+  <li class="task-list-item">
+    <input type="checkbox" disabled checked><label></label> This is done
+
+    <ul>
+      <li class="task-list-item">
+        <input type="checkbox" disabled><label></label> This needs to be done
+      </li>
+      <li class="task-list-item">
+        <input type="checkbox" disabled checked><label></label> This is done
+      </li>
+    </ul>
+  </li>
+</ul>
+
+Another default list:
+
+* No checklist
+* Foobar
+
+    ``` js
+    function() test {
+      var foo = 12;
+      return foo;
+    }
+    ```
+
+Here is some {--*incorrect*--} Markdown.  I am adding this {++here.++}.  Here is some more {--text
+that I am removing--}text.  And here is even more {++text that I
+am ++}adding.{~~
+
+~>  ~~}Paragraph was deleted and replaced with some spaces.{~~  ~>
+
+~~}Spaces were removed and a paragraph was added.
+
+And here is a comment on {==some
+==text== ==} asdhsjakh dkah dkash dkjas hdkash dksa sahdka kas dksa hdksah dksa kdsa kdask dask {>>This works quite well. I just wanted to comment on it.<<}. Substitutions {~~is~>are~~} great!
+
+### Test {--headline--} [`with code`](http://google.com) and ==foo== [without](http://google.com)
+
+This is also ==something that is marked (tm)==. Very cool.
+
+Escape \{>>This text is preserved<<}.
+
+General block handling.
+
+{--
+
+* test
+* test
+* test
+    * test
+* test
+
+--}
+
+{++
+
+* test
+* test
+* test
+    * test
+* test
+
++}
+
 ## Code

 ### Listing
@ -46,7 +126,7 @@ the `<small>` tag directly inside Markdown.
 Pre-formatted code blocks can host code examples and use the pygments extension
 (if installed and enabled in `mkdocs.yml`) for syntax highlighting:

-``` c
+``` c hl_lines="14 15 20"
 /*!
 * Scan a buffer for a valid variable-sized integer.
 *
--- a/material/404.html
+++ b/material/404.html
@ -1 +1,4 @@
-TBD
+{% extends "base.html" %}
+{% block content %}
+  <h1>404 - Not found</h1>
+{% endblock %}
--- a/material/assets/images/icons/github-black-3dffdcccb0.svg
+++ b/material/assets/images/icons/github-black-3dffdcccb0.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="384" height="448" viewBox="0 0 384 448"><path d="M192 32q52.25 0 96.375 25.75t69.875 69.875T384 224q0 62.75-36.625 112.875T252.75 406.25q-6.75 1.25-10-1.75t-3.25-7.5q0-.75.125-19.125t.125-33.625q0-24.25-13-35.5 14.25-1.5 25.625-4.5t23.5-9.75 20.25-16.625 13.25-26.25T314.5 214q0-29.75-19.75-51.5 9.25-22.75-2-51-7-2.25-20.25 2.75t-23 11l-9.5 6q-23.25-6.5-48-6.5t-48 6.5q-4-2.75-10.625-6.75t-20.875-9.625-21.25-3.375q-11.25 28.25-2 51Q69.5 184.25 69.5 214q0 21.25 5.125 37.5t13.125 26.25 20.125 16.75 23.5 9.75 25.625 4.5q-9.75 9-12.25 25.75-5.25 2.5-11.25 3.75t-14.25 1.25-16.375-5.375T89 318.5q-4.75-8-12.125-13t-12.375-6l-5-.75q-5.25 0-7.25 1.125T51 302.75t2.25 3.5 3.25 3l1.75 1.25q5.5 2.5 10.875 9.5T77 332.75l2.5 5.75q3.25 9.5 11 15.375t16.75 7.5 17.375 1.75 13.875-.875l5.75-1q0 9.5.125 22.125T144.5 397q0 4.5-3.25 7.5t-10 1.75q-58-19.25-94.625-69.375T0 224q0-52.25 25.75-96.375T95.625 57.75 192 32zM72.75 307.75q.75-1.75-1.75-3-2.5-.75-3.25.5-.75 1.75 1.75 3 2.25 1.5 3.25-.5zm7.75 8.5q1.75-1.25-.5-4-2.5-2.25-4-.75-1.75 1.25.5 4 2.5 2.5 4 .75zM88 327.5q2.25-1.75 0-4.75-2-3.25-4.25-1.5-2.25 1.25 0 4.5T88 327.5zM98.5 338q2-2-1-4.75-3-3-5-.75-2.25 2 1 4.75 3 3 5 .75zm14.25 6.25q.75-2.75-3.25-4-3.75-1-4.75 1.75t3.25 3.75q3.75 1.5 4.75-1.5zm15.75 1.25q0-3.25-4.25-2.75-4 0-4 2.75 0 3.25 4.25 2.75 4 0 4-2.75zM143 343q-.5-2.75-4.5-2.25-4 .75-3.5 3.75t4.5 2 3.5-3.5z"/></svg>
--- a/material/assets/images/icons/github-black-da331b3ec4.svg
+++ b/material/assets/images/icons/github-black-da331b3ec4.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448"><path d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg>
--- a/material/assets/images/icons/github-white-1cfc8ff99e.svg
+++ b/material/assets/images/icons/github-white-1cfc8ff99e.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448"><path d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z" fill="#fff"/></svg>
--- a/material/assets/images/icons/github-white-75cacf3601.svg
+++ b/material/assets/images/icons/github-white-75cacf3601.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="384" height="448" viewBox="0 0 384 448"><path d="M192 32q52.25 0 96.375 25.75t69.875 69.875T384 224q0 62.75-36.625 112.875T252.75 406.25q-6.75 1.25-10-1.75t-3.25-7.5q0-.75.125-19.125t.125-33.625q0-24.25-13-35.5 14.25-1.5 25.625-4.5t23.5-9.75 20.25-16.625 13.25-26.25T314.5 214q0-29.75-19.75-51.5 9.25-22.75-2-51-7-2.25-20.25 2.75t-23 11l-9.5 6q-23.25-6.5-48-6.5t-48 6.5q-4-2.75-10.625-6.75t-20.875-9.625-21.25-3.375q-11.25 28.25-2 51Q69.5 184.25 69.5 214q0 21.25 5.125 37.5t13.125 26.25 20.125 16.75 23.5 9.75 25.625 4.5q-9.75 9-12.25 25.75-5.25 2.5-11.25 3.75t-14.25 1.25-16.375-5.375T89 318.5q-4.75-8-12.125-13t-12.375-6l-5-.75q-5.25 0-7.25 1.125T51 302.75t2.25 3.5 3.25 3l1.75 1.25q5.5 2.5 10.875 9.5T77 332.75l2.5 5.75q3.25 9.5 11 15.375t16.75 7.5 17.375 1.75 13.875-.875l5.75-1q0 9.5.125 22.125T144.5 397q0 4.5-3.25 7.5t-10 1.75q-58-19.25-94.625-69.375T0 224q0-52.25 25.75-96.375T95.625 57.75 192 32zM72.75 307.75q.75-1.75-1.75-3-2.5-.75-3.25.5-.75 1.75 1.75 3 2.25 1.5 3.25-.5zm7.75 8.5q1.75-1.25-.5-4-2.5-2.25-4-.75-1.75 1.25.5 4 2.5 2.5 4 .75zM88 327.5q2.25-1.75 0-4.75-2-3.25-4.25-1.5-2.25 1.25 0 4.5T88 327.5zM98.5 338q2-2-1-4.75-3-3-5-.75-2.25 2 1 4.75 3 3 5 .75zm14.25 6.25q.75-2.75-3.25-4-3.75-1-4.75 1.75t3.25 3.75q3.75 1.5 4.75-1.5zm15.75 1.25q0-3.25-4.25-2.75-4 0-4 2.75 0 3.25 4.25 2.75 4 0 4-2.75zM143 343q-.5-2.75-4.5-2.25-4 .75-3.5 3.75t4.5 2 3.5-3.5z" fill="#fff"/></svg>
--- a/material/assets/images/icons/gitlab-black-81ba4a278f.svg
+++ b/material/assets/images/icons/gitlab-black-81ba4a278f.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M249.865 474.507l90.684-279.097H159.18l90.684 279.097z"/><path d="M249.864 474.506L159.18 195.41H32.088l217.776 279.095z" opacity=".7"/><path d="M32.089 195.41l-27.56 84.816a18.773 18.773 0 0 0 6.822 20.99l238.514 173.29L32.089 195.41z" opacity=".5"/><path d="M32.089 195.412H159.18L104.56 27.314c-2.81-8.65-15.046-8.65-17.855 0L32.089 195.412z"/><path d="M249.865 474.506l90.684-279.095H467.64L249.865 474.506z" opacity=".7"/><path d="M467.641 195.41l27.56 84.816a18.772 18.772 0 0 1-6.822 20.99l-238.515 173.29L467.641 195.41z" opacity=".5"/><path d="M467.64 195.412H340.55l54.618-168.098c2.81-8.65 15.047-8.65 17.856 0l54.618 168.098z"/></svg>
--- a/material/assets/images/icons/gitlab-black-bedc10d7f4.svg
+++ b/material/assets/images/icons/gitlab-black-bedc10d7f4.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M249.865 474.507L340.55 195.41H159.18l90.685 279.097z"/><path d="M249.864 474.506L159.18 195.41H32.088l217.776 279.096z" opacity=".7"/><path d="M32.09 195.41L4.53 280.227a18.773 18.773 0 0 0 6.82 20.99l238.515 173.29L32.09 195.41z" opacity=".5"/><path d="M32.09 195.412h127.09L104.563 27.314c-2.81-8.65-15.047-8.65-17.856 0L32.09 195.412z"/><path d="M249.865 474.506L340.55 195.41h127.09L249.866 474.507z" opacity=".7"/><path d="M467.64 195.41l27.56 84.816a18.772 18.772 0 0 1-6.82 20.99l-238.516 173.29L467.64 195.41z" opacity=".5"/><path d="M467.64 195.412H340.55l54.617-168.098c2.81-8.65 15.047-8.65 17.856 0l54.618 168.098z"/></svg>
--- a/material/assets/images/icons/gitlab-white-3c8a368006.svg
+++ b/material/assets/images/icons/gitlab-white-3c8a368006.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M249.865 474.507L340.55 195.41H159.18l90.685 279.097z" fill="#fff"/><path d="M249.864 474.506L159.18 195.41H32.088l217.776 279.096z" fill="#fff" opacity=".7"/><path d="M32.09 195.41L4.53 280.227a18.773 18.773 0 0 0 6.82 20.99l238.515 173.29L32.09 195.41z" fill="#fff" opacity=".5"/><path d="M32.09 195.412h127.09L104.563 27.314c-2.81-8.65-15.047-8.65-17.856 0L32.09 195.412z" fill="#fff"/><path d="M249.865 474.506L340.55 195.41h127.09L249.866 474.507z" fill="#fff" opacity=".7"/><path d="M467.64 195.41l27.56 84.816a18.772 18.772 0 0 1-6.82 20.99l-238.516 173.29L467.64 195.41z" fill="#fff" opacity=".5"/><path d="M467.64 195.412H340.55l54.617-168.098c2.81-8.65 15.047-8.65 17.856 0l54.618 168.098z" fill="#fff"/></svg>
--- a/material/assets/images/icons/gitlab-white-d65054b8fe.svg
+++ b/material/assets/images/icons/gitlab-white-d65054b8fe.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M249.865 474.507l90.684-279.097H159.18l90.684 279.097z" fill="#fff"/><path d="M249.864 474.506L159.18 195.41H32.088l217.776 279.095z" fill="#fff" opacity=".7"/><path d="M32.089 195.41l-27.56 84.816a18.773 18.773 0 0 0 6.822 20.99l238.514 173.29L32.089 195.41z" fill="#fff" opacity=".5"/><path d="M32.089 195.412H159.18L104.56 27.314c-2.81-8.65-15.046-8.65-17.855 0L32.089 195.412z" fill="#fff"/><path d="M249.865 474.506l90.684-279.095H467.64L249.865 474.506z" fill="#fff" opacity=".7"/><path d="M467.641 195.41l27.56 84.816a18.772 18.772 0 0 1-6.822 20.99l-238.515 173.29L467.641 195.41z" fill="#fff" opacity=".5"/><path d="M467.64 195.412H340.55l54.618-168.098c2.81-8.65 15.047-8.65 17.856 0l54.618 168.098z" fill="#fff"/></svg>
--- a/material/assets/javascripts/application-48691dba51.js
+++ b/material/assets/javascripts/application-48691dba51.js
--- a/material/assets/javascripts/modernizr-772e114b08.js
+++ b/material/assets/javascripts/modernizr-772e114b08.js
--- a/material/assets/javascripts/modernizr-d3fe1698b6.js
+++ b/material/assets/javascripts/modernizr-d3fe1698b6.js
--- a/material/assets/stylesheets/application-07c02d33cc.css
+++ b/material/assets/stylesheets/application-07c02d33cc.css
--- a/material/assets/stylesheets/application-cbcef7edd5.css
+++ b/material/assets/stylesheets/application-cbcef7edd5.css
--- a/material/base.html
+++ b/material/base.html
@ -20,11 +20,11 @@
      <meta name="author" content="{{ site_author }}">
    {% endif %}
    <meta name="generator" content="mkdocs+mkdocs-material#0.2.1">
-    <script src="{{ base_url }}/assets/javascripts/modernizr-772e114b08.js"></script>
+    <script src="{{ base_url }}/assets/javascripts/modernizr-d3fe1698b6.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:500">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-07c02d33cc.css">
+    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-cbcef7edd5.css">
    {% for path in extra_css %}
      <link rel="stylesheet" href="{{ path }}">
    {% endfor %}
@ -33,21 +33,39 @@
    <input class="md-toggle md-toggle--drawer" type="checkbox" id="drawer">
    <input class="md-toggle md-toggle--search" type="checkbox" id="search">
    <label class="md-overlay" for="drawer"></label>
-    {% include "header.html" %}
+    {% include "partials/header.html" %}
    <div class="md-container">
      <main class="md-main">
        <div class="md-main__inner md-grid">
          {% set h1 = "\x3ch1 id=" in content %}
          {% if nav %}
-            {% include "nav.html" %}
+            <div class="md-sidebar md-sidebar--primary md-js__sidebar">
+              <div class="md-sidebar__scrollwrap">
+                <div class="md-sidebar__inner">
+                  {% include "partials/nav.html" %}
+                </div>
+              </div>
+            </div>
          {% endif %}
          {% if toc %}
-            {% include "toc.html" %}
+            <div class="md-sidebar md-sidebar--secondary md-js__sidebar">
+              <div class="md-sidebar__scrollwrap">
+                <div class="md-sidebar__inner">
+                  {% include "partials/toc.html" %}
+                </div>
+              </div>
+            </div>
          {% endif %}
          <div class="md-content md-content--typeset">
            <article class="md-content__inner">
-                                                          <div class="floater">Edit on GitHub</div>
-              {{ content }}
+              {% block content %}
+                {% if edit_uri %}
+                  <a class="md-button md-button--edit" href="{{ edit_uri }}">
+                    Edit
+                  </a>
+                {% endif %}
+                {{ content }}
+              {% endblock %}
              <hr>
              <small class="md-content__copyright">
                {% if copyright %}
@ -67,15 +85,15 @@
          </div>
        </div>
      </main>
-      {% include "footer.html" %}
+      {% include "partials/footer.html" %}
    </div>
    <script>
      var base_url = '{{ base_url }}';
      var repo_url = '{{ repo_url }}';
    </script>
-    <script src="{{ base_url }}/assets/javascripts/application-ac947cb450.js"></script>
+    <script src="{{ base_url }}/assets/javascripts/application-48691dba51.js"></script>
    {% for path in extra_javascript %}
      <script src="{{ path }}"></script>
    {% endfor %}
  </body>
-</html>
+</html>
--- a/material/nav-item.html
+++ b/material/nav-item.html
@ -1,32 +0,0 @@
-{% if nav_item.children %}
-  <li class="md-nav__item">
-    {% if nav_item.active %}
-      <input class="md-toggle md-nav__toggle" type="checkbox" id="{{ path }}" checked>
-    {% else %}
-      <input class="md-toggle md-nav__toggle" type="checkbox" id="{{ path }}">
-    {% endif %}
-    <label class="md-nav__link" for="{{ path }}">
-      {{ nav_item.title }}
-    </label>
-    <ul class="md-nav__list">
-      {% for nav_item in nav_item.children %}
-        {% set temp = path %}
-        {% set path = path + "-" + loop.index | string %}
-        {% include "nav-item.html" %}
-        {% set path = temp %}
-      {% endfor %}
-    </ul>
-  </li>
-{% else %}
-  <li class="md-nav__item">
-    {% if nav_item.active %}
-      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
-        {{ nav_item.title }}
-      </a>
-    {% else %}
-      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link">
-        {{ nav_item.title }}
-      </a>
-    {% endif %}
-  </li>
-{% endif %}
--- a/material/nav.html
+++ b/material/nav.html
@ -1,13 +0,0 @@
-<div class="md-sidebar md-sidebar--primary md-js__sidebar">
-  <div class="md-sidebar__scrollwrap">
-    <nav class="md-sidebar__inner md-nav">
-      <h3 class="md-nav__title">Navigation</h3>
-      <ul class="md-nav__list">
-        {% for nav_item in nav %}
-          {% set path = "md-toggle-nav-" + loop.index | string %}
-          {% include "nav-item.html" %}
-        {% endfor %}
-      </ul>
-    </nav>
-  </div>
-</div>
--- a/material/partials/footer.html
+++ b/material/partials/footer.html
@ -35,4 +35,4 @@
      </nav>
    </div>
  {% endif %}
-</footer>
+</footer>
--- a/material/partials/header.html
+++ b/material/partials/header.html
@ -9,31 +9,9 @@
          {{ page_title | default(site_name, true) }}
        </span>
      </div>
-      <div class="md-flex__cell md-flex__cell--shrink">                         
+      <div class="md-flex__cell md-flex__cell--shrink">
        <label class="md-icon md-icon--search md-header-nav__icon" for="search"></label>
-        <div class="md-search__overlay"></div>                                  
-        <div class="md-search__inner">
-          <form class="md-search__form">
-            <input type="text" class="md-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="query">
-            <label class="md-icon md-icon--search md-search__icon" for="query"></label>
-            <div class="md-search__suggest">
-              FOO<br>
-              FOO<br>
-              FOO<br>
-              FOO<br>
-              FOO<br>
-              FOO<br>
-              FOO<br>
-              FOO<br>
-              FOO<br>
-              FOO<br>
-              FOO<br>
-              FOO<br>
-              FOO<br>
-              FOO<br>
-            </div>
-          </form>
-        </div>
+        {% include "partials/search.html" %}
      </div>
      {% if "github." in repo_url %}
        {% set platform = "md-source--github" %}
@ -47,13 +25,11 @@
      <div class="md-flex__cell md-flex__cell--shrink">
        <a href="{{ repo_url }}" title="Go to repository" class="md-source {{ platform }}">
          <div class="md-source__repository">{{ repo_name }}</div>
-          <div class="md-source__stats">
-            0.2.4 &middot; 177 Stars &middot; 46 Forks
-          </div>
+          <ul class="md-source__facts">
+            <li class="md-source__fact">v0.2.4</li>                             
+          </ul>
        </a>
      </div>
    </div>
  </nav>
-  <nav class="md-header-search">
-  </nav>
-</header>
+</header>
--- a/material/partials/nav-item.html
+++ b/material/partials/nav-item.html
@ -0,0 +1,50 @@
+{% if nav_item.children or nav_item == current_page %}
+  <li class="md-nav__item md-nav__item--nested">
+    {% if nav_item == current_page %}
+      {% set path = "toc" %}
+    {% endif %}
+    {% if nav_item.active and not nav_item == current_page %}
+      <input class="md-toggle md-nav__toggle" type="checkbox" id="{{ path }}" checked>
+    {% else %}
+      <input class="md-toggle md-nav__toggle" type="checkbox" id="{{ path }}">
+    {% endif %}
+    {% if nav_item == current_page %}
+      <label class="md-nav__link md-nav__link--active" for="{{ path }}">
+        {{ nav_item.title }}
+      </label>
+      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
+        {{ nav_item.title }}
+      </a>
+      {% include "partials/toc.html" %}
+    {% else %}
+      <label class="md-nav__link" for="{{ path }}">
+        {{ nav_item.title }}
+      </label>
+      <nav class="md-nav">
+        <label class="md-nav__title" for="{{ path }}">
+          {{ nav_item.title }}
+        </label>
+        <ul class="md-nav__list">
+          {% for nav_item in nav_item.children %}
+            {% set temp = path %}
+            {% set path = path + "-" + loop.index | string %}
+            {% include "partials/nav-item.html" %}
+            {% set path = temp %}
+          {% endfor %}
+        </ul>
+      </nav>
+    {% endif %}
+  </li>
+{% else %}
+  <li class="md-nav__item">
+    {% if nav_item.active %}
+      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
+        {{ nav_item.title }}
+      </a>
+    {% else %}
+      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link">
+        {{ nav_item.title }}
+      </a>
+    {% endif %}
+  </li>
+{% endif %}
--- a/material/partials/nav.html
+++ b/material/partials/nav.html
@ -0,0 +1,9 @@
+<nav class="md-nav md-nav--primary">
+  <label class="md-nav__title" for="drawer">Navigation</label>
+  <ul class="md-nav__list">
+    {% for nav_item in nav %}
+      {% set path = "nav-" + loop.index | string %}
+      {% include "partials/nav-item.html" %}
+    {% endfor %}
+  </ul>
+</nav>
--- a/material/partials/search.html
+++ b/material/partials/search.html
@ -0,0 +1,20 @@
+<div class="md-search">
+  <div class="md-search__overlay"></div>                                  
+  <div class="md-search__inner">
+    <form class="md-search__form">
+      <input type="text" class="md-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="query">             
+      <label class="md-icon md-icon--search md-search__icon" for="query"></label>
+      <div class="md-search__suggest">
+        <div class="md-search-term">
+          change color
+        </div>
+        <div class="md-search-term">
+          fork theme
+        </div>
+        <div class="md-search-term">  
+          contributing
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
--- a/material/partials/toc-item.html
+++ b/material/partials/toc-item.html
@ -0,0 +1,14 @@
+<li class="md-nav__item">
+  <a href="{{ toc_item.url }}" title="{{ toc_item.title }}" class="md-nav__link">
+    {{ toc_item.title }}
+  </a>
+  {% if toc_item.children %}
+    <nav class="md-nav">
+      <ul class="md-nav__list">
+        {% for toc_item in toc_item.children %}
+          {% include "partials/toc-item.html" %}
+        {% endfor %}
+      </ul>
+    </nav>
+  {% endif %}
+</li>
--- a/material/partials/toc.html
+++ b/material/partials/toc.html
@ -0,0 +1,13 @@
+<nav class="md-nav md-nav--secondary">
+  {% if h1 %}
+    {% set toc = (toc | first).children %}
+  {% endif %}
+  {% if toc and (toc | first) %}
+    <label class="md-nav__title" for="toc">Table of contents</label>
+    <ul class="md-nav__list">
+      {% for toc_item in toc %}
+        {% include "partials/toc-item.html" %}
+      {% endfor %}
+    </ul>
+  {% endif %}
+</nav>
--- a/material/search.html
+++ b/material/search.html
--- a/material/toc-item.html
+++ b/material/toc-item.html
@ -1,12 +0,0 @@
-<li class="md-nav__item">
-  <a href="{{ toc_item.url }}" title="{{ toc_item.title }}" class="md-nav__link">
-    {{ toc_item.title }}
-  </a>
-  {% if toc_item.children %}
-    <ul class="md-nav__list">
-      {% for toc_item in toc_item.children %}
-        {% include "toc-item.html" %}
-      {% endfor %}
-    </ul>
-  {% endif %}
-</li>
--- a/material/toc.html
+++ b/material/toc.html
@ -1,17 +0,0 @@
-<div class="md-sidebar md-sidebar--secondary md-js__sidebar">
-  <div class="md-sidebar__scrollwrap">
-    <nav class="md-sidebar__inner md-nav md-nav--toc">
-      {% if h1 %}
-        {% set toc = (toc | first).children %}
-      {% endif %}
-      {% if toc and (toc | first) %}
-        <h3 class="md-nav__title">Table of contents</h3>
-        <ul class="md-nav__list">
-          {% for toc_item in toc %}
-            {% include "toc-item.html" %}
-          {% endfor %}
-        </ul>
-      {% endif %}
-    </nav>
-  </div>
-</div>
--- a/mkdocs.yml
+++ b/mkdocs.yml
@ -25,7 +25,7 @@ site_author: Martin Donath
 site_url: http://squidfunk.github.io/mkdocs-material/

 # Repository
-repo_name: GitHub
+repo_name: squidfunk/mkdocs-material
 repo_url: https://github.com/squidfunk/mkdocs-material

 # Copyright
@ -33,7 +33,6 @@ copyright: 'Copyright &copy 2016 Martin Donath'

 # Documentation and theme
 theme_dir: material
-theme: amelia

 # Options
 extra:
@ -48,11 +47,11 @@ extra:

 # Extensions
 markdown_extensions:
-  - admonition
-  - codehilite
-  - footnotes
-  - meta
-  - toc:
+  - markdown.extensions.admonition
+  - markdown.extensions.codehilite
+  - markdown.extensions.footnotes
+  - markdown.extensions.meta
+  - markdown.extensions.toc:
      permalink: '¶'

 # Page tree
@ -65,6 +64,10 @@ pages:
    - Footnotes: extensions/footnotes.md
    - Permalinks: extensions/permalinks.md
    - Meta: extensions/meta.md
+  - Foo:
+    - Test:
+      - Permalinks: extensions/permalinks.md
+      - Meta: index.md
  - Specimen: specimen.md
  - Customization: customization.md
  - License: license.md
--- a/src/404.html
+++ b/src/404.html
@ -1 +1,28 @@
-TBD
+<!--
+  Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+{% extends "base.html" %}
+
+<!-- Content block -->
+{% block content %}
+  <h1>404 - Not found</h1>
+{% endblock %}
--- a/src/assets/images/icons/bitbucket-black.svg
+++ b/src/assets/images/icons/bitbucket-black.svg
@ -1,20 +1,20 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="352" height="448"
    viewBox="0 0 352 448">
  <path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875
-      1.5q-9.75-4.25-13.375-14.5t-0.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875
-      6.875 16.875zM231.5 209.5q-3.5-26.75-28.25-41t-49.25-3.25q-15.75 7-25.125
-      22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2
-      38-21t12.5-42zM291.25
-      74q-5-6.75-14-11.125t-14.5-5.5-17.75-3.125q-72.75-11.75-141.5 0.5-10.75
-      1.75-16.5 3t-13.75 5.5-12.5 10.75q7.5 7 19 11.375t18.375 5.5 21.875
-      2.875q57 7.25 112 0.25 15.75-2 22.375-3t18.125-5.375 18.75-11.625zM305.5
-      332.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5 12-47.375
-      17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5t-19.125-6.75-18.25-10.875-13-15.375q-6.25-24-14.25-73l1.5-4
-      4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2
-      9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875
-      10-13.625 7.75q-63 31.5-152.5
-      22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875-1.375-8.75q-2.25-12.5-6.625-37.5t-7-40.375-5.875-36.875-5.5-39.5q0.75-6.5
-      4.375-12.125t7.875-9.375 11.25-7.5 11.5-5.625 12-4.625q31.25-11.5 78.25-16
-      94.75-9.25 169 12.5 38.75 11.5 53.75 30.5 4 5 4.125 12.75t-1.375
-      13.5z" />
+        1.5q-9.75-4.25-13.375-14.5t-0.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875
+        6.875 16.875zM231.5 209.5q-3.5-26.75-28.25-41t-49.25-3.25q-15.75
+        7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2
+        38-21t12.5-42zM291.25
+        74q-5-6.75-14-11.125t-14.5-5.5-17.75-3.125q-72.75-11.75-141.5 0.5-10.75
+        1.75-16.5 3t-13.75 5.5-12.5 10.75q7.5 7 19 11.375t18.375 5.5 21.875
+        2.875q57 7.25 112 0.25 15.75-2 22.375-3t18.125-5.375 18.75-11.625zM305.5
+        332.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5
+        12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5t-19.125-6.75-18.25-10.875-13-15.375q-6.25-24-14.25-73l1.5-4
+        4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2
+        9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875
+        10-13.625 7.75q-63 31.5-152.5
+        22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875-1.375-8.75q-2.25-12.5-6.625-37.5t-7-40.375-5.875-36.875-5.5-39.5q0.75-6.5
+        4.375-12.125t7.875-9.375 11.25-7.5 11.5-5.625 12-4.625q31.25-11.5
+        78.25-16 94.75-9.25 169 12.5 38.75 11.5 53.75 30.5 4 5 4.125
+        12.75t-1.375 13.5z" />
 </svg>
--- a/src/assets/images/icons/bitbucket-white.svg
+++ b/src/assets/images/icons/bitbucket-white.svg
@ -1,20 +1,20 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="352" height="448"
    viewBox="0 0 352 448">
  <path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875
-      1.5q-9.75-4.25-13.375-14.5t-0.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875
-      6.875 16.875zM231.5 209.5q-3.5-26.75-28.25-41t-49.25-3.25q-15.75 7-25.125
-      22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2
-      38-21t12.5-42zM291.25
-      74q-5-6.75-14-11.125t-14.5-5.5-17.75-3.125q-72.75-11.75-141.5 0.5-10.75
-      1.75-16.5 3t-13.75 5.5-12.5 10.75q7.5 7 19 11.375t18.375 5.5 21.875
-      2.875q57 7.25 112 0.25 15.75-2 22.375-3t18.125-5.375 18.75-11.625zM305.5
-      332.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5 12-47.375
-      17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5t-19.125-6.75-18.25-10.875-13-15.375q-6.25-24-14.25-73l1.5-4
-      4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2
-      9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875
-      10-13.625 7.75q-63 31.5-152.5
-      22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875-1.375-8.75q-2.25-12.5-6.625-37.5t-7-40.375-5.875-36.875-5.5-39.5q0.75-6.5
-      4.375-12.125t7.875-9.375 11.25-7.5 11.5-5.625 12-4.625q31.25-11.5 78.25-16
-      94.75-9.25 169 12.5 38.75 11.5 53.75 30.5 4 5 4.125 12.75t-1.375
-      13.5z" fill="white" />
+        1.5q-9.75-4.25-13.375-14.5t-0.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875
+        6.875 16.875zM231.5 209.5q-3.5-26.75-28.25-41t-49.25-3.25q-15.75
+        7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2
+        38-21t12.5-42zM291.25
+        74q-5-6.75-14-11.125t-14.5-5.5-17.75-3.125q-72.75-11.75-141.5 0.5-10.75
+        1.75-16.5 3t-13.75 5.5-12.5 10.75q7.5 7 19 11.375t18.375 5.5 21.875
+        2.875q57 7.25 112 0.25 15.75-2 22.375-3t18.125-5.375 18.75-11.625zM305.5
+        332.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5
+        12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5t-19.125-6.75-18.25-10.875-13-15.375q-6.25-24-14.25-73l1.5-4
+        4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2
+        9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875
+        10-13.625 7.75q-63 31.5-152.5
+        22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875-1.375-8.75q-2.25-12.5-6.625-37.5t-7-40.375-5.875-36.875-5.5-39.5q0.75-6.5
+        4.375-12.125t7.875-9.375 11.25-7.5 11.5-5.625 12-4.625q31.25-11.5
+        78.25-16 94.75-9.25 169 12.5 38.75 11.5 53.75 30.5 4 5 4.125
+        12.75t-1.375 13.5z" fill="white" />
 </svg>
--- a/src/assets/images/icons/github-black.svg
+++ b/src/assets/images/icons/github-black.svg
@ -1,25 +1,18 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="384" height="448"
-    viewBox="0 0 384 448">
-  <path d="M192 32q52.25 0 96.375 25.75t69.875 69.875 25.75 96.375q0
-        62.75-36.625 112.875t-94.625 69.375q-6.75 1.25-10-1.75t-3.25-7.5q0-0.75
-        0.125-19.125t0.125-33.625q0-24.25-13-35.5 14.25-1.5 25.625-4.5t23.5-9.75
-        20.25-16.625 13.25-26.25 5.125-37.625q0-29.75-19.75-51.5
-        9.25-22.75-2-51-7-2.25-20.25 2.75t-23 11l-9.5 6q-23.25-6.5-48-6.5t-48
-        6.5q-4-2.75-10.625-6.75t-20.875-9.625-21.25-3.375q-11.25 28.25-2
-        51-19.75 21.75-19.75 51.5 0 21.25 5.125 37.5t13.125 26.25 20.125 16.75
-        23.5 9.75 25.625 4.5q-9.75 9-12.25 25.75-5.25 2.5-11.25 3.75t-14.25
-        1.25-16.375-5.375-13.875-15.625q-4.75-8-12.125-13t-12.375-6l-5-0.75q-5.25
-        0-7.25 1.125t-1.25 2.875 2.25 3.5 3.25 3l1.75 1.25q5.5 2.5 10.875
-        9.5t7.875 12.75l2.5 5.75q3.25 9.5 11 15.375t16.75 7.5 17.375 1.75
-        13.875-0.875l5.75-1q0 9.5 0.125 22.125t0.125 13.625q0 4.5-3.25 7.5t-10
-        1.75q-58-19.25-94.625-69.375t-36.625-112.875q0-52.25
-        25.75-96.375t69.875-69.875 96.375-25.75zM72.75
-        307.75q0.75-1.75-1.75-3-2.5-0.75-3.25 0.5-0.75 1.75 1.75 3 2.25 1.5
-        3.25-0.5zM80.5 316.25q1.75-1.25-0.5-4-2.5-2.25-4-0.75-1.75 1.25 0.5 4
-        2.5 2.5 4 0.75zM88 327.5q2.25-1.75 0-4.75-2-3.25-4.25-1.5-2.25 1.25 0
-        4.5t4.25 1.75zM98.5 338q2-2-1-4.75-3-3-5-0.75-2.25 2 1 4.75 3 3 5
-        0.75zM112.75 344.25q0.75-2.75-3.25-4-3.75-1-4.75 1.75t3.25 3.75q3.75
-        1.5 4.75-1.5zM128.5 345.5q0-3.25-4.25-2.75-4 0-4 2.75 0 3.25 4.25 2.75
-        4 0 4-2.75zM143 343q-0.5-2.75-4.5-2.25-4 0.75-3.5 3.75t4.5 2
-        3.5-3.5z" />
+<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448"
+    viewBox="0 0 416 448">
+  <path d="M160 304q0 10-3.125 20.5t-10.75 19-18.125
+        8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5
+        18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75
+        19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19
+        18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360
+        304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25
+        2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8
+        38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0
+        37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25
+        82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75
+        1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75
+        0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25
+        30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5
+        46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34
+        99.5z" />
 </svg>
--- a/src/assets/images/icons/github-white.svg
+++ b/src/assets/images/icons/github-white.svg
@ -1,25 +1,18 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="384" height="448"
-    viewBox="0 0 384 448">
-  <path d="M192 32q52.25 0 96.375 25.75t69.875 69.875 25.75 96.375q0
-        62.75-36.625 112.875t-94.625 69.375q-6.75 1.25-10-1.75t-3.25-7.5q0-0.75
-        0.125-19.125t0.125-33.625q0-24.25-13-35.5 14.25-1.5 25.625-4.5t23.5-9.75
-        20.25-16.625 13.25-26.25 5.125-37.625q0-29.75-19.75-51.5
-        9.25-22.75-2-51-7-2.25-20.25 2.75t-23 11l-9.5 6q-23.25-6.5-48-6.5t-48
-        6.5q-4-2.75-10.625-6.75t-20.875-9.625-21.25-3.375q-11.25 28.25-2
-        51-19.75 21.75-19.75 51.5 0 21.25 5.125 37.5t13.125 26.25 20.125 16.75
-        23.5 9.75 25.625 4.5q-9.75 9-12.25 25.75-5.25 2.5-11.25 3.75t-14.25
-        1.25-16.375-5.375-13.875-15.625q-4.75-8-12.125-13t-12.375-6l-5-0.75q-5.25
-        0-7.25 1.125t-1.25 2.875 2.25 3.5 3.25 3l1.75 1.25q5.5 2.5 10.875
-        9.5t7.875 12.75l2.5 5.75q3.25 9.5 11 15.375t16.75 7.5 17.375 1.75
-        13.875-0.875l5.75-1q0 9.5 0.125 22.125t0.125 13.625q0 4.5-3.25 7.5t-10
-        1.75q-58-19.25-94.625-69.375t-36.625-112.875q0-52.25
-        25.75-96.375t69.875-69.875 96.375-25.75zM72.75
-        307.75q0.75-1.75-1.75-3-2.5-0.75-3.25 0.5-0.75 1.75 1.75 3 2.25 1.5
-        3.25-0.5zM80.5 316.25q1.75-1.25-0.5-4-2.5-2.25-4-0.75-1.75 1.25 0.5 4
-        2.5 2.5 4 0.75zM88 327.5q2.25-1.75 0-4.75-2-3.25-4.25-1.5-2.25 1.25 0
-        4.5t4.25 1.75zM98.5 338q2-2-1-4.75-3-3-5-0.75-2.25 2 1 4.75 3 3 5
-        0.75zM112.75 344.25q0.75-2.75-3.25-4-3.75-1-4.75 1.75t3.25 3.75q3.75
-        1.5 4.75-1.5zM128.5 345.5q0-3.25-4.25-2.75-4 0-4 2.75 0 3.25 4.25 2.75
-        4 0 4-2.75zM143 343q-0.5-2.75-4.5-2.25-4 0.75-3.5 3.75t4.5 2
-        3.5-3.5z" fill="white" />
+<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448"
+    viewBox="0 0 416 448">
+  <path d="M160 304q0 10-3.125 20.5t-10.75 19-18.125
+        8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5
+        18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75
+        19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19
+        18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360
+        304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25
+        2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8
+        38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0
+        37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25
+        82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75
+        1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75
+        0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25
+        30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5
+        46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34
+        99.5z" fill="white" />
 </svg>
--- a/src/assets/javascripts/application.js
+++ b/src/assets/javascripts/application.js
@ -118,7 +118,44 @@ document.addEventListener('DOMContentLoaded', function() {
    }
  });

+// setTimeout(function() {
+  fetch('https://api.github.com/repos/squidfunk/mkdocs-material')
+    .then(function(response) {
+      return response.json()
+    }).then(function(data) {
+      var stars = data.stargazers_count;
+      var forks = data.forks_count;
+      // store in session!!!
+      var list = document.querySelector('.md-source__facts');
+      // list.innerHTML += '<li class="md-source__fact">' + stars + ' Stars</li>\n';
+      // list.innerHTML += '<li>' + forks + ' Forks</li>\n';
+
+      var li = document.createElement('li');
+      li.className = 'md-source__fact md-source__fact--hidden';
+      li.innerText = stars + ' Stars';
+      list.appendChild(li);


+      setTimeout(function(li) {
+        li.classList.remove('md-source__fact--hidden');
+      }, 100, li);
+
+      li = document.createElement('li');
+      li.className = 'md-source__fact md-source__fact--hidden';
+      li.innerText = forks + ' Forks';
+      list.appendChild(li);
+
+      setTimeout(function(li) {
+        li.classList.remove('md-source__fact--hidden');
+      }, 500, li);
+
+      // setTimeout(function() {
+      //   li.classList.remove('md-source__fact--hidden');
+      // }, 100);
+
+    }).catch(function(ex) {
+      console.log('parsing failed', ex)
+    });
+// }, 1000);

 });
--- a/src/assets/javascripts/components/sidebar.js
+++ b/src/assets/javascripts/components/sidebar.js
@ -92,7 +92,7 @@ class Sidebar {
   */
  reset() {
    this.el_.classList.remove('md-js__sidebar--locked');
-    this.el_.style.height_ = '';
+    this.el_.style.height = '';

    /* Reset parameters */
    this.height_ = 0;
--- a/src/assets/stylesheets/_config.scss
+++ b/src/assets/stylesheets/_config.scss
@ -54,17 +54,34 @@ $break-devices: (
 // ----------------------------------------------------------------------------

 // Primary and accent colors
-$md-color-primary:         $clr-indigo-500;
-$md-color-accent:          $clr-indigo-a200;
+$md-color-primary:                    $clr-indigo-500;
+$md-color-accent:                     $clr-indigo-a200;

 // Shades of black
-$md-color-black:           hsla(0, 0%, 0%, 0.87);
-$md-color-black--light:    hsla(0, 0%, 0%, 0.54);
-$md-color-black--lighter:  hsla(0, 0%, 0%, 0.26);
-$md-color-black--lightest: hsla(0, 0%, 0%, 0.07);
+$md-color-black:                      hsla(0, 0%, 0%, 0.87);
+$md-color-black--light:               hsla(0, 0%, 0%, 0.54);
+$md-color-black--lighter:             hsla(0, 0%, 0%, 0.26);
+$md-color-black--lightest:            hsla(0, 0%, 0%, 0.07);

 // Shades of white
-$md-color-white:           hsla(0, 0%, 100%, 1.00);
-$md-color-white--light:    hsla(0, 0%, 100%, 0.70);
-$md-color-white--lighter:  hsla(0, 0%, 100%, 0.30);
-$md-color-white--lightest: hsla(0, 0%, 100%, 0.12);
+$md-color-white:                      hsla(0, 0%, 100%, 1.00);
+$md-color-white--light:               hsla(0, 0%, 100%, 0.70);
+$md-color-white--lighter:             hsla(0, 0%, 100%, 0.30);
+$md-color-white--lightest:            hsla(0, 0%, 100%, 0.12);
+
+// ----------------------------------------------------------------------------
+// Sizing and spacing
+// ----------------------------------------------------------------------------
+
+// Icons
+$md-icon-size:                        $ms-base * 1.5;
+$md-icon-padding:                     $ms-base * 0.5;
+$md-icon-margin:                      $ms-base * 0.25;
+
+// Code blocks
+$md-code-background:                  #F7F7F7;
+$md-code-color:                       #37474F;
+
+// Keystrokes
+$md-keyboard-background:              #FCFCFC;
+$md-keyboard-color:                   #555555;
--- a/src/assets/stylesheets/_shame.scss
+++ b/src/assets/stylesheets/_shame.scss
@ -77,7 +77,27 @@
 }

 .md-search-term {
+  position: relative;
+  padding: 0 0.8rem 0 4.8rem;
+  line-height: 4.0rem; // don't use line height????
+  font-size: 1.6rem;

+  &::before {
+    @extend %md-icon;
+
+    position: absolute;
+
+    content: "access_time";
+    font-size: 2.4rem;
+    line-height: 4.0rem; // this sucks...
+    left: 1.2rem;
+    color: $md-color-black--lighter;
+  }
+  transition: background .25s;
+  cursor: pointer;
+  &:hover {
+    background: mix($md-color-white, $md-color-primary, 90%);
+  }
 }

 .checklist {
@ -234,3 +254,48 @@ mark {
  padding: 0 16px;
 }

+// [tablet -]: Adjust spacing on screens
+@include break-to-device(tablet) {
+  .md-sidebar--primary {
+    .md-nav--secondary .md-nav {
+      position: static; // TODO DODODODODO
+
+      .md-nav__item {
+        padding-left: 1.2rem;
+      }
+    }
+    // second level list!
+    .md-nav--secondary .md-nav__list .md-nav__list {
+      position: static;
+      pointer-events: initial; //!!!
+    }
+    .md-nav__item {
+      // transition: background .25s;
+      //
+      // & :hover {
+      //   background: lighten($md-color-primary, 50%);
+      // }
+    }
+  }
+}
+
+// .md-nav--secondary > .md-nav__title {
+//   // -webkit-overflow-scrolling: touch;
+//   @include z-depth(1);
+// }
+// .md-nav__toggle:checked ~ .md-nav > .md-nav__list {
+//
+//   > :first-child {
+//     border-top: 0;
+//   }
+//
+// 	background:
+// 		linear-gradient(white 10%, rgba(255,255,255,0)), // cover
+//     linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 60%); // shadow
+// 	background-repeat: no-repeat;
+// 	background-color: white;
+// 	background-size: 100% 20px, 100% 4px;
+//
+// 	/* Opera doesn't support this in the shorthand */
+// 	background-attachment: local, scroll;
+// }
--- a/src/assets/stylesheets/base/_icons.scss
+++ b/src/assets/stylesheets/base/_icons.scss
@ -24,9 +24,8 @@
 // Icon set
 // ----------------------------------------------------------------------------

-// Base icon class
-%md-icon,
-.md-icon {
+// Icon placeholders
+%md-icon {
  font-family: "Material Icons";
  font-style: normal;
  font-variant: normal;
@ -41,17 +40,31 @@
  // Enable font-smoothing in Webkit and FF
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-}

-// Build representational classes
-@each $ligature, $name in (
-  "arrow_back": "back",
-  "arrow_forward": "forward",
-  "close": "close",
-  "menu": "menu",
-  "search": "search"
-) {
-  .md-icon--#{$name}::before {
-    content: $ligature;
+  // Icon rendered as button
+  &__button {
+    display: inline-block;
+    margin: $md-icon-margin;
+    padding: $md-icon-padding;
+    font-size: $md-icon-size;
+    cursor: pointer;
+  }
+}
+
+// Representational classes
+.md-icon {
+  @extend %md-icon;
+
+  // Build representational classes
+  @each $ligature, $name in (
+    "arrow_back": "back",
+    "arrow_forward": "forward",
+    "close": "close",
+    "menu": "menu",
+    "search": "search"
+  ) {
+    &--#{$name}::before {
+      content: $ligature;
+    }
  }
 }
--- a/src/assets/stylesheets/base/_reset.scss
+++ b/src/assets/stylesheets/base/_reset.scss
@ -42,9 +42,7 @@ html {
 }

 // Prevent adjustments of font size after orientation changes in IE and iOS
-// and set base font-size to 10px for simple rem calculations.
 html {
-  font-size: 62.5%;
  text-size-adjust: none;
 }

--- a/src/assets/stylesheets/base/_typeset.scss
+++ b/src/assets/stylesheets/base/_typeset.scss
@ -25,8 +25,7 @@
 // ----------------------------------------------------------------------------

 // Default fonts
-body,
-kbd {
+body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-feature-settings: "kern", "onum", "liga";
@ -43,9 +42,10 @@ kbd {

 // Proportionally spaced fonts
 pre,
-code {
+code,
+kbd {
  font-family: "Roboto Mono", "Courier New", Courier, monospace;
-  font-weight: 500;
+  font-weight: 400;
  font-feature-settings: "kern", "onum", "liga";

  // Use system fonts, if browser doesn't support webfonts
@ -60,6 +60,7 @@ code {

 // Content that is typeset
 .md-content--typeset {
+  color: $md-color-black;
  font-size: ms(0);
  line-height: 1.6;

@ -68,7 +69,7 @@ code {
  ul,
  ol,
  blockquote {
-    margin: 1.25em 0;
+    margin: 1.0em 0;
  }

  // 1st level headline
@ -155,23 +156,34 @@ code {
    margin: 0 0.4rem;
    padding: 0.1rem 0;
    border-radius: 0.2rem;
-    background: #F7F7F7;
-    color: #37474F;
+    background: $md-code-background;
+    color: $md-code-color;
    font-size: 85%;
-    box-shadow: 0.4rem 0 0 #F7F7F7,
-               -0.4rem 0 0 #F7F7F7;
+    box-shadow: 0.4rem 0 0 $md-code-background,
+               -0.4rem 0 0 $md-code-background;
    word-break: break-word;
-
    box-decoration-break: clone;
  }

+  // Disable containing block inside headlines
+  h1 code,
+  h2 code,
+  h3 code,
+  h4 code,
+  h5 code,
+  h6 code {
+    margin: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
  // Formatted code blocks
  pre {
-    margin: 2.0rem 0;
+    margin: 1.0em 0;
    padding: 1.0rem 1.2rem;
    border-radius: 0.2rem;
-    background: #F7F7F7;
-    color: #37474F;
+    background: $md-code-background;
+    color: $md-code-color;
    font-size: 85%;
    line-height: 1.4;
    overflow-x: scroll;
@ -182,25 +194,26 @@ code {
    }
  }

-  // Keyboard tags
+  // Keystrokes
  kbd {
    display: inline-block;
    padding: 0.4rem 0.5rem 0.5rem;
-    border: px2rem(1px) solid #CCCCCC;
+    border: px2rem(1px) solid darken($md-keyboard-background, 20%);
    border-radius: px2rem(3px);
-    border-bottom-color: #BBBBBB;
-    background-color: #FCFCFC;
-    color: #555555;
+    border-bottom-color: darken($md-keyboard-background, 25%);
+    background-color: $md-keyboard-background;
+    color: $md-keyboard-color;
    font-size: 85%;
    line-height: 1.0rem;
-    box-shadow: 0 #{-(px2rem(1px))} 0 #BBBBBB inset;
+    box-shadow: 0 #{-(px2rem(1px))} 0
+      darken($md-keyboard-background, 30%) inset;
    vertical-align: 0.1rem;
    word-break: break-word;
  }

  // Smaller text
  small {
-    color: $md-color-black--light;
+    opacity: 0.75;
  }

  // Superscript and subscript
@ -239,9 +252,15 @@ code {

    // List elements
    li {
-      margin-bottom: 1.0rem;
+      margin-bottom: 0.5em;
      margin-left: 2.0rem;

+      // Decrease vertical spacing
+      p,
+      blockquote {
+        margin: 0.5em 0;
+      }
+
      // Remove margin on last element
      &:last-child {
        margin-bottom: 0;
--- a/src/assets/stylesheets/extensions/_admonition.scss
+++ b/src/assets/stylesheets/extensions/_admonition.scss
@ -36,7 +36,7 @@
  // Icon
  &::before {
    display: block;
-    position: absolute;
+    position: absolute;     // TODO: inherit icon!
    top: 0.2rem;
    left: -2.6rem;
    float: left;
@ -53,7 +53,7 @@
    color: $clr-blue-a400;
    font-size: ms(-1);
    font-weight: 700;
-    line-height: 2.0rem;
+    line-height: 2;
    text-transform: uppercase;

    // Ensure smaller spacing to next element
@ -79,6 +79,7 @@

  // Build representational classes
  @each $names, $appearance in (
+    summary tldr: $clr-light-blue-a400 "subject",
    tip idea: $clr-teal-a700 "whatshot",
    success check done: $clr-green-a400 "done",
    warning warn: $clr-orange-a400 "warning",
--- a/src/assets/stylesheets/extensions/_footnotes.scss
+++ b/src/assets/stylesheets/extensions/_footnotes.scss
@ -24,76 +24,72 @@
 // Footnotes extension
 // ----------------------------------------------------------------------------

-// Scoped in typesetted content for greater specificity
-.md-content--typeset {
+// Footnote
+.footnote {
+  color: $md-color-black--light;
+  font-size: 80%;

-  // Footnote
-  .footnote {
-    color: $md-color-black--light;
-    font-size: 80%;
+  // Remove additional spacing on footnotes
+  ol {
+    margin-left: 0;
+  }

-    // Remove additional spacing on footnotes
-    > ol {
-      margin-left: 0;
+  // Single footnote
+  li {

-      // Single footnote
-      > li {
+    // TODO: this doesn't work entirely
+    // &::before {
+    //   display: block;
+    //   content: "";
+    //   padding-top: (5.6rem + 2.4rem + 0.4rem);
+    //   margin-top: -(5.6rem + 2.4rem + 0.4rem);
+    // }

-        // TODO: this doesn't work entirely
-        // &::before {
-        //   display: block;
-        //   content: " ";
-        //   padding-top: (5.6rem + 2.4rem + 0.4rem);
-        //   margin-top: -(5.6rem + 2.4rem + 0.4rem);
-        // }
-
-        // Make back references visible on hover
-        &:hover  .footnote-backref,
-        &:target .footnote-backref {
-          transform: translate3d(0, 0, 0);
-          opacity: 1;
-        }
-
-        // Active or targeted back reference
-        &:hover  .footnote-backref:hover,
-        &:target .footnote-backref {
-          color: $md-color-accent;
-        }
-      }
+    // Make back references visible on hover
+    &:hover  .footnote-backref,
+    &:target .footnote-backref {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
    }

-    // Correct anchor offset
-    &-ref::before {
-      position: absolute;
-      margin-top: -(5.6rem + 2.4rem + 0.4rem);
-      padding-top: (5.6rem + 2.4rem + 0.4rem);
-      content: " ";
-      pointer-events: none;
+    // Active or targeted back reference
+    &:hover  .footnote-backref:hover,
+    &:target .footnote-backref {
+      color: $md-color-accent;
+    }
+  }
+
+  // Correct anchor offset
+  &-ref::before {
+    position: absolute;
+    margin-top: -(5.6rem + 2.4rem);
+    padding-top: (5.6rem + 2.4rem);
+    content: "";
+    pointer-events: none;
+  }
+
+  // Make back reference text transparent for icon
+  &-backref {
+    @extend %md-icon;
+
+    position: absolute;
+    transform: translate3d(0.5rem, 0, 0);
+    transition: transform 0.25s  0.125s,
+                color     0.25s,
+                opacity   0.125s 0.125s;
+    color: $md-color-black--lighter;
+    font-size: 2.0rem;
+    opacity: 0;
+    vertical-align: middle;
+
+    // Hack: remove Unicode arrow for icon
+    &::first-letter {
+      font-size: 0;
    }

-    // Make back reference text transparent for icon
-    &-backref {
-      @extend %md-icon;
-
-      position: absolute;
-      transform: translate3d(0.5rem, 0, 0);
-      transition: transform 0.25s  0.125s,
-                  color     0.25s,
-                  opacity   0.125s 0.125s;
-      color: $md-color-black--lighter;
-      font-size: 2.0rem;
-      opacity: 0;
-      vertical-align: middle;
-
-      // Hack: remove Unicode arrow for icon
-      &::first-letter {
-        font-size: 0;
-      }
-
-      // Back reference icon
-      &::after {
-        content: "keyboard_return";
-      }
+    // Back reference icon
+    &::after {
+      content: "keyboard_return";
    }
  }
 }
--- a/src/assets/stylesheets/extensions/_permalinks.scss
+++ b/src/assets/stylesheets/extensions/_permalinks.scss
@ -69,7 +69,7 @@
      display: block;
      margin-top: -(5.6rem + 2.4rem + $delta);
      padding-top: (5.6rem + 2.4rem + $delta);
-      content: " ";
+      content: "";
    }
  }
 }
--- a/src/assets/stylesheets/layout/_base.scss
+++ b/src/assets/stylesheets/layout/_base.scss
@ -24,9 +24,11 @@
 // Grid
 // ----------------------------------------------------------------------------

-// Stretch container to viewport
+// Stretch container to viewport and set base font-size to 10px for simple
+// calculations base on relative ems (rems).
 html {
  height: 100%;
+  font-size: 62.5%;

  // [screen medium +] Set base font-size to 11px
  @include break-from-device(screen medium) {
@ -35,7 +37,7 @@ html {

  // [screen large +] Set base font-size to 12px
  @include break-from-device(screen large) {
-    font-size: 75.00%;
+    font-size: 75%;
  }
 }

@ -76,9 +78,9 @@ hr {
 .md-main {
  margin-top: 5.6rem;

-  // Bottom spacing to account for footer
+  // Bottom spacing to account for header and footer
  &__inner {
-    margin-top: 3.0rem;
+    margin-top: 2.4rem + 0.6rem;
    margin-bottom: 9.2rem;
    overflow: auto;
  }
@ -106,8 +108,8 @@ hr {
  opacity: 0;
  z-index: 2;

-  // [tablet landscape -]: Trigger overlay
-  @include break-to-device(tablet landscape) {
+  // [tablet -]: Trigger overlay
+  @include break-to-device(tablet) {

    // Expanded drawer
    .md-toggle--drawer:checked ~ & {
--- a/src/assets/stylesheets/layout/_content.scss
+++ b/src/assets/stylesheets/layout/_content.scss
@ -32,8 +32,8 @@
    margin-right: 24.2rem;
  }

-  // [screen small +]: Add space for table of contents
-  @include break-from-device(screen small) {
+  // [screen +]: Add space for table of contents
+  @include break-from-device(screen) {
    margin-left: 24.2rem;
  }

@ -44,8 +44,8 @@
    // Hack: this is necessary for floating the edit button
    overflow: auto;

-    // [screen small +]: Add space for table of contents
-    @include break-from-device(screen small) {
+    // [screen +]: Increase spacing
+    @include break-from-device(screen) {
      margin: 2.4rem;
    }
  }
--- a/src/assets/stylesheets/layout/_footer.scss
+++ b/src/assets/stylesheets/layout/_footer.scss
@ -83,12 +83,9 @@

  // Link icon
  &__icon {
-    display: inline-block;
-    margin: 0.4rem;
-    padding: 0.8rem;
+    @extend %md-icon__button;
+
    transition: background 0.25s;
-    font-size: 2.4rem;
-    cursor: pointer;
  }

  // Link title
--- a/src/assets/stylesheets/layout/_header.scss
+++ b/src/assets/stylesheets/layout/_header.scss
@ -44,13 +44,10 @@

  // Header icon
  &__icon {
-    display: inline-block;
+    @extend %md-icon__button;
+
    position: relative;
-    margin: 0.4rem;
-    padding: 0.8rem;
    transition: opacity 0.25s;
-    font-size: 2.4rem;
-    cursor: pointer;
    z-index: 1;

    // Hovered icon
--- a/src/assets/stylesheets/layout/_nav.scss
+++ b/src/assets/stylesheets/layout/_nav.scss
@ -29,16 +29,27 @@
  font-size: ms(-1);
  line-height: 1.2;

-  // Title
-  &__title {
-    margin: 0;
-    font-size: inherit;
-    line-height: inherit;
+  // Table of contents
+  &--secondary {
+    border-left: px2rem(4px) solid $md-color-primary;
  }

-  // Table of contents
-  &--toc {
-    border-left: px2rem(4px) solid $md-color-primary;
+  // Title
+  &__title {
+    display: block;
+    margin: 0;
+    padding: 1.2rem 1.2rem 0;
+    font-size: inherit;
+    font-weight: 700;
+    line-height: inherit;
+
+    // Icon, hidden by default
+    &::before {
+      @extend %md-icon, %md-icon__button;
+
+      display: none;
+      content: "arrow_back";
+    }
  }

  // List of items
@ -46,28 +57,27 @@
    margin: 0;
    padding: 0;
    list-style: none;
-
-    // 2nd+ level list
-    & & {
-      margin-left: 1.2rem;
-    }
-
-    // Hide list by default
-    .md-nav__toggle ~ & {
-      max-height: 0;
-      overflow: hidden;
-    }
-
-    // Expand list, if toggle is checked
-    .md-nav__toggle:checked ~ & {
-      max-height: 100%;
-    }
  }

  // List item
  &__item {
-    margin: 0.8rem 0 0;
-    line-height: 1.6rem;
+    padding: 0.625em 1.2rem 0;
+    line-height: 1.3;
+
+    // Add bottom spacing to last item
+    &:last-child {
+      padding-bottom: 0.625em;
+    }
+
+    // 2nd+ level items
+    & & {
+      padding-right: 0;
+
+      // Remove bottom spacing for nested items
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
  }

  // Link inside item
@ -75,8 +85,34 @@
    display: block;
    transition: color 0.125s;
    text-overflow: ellipsis;
+    cursor: pointer;
    overflow: hidden;

+    // Icon
+    &::after {
+      @extend %md-icon;
+
+      // Item contains a nested list
+      .md-nav__item--nested > & {
+        content: "expand_more";
+      }
+    }
+
+    // Hide link to table of contents by default
+    &[for="toc"] {
+      display: none;
+
+      // Hide table of contents by default
+      html & ~ .md-nav {
+        display: none;
+      }
+
+      // Hide icon for current item
+      + .md-nav__link::after {
+        display: none;
+      }
+    }
+
    // Marked item
    &--marked {
      color: $md-color-black--light;
@ -89,4 +125,187 @@
      color: $md-color-accent;
    }
  }
+
+  // [tablet -]: Layered navigation
+  @include break-to-device(tablet) {
+
+    // Stretch primary navigation to drawer
+    &--primary,
+    &--primary .md-nav {
+      display: flex;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      flex-direction: column;
+      width: auto;
+      height: 100%;
+      z-index: 1;
+    }
+
+    // Adjust styles for primary navigation
+    &--primary {
+      background: $md-color-white;
+
+      // Move subsequent navigations off
+      .md-nav__toggle ~ .md-nav {
+        @include z-depth(4);
+
+        left: 0.4rem;
+        background: $md-color-white;
+      }
+
+      // Title
+      .md-nav__title {
+        position: relative;
+        padding: 0.4rem 1.6rem 0.4rem 5.6rem;
+        background: $md-color-black--lightest;
+        color: $md-color-black--light;
+        font-size: 1.8rem;
+        font-weight: 400;
+        line-height: 4.8rem;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: pointer;
+        overflow: hidden;
+
+        // Icon
+        &::before {
+          display: block;
+          position: absolute;
+          left: 0.4rem;
+          width: 4.0rem;
+          height: 4.0rem;
+          color: $md-color-black--light;
+        }
+      }
+
+      // List of items
+      .md-nav__list {
+        flex: 1;
+        overflow-y: scroll;
+      }
+
+      // List item
+      .md-nav__item {
+        padding: 0;
+        border-top: 0.1rem solid $md-color-black--lightest;
+        font-size: 1.6rem;
+      }
+
+      // Link inside item
+      .md-nav__link {
+        position: relative;
+        padding: 1.6rem;
+
+        // Rotate icon
+        &::after {
+          position: absolute;
+          right: 1.2rem;
+          transform: rotate(-90deg);
+          color: $md-color-black--light;
+          font-size: 2.4rem;
+          line-height: 2.0rem;
+        }
+      }
+    }
+
+    // Hide nested navigation by default
+    .md-nav__toggle ~ & {
+      display: none;
+
+      // Animate appearance, if browser supports 3D transforms
+      .csstransforms3d & {
+        display: block;
+        transform: translate3d(100%, 0, 0);
+        transition: transform 0.25s cubic-bezier(0.8, 0.0, 0.6, 1.0),
+                    opacity   0.125s 0.05s;
+        opacity: 0;
+      }
+    }
+
+    // Expand nested navigation, if toggle is checked
+    .md-nav__toggle:checked ~ & {
+      display: block;
+
+      // Animate appearance, if browser supports 3D transforms
+      .csstransforms3d & {
+        transform: translate3d(0, 0, 0);
+        transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
+                    opacity   0.125s 0.125s;
+        opacity: 1;
+      }
+    }
+  }
+
+  // [tablet portrait -]: Show table of contents in drawer
+  @include break-to-device(tablet portrait) {
+
+    // Remove border on secondary navigation
+    &--secondary {
+      border-left: 0;
+    }
+
+    // Show link to table of contents
+    &__link[for="toc"] {
+      display: block;
+
+      // Unrotate icon for table of contents
+      &::after {
+        transform: none;
+        content: "toc";
+      }
+
+      // Hide link to current item
+      + .md-nav__link {
+        display: none;
+      }
+
+      // Show table of contents
+      html & ~ .md-nav {
+        display: flex;
+      }
+    }
+  }
+
+  // [screen +]: Tree-like navigation
+  @include break-from-device(screen) {
+
+    // Hide nested navigation by default
+    .md-nav__toggle ~ & {
+      max-height: 0;
+      overflow: hidden;
+    }
+
+    // Expand nested navigation, if toggle is checked
+    .md-nav__toggle:checked ~ & {
+      max-height: 100%;
+    }
+
+    // Title
+    &__title {
+
+      // Hide titles for nested navigation
+      & + .md-nav__list & {
+        display: none;
+      }
+    }
+
+    // Link inside item
+    &__link {
+
+      // Item contains a nested list
+      .md-nav__item--nested > &::after {
+        display: inline-block;
+        transform-origin: 0.5em 0.475em;
+        transition: transform 0.25s;
+        vertical-align: -0.125em;
+      }
+
+      // Rotate icon for expanded lists
+      .md-nav__item--nested .md-nav__toggle:checked ~ &::after {
+        transform: rotate(180deg);
+      }
+    }
+  }
 }
--- a/src/assets/stylesheets/layout/_search.scss
+++ b/src/assets/stylesheets/layout/_search.scss
@ -26,7 +26,14 @@

 // Application search
 .md-search {
-  position: relative;
+  // position: relative;
+  padding: 0.8rem 0.8rem 0;
+
+  // [tablet +]: Header-embedded search
+  @include break-from-device(tablet) {
+    padding: 0.4rem;
+    padding-right: 3.2rem;
+  }

  // Search overlay
  &__overlay {
@ -60,17 +67,6 @@
    }
  }

-  // Inner wrapper
-  &__inner {
-    padding: 0.8rem 0.8rem 0;
-
-    // [tablet +]: Header-embedded search
-    @include break-from-device(tablet) {
-      padding: 0.4rem;
-      padding-right: 3.2rem;
-    }
-  }
-
  // Search form
  &__form {
    position: relative;
@ -86,10 +82,10 @@
  // Icon
  &__icon {
    position: absolute;
-    top: 0.8rem;
-    left: 1.2rem;
+    top: $md-icon-padding;
+    left: $md-icon-padding + $md-icon-margin;
    transition: color 0.25s;
-    font-size: 2.4rem;
+    font-size: $md-icon-size;
    cursor: pointer;

    // [mobile -]: Use back arrow as search icon
@ -105,7 +101,7 @@

  // Search field
  &__input {
-    padding: 0 0.8rem 0 6.4rem;
+    padding: 0 1.6rem 0 6.4rem;
    border-radius: px2rem(2px);
    text-overflow: ellipsis;

--- a/src/assets/stylesheets/layout/_sidebar.scss
+++ b/src/assets/stylesheets/layout/_sidebar.scss
@ -37,19 +37,20 @@
    top: 5.6rem;
  }

-  // [tablet landscape -]: Convert navigation to drawer
-  @include break-to-device(tablet landscape) {
+  // [tablet -]: Convert navigation to drawer
+  @include break-to-device(tablet) {

    // Render primary sidebar as a slideout container
    &--primary {
      position: fixed;
      top: 0;
-      width: 24.2em;
+      left: -24.2rem;
+      width: 24.2rem;
      height: 100%;
-      transform: translate3d(-24.2em, 0, 0);
+      transform: translate3d(0, 0, 0);
      transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0);
      background: $md-color-white;
-      z-index: 3;
+      z-index: 2;

      // Just hide drawer, if browser doesn't support 3D transforms
      .no-csstransforms3d & {
@ -58,13 +59,18 @@

      // Expanded drawer
      .md-toggle--drawer:checked ~ .md-container & {
-        transform: translate3d(0, 0, 0);
+        transform: translate3d(24.2rem, 0, 0);

        // Just show drawer, if browser doesn't support 3D transforms
        .no-csstransforms3d & {
          display: block;
        }
      }
+
+      // Hide overflow for nested navigation
+      .md-sidebar__scrollwrap {
+        overflow: hidden;
+      }
    }
  }

@ -82,8 +88,8 @@
        margin-left: 100%;
        transform: translate(-100%, 0);

-        // [screen small +]: Limit to grid
-        @include break-from-device(screen small) {
+        // [screen +]: Limit to grid
+        @include break-from-device(screen) {
          margin-left: 120.0rem;
        }
      }
@ -94,10 +100,10 @@
  &__scrollwrap {
    margin: 2.4rem 0.4rem;
    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
+    // -webkit-overflow-scrolling: touch;                 // TODO: define on sidebar

-    // [tablet landscape -]: Adjust margins
-    @include break-to-device(tablet landscape) {
+    // [tablet -]: Adjust margins
+    @include break-to-device(tablet) {

      // Adjust margins for primary scrollbar
      .md-sidebar--primary & {
@ -128,10 +134,9 @@

  // Actual sidebar content
  &__inner {
-    padding: 1.2rem;

-    // [screen small +]: Add line for reference
-    @include break-from-device(screen small) {
+    // [screen +]: Add line for reference
+    @include break-from-device(screen) {
      border-right: px2rem(1px) solid $md-color-black--lightest;
    }
  }
--- a/src/assets/stylesheets/layout/_source.scss
+++ b/src/assets/stylesheets/layout/_source.scss
@ -54,12 +54,12 @@
      display: block;
      position: absolute;
      top: 50%;
-      left: 0.8rem;
-      width:  2.4rem;
-      height: 2.4rem;
+      left: $md-icon-padding;
+      width:  $md-icon-size;
+      height: $md-icon-size;
      transform: translateY(-50%);
      background-repeat: no-repeat;
-      background-size: 2.4rem 2.4rem;
+      background-size: $md-icon-size $md-icon-size;
      content: "";
    }
  }
--- a/src/base.html
+++ b/src/base.html
@ -63,7 +63,7 @@
    <link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700" />
    <link rel="stylesheet" type="text/css"
-        href="https://fonts.googleapis.com/css?family=Roboto+Mono:500" />
+        href="https://fonts.googleapis.com/css?family=Roboto+Mono:400" />
    <link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/icon?family=Material+Icons">

@ -86,7 +86,7 @@
    <label class="md-overlay" for="drawer"></label>

    <!-- Application header -->
-    {% include "header.html" %}
+    {% include "partials/header.html" %}

    <!-- Container, necessary for web-application context -->
    <div class="md-container">
@ -105,22 +105,43 @@

          <!-- Main navigation -->
          {% if nav %}
-            {% include "nav.html" %}
+            <div class="md-sidebar md-sidebar--primary md-js__sidebar">
+              <div class="md-sidebar__scrollwrap">
+                <div class="md-sidebar__inner">
+                  {% include "partials/nav.html" %}
+                </div>
+              </div>
+            </div>
          {% endif %}

          <!-- Table of contents -->
          {% if toc %}
-            {% include "toc.html" %}
+            <div class="md-sidebar md-sidebar--secondary md-js__sidebar">
+              <div class="md-sidebar__scrollwrap">
+                <div class="md-sidebar__inner">
+                  {% include "partials/toc.html" %}
+                </div>
+              </div>
+            </div>
          {% endif %}

          <!-- Article -->
          <div class="md-content md-content--typeset">
            <article class="md-content__inner">

-                                                                <!-- TODO: test -->
-                                                          <div class="floater">Edit on GitHub</div>
+              <!-- Content block -->
+              {% block content %}

-              {{ content }}
+                <!-- Edit button, if URL was defined -->
+                {% if edit_uri %}
+                  <a class="md-button md-button--edit" href="{{ edit_uri }}">
+                    Edit
+                  </a>
+                {% endif %}
+
+                <!-- Content -->
+                {{ content }}
+              {% endblock %}

              <!-- Copyright and theme information -->
              <hr />
@ -144,7 +165,7 @@
      </main>

      <!-- Application footer -->
-      {% include "footer.html" %}
+      {% include "partials/footer.html" %}
    </div>

    <!-- Theme-related and custom javascripts -->
@ -157,4 +178,4 @@
      <script src="{{ path }}"></script>
    {% endfor %}
  </body>
-</html>
+</html>
--- a/src/partials/footer.html
+++ b/src/partials/footer.html
@ -70,4 +70,4 @@
      </nav>
    </div>
  {% endif %}
-</footer>
+</footer>
--- a/src/partials/header.html
+++ b/src/partials/header.html
@ -41,40 +41,17 @@
      </div>

      <!-- Button to open search dialogue -->
-      <div class="md-flex__cell md-flex__cell--shrink">                         <!-- TODO: put search tag somewhere... -->
+      <div class="md-flex__cell md-flex__cell--shrink">
        <label class="md-icon md-icon--search md-header-nav__icon"
            for="search"></label>
-        <div class="md-search__overlay"></div>                                  <!-- name this header overlay? the other one search? -->
-        <div class="md-search__inner">
-          <form class="md-search__form">
-            <input type="text" class="md-search__input"
-                placeholder="Search" autocapitalize="off" autocorrect="off"
-                autocomplete="off" spellcheck="false" id="query" />
-            <label class="md-icon md-icon--search md-search__icon"
-                for="query"></label>
-            <div class="md-search__suggest">
-              FOO<br />
-              FOO<br />
-              FOO<br />
-              FOO<br />
-              FOO<br />
-              FOO<br />
-              FOO<br />
-              FOO<br />
-              FOO<br />
-              FOO<br />
-              FOO<br />
-              FOO<br />
-              FOO<br />
-              FOO<br />
-            </div>
-          </form>
-        </div>
+
+        <!-- Search interface -->
+        {% include "partials/search.html" %}
      </div>

      <!--
        Check whether the repository is hosted on one of the supported code
-        hosting platforms: Github, Gitlab or Bitbucket.
+        hosting platforms (Github, Gitlab or Bitbucket) to show icon.
      -->
      {% if "github." in repo_url %}
        {% set platform = "md-source--github" %}
@ -91,16 +68,11 @@
        <a href="{{ repo_url }}" title="Go to repository"
            class="md-source {{ platform }}">
          <div class="md-source__repository">{{ repo_name }}</div>
-          <div class="md-source__stats">
-            0.2.4 &middot; 177 Stars &middot; 46 Forks
-          </div>
+          <ul class="md-source__facts">
+            <li class="md-source__fact">v0.2.4</li>                             <!-- TODO: make dynamic -->
+          </ul>
        </a>
      </div>
    </div>
  </nav>
-
-  <!-- Search dialogue -->
-  <nav class="md-header-search">
-
-  </nav>
-</header>
+</header>
--- a/src/partials/nav-item.html
+++ b/src/partials/nav-item.html
@ -21,33 +21,54 @@
 -->

 <!-- Main navigation item with nested items -->
-{% if nav_item.children %}
-  <li class="md-nav__item">
+{% if nav_item.children or nav_item == current_page %}
+  <li class="md-nav__item md-nav__item--nested">
+    {% if nav_item == current_page %}
+      {% set path = "toc" %}
+    {% endif %}

-    <!-- Active checkbox expands items contained within section -->
-    {% if nav_item.active %}
+    <!-- Active checkbox expands items contained within nested section -->
+    {% if nav_item.active and not nav_item == current_page %}
      <input class="md-toggle md-nav__toggle" type="checkbox"
          id="{{ path }}" checked />
    {% else %}
      <input class="md-toggle md-nav__toggle" type="checkbox"
          id="{{ path }}" />
    {% endif %}
-    <label class="md-nav__link" for="{{ path }}">
-      {{ nav_item.title }}
-      <!--
-        <i class="md-icon md-icon--link md-nav__icon"></i>
-      -->
-    </label>
-    <ul class="md-nav__list">

-      <!-- Render nested item list -->
-      {% for nav_item in nav_item.children %}
-        {% set temp = path %}
-        {% set path = path + "-" + loop.index | string %}
-        {% include "nav-item.html" %}
-        {% set path = temp %}
-      {% endfor %}
-    </ul>
+    <!-- Expand active pages -->
+    {% if nav_item == current_page %}
+      <label class="md-nav__link md-nav__link--active"
+          for="{{ path }}">
+        {{ nav_item.title }}
+      </label>
+      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
+          class="md-nav__link md-nav__link--active">
+        {{ nav_item.title }}
+      </a>
+
+      <!-- Show table of contents -->
+      {% include "partials/toc.html" %}
+    {% else %}
+      <label class="md-nav__link" for="{{ path }}">
+        {{ nav_item.title }}
+      </label>
+      <nav class="md-nav">
+        <label class="md-nav__title" for="{{ path }}">
+          {{ nav_item.title }}
+        </label>
+        <ul class="md-nav__list">
+
+          <!-- Render nested item list -->
+          {% for nav_item in nav_item.children %}
+            {% set temp = path %}
+            {% set path = path + "-" + loop.index | string %}
+            {% include "partials/nav-item.html" %}
+            {% set path = temp %}
+          {% endfor %}
+        </ul>
+      </nav>
+    {% endif %}
  </li>

 <!-- Main navigation item -->
@ -58,30 +79,6 @@
          class="md-nav__link md-nav__link--active">
        {{ nav_item.title }}
      </a>
-
-      <!-- <nav class="md-nav md-nav--toc"> -->
-
-        <!--
-          The top-level anchor must be skipped if the article contains a h1
-          headline, since it would be redundant to the link to the current page
-          that is located just above the anchor. Therefore we directly continue
-          with the children of the anchor.
-        -->
-        <!-- {% if h1 %}
-          {% set toc = (toc | first).children %}
-        {% endif %} -->
-
-        <!-- Render item list -->
-        <!-- {% if toc and (toc | first) %}
-          <h3 class="md-nav__title">Table of contents</h3>
-          <ul class="md-nav__list">
-            {% for toc_item in toc %}
-              {% include "toc-item.html" %}
-            {% endfor %}
-          </ul>
-        {% endif %}
-      </nav> -->
-
    {% else %}
      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
          class="md-nav__link">
@ -89,4 +86,4 @@
      </a>
    {% endif %}
  </li>
-{% endif %}
+{% endif %}
--- a/src/partials/nav.html
+++ b/src/partials/nav.html
@ -21,16 +21,12 @@
 -->

 <!-- Main navigation -->
-<div class="md-sidebar md-sidebar--primary md-js__sidebar">
-  <div class="md-sidebar__scrollwrap">
-    <nav class="md-sidebar__inner md-nav">
-      <h3 class="md-nav__title">Navigation</h3>
-      <ul class="md-nav__list">
-        {% for nav_item in nav %}
-          {% set path = "md-toggle-nav-" + loop.index | string %}
-          {% include "nav-item.html" %}
-        {% endfor %}
-      </ul>
-    </nav>
-  </div>
-</div>
+<nav class="md-nav md-nav--primary">
+  <label class="md-nav__title" for="drawer">Navigation</label>
+  <ul class="md-nav__list">
+    {% for nav_item in nav %}
+      {% set path = "nav-" + loop.index | string %}
+      {% include "partials/nav-item.html" %}
+    {% endfor %}
+  </ul>
+</nav>
--- a/src/partials/search.html
+++ b/src/partials/search.html
@ -0,0 +1,50 @@
+<!--
+  Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+<!-- Search interface -->
+<div class="md-search">
+  <div class="md-search__overlay"></div>                                  <!-- name this header overlay? the other one search? -->
+
+  <!-- Include search input -->
+  <div class="md-search__inner">
+    <form class="md-search__form">
+      <input type="text" class="md-search__input"
+          placeholder="Search" autocapitalize="off" autocorrect="off"
+          autocomplete="off" spellcheck="false" id="query" />             <!-- TODO: write no-js note! -->
+      <label class="md-icon md-icon--search md-search__icon"
+          for="query"></label>
+      <div class="md-search__suggest">
+        <div class="md-search-term">
+          change color
+        </div>
+        <div class="md-search-term">
+          fork theme
+        </div>
+        <div class="md-search-term">  <!-- TODO: make LIs -->
+          contributing
+        </div>
+      </div>
+
+      <!-- TODO: search results! -->
+    </form>
+  </div>
+</div>
--- a/src/partials/toc-item.html
+++ b/src/partials/toc-item.html
@ -29,10 +29,12 @@

  <!-- Render nested item list -->
  {% if toc_item.children %}
-    <ul class="md-nav__list">
-      {% for toc_item in toc_item.children %}
-        {% include "toc-item.html" %}
-      {% endfor %}
-    </ul>
+    <nav class="md-nav">
+      <ul class="md-nav__list">
+        {% for toc_item in toc_item.children %}
+          {% include "partials/toc-item.html" %}
+        {% endfor %}
+      </ul>
+    </nav>
  {% endif %}
-</li>
+</li>
--- a/src/partials/toc.html
+++ b/src/partials/toc.html
@ -21,29 +21,25 @@
 -->

 <!-- Table of contents -->
-<div class="md-sidebar md-sidebar--secondary md-js__sidebar">
-  <div class="md-sidebar__scrollwrap">
-    <nav class="md-sidebar__inner md-nav md-nav--toc">
+<nav class="md-nav md-nav--secondary">

-      <!--
-        The top-level anchor must be skipped if the article contains a h1
-        headline, since it would be redundant to the link to the current page
-        that is located just above the anchor. Therefore we directly continue
-        with the children of the anchor.
-      -->
-      {% if h1 %}
-        {% set toc = (toc | first).children %}
-      {% endif %}
+  <!--
+    The top-level anchor must be skipped if the article contains a h1 headline,
+    since it would be redundant to the link to the current page that is located
+    just above the anchor. Therefore we directly continue with the children of
+    the anchor.
+  -->
+  {% if h1 %}
+    {% set toc = (toc | first).children %}
+  {% endif %}

-      <!-- Render item list -->
-      {% if toc and (toc | first) %}
-        <h3 class="md-nav__title">Table of contents</h3>
-        <ul class="md-nav__list">
-          {% for toc_item in toc %}
-            {% include "toc-item.html" %}
-          {% endfor %}
-        </ul>
-      {% endif %}
-    </nav>
-  </div>
-</div>
+  <!-- Render item list -->
+  {% if toc and (toc | first) %}
+    <label class="md-nav__title" for="toc">Table of contents</label>
+    <ul class="md-nav__list">
+      {% for toc_item in toc %}
+        {% include "partials/toc-item.html" %}
+      {% endfor %}
+    </ul>
+  {% endif %}
+</nav>
--- a/src/search.html
+++ b/src/search.html
				`@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="384" height="448" viewBox="0 0 384 448"><path d="M192 32q52.25 0 96.375 25.75t69.875 69.875T384 224q0 62.75-36.625 112.875T252.75 406.25q-6.75 1.25-10-1.75t-3.25-7.5q0-.75.125-19.125t.125-33.625q0-24.25-13-35.5 14.25-1.5 25.625-4.5t23.5-9.75 20.25-16.625 13.25-26.25T314.5 214q0-29.75-19.75-51.5 9.25-22.75-2-51-7-2.25-20.25 2.75t-23 11l-9.5 6q-23.25-6.5-48-6.5t-48 6.5q-4-2.75-10.625-6.75t-20.875-9.625-21.25-3.375q-11.25 28.25-2 51Q69.5 184.25 69.5 214q0 21.25 5.125 37.5t13.125 26.25 20.125 16.75 23.5 9.75 25.625 4.5q-9.75 9-12.25 25.75-5.25 2.5-11.25 3.75t-14.25 1.25-16.375-5.375T89 318.5q-4.75-8-12.125-13t-12.375-6l-5-.75q-5.25 0-7.25 1.125T51 302.75t2.25 3.5 3.25 3l1.75 1.25q5.5 2.5 10.875 9.5T77 332.75l2.5 5.75q3.25 9.5 11 15.375t16.75 7.5 17.375 1.75 13.875-.875l5.75-1q0 9.5.125 22.125T144.5 397q0 4.5-3.25 7.5t-10 1.75q-58-19.25-94.625-69.375T0 224q0-52.25 25.75-96.375T95.625 57.75 192 32zM72.75 307.75q.75-1.75-1.75-3-2.5-.75-3.25.5-.75 1.75 1.75 3 2.25 1.5 3.25-.5zm7.75 8.5q1.75-1.25-.5-4-2.5-2.25-4-.75-1.75 1.25.5 4 2.5 2.5 4 .75zM88 327.5q2.25-1.75 0-4.75-2-3.25-4.25-1.5-2.25 1.25 0 4.5T88 327.5zM98.5 338q2-2-1-4.75-3-3-5-.75-2.25 2 1 4.75 3 3 5 .75zm14.25 6.25q.75-2.75-3.25-4-3.75-1-4.75 1.75t3.25 3.75q3.75 1.5 4.75-1.5zm15.75 1.25q0-3.25-4.25-2.75-4 0-4 2.75 0 3.25 4.25 2.75 4 0 4-2.75zM143 343q-.5-2.75-4.5-2.25-4 .75-3.5 3.75t4.5 2 3.5-3.5z"/></svg>
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448"><path d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg>