Update / Fix mkdocs-material tweaks.

Close issue #18

theme/partials/header.html

@@ -1,41 +1,92 @@
+<!--
+  Copyright (c) 2016-2019 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.
+-->
+
+<!-- Application header -->
 <header class="md-header" data-md-component="header">
+
+  <!-- Top-level navigation -->
   <nav class="md-header-nav md-grid">
     <div class="md-flex">
+
+      <!-- Link to home -->
       <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ config.site_url | default(nav.homepage.url, true) }}" title="{{ config.site_name }}" class="md-header-nav__button md-logo">
+        <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
+            title="{{ config.site_name }}"
+            class="md-header-nav__button md-logo">
           {% if config.theme.logo.icon %}
-          <i class="md-icon">{{ config.theme.logo.icon }}</i>
+            <i class="md-icon">{{ config.theme.logo.icon }}</i>
           {% else %}
-          <img src="{{ base_url }}/{{ config.theme.logo }}" width="24" height="24">
+            <img src="{{ config.theme.logo | url }}" width="24" height="24" />
           {% endif %}
         </a>
       </div>
+
+      <!-- Button to toggle drawer -->
       <div class="md-flex__cell md-flex__cell--shrink">
-        <label class="md-icon md-icon--menu md-header-nav__button" for="drawer"></label>
+        <label class="md-icon md-icon--menu md-header-nav__button"
+            for="__drawer"></label>
       </div>
+
+      <!-- Header title -->
       <div class="md-flex__cell md-flex__cell--stretch">
-        <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
+        <div class="md-flex__ellipsis md-header-nav__title"
-          {% block site_name %}
+            data-md-component="title">
           {% if config.site_name == page.title %}
-          {{ config.site_name }}
-          {% else %}
-          <span class="md-header-nav__topic">
             {{ config.site_name }}
-          </span>
+          {% else %}
-          <span class="md-header-nav__topic">
+            <span class="md-header-nav__topic">
-            {{ page.title }}
+              {{ config.site_name }}
-          </span>
+            </span>
+            <span class="md-header-nav__topic">
+              {% if page and page.meta and page.meta.title %}
+                {{ page.meta.title }}
+              {% else %}
+                {{ page.title }}
+              {% endif %}
+            </span>
           {% endif %}
-          {% endblock %}
         </div>
       </div>
-      {% if config.repo_url %}
+
+      <!-- Button to open search dialogue -->
       <div class="md-flex__cell md-flex__cell--shrink">
-        <div class="md-header-nav__source">
+        {% if "search" in config["plugins"] %}
-          {% include "partials/source.html" %}
+          <label class="md-icon md-icon--search md-header-nav__button"
-        </div>
+              for="__search"></label>
+
+          <!-- Search interface -->
+          {% include "partials/search.html" %}
+        {% endif %}
       </div>
+
+      <!-- Repository containing source -->
+      {% if config.repo_url %}
+        <div class="md-flex__cell md-flex__cell--shrink">
+          <div class="md-header-nav__source">
+            {% include "partials/source.html" %}
+          </div>
+        </div>
       {% endif %}
+
       <div class="md-flex__cell md-flex__cell--shrink">
         <div class="md-header-nav__source">
           <a href="/download" title="Go to Download" class="md-source">
@@ -51,14 +102,7 @@
           </a>
         </div>
       </div>
-      <div class="md-flex__cell md-flex__cell--shrink">
+
-        {% block search_box %}
-        {% if "search" in config["plugins"] %}
-        <label class="md-icon md-icon--search md-header-nav__button" for="search"></label>
-        {% include "partials/search.html" %}
-        {% endif %}
-        {% endblock %}
-      </div>
     </div>
   </nav>
 </header>

theme/partials/nav.html

@@ -1,19 +1,48 @@
+<!--
+  Copyright (c) 2016-2019 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.
+-->
+
+<!-- Main navigation -->
 <nav class="md-nav md-nav--primary" data-md-level="0">
-  <label class="md-nav__title md-nav__title--site" for="drawer">
+
-    <span class="md-nav__button md-logo">
+  <!-- Site title -->
+  <label class="md-nav__title md-nav__title--site" for="__drawer">
+    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
+        title="{{ config.site_name }}" class="md-nav__button md-logo">
       {% if config.theme.logo.icon %}
-      <i class="md-icon">{{ config.theme.logo.icon }}</i>
+        <i class="md-icon">{{ config.theme.logo.icon }}</i>
       {% else %}
-      <img src="{{ base_url }}/{{ config.theme.logo }}" width="24" height="24">
+        <img src="{{ config.theme.logo | url }}" width="48" height="48" />
       {% endif %}
-    </span>
+    </a>
     {{ config.site_name }}
   </label>
+
+  <!-- Repository containing source -->
   {% if config.repo_url %}
-  <div class="md-nav__source">
+    <div class="md-nav__source">
-    {% include "partials/source.html" %}
+      {% include "partials/source.html" %}
-  </div>
+    </div>
   {% endif %}
+
   <div class="md-nav__source">
     <a href="/download" title="Go to Download" class="md-source">
       <div class="md-source__icon">
@@ -27,11 +56,13 @@
       </div>
     </a>
   </div>
+
+  <!-- Render item list -->
   <ul class="md-nav__list" data-md-scrollfix>
     {% for nav_item in nav %}
-    {% set path = "nav-" + loop.index | string %}
+      {% set path = "nav-" + loop.index | string %}
-    {% set level = 1 %}
+      {% set level = 1 %}
-    {% include "partials/nav-item.html" %}
+      {% include "partials/nav-item.html" %}
     {% endfor %}
   </ul>
 </nav>