Prepare 0.2.2 release

Update drawer.html // Styling version number

CHANGELOG

@@ -1,3 +1,32 @@
+mkdocs-material-0.2.2 (2016-03-20)
+
+  * Fixed #15: Document pygments dependency for codehilite
+  * Fixed #16: Favicon could not be set through mkdocs.yml
+  * Fixed #17: Put version into own container for styling
+  * Fixed #20: Fix rounded borders for tables
+
+mkdocs-material-0.2.1 (2016-03-12)
+
+  * Fixed #10: Invisible header after closing search bar with ESC key
+  * Fixed #13: Table cells don't wrap
+  * Fixed empty list in table of contents when no headline is defined
+  * Corrected wrong path for static asset monitoring in Gulpfile.js
+  * Set up tracking of site search for Google Analytics
+
+mkdocs-material-0.2.0 (2016-02-24)
+
+  * Fixed #6: Include multiple color palettes via mkdocs.yml
+  * Fixed #7: Better colors for links inside admonition notes and warnings
+  * Fixed #9: Text for prev/next footer navigation should be customizable
+  * Refactored templates (replaced if/else with modifiers where possible)
+
+mkdocs-material-0.1.3 (2016-02-21)
+
+  * Fixed #3: Ordered lists within an unordered list have ::before content
+  * Fixed #4: Click on Logo/Title without Github-Repository: "None"
+  * Fixed #5: Page without headlines renders empty list in table of contents
+  * Moved Modernizr to top to ensure basic usability in IE8
+
 mkdocs-material-0.1.2 (2016-02-16)
 
   * Fixed styles for deep navigational hierarchies

Gulpfile.js

@@ -254,7 +254,7 @@ gulp.task('assets:watch', function() {
 
   /* Copy static assets */
   gulp.watch([
-    'assets/assets/{fonts,images}/*'
+    'src/assets/{fonts,images}/*'
   ], ['assets:static']);
 
   /* Minify views */

README.md

@@ -27,7 +27,8 @@ http://squidfunk.github.io/mkdocs-material/
 
 ## License
 
-**MIT License**  
+**MIT License**
+
 Copyright (c) 2016 Martin Donath
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "mkdocs-material",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "A material design theme for MkDocs",
   "homepage": "http://squidfunk.github.io/mkdocs-material/",
   "authors": [

docs/customization.md

@@ -26,23 +26,28 @@ Further assistance on including extra CSS and Javascript can be found in the
 ## Fundamental changes
 
 If you want to make larger adjustments like changing the color palette or
-typography, you should check out the repository of the project and compile
-the SASS sources with your changes. The project design is very modular, so
-most things can be changed by tweaking a few variables.
+typography, you should check out or download the repository of the project and
+compile the SASS sources with your changes. The project design is very modular,
+so most things can be tweaked by changing a few variables.
 
 ### Setup
 
-In order to compile the project, you need `node`, `bower` and `gulp` up and
-running. It's best to use the most recent versions, but it should also work if
-your installations are not too dated. The project itself is hosted on GitHub,
-so the next thing you should do is clone the project from GitHub:
+In order to compile the project, you need `node` with a version greater than
+`0.11` up and running. Then, make sure `bower` is installed or install it:
+
+``` sh
+npm install -g bower
+```
+
+The project itself is hosted on GitHub, so the next
+thing you should do is clone the project from GitHub:
 
 ``` sh
 git clone https://github.com/squidfunk/mkdocs-material
 ```
 
 Then you change the directory and install all dependencies specified in the
-`package.json` and `bower.json`:
+`package.json` and `bower.json` with the following command:
 
 ``` sh
 cd mkdocs-material
@@ -52,12 +57,12 @@ npm install && bower install
 ### Development
 
 The asset pipeline is contained in `Gulpfile.js`, which you can start with
-`gulp watch`. This will also run `mkdocs serve`, to monitor changes to the
-documentation. Point your browser to [localhost:8000](http://localhost:8000)
-and you should see this very documentation in front of your eyes.
+`gulp watch`. If you specify the `--mkdocs` flag, this will also run
+`mkdocs serve`, to monitor changes to the documentation. Point your browser to [localhost:8000](http://localhost:8000) and you should see this very
+documentation in front of your eyes.
 
 ``` sh
-gulp watch
+gulp watch --mkdocs
 ```
 
 For example, changing the color palette is as simple as changing the `$primary`
@@ -80,11 +85,18 @@ When you finished making your changes, you can build the theme by invoking:
 gulp build --production
 ```
 
-The `production` flag triggers the production-level compilation and
+The `--production` flag triggers the production-level compilation and
 minification of all CSS and Javascript sources. When the command is ready,
 the final theme is located in the `material` directory. Add the `theme_dir`
 variable pointing to the aforementioned directory in your original
-`mkdocs.yml` and you should see your documentation with your changes!
+`mkdocs.yml`:
+
+``` yaml
+theme_dir: 'mkdocs-material/material'
+```
+
+Now you can run `mkdocs build` and you should see your documentation with your
+changes to the original Material theme.
 
 [MkDocs]: http://www.mkdocs.org
 [MkDocs documentation]: http://www.mkdocs.org/user-guide/styling-your-docs/#customising-a-theme

docs/getting-started.md

@@ -4,11 +4,11 @@
 
 ### Installing MkDocs
 
-In order to install [MkDocs][], Python and `pip` - the Python package manager -
-need to be up and running. Assuming you are a developer and have a basic
-understanding of how things work and what StackOverflow is, we won't provide
-guidelines on setting those up. You can verify if you're already good to go
-with the following commands:
+Before installing [MkDocs][], you need to make sure you have Python and `pip`
+– the Python package manager – up and running. Assuming you are a developer and
+have a basic understanding of how things work and what StackOverflow is, we
+won't provide guidelines on setting those up. You can verify if you're already
+good to go with the following commands:
 
 ``` sh
 python --version
@@ -76,19 +76,6 @@ on and customize the theme through some options.
 The Material theme adds some extra variables for configuration via your
 project's `mkdocs.yml`. See the following section for all available options.
 
-### Adding a logo
-
-If your project has a logo, you can add it to the drawer/navigation by defining
-the variable `extra.logo`. Ideally, the image of your logo should have
-rectangular shape with a minimum resolution of 128x128. The logo will also be
-used as a web application icon on iOS. Simply create the folder `docs/images`,
-add your image and reference it via:
-
-``` yaml
-extra:
-  logo: 'images/logo.png'
-```
-
 ### Adding a version
 
 In order to add the current version next to the project banner inside the
@@ -99,6 +86,86 @@ extra:
   version: '0.1.0'
 ```
 
+This will also change the link behind the download button to point to the
+archive with the respective version on GitHub, assuming a release tagged with
+this exact version identifier.
+
+### Adding a logo
+
+If your project has a logo, you can add it to the drawer/navigation by defining
+the variable `extra.logo`. Ideally, the image of your logo should have
+rectangular shape with a minimum resolution of 128x128 and leave some room
+towards the edges. The logo will also be used as a web application icon on iOS.
+Simply create the folder `docs/images`, add your image and reference it via:
+
+``` yaml
+extra:
+  logo: 'images/logo.png'
+```
+
+### Changing the color palette
+
+Material defines a default hue for every primary and accent color on Google's
+material design [color palette][]. This makes it very easy to change the
+overall look of the theme. Just set the variables `extra.palette.primary` and
+`extra.palette.accent` to one of the colors defined in the palette:
+
+``` yaml
+extra:
+  palette:
+    primary: 'indigo'
+    accent: 'light blue'
+```
+
+Color names can be written upper- or lowercase but must match the names of the
+material design [color palette][]. Valid values are: _red_, _pink_, _purple_,
+_deep purple_, _indigo_, _blue_, _light blue_, _cyan_, _teal_, _green_, _light
+green_, _lime_, _yellow_, _amber_, _orange_, _deep orange_, _brown_, _grey_ and
+_blue grey_. The last three colors can only be used as a primary color.
+
+![Material Screenshot](images/colors.png)
+
+If the color is set via this configuration, an additional CSS file called
+`palettes.css` is included that defines the color palettes. If you want to
+keep things lean, clone the repository and recompile the theme with your
+custom colors set. See [this article](customization.md) for more information.
+
+### Changing the font family
+
+Material uses the [Ubuntu font family][] by default, specifically the regular
+sans-serif type for text and the monospaced type for code. Both fonts are
+loaded from [Google Fonts][] and can be easily changed to other fonts, like for
+example Google's own [Roboto font][]:
+
+``` yaml
+extra:
+  font:
+    text: 'Roboto'
+    code: 'Roboto Mono'
+```
+
+The text font will be loaded in font-weights 400 and **700**, the monospaced
+font in regular weight. If you want to load fonts from other destinations or
+don't want to use the Google Fonts loading magic, just set `extra.font` to
+`'none'`:
+
+``` yaml
+extra:
+  font: 'none'
+```
+
+### Localization
+
+The **Previous** and **Next** labels in the footer can easily be changed by
+defining the variables `extra.i18n.prev` and `extra.i18n.next`:
+
+``` yaml
+extra:
+  i18n:
+    prev: 'Previous'
+    next: 'Next'
+```
+
 ### Adding a GitHub and Twitter account
 
 If you have a GitHub and/or Twitter account, you can add links to your
@@ -112,12 +179,23 @@ extra:
     twitter: 'my-twitter-handle'
 ```
 
+### Google Analytics integration
+
+Material makes it easy to integrate site tracking with Google Analytics.
+Besides basic tracking, clicks on all outgoing links can be tracked, clicks on
+the download and star button, as well as how site search is used. Tracking can
+be activated in your project's `mkdocs.yml`:
+
+``` yaml
+google_analytics:
+  - 'UA-XXXXXXXX-X'
+  - 'auto'
+```
+
 ### More advanced customization
 
-If you want to change the fonts or colors - you are lucky. The Material theme
-is built with a sophisticated asset pipeline. See
-[this article](customization.md) for more information on advanced
-customization.
+If you want to change the general appearance of the Material theme, see
+[this article](customization.md) for more information on advanced customization.
 
 ## Extensions
 
@@ -127,8 +205,9 @@ have to switch them on explicitly.
 
 ### CodeHilite (recommended)
 
-This extensions adds code highlighting to fenced code blocks. It might not be
-the best code highlighter, but it works without JavaScript and on the server:
+This extensions uses [Pygments][] (install with `pip install pygments`) to add
+code highlighting to fenced code blocks. It might not be the best code
+highlighter, but it works without JavaScript and on the server:
 
 ``` yaml
 markdown_extensions:
@@ -142,12 +221,12 @@ further instructions
 ### Permalinks
 
 In order to add [permalinks][] to the headers of your article, set the
-`markdown_extensions.toc.permalink` variable to a symbol, e.g. `¶`:
+`markdown_extensions.toc.permalink` variable to a symbol, e.g. `#`:
 
 ``` yaml
 markdown_extensions:
   - toc:
-    permalink: '¶'
+    permalink: '#'
 ```
 
 The symbol can be chosen freely, it can even be a WebFont icon.
@@ -170,16 +249,23 @@ In order to add a note, use the following syntax inside your article:
     Nothing to see here, move along.
 ```
 
-This will print the following:
+This will print the following block:
 
 !!! note
     Nothing to see here, move along.
 
 The Material template adds a neutral color for the `note` class and a red color
-for the `warning` class.
+for the `warning` class. You can also add a custom title:
 
-!!! warning
-    You shall not pass.
+``` markdown
+!!! warning "Don't try this at home"
+    If you do, you will regret it.
+```
+
+This will print:
+
+!!! warning "Don't try this at home"
+    If you do, you will regret it.
 
 More colors can be freely defined.
 
@@ -209,21 +295,40 @@ theme: 'material'
 extra:
   version: '0.1.0'
   logo: 'images/logo.png'
+  palette:
+    primary: 'indigo'
+    accent: 'light blue'
+  font:
+    text: 'Roboto'
+    code: 'Roboto Mono'
+  i18n:
+    prev: 'Previous'
+    next: 'Next'
   author:
     github: 'my-github-handle'
     twitter: 'my-twitter-handle'
 
+# Google Analytics
+google_analytics:
+  - 'UA-XXXXXXXX-X'
+  - 'auto'
+
 # Extensions
 markdown_extensions:
   - codehilite(css_class=code)
   - admonition
   - toc:
-      permalink: '¶'
+      permalink: '#'
 ```
 
 [MkDocs]: http://www.mkdocs.org
+[color palette]: http://www.materialui.co/colors
+[Ubuntu font family]: http://font.ubuntu.com
+[Google Fonts]: https://www.google.com/fonts
+[Roboto font]: https://www.google.com/fonts/specimen/Roboto
 [Markdown extensions]: http://www.mkdocs.org/user-guide/writing-your-docs/#markdown-extensions
-[highlight.js]: https://highlightjs.org/
+[Pygments]: http://pygments.org
+[highlight.js]: https://highlightjs.org
 [extra]: http://www.mkdocs.org/user-guide/styling-your-docs/#customising-a-theme
 [permalinks]: https://en.wikipedia.org/wiki/Permalink
 [Admonition]: https://pythonhosted.org/Markdown/extensions/admonition.html

docs/index.md

@@ -2,46 +2,65 @@
 
 ## Beautiful documentation
 
-You're currently looking at a full responsive [MkDocs][] theme in the spirit of
-Google's [material design][] guidelines. MkDocs is an excellent static site
-documentation generator that is meant for building good looking project
-documentation.
+Material is a theme for [MkDocs][], an excellent static site generator geared
+towards project documentation. It is built using Google's [material design][]
+guidelines, full responsive, optimized for touch and pointer devices as well
+as all sorts of screen sizes.
 
 ![Material Screenshot](images/screen.png)
 
-This theme is **optimized for all sorts of devices** and is built from scratch
-without any bloated Javascript or CSS Frameworks with **only 24kb of JS and
-CSS** (minified, gzipped and excluding Google WebFonts and Analytics). Yet, it
-is highly customizable in terms of fonts, colors and gracefully supports older
+Material is very lightweight – it is built from scratch using Javascript and
+CSS that weighs less than 30kb (minified, gzipped and excluding Google Fonts
+and Analytics). Yet, it is highly customizable and degrades gracefully in older
 browsers.
 
+## Quick start
+
+Install with `pip`:
+
+``` sh
+pip install mkdocs-material
+```
+
+Add the following line to your `mkdocs.yml`:
+
+``` yaml
+theme: 'material'
+```
+
 ## Features
 
-- Beautiful, readable and very user-friendly design based on Google's
-  **material design** guidelines, packed in a **full responsive** template
-  with a well-defined color palette, great typography, as well as a beautiful
-  search interface and footer.
+- Beautiful, readable and very user-friendly design based on Google's material
+  design guidelines, packed in a full responsive template with a well-defined
+  and [easily customizable color palette][], great typography, as well as a
+  beautiful search interface and footer.
 
-- Well-tested and **optimized CSS and Javascript**, including a cross-browser
+- Well-tested and optimized Javascript and CSS including a cross-browser
   fixed/sticky header, a drawer that even works without Javascript using
-  the `:checked` hack with fallbacks, **responsive tables** that scroll when
-  the screen is too small and **well-defined print styles**.
+  the [checkbox hack][] with fallbacks, responsive tables that scroll when
+  the screen is too small and well-defined print styles.
 
-- Extra configuration options like **project logo**, links to the authors
-  **GitHub and Twitter accounts** and display of the **amount of stars** the
-  project has on GitHub.
+- Extra configuration options like a [project logo][], links to the authors
+  [GitHub and Twitter accounts][], display of the amount of stars the
+  project has on GitHub and [Google Analytics integration][].
 
-- **Easily extendable and customizable** due to a well-designed asset pipeline
+- Easily [extendable and customizable][] due to a well-designed asset pipeline
   built on-top of [Gulp][] with `npm` and `bower` and modular and abstracted
   style definitions built with [SASS][].
 
-- **Web application capability** on iOS - when the page is saved to the
-  homescreen, it behaves and looks like a native application.
+- Web application capability on iOS – when the page is saved to the homescreen,
+  it behaves and looks like a native application.
 
 See the [getting started guide](getting-started.md) for instructions how to get
 it up and running.
 
-[material design]: https://www.google.com/design/spec/material-design
 [MkDocs]: http://www.mkdocs.org
+[material design]: https://www.google.com/design/spec/material-design
+[checkbox hack]: http://tutorialzine.com/2015/08/quick-tip-css-only-dropdowns-with-the-checkbox-hack/
+[project logo]: getting-started.md#adding-a-logo
+[easily customizable color palette]: getting-started.md#changing-the-color-palette
+[GitHub and Twitter accounts]: getting-started.md#adding-a-github-and-twitter-account
+[Google Analytics integration]: getting-started.md#google-analytics-integration
+[extendable and customizable]: customization.md
 [Gulp]: http://gulpjs.com
-[SASS]: http://sass-lang.com/
+[SASS]: http://sass-lang.com

docs/license.md

@@ -1,6 +1,7 @@
 # License
 
-**MIT License**  
+**MIT License**
+
 Copyright (c) 2016 Martin Donath
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

material/base.html

@@ -34,9 +34,9 @@
     {% if config.extra.logo %}
       <link rel="apple-touch-icon" href="{{ base_url }}/{{ config.extra.logo }}">
     {% endif %}
-    {% set icon = icon | default('assets/images/favicon-e565ddfa3b.ico') %}
-    <link rel="shortcut icon" type="image/x-icon" href="{{ base_url }}/{{ icon }}">
-    <link rel="icon" type="image/x-icon" href="{{ base_url }}/{{ icon }}">
+    {% set favicon = favicon | default("assets/images/favicon-e565ddfa3b.ico") %}
+    <link rel="shortcut icon" type="image/x-icon" href="{{ base_url }}/{{ favicon }}">
+    <link rel="icon" type="image/x-icon" href="{{ base_url }}/{{ favicon }}">
     <style>
       @font-face {
       	font-family: 'Icon';
@@ -53,17 +53,14 @@
       	font-style: normal;
       }
     </style>
-    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-f5ffeca01e.css">
-    {% if config.extra.font != 'none' %}
-      {% set text = 'Ubuntu' %}
-      {% if config.extra.font and config.extra.font.text %}
-        {% set text = config.extra.font.text %}
-      {% endif %}
-      {% set code = 'Ubuntu Mono' %}
-      {% if config.extra.font and config.extra.font.code %}
-        {% set code = config.extra.font.code %}
-      {% endif %}
-      {% set font = text + ':400,700|' + code | replace('+', ' ') %}
+    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-54f87043f3.css">
+    {% if config.extra.palette %}
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/palettes-05ab2406df.css">
+    {% endif %}
+    {% if config.extra.font != "none" %}
+      {% set text = config.extra.get("font", {}).text | default("Ubuntu") %}
+      {% set code = config.extra.get("font", {}).code | default("Ubuntu Mono") %}
+      {% set font = text + ':400,700|' + code | replace(' ', '+') %}
       <link rel="stylesheet" href="//fonts.googleapis.com/css?family={{ font }}">
       <style>
         body, input {
@@ -77,12 +74,16 @@
     {% for path in extra_css %}
       <link rel="stylesheet" href="{{ path }}">
     {% endfor %}
+    <script src="{{ base_url }}/assets/javascripts/modernizr-4ab42b99fd.js"></script>
     {% block extrahead %}{% endblock %}
   </head>
-  <body>
-    {% if repo_name == 'GitHub' %}
-      {% set repo_id = repo_url | replace('https://github.com/', '') %}
-      {% if repo_id[-1:] == '/' %}
+  {% set palette = config.extra.get("palette", {}) %}
+  {% set primary = palette.primary | replace(' ', '-') | lower %}
+  {% set accent  = palette.accent  | replace(' ', '-') | lower %}
+  <body class="{% if primary %}palette-primary-{{ primary }}{% endif %} {% if accent %}palette-accent-{{ accent }}{% endif %}">
+    {% if repo_name == "GitHub" and repo_url %}
+      {% set repo_id = repo_url | replace("https://github.com/", "") %}
+      {% if repo_id[-1:] == "/" %}
         {% set repo_id = repo_id[:-1] %}
       {% endif %}
     {% endif %}
@@ -103,11 +104,7 @@
       <article class="article">
         <div class="wrapper">
           {% if not h1 %}
-            {% if page_title %}
-              <h1>{{ page_title }}</h1>
-            {% else %}
-              <h1>{{ site_name }}</h1>
-            {% endif %}
+            <h1>{{ page_title | default(site_name, true)}}</h1>
           {% endif %}
           {{ content }}
           <aside class="copyright" role="note">
@@ -127,7 +124,8 @@
               {% include "footer.html" %}
             </footer>
           {% endblock %}
-        </div></article>
+        </div>
+      </article>
       <div class="results" role="status" aria-live="polite">
         <div class="scrollable">
           <div class="wrapper">
@@ -137,12 +135,11 @@
         </div>
       </div>
     </main>
-    <script src="{{ base_url }}/assets/javascripts/modernizr-4ab42b99fd.js"></script>
     <script>
       var base_url = '{{ base_url }}';
       var repo_id  = '{{ repo_id }}';
     </script>
-    <script src="{{ base_url }}/assets/javascripts/application-c6d2e828bd.js"></script>
+    <script src="{{ base_url }}/assets/javascripts/application-997097ee0c.js"></script>
     {% for path in extra_javascript %}
       <script src="{{ path }}"></script>
     {% endfor %}
@@ -162,13 +159,21 @@
         /* Track outbound links */
         var buttons = document.querySelectorAll('a');
         Array.prototype.map.call(buttons, function(item) {
-          if (item.host != window.location.host) {
+          if (item.host != document.location.host) {
             item.addEventListener('click', function() {
               var action = item.getAttribute('data-action') || 'follow';
               ga('send', 'event', 'outbound', action, item.href);
             });
           }
         });
+        /* Register handler to log search on blur */
+        var query = document.querySelector('.query');
+        query.addEventListener('blur', function() {
+          if (this.value) {
+            var path = document.location.pathname;
+            ga('send', 'pageview', path + '?q=' + this.value);
+          }
+        });
       </script>
     {% endif %}
   </body>

material/drawer.html

@@ -1,5 +1,6 @@
 <nav aria-label="Navigation">
-  <a href="{{ repo_url }}" class="project">
+  {% set home = repo_url | default("/", true) %}
+  <a href="{{ home }}" class="project">
     <div class="banner">
       {% if config.extra.logo %}
         <div class="logo">
@@ -7,7 +8,12 @@
         </div>
       {% endif %}
       <div class="name">
-        <strong>{{ site_name }} {{ config.extra.version }}</strong>
+        <strong>
+          {{ site_name }}
+          <span class="version">
+            {{ config.extra.version }}
+          </span>
+        </strong>
         {% if repo_id %}
           <br>
           {{ repo_id }}
@@ -17,17 +23,17 @@
   </a>
   <div class="scrollable">
     <div class="wrapper">
-      {% if repo_name == 'GitHub' %}
+      {% if repo_name == "GitHub" and repo_url %}
         <ul class="repo">
           <li class="repo-download">
-            {% set version = config.extra.version | default('master') %}
-            <a href="{{ repo_url }}/archive/{{ version }}.zip" target="_blank" title="Download {{ site_name }} from GitHub" data-action="download">
+            {% set version = config.extra.version | default("master") %}
+            <a href="{{ repo_url }}/archive/{{ version }}.zip" target="_blank" title="Download" data-action="download">
               <i class="icon icon-download"></i> Download
             </a>
           </li>
           <li class="repo-stars">
-            <a href="{{ repo_url }}" target="_blank" title="Star {{ site_name }} on GitHub" data-action="star">
-              <i class="icon icon-star"></i> Star
+            <a href="{{ repo_url }}/stargazers" target="_blank" title="Stargazers" data-action="star">
+              <i class="icon icon-star"></i> Stars
               <span class="count">&ndash;</span>
             </a>
           </li>

material/footer.html

@@ -3,7 +3,9 @@
     <div class="previous">
       {% if previous_page %}
         <a href="{{ previous_page.url }}" title="{{ previous_page.title }}">
-          <span class="direction">Previous</span>
+          <span class="direction">
+            {{ config.extra.get("i18n", {}).prev | default("Previous") }}
+          </span>
           <div class="page">
             <div class="button button-previous" role="button" aria-label="Previous">
               <i class="icon icon-back"></i>
@@ -20,7 +22,9 @@
     <div class="next">
       {% if next_page %}
         <a href="{{ next_page.url }}" title="{{ next_page.title }}">
-          <span class="direction">Next</span>
+          <span class="direction">
+            {{ config.extra.get("i18n", {}).next | default("Next") }}
+          </span>
           <div class="page">
             <div class="stretch">
               <div class="title">

material/header.html

@@ -19,21 +19,19 @@
             {% endfor %}
           </span>
         {% endif %}
-        {% if page_title %}
-          {{ page_title }}
-        {% else %}
-          {{ site_name }}
-        {% endif %}
+        {{ page_title | default(site_name, true) }}
       </div>
     </div>
-    {% if config.extra.author and config.extra.author.twitter %}
+    {% if config.extra.get("author", {}).twitter %}
+      {% set author = config.extra.author.twitter %}
       <div class="button button-twitter" role="button" aria-label="Twitter">
-        <a href="https://twitter.com/{{ config.extra.author.twitter }}" title="@{{ config.extra.author.twitter }} on Twitter" target="_blank" class="toggle-button icon icon-twitter"></a>
+        <a href="https://twitter.com/{{ author }}" title="@{{ author }} on Twitter" target="_blank" class="toggle-button icon icon-twitter"></a>
       </div>
     {% endif %}
-    {% if config.extra.author and config.extra.author.github %}
+    {% if config.extra.get("author", {}).github %}
+      {% set author = config.extra.author.github %}
       <div class="button button-github" role="button" aria-label="GitHub">
-        <a href="https://github.com/{{ config.extra.author.github }}" title="@{{ config.extra.author.github }} on GitHub" target="_blank" class="toggle-button icon icon-github"></a>
+        <a href="https://github.com/{{ author }}" title="@{{ author }} on GitHub" target="_blank" class="toggle-button icon icon-github"></a>
       </div>
     {% endif %}
     <div class="button button-search" role="button" aria-label="Search">

material/manifest.json

@@ -1,6 +1,7 @@
 {
   "assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
-  "assets/javascripts/application.js": "assets/javascripts/application-c6d2e828bd.js",
+  "assets/javascripts/application.js": "assets/javascripts/application-997097ee0c.js",
   "assets/javascripts/modernizr.js": "assets/javascripts/modernizr-4ab42b99fd.js",
-  "assets/stylesheets/application.css": "assets/stylesheets/application-f5ffeca01e.css"
+  "assets/stylesheets/application.css": "assets/stylesheets/application-54f87043f3.css",
+  "assets/stylesheets/palettes.css": "assets/stylesheets/palettes-05ab2406df.css"
 }

material/nav.html

@@ -3,7 +3,7 @@
     <span class="section">{{ nav_item.title }}</span>
     <ul>
       {% for nav_item in nav_item.children %}
-        {% include 'nav.html' %}
+        {% include "nav.html" %}
       {% endfor %}
     </ul>
   </li>
@@ -13,25 +13,20 @@
       {{ nav_item.title }}
     </a>
     {% if nav_item == current_page %}
-      <ul>
-        {% for toc_item in toc %}
-          {% if h1 %}
-            {% for toc_item in toc_item.children %}
-              <li class="anchor">
-                <a title="{{ toc_item.title }}" href="{{ toc_item.url }}">
-                  {{ toc_item.title }}
-                </a>
-              </li>
-            {% endfor %}
-          {% else %}
-          <li class="anchor">
-            <a title="{{ toc_item.title }}" href="{{ toc_item.url }}">
-              {{ toc_item.title }}
-            </a>
-          </li>
-          {% endif %}
-        {% endfor %}
-      </ul>
+      {% if h1 %}
+        {% set toc = (toc | first).children %}
+      {% endif %}
+      {% if toc and (toc | first) %}
+        <ul>
+          {% for toc_item in toc %}
+            <li class="anchor">
+              <a title="{{ toc_item.title }}" href="{{ toc_item.url }}">
+                {{ toc_item.title }}
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
     {% endif %}
   </li>
 {% endif %}

mkdocs.yml

@@ -36,11 +36,8 @@ theme_dir: material
 
 # Options
 extra:
-  version: 0.1.2
+  version: 0.2.1
   logo: images/logo.png
-  font:
-    text: Ubuntu
-    code: Ubuntu Mono
   author:
     github: squidfunk
     twitter: squidfunk
@@ -50,7 +47,7 @@ markdown_extensions:
   - codehilite(css_class=code)
   - admonition
   - toc:
-      permalink: ¶
+      permalink: '#'
 
 # Page tree
 pages:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mkdocs-material",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "A material design theme for MkDocs",
   "homepage": "http://squidfunk.github.io/mkdocs-material/",
   "authors": [

setup.py

@@ -23,7 +23,7 @@ from setuptools import setup, find_packages
 # Package description
 setup(
     name = 'mkdocs-material',
-    version = '0.1.2',
+    version = '0.2.1',
     url = 'http://squidfunk.github.io/mkdocs-material/',
     license = 'MIT',
     description = 'A material design theme for MkDocs',

src/assets/javascripts/application.js

@@ -253,7 +253,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
             /* Close search and jump to anchor when on same page */
             var parts = link.href.split('#');
-            if (parts[0] == window.location.href.split('#')[0]) {
+            if (parts[0] == document.location.href.split('#')[0]) {
               link.addEventListener('click', function(e) {
                 document.body.classList.remove('toggle-search');
                 document.body.classList.remove('locked');
@@ -373,6 +373,9 @@ document.addEventListener('DOMContentLoaded', function() {
   window.addEventListener('keyup', function(e) {
     var code = e.keyCode || e.which;
     if (code == 27) {
+      query.blur();
+
+      /* Exit locked state */
       document.body.classList.remove('toggle-search');
       document.body.classList.remove('locked');
       toggle.checked = false;
@@ -502,24 +505,26 @@ document.addEventListener('DOMContentLoaded', function() {
  * ------------------------------------------------------------------------- */
 
   /* Get Stars for current repository */
-  pegasus('https://api.github.com/repos/' + repo_id).then(
+  if (repo_id) {
+    pegasus('https://api.github.com/repos/' + repo_id).then(
 
-    /* Request successful, we got the stars */
-    function(data, xhr) {
-      var count = data.stargazers_count;
-      if (count > 10000)
-        count = (count / 1000).toFixed(0) + 'k';
-      else if (count > 1000)
-        count = (count / 1000).toFixed(1) + 'k';
+      /* Request successful, we got the stars */
+      function(data, xhr) {
+        var count = data.stargazers_count;
+        if (count > 10000)
+          count = (count / 1000).toFixed(0) + 'k';
+        else if (count > 1000)
+          count = (count / 1000).toFixed(1) + 'k';
 
-      /* Set number of stars */
-      var stars = document.querySelector('.repo-stars .count');
-      stars.innerHTML = count;
-    },
+        /* Set number of stars */
+        var stars = document.querySelector('.repo-stars .count');
+        stars.innerHTML = count;
+      },
 
-    /* Handle error */
-    function(data, xhr) {
-      console.error(data, xhr.status);
-    }
-  );
+      /* Handle error */
+      function(data, xhr) {
+        console.error(data, xhr.status);
+      }
+    );
+  }
 });

src/assets/stylesheets/modules/article/_appearance.scss

@@ -57,11 +57,17 @@
     border-bottom: 1px solid $black-lightest;
   }
 
+  /*
+   * Underline links
+   */
+  a {
+    border-bottom: 1px dotted;
+  }
+
   /*
    * Hovered and focused links
    */
-  a:hover,
-  a:focus {
+  a:hover, a:focus {
     color: $accent;
   }
 
@@ -70,6 +76,7 @@
    */
   .headerlink {
     color: $black-lighter;
+    border: none;
   }
 
   /*
@@ -86,20 +93,6 @@
     th {
       background: mix($primary, $white, 75%);
       color: $white;
-
-      /*
-       * Round upper left border
-       */
-      &:first-child {
-        border-top-left-radius: 3px;
-      }
-
-      /*
-       * Round upper right border
-       */
-      &:last-child {
-        border-top-right-radius: 3px;
-      }
     }
 
     /*
@@ -117,6 +110,13 @@
 .footer {
   background: $primary;
   color: $white;
+
+  /*
+   * Remove bottom border on links
+   */
+  a {
+    border: none;
+  }
 }
 
 /*
@@ -166,4 +166,11 @@
   &.warning {
     background: $red-400;
   }
+
+  /*
+   * Headlines, chapters, links and inline code
+   */
+  a, a:hover {
+    color: $white;
+  }
 }

src/assets/stylesheets/modules/article/_layout.scss

@@ -149,6 +149,13 @@
     margin-top: 1.5em;
   }
 
+  /*
+   * Smaler top spacing for nested lists
+   */
+  li ul, li ol {
+    margin-top: 0.75em;
+  }
+
   /*
    * List elements
    */
@@ -167,7 +174,7 @@
   /*
    * Add icon for elements of an unordered list
    */
-  ul li:before {
+  ul > li:before {
     content: "\e602";
     display: block;
     float: left;
@@ -216,6 +223,7 @@
   table {
     margin: 3.0em 0 1.5em;
     font-size: 13px;
+    overflow: hidden;
 
     /*
      * The semi-cool solution, in case javascript is not available
@@ -235,7 +243,7 @@
       padding: 12px 16px;
       font-size: 12px;
       text-align: left;
-      white-space: nowrap;
+      vertical-align: top;
     }
 
     /*
@@ -243,7 +251,7 @@
      */
     td {
       padding: 12px 16px;
-      white-space: nowrap;
+      vertical-align: top;
     }
   }
 

src/assets/stylesheets/modules/drawer/_layout.scss

@@ -74,14 +74,14 @@
   }
 
   /*
-   * Nested links
+   * Nested links and anchors
    */
   .toc li ul {
     margin-left: 12px;
   }
 
   /*
-   *
+   * Nested anchors
    */
   .current + ul {
     margin-bottom: 9px;

src/assets/stylesheets/palettes.scss

@@ -0,0 +1,221 @@
+/*
+ * 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.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Dependencies
+ * ------------------------------------------------------------------------- */
+
+@import "bourbon";
+@import "quantum-colors";
+@import "quantum-shadows";
+
+/* ----------------------------------------------------------------------------
+ * Application
+ * ------------------------------------------------------------------------- */
+
+@import "palette";
+
+@import "mixins/break";
+
+/* ----------------------------------------------------------------------------
+ * Palette
+ * ------------------------------------------------------------------------- */
+
+/*
+ * Build primary palette
+ */
+@each $name, $color in (
+  'red':         $red-400,
+  'pink':        $pink-500,
+  'purple':      $purple-400,
+  'deep-purple': $deep-purple-400,
+  'indigo':      $indigo-500,
+  'blue':        $blue-500,
+  'light-blue':  $light-blue-500,
+  'cyan':        $cyan-500,
+  'teal':        $teal-500,
+  'green':       $green-500,
+  'light-green': $light-green-600,
+  'lime':        $lime-600,
+  'yellow':      $yellow-800,
+  'amber':       $amber-600,
+  'orange':      $orange-600,
+  'deep-orange': $deep-orange-400,
+  'brown':       $brown-500,
+  'grey':        $grey-600,
+  'blue-grey':   $blue-grey-600
+) {
+
+  /*
+   * Device specific background hacks related to rubberband
+   */
+  .palette-primary-#{$name} {
+
+    /* Hack [Chrome, Opera]: Set background color in Chrome and Opera */
+    @supports (-webkit-appearance: none) {
+      background: $color;
+    }
+
+    /*
+     * Application header and footer
+     */
+    .header, .footer {
+      background: $color;
+    }
+
+    /*
+     * Drawer container
+     */
+    .drawer {
+
+      /*
+       * Color links
+       */
+      .toc a {
+
+        /*
+         * Current active element
+         */
+        &.current {
+          color: $color;
+        }
+
+        /*
+         * Hovered link
+         */
+        &:hover, &:focus {
+          color: $color;
+        }
+      }
+
+      /*
+       * Color anchors menu
+       */
+      .anchor a {
+        border-left: 2px solid $color;
+      }
+    }
+
+    /*
+     * Project information
+     */
+    .project {
+
+      /* [tablet landscape-]: Set background color */
+      @include break-to-device(tablet landscape) {
+        background: $color;
+      }
+    }
+
+    /*
+     * Article
+     */
+    .article {
+
+      /*
+       * Differing top and bottom rubberband backgrounds in iOS web application
+       */
+      .ios.standalone & {
+        background: linear-gradient(
+          to bottom, $white 50%, $color 50%);
+      }
+
+      /*
+       * Headlines, chapters, links and inline code
+       */
+      h1, h2, a, code {
+        color: $color;
+      }
+
+      /*
+       * Light permalinks
+       */
+      .headerlink {
+        color: $black-lighter;
+      }
+
+      /*
+       * Data table headings
+       */
+      table th {
+        background: mix($color, $white, 75%);
+      }
+    }
+
+    /*
+     * Search meta data
+     */
+    .results .meta {
+      background: $color;
+    }
+  }
+}
+
+/*
+ * Build accent palette
+ */
+@each $name, $color in (
+  'red':         $red-a400,
+  'pink':        $pink-a400,
+  'purple':      $purple-a200,
+  'deep-purple': $deep-purple-a200,
+  'indigo':      $indigo-a200,
+  'blue':        $blue-a200,
+  'light-blue':  $light-blue-a700,
+  'cyan':        $cyan-a700,
+  'teal':        $teal-a700,
+  'green':       $green-a700,
+  'light-green': $light-green-a700,
+  'lime':        $lime-a700,
+  'yellow':      $yellow-a700,
+  'amber':       $amber-a700,
+  'orange':      $orange-a400,
+  'deep-orange': $deep-orange-a200
+) {
+
+  /*
+   * Device specific background hacks related to rubberband
+   */
+  .palette-accent-#{$name} {
+
+    /*
+     * Article
+     */
+    .article {
+
+      /*
+       * Hovered and focused links
+       */
+      a:hover,
+      a:focus {
+        color: $color;
+      }
+    }
+
+    /*
+     * Repository buttons
+     */
+    .repo a {
+      background: $color;
+    }
+  }
+}

src/base.html

@@ -58,11 +58,11 @@
     {% endif %}
 
     <!-- Favicon -->
-    {% set icon = icon | default('assets/images/favicon.ico') %}
+    {% set favicon = favicon | default("assets/images/favicon.ico") %}
     <link rel="shortcut icon" type="image/x-icon"
-      href="{{ base_url }}/{{ icon }}" />
+      href="{{ base_url }}/{{ favicon }}" />
     <link rel="icon" type="image/x-icon"
-      href="{{ base_url }}/{{ icon }}" />
+      href="{{ base_url }}/{{ favicon }}" />
 
     <!-- Configure icons (placed here to omit issues with subdirectories) -->
     <style>
@@ -86,17 +86,17 @@
     <link rel="stylesheet" type="text/css"
       href="{{ base_url }}/assets/stylesheets/application.css" />
 
+    <!-- Extra palettes -->
+    {% if config.extra.palette %}
+      <link rel="stylesheet" type="text/css"
+        href="{{ base_url }}/assets/stylesheets/palettes.css" />
+    {% endif %}
+
     <!-- Configure webfonts -->
-    {% if config.extra.font != 'none' %}
-      {% set text = 'Ubuntu' %}
-      {% if config.extra.font and config.extra.font.text %}
-        {% set text = config.extra.font.text %}
-      {% endif %}
-      {% set code = 'Ubuntu Mono' %}
-      {% if config.extra.font and config.extra.font.code %}
-        {% set code = config.extra.font.code %}
-      {% endif %}
-      {% set font = text + ':400,700|' + code | replace('+', ' ') %}
+    {% if config.extra.font != "none" %}
+      {% set text = config.extra.get("font", {}).text | default("Ubuntu") %}
+      {% set code = config.extra.get("font", {}).code | default("Ubuntu Mono") %}
+      {% set font = text + ':400,700|' + code | replace(' ', '+') %}
       <link rel="stylesheet" type="text/css"
         href="//fonts.googleapis.com/css?family={{ font }}" />
       <style>
@@ -114,19 +114,30 @@
       <link rel="stylesheet" type="text/css" href="{{ path }}" />
     {% endfor %}
 
+    <!-- Modernizr -->
+    <script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
+
     <!-- Custom header -->
     {% block extrahead %}{% endblock %}
   </head>
-  <body>
+
+  <!-- Define palette -->
+  {% set palette = config.extra.get("palette", {}) %}
+  {% set primary = palette.primary | replace(' ', '-') | lower %}
+  {% set accent  = palette.accent  | replace(' ', '-') | lower %}
+  <body class="
+    {% if primary %}palette-primary-{{ primary }}{% endif %}
+    {% if accent %}palette-accent-{{ accent }}{% endif %}
+  ">
 
     <!--
       Sadly the jinja template engine is not very flexible - it doesn't support
       regular expressions out-of-the-box. Since there might be a slash at the
       end of the repository name, we just do a string comparison and kill it.
     -->
-    {% if repo_name == 'GitHub' %}
-      {% set repo_id = repo_url | replace('https://github.com/', '') %}
-      {% if repo_id[-1:] == '/' %}
+    {% if repo_name == "GitHub" and repo_url %}
+      {% set repo_id = repo_url | replace("https://github.com/", "") %}
+      {% if repo_id[-1:] == "/" %}
         {% set repo_id = repo_id[:-1] %}
       {% endif %}
     {% endif %}
@@ -170,11 +181,7 @@
 
           <!-- Headline -->
           {% if not h1 %}
-            {% if page_title %}
-              <h1>{{ page_title }}</h1>
-            {% else %}
-              <h1>{{ site_name }}</h1>
-            {% endif %}
+            <h1>{{ page_title | default(site_name, true)}}</h1>
           {% endif %}
 
           <!-- Article content -->
@@ -201,8 +208,8 @@
               {% include "footer.html" %}
             </footer>
           {% endblock %}
-        </article>
-      </div>
+        </div>
+      </article>
 
       <!-- Search results -->
       <div class="results" role="status" aria-live="polite">
@@ -215,9 +222,6 @@
       </div>
     </main>
 
-    <!-- Modernizr -->
-    <script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
-
     <!-- Theme-related and custom javascripts -->
     <script>
       var base_url = '{{ base_url }}';
@@ -247,13 +251,22 @@
         /* Track outbound links */
         var buttons = document.querySelectorAll('a');
         Array.prototype.map.call(buttons, function(item) {
-          if (item.host != window.location.host) {
+          if (item.host != document.location.host) {
             item.addEventListener('click', function() {
               var action = item.getAttribute('data-action') || 'follow';
               ga('send', 'event', 'outbound', action, item.href);
             });
           }
         });
+
+        /* Register handler to log search on blur */
+        var query = document.querySelector('.query');
+        query.addEventListener('blur', function() {
+          if (this.value) {
+            var path = document.location.pathname;
+            ga('send', 'pageview', path + '?q=' + this.value);
+          }
+        });
       </script>
     {% endif %}
   </body>

src/drawer.html

@@ -1,8 +1,9 @@
 <!-- Navigation -->
 <nav aria-label="Navigation">
+  {% set home = repo_url | default("/", true) %}
 
   <!-- Project information -->
-  <a href="{{ repo_url }}" class="project">
+  <a href="{{ home }}" class="project">
 
     <!-- Name and logo -->
     <div class="banner">
@@ -16,7 +17,12 @@
 
       <!-- Project name and verison -->
       <div class="name">
-        <strong>{{ site_name }} {{ config.extra.version }}</strong>
+        <strong>
+          {{ site_name }}
+          <span class="version">
+            {{ config.extra.version }}
+          </span>
+        </strong>
 
         <!-- Project repository name -->
         {% if repo_id %}
@@ -32,21 +38,19 @@
     <div class="wrapper">
 
       <!-- Repository -->
-      {% if repo_name == 'GitHub' %}
+      {% if repo_name == "GitHub" and repo_url %}
         <ul class="repo">
           <li class="repo-download">
-            {% set version = config.extra.version | default('master') %}
+            {% set version = config.extra.version | default("master") %}
             <a href="{{ repo_url }}/archive/{{ version }}.zip" target="_blank"
-              title="Download {{ site_name }} from GitHub"
-              data-action="download">
+              title="Download" data-action="download">
               <i class="icon icon-download"></i> Download
             </a>
           </li>
           <li class="repo-stars">
-            <a href="{{ repo_url }}" target="_blank"
-              title="Star {{ site_name }} on GitHub"
-              data-action="star">
-              <i class="icon icon-star"></i> Star
+            <a href="{{ repo_url }}/stargazers" target="_blank"
+              title="Stargazers" data-action="star">
+              <i class="icon icon-star"></i> Stars
               <span class="count">&ndash;</span>
             </a>
           </li>

src/footer.html

@@ -6,7 +6,9 @@
     <div class="previous">
       {% if previous_page %}
         <a href="{{ previous_page.url }}" title="{{ previous_page.title }}">
-          <span class="direction">Previous</span>
+          <span class="direction">
+            {{ config.extra.get("i18n", {}).prev | default("Previous") }}
+          </span>
           <div class="page">
             <div class="button button-previous"
               role="button" aria-label="Previous">
@@ -26,7 +28,9 @@
     <div class="next">
       {% if next_page %}
         <a href="{{ next_page.url }}" title="{{ next_page.title }}">
-          <span class="direction">Next</span>
+          <span class="direction">
+            {{ config.extra.get("i18n", {}).next | default("Next") }}
+          </span>
           <div class="page">
             <div class="stretch">
               <div class="title">

src/header.html

@@ -26,28 +26,26 @@
             {% endfor %}
           </span>
         {% endif %}
-        {% if page_title %}
-          {{ page_title }}
-        {% else %}
-          {{ site_name }}
-        {% endif %}
+        {{ page_title | default(site_name, true) }}
       </div>
     </div>
 
     <!-- Twitter -->
-    {% if config.extra.author and config.extra.author.twitter %}
+    {% if config.extra.get("author", {}).twitter %}
+      {% set author = config.extra.author.twitter %}
       <div class="button button-twitter" role="button" aria-label="Twitter">
-        <a href="https://twitter.com/{{ config.extra.author.twitter }}"
-          title="@{{ config.extra.author.twitter }} on Twitter" target="_blank"
+        <a href="https://twitter.com/{{ author }}"
+          title="@{{ author }} on Twitter" target="_blank"
           class="toggle-button icon icon-twitter"></a>
       </div>
     {% endif %}
 
     <!-- GitHub -->
-    {% if config.extra.author and config.extra.author.github %}
+    {% if config.extra.get("author", {}).github %}
+      {% set author = config.extra.author.github %}
       <div class="button button-github" role="button" aria-label="GitHub">
-        <a href="https://github.com/{{ config.extra.author.github }}"
-          title="@{{ config.extra.author.github }} on GitHub" target="_blank"
+        <a href="https://github.com/{{ author }}"
+          title="@{{ author }} on GitHub" target="_blank"
           class="toggle-button icon icon-github"></a>
       </div>
     {% endif %}

src/nav.html

@@ -6,7 +6,7 @@
 
       <!-- Render pages of section -->
       {% for nav_item in nav_item.children %}
-        {% include 'nav.html' %}
+        {% include "nav.html" %}
       {% endfor %}
     </ul>
   </li>
@@ -21,38 +21,31 @@
 
     <!-- Expand active pages -->
     {% if nav_item == current_page %}
-      <ul>
 
-        <!-- Render anchors of active page -->
-        {% for toc_item in 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 %}
 
-          <!--
-            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 %}
-            {% for toc_item in toc_item.children %}
+      <!-- Render anchors of active page -->
+      {% if toc and (toc | first) %}
+        <ul>
+          {% for toc_item in toc %}
 
-              <!-- Render anchor -->
-              <li class="anchor">
-                <a title="{{ toc_item.title }}" href="{{ toc_item.url }}">
-                  {{ toc_item.title }}
-                </a>
-              </li>
-            {% endfor %}
-          {% else %}
-
-          <!-- Render anchor -->
-          <li class="anchor">
-            <a title="{{ toc_item.title }}" href="{{ toc_item.url }}">
-              {{ toc_item.title }}
-            </a>
-          </li>
-          {% endif %}
-        {% endfor %}
-      </ul>
+            <!-- Render anchor -->
+            <li class="anchor">
+              <a title="{{ toc_item.title }}" href="{{ toc_item.url }}">
+                {{ toc_item.title }}
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
     {% endif %}
   </li>
 {% endif %}