Fix requirement for Math.sign

Update babel-preset-es2015 to version 6.22.0

.githooks/pre-commit/branch.sh

@@ -0,0 +1,34 @@
+#!/bin/bash
+
+# Copyright (c) 2016-2017 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.
+
+# Determine current branch
+BRANCH=$(git rev-parse --abbrev-ref HEAD)
+echo "Hook[pre-commit]: Checking branch..."
+
+# If we're on master, abort commit
+if [[ "$BRANCH" == "master" ]]; then
+	echo "Commits on master are only allowed via Pull Requests. Aborting."
+	exit 1
+fi
+
+# We're good
+exit 0

.github/ISSUE_TEMPLATE.md

@@ -18,11 +18,17 @@
 
 ### Package versions
 
-- Python: `python --version`
-- MkDocs: `mkdocs --version`
-- Material: `pip show mkdocs-material | grep -E ^Version`
+* Python: `python --version`
+* MkDocs: `mkdocs --version`
+* Material: `pip show mkdocs-material | grep -E ^Version`
+
+### Project configuration
+
+``` yaml
+The contents of your mkdocs.yml
+```
 
 ### System information
 
-- OS: [The operating system you're running]
-- Browser: [The browser used, if relevant]
+* OS: [The operating system you're running]
+* Browser: [The browser used, if relevant]

CHANGELOG

@@ -1,3 +1,20 @@
+mkdocs-material-1.0.3 (2017-01-22)
+
+  * Fixed #117: Table of contents items don't blur on fast scrolling
+  * Refactored sidebar positioning logic
+  * Further reduction of repaints
+
+mkdocs-material-1.0.2 (2017-01-15)
+
+  * Fixed #108: Horizontal scrollbar in content area
+
+mkdocs-material-1.0.1 (2017-01-14)
+
+  * Fixed massive repaints happening when scrolling
+  * Fixed footer back reference positions in case of overflow
+  * Fixed header logo from showing when the menu icon is rendered
+  * Changed scrollbar behavior to only show when content overflows
+
 mkdocs-material-1.0.0 (2017-01-13)
 
   * Introduced Webpack for more sophisticated JavaScript bundling

Dockerfile

@@ -19,9 +19,10 @@
 # IN THE SOFTWARE.
 
 FROM jfloff/alpine-python:2.7-slim
+MAINTAINER Martin Donath <martin.donath@squidfunk.com>
 
-# Set work directory
-WORKDIR /usr/src
+# Set working directory
+WORKDIR /docs
 
 # Install packages
 COPY requirements.txt .

README.md

@@ -1,6 +1,7 @@
 [![Travis][travis-image]][travis-link]
 [![Dependencies][deps-image]][deps-link]
 [![Codacy][codacy-image]][codacy-link]
+[![Docker][docker-image]][docker-link]
 [![PyPI][pypi-image]][pypi-link]
 
   [travis-image]: https://travis-ci.org/squidfunk/mkdocs-material.svg
@@ -9,9 +10,12 @@
   [deps-link]: https://david-dm.org/squidfunk/mkdocs-material?type=dev
   [codacy-image]: https://api.codacy.com/project/badge/Grade/fe07aa1fa91d453cb69711d3885c5d7e
   [codacy-link]: https://www.codacy.com/app/squidfunk/mkdocs-material?utm_source=github.com&utm_medium=referral&utm_content=squidfunk/mkdocs-material&utm_campaign=Badge_Grade
+  [docker-image]: https://img.shields.io/docker/pulls/squidfunk/mkdocs-material.svg
+  [docker-link]: https://hub.docker.com/r/squidfunk/mkdocs-material/
   [pypi-image]: https://img.shields.io/pypi/v/mkdocs-material.svg
   [pypi-link]: https://pypi.python.org/pypi/mkdocs-material
 
+
 # Material for MkDocs
 
 A Material Design theme for [MkDocs](http://www.mkdocs.org).

docs/customization.md

@@ -196,7 +196,7 @@ The Material theme uses a sophisticated asset pipeline using [Gulp][9] and
 Webpack which can be started with the following command:
 
 ``` sh
-npm run start
+npm start
 ```
 
 This will also start the MkDocs development server which will monitor changes

docs/getting-started.md

@@ -2,6 +2,12 @@
 
 ## Installation
 
+!!! tip "Set up Material using Docker"
+
+    The official [Docker image][1] for Material comes with all dependencies
+    pre-installed and ready-to-use with the latest version published on PyPI,
+    packaged in a very small image (27MB compressed).
+
 ### Installing MkDocs
 
 Before installing [MkDocs][2], you need to make sure you have Python and `pip`
@@ -22,7 +28,7 @@ pip install mkdocs && mkdocs --version
 # mkdocs, version 0.16.0
 ```
 
-!!! warning "MkDocs for Material requirements"
+!!! warning "MkDocs version requirements"
 
     Material requires MkDocs >= 0.16.
 
@@ -41,7 +47,7 @@ pip install pymdown-extensions
 
 ### Installing Material
 
-#### by using pip
+#### using pip
 
 Material can be installed with `pip`:
 
@@ -63,7 +69,23 @@ pip install mkdocs-material
       to a self-contained solution by installing Python with Homebrew. This
       should eliminate a lot of problems you may be having with `pip`.
 
-#### by cloning from GitHub
+#### using choco
+
+If you're on Windows you can use [Chocolatey][5] to install [Material][6]:
+
+``` dos
+choco install mkdocs-material
+```
+
+This will also install all required dependencies like [Python][7] and
+[MkDocs][8].
+
+  [5]: https://chocolatey.org
+  [6]: https://chocolatey.org/packages/mkdocs-material
+  [7]: https://chocolatey.org/packages/python
+  [8]: https://chocolatey.org/packages/mkdocs
+
+#### cloning from GitHub
 
 Material can also be used without a system-wide installation by cloning the
 repository into a subfolder of your project's root directory:
@@ -98,11 +120,11 @@ The development server can be started with the following command:
 mkdocs serve
 ```
 
-Now you can point your browser to [localhost:8000][5] and the Material theme
+Now you can point your browser to [localhost:8000][9] and the Material theme
 should be visible. From here on, you can start writing your documentation, or
 read on and customize the theme through some options.
 
-  [5]: http://localhost:8000
+  [9]: http://localhost:8000
 
 ## Options
 
@@ -112,7 +134,7 @@ project's `mkdocs.yml`. See the following section for all available options.
 ### Changing the color palette
 
 Material defines a default hue for every primary and accent color on Google's
-Material Design [color palette][6]. This makes it very easy to change the
+Material Design [color palette][10]. This makes it very easy to change the
 overall look of the theme. Just set the primary and accent colors using the
 following variables in your `mkdocs.yml`:
 
@@ -132,10 +154,10 @@ The last three colors can only be used as a primary color.
 If the color is set via this configuration, an additional CSS file that
 defines the color palette is included. If you want to keep things lean, clone
 the repository and recompile the theme with your custom colors set. See the
-guide on [customization][7] for more information.
+guide on [customization][11] for more information.
 
-  [6]: http://www.materialui.co/colors
-  [7]: customization.md
+  [10]: http://www.materialui.co/colors
+  [11]: customization.md
 
 #### Primary colors
 
@@ -202,10 +224,10 @@ Click on a tile to change the accent color of the theme:
 
 ### Changing the font family
 
-Material uses the [Roboto font family][8] by default, specifically the regular
+Material uses the [Roboto font family][12] by default, specifically the regular
 sans-serif type for text and the `monospaced` type for code. Both fonts are
-loaded from [Google Fonts][9] and can easily be changed to other fonts, like
-for example the [Ubuntu font family][10]:
+loaded from [Google Fonts][13] and can easily be changed to other fonts, like
+for example the [Ubuntu font family][14]:
 
 ``` yaml
 extra:
@@ -223,9 +245,9 @@ extra:
   font: 'none'
 ```
 
-  [8]: https://fonts.google.com/specimen/Roboto
-  [9]: https://fonts.google.com/
-  [10]: https://fonts.google.com/specimen/Ubuntu
+  [12]: https://fonts.google.com/specimen/Roboto
+  [13]: https://fonts.google.com/
+  [14]: https://fonts.google.com/specimen/Ubuntu
 
 ### Adding a logo
 
@@ -244,7 +266,7 @@ extra:
 
 If you want to link your social accounts, the Material theme provides an easy
 way for doing this in the footer of the documentation using the automatically
-included [FontAwesome][11] webfont. The syntax is simple – the `type` must
+included [FontAwesome][15] webfont. The syntax is simple – the `type` must
 denote the name of the social service, e.g. `github`, `twitter` or `linkedin`
 and the `link` must contain the URL you want to link to:
 
@@ -263,7 +285,7 @@ The links are generated in order and the `type` of the links must match the
 name of the FontAwesome glyph. The `fa` is automatically added, so `github`
 will result in `fa fa-github`.
 
-  [11]: http://fontawesome.io/icons/
+  [15]: http://fontawesome.io/icons/
 
 ### Google Analytics integration
 
@@ -296,7 +318,7 @@ translations inside the macro `t`:
 ```
 
 Just copy the file from the original theme and make your adjustments. See the
-section on [overriding partials][12] in the customization guide.
+section on [overriding partials][16] in the customization guide.
 
 !!! warning "Migrating from Material 0.2.x"
 
@@ -304,18 +326,18 @@ section on [overriding partials][12] in the customization guide.
     `mkdocs.yml`. With 1.0.0 this is no longer possible as the configuration
     will be ignored.
 
-  [12]: customization.md#overriding-partials
+  [16]: customization.md#overriding-partials
 
 ### More advanced customization
 
 If you want to change the general appearance of the Material theme, see
-[this article][13] for more information on advanced customization.
+[this article][17] for more information on advanced customization.
 
-  [13]: customization.md
+  [17]: customization.md
 
 ## Extensions
 
-MkDocs supports several [Markdown extensions][14]. The following extensions
+MkDocs supports several [Markdown extensions][18]. The following extensions
 are not enabled by default (see the link for which are enabled by default)
 but highly recommended, so they should be switched on at all times:
 
@@ -329,18 +351,18 @@ markdown_extensions:
 For more information, see the following list of extensions supported by the
 Material theme including more information regarding installation and usage:
 
-* [Admonition][15]
-* [Codehilite][16]
-* [Permalinks][17]
-* [Footnotes][18]
-* [PyMdown Extensions][19]
+* [Admonition][19]
+* [Codehilite][20]
+* [Permalinks][21]
+* [Footnotes][22]
+* [PyMdown Extensions][23]
 
-  [14]: http://www.mkdocs.org/user-guide/writing-your-docs/#markdown-extensions
-  [15]: extensions/admonition.md
-  [16]: extensions/codehilite.md
-  [17]: extensions/permalinks.md
-  [18]: extensions/footnotes.md
-  [19]: extensions/pymdown.md
+  [18]: http://www.mkdocs.org/user-guide/writing-your-docs/#markdown-extensions
+  [19]: extensions/admonition.md
+  [20]: extensions/codehilite.md
+  [21]: extensions/permalinks.md
+  [22]: extensions/footnotes.md
+  [23]: extensions/pymdown.md
 
 ## Full example
 

docs/release-notes.md

@@ -1,4 +1,4 @@
-# Release Notes
+# Release notes
 
 ## Upgrading
 
@@ -12,12 +12,33 @@ To determine the currently installed version, use the following command:
 
 ``` sh
 pip show mkdocs-material | grep -E ^Version
-# Version 1.0.0
+# Version 1.0.3
 ```
 
 ## Changelog
 
-### 1.0.0 <small> _  January 13, 2017</small>
+### 1.0.3 <small> _ January 22, 2017</small>
+
+* Fixed [#117][117]: Table of contents items don't blur on fast scrolling
+* Refactored sidebar positioning logic
+* Further reduction of repaints
+
+  [117]: https://github.com/squidfunk/mkdocs-material/issues/117
+
+### 1.0.2 <small> _ January 15, 2017</small>
+
+* Fixed [#108][108]: Horizontal scrollbar in content area
+
+  [108]: https://github.com/squidfunk/mkdocs-material/issues/108
+
+### 1.0.1 <small> _ January 14, 2017</small>
+
+* Fixed massive repaints happening when scrolling
+* Fixed footer back reference positions in case of overflow
+* Fixed header logo from showing when the menu icon is rendered
+* Changed scrollbar behavior to only show when content overflows
+
+### 1.0.0 <small> _ January 13, 2017</small>
 
 * Introduced Webpack for more sophisticated JavaScript bundling
 * Introduced ESLint and Stylelint for code style checks

material/base.html

@@ -19,7 +19,7 @@
       {% else %}
         <link rel="shortcut icon" href="{{ base_url }}/assets/images/favicon.ico">
       {% endif %}
-      <meta name="generator" content="mkdocs+mkdocs-material#1.0.0">
+      <meta name="generator" content="mkdocs+mkdocs-material#1.0.3">
     {% endblock %}
     {% block htmltitle %}
       {% if page.title %}
@@ -45,7 +45,7 @@
       <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-ff220fd69d.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-f3ab63f78a.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
       {% endif %}
@@ -124,7 +124,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-16f434a21a.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-2afe21e0b2.js"></script>
       <script>var config={url:{base:"{{ base_url }}"}},app=new Application(config);app.initialize()</script>
       {% for path in extra_javascript %}
         <script src="{{ path }}"></script>

material/partials/footer.html

@@ -6,7 +6,7 @@
         {% if page.previous_page %}
           <a href="{{ page.previous_page.url }}" title="{{ page.previous_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
             <div class="md-flex__cell md-flex__cell--shrink">
-              <i class="md-icon md-icon--arrow-back md-footer-nav__icon"></i>
+              <i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
             </div>
             <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
               <span class="md-flex__ellipsis">
@@ -29,7 +29,7 @@
               </span>
             </div>
             <div class="md-flex__cell md-flex__cell--shrink">
-              <i class="md-icon md-icon--arrow-forward md-footer-nav__icon"></i>
+              <i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
             </div>
           </a>
         {% endif %}

material/partials/header.html

@@ -2,14 +2,14 @@
   <nav class="md-header-nav md-grid">
     <div class="md-flex">
       <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="md-icon {% if not config.extra.logo %} md-icon--home {% endif %} md-header-nav__icon">
+        <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="{% if config.extra.logo %} md-logo {% else %} md-icon md-icon--home {% endif %} md-header-nav__button">
           {% if config.extra.logo %}
             <img src="{{ base_url }}/{{ config.extra.logo }}" width="24" height="24">
           {% endif %}
         </a>
       </div>
       <div class="md-flex__cell md-flex__cell--shrink">
-        <label class="md-icon md-icon--menu md-header-nav__icon" for="drawer"></label>
+        <label class="md-icon md-icon--menu md-header-nav__button" for="drawer"></label>
       </div>
       <div class="md-flex__cell md-flex__cell--stretch">
         <span class="md-flex__ellipsis md-header-nav__title">
@@ -27,7 +27,7 @@
       </div>
       <div class="md-flex__cell md-flex__cell--shrink">
         {% block search_box %}
-          <label class="md-icon md-icon--search md-header-nav__icon" for="search"></label>
+          <label class="md-icon md-icon--search md-header-nav__button" for="search"></label>
           {% include "partials/search.html" %}
         {% endblock %}
       </div>

material/partials/nav.html

@@ -1,6 +1,6 @@
 <nav class="md-nav md-nav--primary">
   <label class="md-nav__title md-nav__title--site" for="drawer">
-    <i class="md-icon {% if not config.extra.logo %} md-icon--home {% endif %} md-nav__icon">
+    <i class="{% if config.extra.logo %} md-logo {% else %} md-icon md-icon--home {% endif %} md-nav__button">
       {% if config.extra.logo %}
         <img src="{{ base_url }}/{{ config.extra.logo }}">
       {% endif %}

mkdocs.yml

@@ -29,7 +29,7 @@ repo_name: squidfunk/mkdocs-material
 repo_url: https://github.com/squidfunk/mkdocs-material
 
 # Copyright
-copyright: 'Copyright © 2016 Martin Donath'
+copyright: 'Copyright © 2016 - 2017 Martin Donath'
 
 # Documentation and theme
 theme_dir: material

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mkdocs-material",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "A Material Design theme for MkDocs",
   "keywords": [
     "mkdocs",
@@ -37,7 +37,7 @@
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-react-jsx": "^6.8.0",
     "babel-polyfill": "^6.20.0",
-    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-es2015": "^6.22.0",
     "babel-register": "^6.18.0",
     "babel-root-import": "^4.1.5",
     "chai": "^3.5.0",
@@ -45,7 +45,7 @@
     "css-mqpacker": "^5.0.1",
     "custom-event-polyfill": "^0.3.0",
     "del": "^2.2.2",
-    "eslint": "^3.13.1",
+    "eslint": "^3.14.0",
     "eslint-plugin-mocha": "^4.8.0",
     "fastclick": "^1.0.6",
     "git-hooks": "^1.1.7",

setup.py

@@ -18,18 +18,23 @@
 # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 # IN THE SOFTWARE.
 
+import json
 from setuptools import setup, find_packages
 
+# Load package.json contents
+with open("package.json") as data:
+    package = json.load(data)
+
 # Package description
 setup(
-    name = "mkdocs-material",
-    version = "1.0.0",
-    url = "http://squidfunk.github.io/mkdocs-material/",
-    license = "MIT",
-    description = "A Material Design theme for MkDocs",
-    author = "Martin Donath",
-    author_email = "martin.donath@squidfunk.com",
-    keywords = ["mkdocs", "documentation", "theme"],
+    name = package["name"],
+    version = package["version"],
+    url = package["homepage"],
+    license = package["license"],
+    description = package["description"],
+    author = package["author"]["name"],
+    author_email = package["author"]["email"],
+    keywords = package["keywords"],
     packages = find_packages(),
     include_package_data = True,
     entry_points = {

src/assets/javascripts/components/Material/Nav/Blur.js

@@ -41,6 +41,9 @@ export default class Blur {
     this.index_  = 0
     this.offset_ = window.pageYOffset
 
+    /* Necessary state to correctly reset the index */
+    this.dir_ = false
+
     /* Index anchor node offsets for fast lookup */
     this.anchors_ = [].map.call(this.els_, el => {
       return document.getElementById(el.hash.substring(1))
@@ -62,6 +65,14 @@ export default class Blur {
    */
   update() {
     const offset = window.pageYOffset
+    const dir = this.offset_ - offset < 0
+
+    /* Hack: reset index if direction changed, to catch very fast scrolling,
+       because otherwise we would have to register a timer and that sucks */
+    if (this.dir_ !== dir)
+      this.index_ = dir
+        ? this.index_ = 0
+        : this.index_ = this.els_.length - 1
 
     /* Exit when there are no anchors */
     if (this.anchors_.length === 0)
@@ -92,8 +103,9 @@ export default class Blur {
       }
     }
 
-    /* Remember current offset for next iteration */
+    /* Remember current offset and direction for next iteration */
     this.offset_ = offset
+    this.dir_ = dir
   }
 
   /**

src/assets/stylesheets/extensions/_footnotes.scss

@@ -83,24 +83,21 @@
   .footnote-backref {
     @extend %md-icon;
 
-    position: absolute;
+    display: inline-block;
     transform: translateX(0.5rem);
     transition:
       transform 0.25s  0.125s,
       color     0.25s,
       opacity   0.125s 0.125s;
     color: $md-color-black--lighter;
-    font-size: 1.5625em;
-    opacity: 0;
-    vertical-align: middle;
-
     // Hack: remove Unicode arrow for icon
-    &::first-letter {
-      font-size: 0;
-    }
+    font-size: 0;
+    opacity: 0;
+    vertical-align: text-bottom;
 
     // Back reference icon
-    &::after {
+    &::before {
+      font-size: 1.6rem;
       content: "keyboard_return";
     }
   }

src/assets/stylesheets/layout/_content.scss

@@ -35,6 +35,9 @@
   // [screen +]: Add space for table of contents
   @include break-from-device(screen) {
     margin-left: 24.2rem;
+    // Hack: setting overflow to auto induces margin collapse which omits
+    // massive repaints because of the margins of the inner elements
+    overflow: auto;
   }
 
   // Define spacing
@@ -44,6 +47,11 @@
     // [screen +]: Increase spacing
     @include break-from-device(screen) {
       margin: 2.4rem;
+
+      // Hack: remove bottom spacing, due to margin collapse
+      :last-child {
+        margin-bottom: 0;
+      }
     }
   }
 

src/assets/stylesheets/layout/_footer.scss

@@ -83,8 +83,8 @@
     }
   }
 
-  // Icons
-  &__icon {
+  // Icon buttons
+  &__button {
     @extend %md-icon__button;
 
     transition: background 0.25s;

src/assets/stylesheets/layout/_header.scss

@@ -48,8 +48,8 @@
 .md-header-nav {
   padding: 0.4rem;
 
-  // Icons
-  &__icon {
+  // Icon buttons
+  &__button {
     @extend %md-icon__button;
 
     position: relative;
@@ -61,8 +61,13 @@
       opacity: 0.7;
     }
 
+    // Set correct display on image
+    &.md-logo img {
+      display: block;
+    }
+
     // Hide search icon, if JavaScript is not available.
-    .no-js & .md-icon--search {
+    .no-js &.md-icon--search {
       display: none;
     }
 
@@ -75,11 +80,12 @@
       }
     }
 
-    // [tablet -]: Hide the home icon
+    // [tablet -]: Hide the home icon or logo
     @include break-to-device(tablet) {
 
-      // Home icon
-      &.md-icon--home {
+      // Home icon or logo
+      &.md-icon--home,
+      &.md-logo {
         display: none;
       }
     }

src/assets/stylesheets/layout/_nav.scss

@@ -51,8 +51,8 @@
       content: "arrow_back";
     }
 
-    // Hide icon by default
-    .md-nav__icon {
+    // Hide button by default
+    .md-nav__button {
       display: none;
     }
   }
@@ -84,8 +84,8 @@
     }
   }
 
-  // Icon
-  &__icon {
+  // Icon buttons
+  &__button {
     @extend %md-icon, %md-icon__button;
 
     // Stretch image
@@ -240,7 +240,7 @@
           color: $md-color-white;
 
           // Site logo
-          .md-nav__icon {
+          .md-nav__button {
             display: block;
             position: absolute;
             top: 0.4rem;
@@ -260,7 +260,7 @@
       // List of items
       .md-nav__list {
         flex: 1;
-        overflow-y: scroll;
+        overflow-y: auto;
       }
 
       // List item

src/assets/stylesheets/layout/_search.scss

@@ -265,14 +265,14 @@
 
     // [tablet landscape +]: Header-embedded search
     @include break-from-device(tablet landscape) {
-      @include z-depth(6);
-
       top: 4rem;
       transition: opacity 0.4s;
       opacity: 0;
 
       // Show search output in active state
       [data-md-toggle="search"]:checked ~ .md-header & {
+        @include z-depth(6);
+
         opacity: 1;
       }
     }

src/assets/stylesheets/layout/_sidebar.scss

@@ -28,6 +28,7 @@
 .md-sidebar {
   position: relative;
   width: 24.2rem;
+  padding: 2.4rem 0;
   float: left;
   overflow: visible;
 
@@ -40,6 +41,7 @@
   &[data-md-state="lock"] {
     position: fixed;
     top: 5.6rem;
+    backface-visibility: hidden;
   }
 
   // [tablet -]: Convert navigation to drawer
@@ -107,27 +109,24 @@
 
   // Wrapper for scrolling on overflow
   &__scrollwrap {
-    margin: 2.4rem 0.4rem;
-    overflow-y: scroll;
+    max-height: 100%;
+    margin: 0 0.4rem;
+    overflow-y: auto;
 
     // [tablet -]: Adjust margins
     @include break-to-device(tablet) {
 
-      // Adjust margins for primary scrollbar
+      // Stretch scrollwrap for primary sidebar
       .md-sidebar--primary & {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         margin: 0;
       }
     }
 
-    // Limit height to window, if JavaScript is available
-    .js & {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-
     // Override native scrollbar styles
     &::-webkit-scrollbar {
       width: 0.4rem;

src/assets/stylesheets/layout/_source.scss

@@ -118,7 +118,7 @@
     font-weight: 700;
     list-style-type: none;
     opacity: 0.75;
-    overflow: auto;
+    overflow: hidden;
 
     // Show after the data was loaded
     [data-md-state="done"] & {

src/partials/footer.html

@@ -38,7 +38,7 @@
               rel="prev">
             <div class="md-flex__cell md-flex__cell--shrink">
               <i class="md-icon md-icon--arrow-back
-                    md-footer-nav__icon"></i>
+                    md-footer-nav__button"></i>
             </div>
             <div class="md-flex__cell md-flex__cell--stretch
                   md-footer-nav__title">
@@ -68,7 +68,7 @@
             </div>
             <div class="md-flex__cell md-flex__cell--shrink">
               <i class="md-icon md-icon--arrow-forward
-                    md-footer-nav__icon"></i>
+                    md-footer-nav__button"></i>
             </div>
           </a>
         {% endif %}

src/partials/header.html

@@ -30,10 +30,12 @@
       <!-- Link to home -->
       <div class="md-flex__cell md-flex__cell--shrink">
         <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}"
-            class="md-icon
-              {% if not config.extra.logo %}
-                md-icon--home
-              {% endif %} md-header-nav__icon">
+            class="
+              {% if config.extra.logo %}
+                md-logo
+              {% else %}
+                md-icon md-icon--home
+              {% endif %} md-header-nav__button">
           {% if config.extra.logo %}
             <img src="{{ base_url }}/{{ config.extra.logo }}"
                 width="24" height="24" />
@@ -43,7 +45,7 @@
 
       <!-- Button to toggle drawer -->
       <div class="md-flex__cell md-flex__cell--shrink">
-        <label class="md-icon md-icon--menu md-header-nav__icon"
+        <label class="md-icon md-icon--menu md-header-nav__button"
             for="drawer"></label>
       </div>
 
@@ -66,7 +68,7 @@
       <!-- Button to open search dialogue -->
       <div class="md-flex__cell md-flex__cell--shrink">
         {% block search_box %}
-          <label class="md-icon md-icon--search md-header-nav__icon"
+          <label class="md-icon md-icon--search md-header-nav__button"
               for="search"></label>
 
           <!-- Search interface -->

src/partials/nav.html

@@ -23,11 +23,12 @@
 <!-- Main navigation -->
 <nav class="md-nav md-nav--primary">
   <label class="md-nav__title md-nav__title--site" for="drawer">
-    <i class="md-icon
-          {% if not config.extra.logo %}
-            md-icon--home
-          {% endif %}
-          md-nav__icon">
+    <i class="
+          {% if config.extra.logo %}
+            md-logo
+          {% else %}
+            md-icon md-icon--home
+          {% endif %} md-nav__button">
       {% if config.extra.logo %}
         <img src="{{ base_url }}/{{ config.extra.logo }}" />
       {% endif %}