Remove ... on hooks

.githooks/post-merge/npm-update.sh

@@ -25,6 +25,6 @@ CHANGED="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
 
 # Perform install and prune of NPM dependencies if package.json changed
 if $(echo "$CHANGED" | grep --quiet package.json); then
-  echo "Hook[post-merge]: Updating dependencies..."
+  echo "Hook[post-merge]: Updating dependencies"
   npm install && npm prune
 fi

.githooks/pre-commit/branch.sh

@@ -21,8 +21,8 @@
 # IN THE SOFTWARE.
 
 # Determine current branch
-BRANCH=`git rev-parse --abbrev-ref HEAD`
+BRANCH=$(git rev-parse --abbrev-ref HEAD)
-echo -n "Hook[pre-commit]: Checking branch..."
+echo "Hook[pre-commit]: Checking branch"
 
 # If we're on master, abort commit
 if [[ "$BRANCH" == "master" ]]; then

.githooks/pre-commit/lint.sh

@@ -46,6 +46,6 @@ FILES=$(git diff --cached --name-only --diff-filter=ACMR | \
 
 # Run the check and print indicator
 if [ "$FILES" ]; then
-  echo "Hook[pre-commit]: Running linter..."
+  echo "Hook[pre-commit]: Running linter"
   npm run lint --silent || exit 1
 fi

CHANGELOG

@@ -1,3 +1,14 @@
+mkdocs-material-1.0.2 (2017-01-15)
+
+  * Fixed 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
+# Set working directory
-WORKDIR /usr/src
+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
+  [10]: http://www.materialui.co/colors
-  [7]: customization.md
+  [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
+loaded from [Google Fonts][13] and can easily be changed to other fonts, like
-for example the [Ubuntu font family][10]:
+for example the [Ubuntu font family][14]:
 
 ``` yaml
 extra:
@@ -223,9 +245,9 @@ extra:
   font: 'none'
 ```
 
-  [8]: https://fonts.google.com/specimen/Roboto
+  [12]: https://fonts.google.com/specimen/Roboto
-  [9]: https://fonts.google.com/
+  [13]: https://fonts.google.com/
-  [10]: https://fonts.google.com/specimen/Ubuntu
+  [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]
+* [Admonition][19]
-* [Codehilite][16]
+* [Codehilite][20]
-* [Permalinks][17]
+* [Permalinks][21]
-* [Footnotes][18]
+* [Footnotes][22]
-* [PyMdown Extensions][19]
+* [PyMdown Extensions][23]
 
-  [14]: http://www.mkdocs.org/user-guide/writing-your-docs/#markdown-extensions
+  [18]: http://www.mkdocs.org/user-guide/writing-your-docs/#markdown-extensions
-  [15]: extensions/admonition.md
+  [19]: extensions/admonition.md
-  [16]: extensions/codehilite.md
+  [20]: extensions/codehilite.md
-  [17]: extensions/permalinks.md
+  [21]: extensions/permalinks.md
-  [18]: extensions/footnotes.md
+  [22]: extensions/footnotes.md
-  [19]: extensions/pymdown.md
+  [23]: extensions/pymdown.md
 
 ## Full example
 

docs/release-notes.md

@@ -1,4 +1,4 @@
-# Release Notes
+# Release notes
 
 ## Upgrading
 
@@ -17,7 +17,18 @@ pip show mkdocs-material | grep -E ^Version
 
 ## Changelog
 
-### 1.0.0 <small> _  January 13, 2017</small>
+### 1.0.2 <small> _ January 15, 2017</small>
+
+  * Fixed horizontal scrollbar in content area
+
+### 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.2">
     {% endblock %}
     {% block htmltitle %}
       {% if page.title %}
@@ -31,7 +31,7 @@
       {% endif %}
     {% endblock %}
     {% block libs %}
-      <script src="{{ base_url }}/assets/javascripts/modernizr-facb31f4a3.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/modernizr-0d3dc73294.js"></script>
     {% endblock %}
     {% block fonts %}
       {% if config.extra.font != "none" %}
@@ -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 %}

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'
 
 # Theme directory
 theme_dir: material

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mkdocs-material",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A Material Design theme for MkDocs",
   "keywords": [
     "mkdocs",

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",
+    name = package["name"],
-    version = "1.0.0",
+    version = package["version"],
-    url = "http://squidfunk.github.io/mkdocs-material/",
+    url = package["homepage"],
-    license = "MIT",
+    license = package["license"],
-    description = "A Material Design theme for MkDocs",
+    description = package["description"],
-    author = "Martin Donath",
+    author = package["author"]["name"],
-    author_email = "martin.donath@squidfunk.com",
+    author_email = package["author"]["email"],
-    keywords = ["mkdocs", "documentation", "theme"],
+    keywords = package["keywords"],
     packages = find_packages(),
     include_package_data = True,
     entry_points = {

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 buttons
-  &__icon {
+  &__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 buttons
-  &__icon {
+  &__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
+      // Home icon or logo
-      &.md-icon--home {
+      &.md-icon--home,
+      &.md-logo {
         display: none;
       }
     }

src/assets/stylesheets/layout/_nav.scss

@@ -51,8 +51,8 @@
       content: "arrow_back";
     }
 
-    // Hide icon by default
+    // Hide button by default
-    .md-nav__icon {
+    .md-nav__button {
       display: none;
     }
   }
@@ -84,8 +84,8 @@
     }
   }
 
-  // Icon
+  // Icon buttons
-  &__icon {
+  &__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;
+    max-height: 100%;
-    overflow-y: scroll;
+    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
+            class="
-              {% if not config.extra.logo %}
+              {% if config.extra.logo %}
-                md-icon--home
+                md-logo
-              {% endif %} md-header-nav__icon">
+              {% 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
+    <i class="
-          {% if not config.extra.logo %}
+          {% if config.extra.logo %}
-            md-icon--home
+            md-logo
-          {% endif %}
+          {% else %}
-          md-nav__icon">
+            md-icon md-icon--home
+          {% endif %} md-nav__button">
       {% if config.extra.logo %}
         <img src="{{ base_url }}/{{ config.extra.logo }}" />
       {% endif %}