Refactored Material icon integration - bye bye webfonts

docs/extensions/metadata.md

@@ -51,8 +51,8 @@ hero: Metadata enables hero teaser texts
 
 ### Linking sources
 
-When a document is related to a specific set of source files and the `repo_url`
+When a document is related to a specific source file and the `repo_url` is
-is defined inside the project's `mkdocs.yml`, the files can be linked using the
+defined inside the project's `mkdocs.yml`, the file can be linked using the
 `source` key:
 
 ``` markdown
@@ -69,12 +69,6 @@ path: tree/master/docs/extensions
 source: metadata.md
 ```
 
-Result:
-
-See the [source][2] section for the resulting output.
-
-  [2]: #__source
-
 ### Redirecting to another page
 
 It's sometimes necessary to move documents around in the navigation tree and

material/assets/manifest.json

@@ -1,8 +1,8 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.84919d3b.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.262abba4.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.84919d3b.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.262abba4.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
-  "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.3f90c815.min.css",
+  "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.865ff948.min.css",
-  "assets/stylesheets/app.scss": "assets/stylesheets/app.b565871e.min.css"
+  "assets/stylesheets/app.scss": "assets/stylesheets/app.bdffa146.min.css"
 }

material/base.html

@@ -43,9 +43,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.b565871e.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.bdffa146.min.css' | url }}">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.3f90c815.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.865ff948.min.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}
@@ -141,26 +141,31 @@
             <article class="md-content__inner md-typeset">
               {% block content %}
                 {% if page.edit_url %}
-                  <a href="{{ page.edit_url }}" title="{{ lang.t('edit.link.title') }}" class="md-icon md-content__icon">&#xE3C9;</a>
+                  <a href="{{ page.edit_url }}" title="{{ lang.t('edit.link.title') }}" class="md-content__button md-icon">
+                    {% include ".icons/material/pencil.svg" %}
+                  </a>
                 {% endif %}
-                {% if not "\x3ch1" in page.content %}
-                  <h1>{{ page.title | default(config.site_name, true)}}</h1>
-                {% endif %}
-                {{ page.content }}
                 {% block source %}
                   {% if page and page.meta and page.meta.source %}
-                    <h2 id="__source">{{ lang.t("meta.source") }}</h2>
                     {% set repo = config.repo_url %}
                     {% if repo | last == "/" %}
                       {% set repo = repo[:-1] %}
                     {% endif %}
                     {% set path = page.meta.path | default([""]) %}
                     {% set file = page.meta.source %}
-                    <a href="{{ [repo, path, file] | join('/') }}" title="{{ file }}" class="md-source-file">
+                    {% set repo_icon = config.extra.repo_icon | default(
-                      {{ file }}
+                      "fontawesome/brands/git-alt"
+                    ) %}
+                    <a href="{{ [repo, path, page.meta.source] | join('/') }}" title="{{ file }}" class="md-content__button md-icon">
+                      {{ lang.t("meta.source") }}
+                      {% include ".icons/" ~ repo_icon ~ ".svg" %}
                     </a>
                   {% endif %}
                 {% endblock %}
+                {% if not "\x3ch1" in page.content %}
+                  <h1>{{ page.title | default(config.site_name, true)}}</h1>
+                {% endif %}
+                {{ page.content }}
                 {% if page and page.meta and (
                       page.meta.git_revision_date_localized or
                       page.meta.revision_date
@@ -190,7 +195,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.84919d3b.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.262abba4.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

material/partials/footer.html

@@ -7,37 +7,33 @@
     <div class="md-footer-nav">
       <nav class="md-footer-nav__inner md-grid">
         {% if page.previous_page %}
-          <a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
+          <a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
-            <div class="md-flex__cell md-flex__cell--shrink">
+            <div class="md-icon md-icon__button">
-              <div class="md-footer-nav__button">
               {% include ".icons/material/arrow-left.svg" %}
             </div>
-            </div>
+            <div class="md-footer-nav__title">
-            <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
+              <div class="md-ellipsis">
-              <span class="md-flex__ellipsis">
                 <span class="md-footer-nav__direction">
                   {{ lang.t("footer.previous") }}
                 </span>
                 {{ page.previous_page.title }}
-              </span>
+              </div>
             </div>
           </a>
         {% endif %}
         {% if page.next_page %}
-          <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
+          <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
-            <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
+            <div class="md-footer-nav__title">
-              <span class="md-flex__ellipsis">
+              <div class="md-ellipsis">
                 <span class="md-footer-nav__direction">
                   {{ lang.t("footer.next") }}
                 </span>
                 {{ page.next_page.title }}
-              </span>
               </div>
-            <div class="md-flex__cell md-flex__cell--shrink">
+            </div>
-              <div class="md-footer-nav__button">
+            <div class="md-icon md-icon__button">
               {% include ".icons/material/arrow-right.svg" %}
             </div>
-            </div>
           </a>
         {% endif %}
       </nav>

material/partials/header.html

@@ -3,8 +3,6 @@
 -#}
 <header class="md-header" data-md-component="header">
   <nav class="md-header-nav md-grid">
-    <div class="md-flex">
-      <div class="md-flex__cell md-flex__cell--shrink">
     <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
       {% if config.theme.logo.icon %}
         {% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
@@ -12,12 +10,11 @@
         <img src="{{ config.theme.logo | url }}" width="24" height="24" alt="logo">
       {% endif %}
     </a>
-        <label class="md-header-nav__button" for="__drawer">
+    <label class="md-header-nav__button md-icon md-icon__button" for="__drawer">
       {% include ".icons/material/menu.svg" %}
     </label>
-      </div>
+    <div class="md-header-nav__title" data-md-component="header-title">
-      <div class="md-flex__cell md-flex__cell--stretch">
+      <div class="md-header-nav__ellipsis md-ellipsis">
-        <div class="md-flex__ellipsis md-header-nav__title" data-md-component="header-title">
         {% if config.site_name == page.title %}
           {{ config.site_name }}
         {% else %}
@@ -34,21 +31,16 @@
         {% endif %}
       </div>
     </div>
-      <div class="md-flex__cell md-flex__cell--shrink">
     {% if "search" in config["plugins"] %}
-          <label class="md-header-nav__button" for="__search">
+      <label class="md-header-nav__button md-icon md-icon__button" for="__search">
         {% include ".icons/material/magnify.svg" %}
       </label>
       {% include "partials/search.html" %}
     {% endif %}
-      </div>
     {% 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>
   </nav>
 </header>

material/partials/nav-item.html

@@ -8,15 +8,21 @@
 {% if nav_item.children %}
   <li class="{{ class }} md-nav__item--nested">
     {% if nav_item.active %}
-      <input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" checked>
+      <input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" checked>
     {% else %}
-      <input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}">
+      <input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}">
     {% endif %}
     <label class="md-nav__link" for="{{ path }}">
       {{ nav_item.title }}
+      <span class="md-nav__icon md-icon">
+        {% include ".icons/material/chevron-right.svg" %}
+      </span>
     </label>
     <nav class="md-nav" data-md-level="{{ level }}">
       <label class="md-nav__title" for="{{ path }}">
+        <span class="md-nav__icon md-icon">
+          {% include ".icons/material/arrow-left.svg" %}
+        </span>
         {{ nav_item.title }}
       </label>
       <ul class="md-nav__list" data-md-scrollfix>
@@ -32,13 +38,16 @@
 {% elif nav_item == page %}
   <li class="{{ class }}">
     {% set toc_ = page.toc %}
-    <input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc">
+    <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
     {% if toc_ | first is defined and "\x3ch1 id=" in page.content %}
       {% set toc_ = (toc_ | first).children %}
     {% endif %}
     {% if toc_ | first is defined %}
       <label class="md-nav__link md-nav__link--active" for="__toc">
         {{ nav_item.title }}
+        <span class="md-nav__icon md-icon">
+          {% include ".icons/material/table-of-contents.svg" %}
+        </span>
       </label>
     {% endif %}
     <a href="{{ nav_item.url | url }}" title="{{ nav_item.title | striptags }}" class="md-nav__link md-nav__link--active">

material/partials/nav.html

@@ -2,10 +2,10 @@
   This file was automatically generated - do not edit
 -#}
 <nav class="md-nav md-nav--primary" data-md-level="0">
-  <label class="md-nav__title md-nav__title--site" for="__drawer">
+  <label class="md-nav__title" for="__drawer">
-    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-nav__button md-logo">
+    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-nav__button md-logo">
       {% if config.theme.logo.icon %}
-        <i class="md-icon">{{ config.theme.logo.icon }}</i>
+        {% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
       {% else %}
         <img src="{{ config.theme.logo | url }}" width="48" height="48" alt="logo">
       {% endif %}

material/partials/search.html

@@ -7,10 +7,11 @@
   <div class="md-search__inner" role="search">
     <form class="md-search__form" name="search">
       <input type="text" class="md-search__input" name="query" aria-label="search" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
-      <label class="md-search__icon" for="__search">
+      <label class="md-search__icon md-icon" for="__search">
         {% include ".icons/material/magnify.svg" %}
+        {% include ".icons/material/arrow-left.svg" %}
       </label>
-      <button type="reset" class="md-search__icon" data-md-component="search-reset" tabindex="-1">
+      <button type="reset" class="md-search__icon md-icon" data-md-component="search-reset" tabindex="-1">
         {% include ".icons/material/close.svg" %}
       </button>
     </form>

material/partials/source.html

@@ -3,7 +3,7 @@
 -#}
 {% import "partials/language.html" as lang with context %}
 <a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source">
-  <div class="md-source__icon">
+  <div class="md-source__icon md-icon">
     {% set repo_icon = config.extra.repo_icon | default(
       "fontawesome/brands/git-alt"
     ) %}

material/partials/toc.html

@@ -8,29 +8,16 @@
     {% set toc_ = (toc_ | first).children %}
   {% endif %}
   {% if toc_ | first is defined %}
-    <label class="md-nav__title" for="__toc">{{ lang.t("toc.title") }}</label>
+    <label class="md-nav__title" for="__toc">
+      <span class="md-nav__icon md-icon">
+        {% include ".icons/material/arrow-left.svg" %}
+      </span>
+      {{ lang.t("toc.title") }}
+    </label>
     <ul class="md-nav__list" data-md-scrollfix>
       {% for toc_item in toc_ %}
         {% include "partials/toc-item.html" %}
       {% endfor %}
-      {% if page.meta.source and page.meta.source | length > 0 %}
-        <li class="md-nav__item">
-          <a href="#__source" class="md-nav__link md-nav__link--active">
-            {{ lang.t("meta.source") }}
-          </a>
-        </li>
-      {% endif %}
-      {% set disqus = config.extra.disqus %}
-      {% if page and page.meta and page.meta.disqus is string %}
-        {% set disqus = page.meta.disqus %}
-      {% endif %}
-      {% if not page.is_homepage and disqus %}
-        <li class="md-nav__item">
-          <a href="#__comments" class="md-nav__link md-nav__link--active">
-            {{ lang.t("meta.comments") }}
-          </a>
-        </li>
-      {% endif %}
     </ul>
   {% endif %}
 </nav>

package-lock.json

@@ -999,12 +999,6 @@
       "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==",
       "dev": true
     },
-    "boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
-      "dev": true
-    },
     "boxen": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
@@ -2010,24 +2004,6 @@
         }
       }
     },
-    "css-select": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
-      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
-      "dev": true,
-      "requires": {
-        "boolbase": "^1.0.0",
-        "css-what": "^3.2.1",
-        "domutils": "^1.7.0",
-        "nth-check": "^1.0.2"
-      }
-    },
-    "css-what": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
-      "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
-      "dev": true
-    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5139,15 +5115,6 @@
         "path-key": "^2.0.0"
       }
     },
-    "nth-check": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-      "dev": true,
-      "requires": {
-        "boolbase": "~1.0.0"
-      }
-    },
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
@@ -5605,51 +5572,6 @@
         "htmlparser2": "^3.10.0"
       }
     },
-    "postcss-inline-svg": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-inline-svg/-/postcss-inline-svg-4.1.0.tgz",
-      "integrity": "sha512-0pYBJyoQ9/sJViYRc1cNOOTM7DYh0/rmASB0TBeRmWkG8YFK2tmgdkfjHkbRma1iFtBFKFHZFsHwRTDZTMKzSQ==",
-      "dev": true,
-      "requires": {
-        "css-select": "^2.0.2",
-        "dom-serializer": "^0.1.1",
-        "htmlparser2": "^3.10.1",
-        "postcss": "^7.0.17",
-        "postcss-value-parser": "^4.0.0"
-      },
-      "dependencies": {
-        "dom-serializer": {
-          "version": "0.1.1",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
-          "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
-          "dev": true,
-          "requires": {
-            "domelementtype": "^1.3.0",
-            "entities": "^1.1.1"
-          }
-        },
-        "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
     "postcss-jsx": {
       "version": "0.36.3",
       "resolved": "https://registry.npmjs.org/postcss-jsx/-/postcss-jsx-0.36.3.tgz",

src/assets/javascripts/templates/clipboard/index.tsx

@@ -46,12 +46,17 @@ const css = {
  */
 export function renderClipboard(
   id: string
-): HTMLElement {
+) {
+  const path = require("material-design-icons-svg/paths/content-copy.json")
   return (
     <button
       class={css.container}
       title={translate("clipboard.copy")}
       data-clipboard-target={`#${id} code`}
-    >&#xE14D;</button>
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d={path}></path>
+      </svg>
+    </button>
   )
 }

src/assets/javascripts/templates/search/index.tsx

@@ -52,12 +52,24 @@ const css = {
  */
 export function renderSearchResult(
   { article, sections }: SearchResult
-): HTMLElement {
+) {
+
+  // create page with icon
+  const path = require("material-design-icons-svg/paths/file-search-outline.json")
+
   const children = [article, ...sections].map(document => {
     const { location, title, text } = document
     return (
       <a href={location} class={css.link} tabIndex={-1}>
         <article class={"parent" in document ? css.section : css.article}>
+          {!("parent" in document)
+            ? <div class="md-search-result__icon md-icon__button md-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <path d={path}></path>
+                </svg>
+              </div>
+            : null
+          }
           <h1 class={css.title}>{title}</h1>
           {text.length
             ? <p class={css.teaser}>{truncate(text, 320)}</p>

src/assets/javascripts/templates/source/index.tsx

@@ -48,7 +48,7 @@ const css = {
  */
 export function renderSource(
   facts: SourceFacts
-): HTMLElement {
+) {
   const children = facts.map(fact => (
     <li class={css.fact}>{fact}</li>
   ))

src/assets/javascripts/templates/table/index.tsx

@@ -47,7 +47,7 @@ const css = {
  */
 export function renderTable(
   table: HTMLTableElement
-): HTMLElement {
+) {
   return (
     <div class={css.wrapper}>
       <div class={css.table}>

src/assets/javascripts/utilities/jsx/index.ts

@@ -20,6 +20,8 @@
  * IN THE SOFTWARE.
  */
 
+// tslint:disable no-null-keyword
+
 import { JSX as JSXInternal } from "preact"
 import { keys } from "ramda"
 
@@ -28,7 +30,7 @@ import { keys } from "ramda"
  * ------------------------------------------------------------------------- */
 
 /**
- * HTML attributes
+ * HTML and SVG attributes
  */
 type Attributes =
   & JSXInternal.HTMLAttributes
@@ -40,6 +42,7 @@ type Attributes =
  */
 type Child =
   | HTMLElement
+  | SVGElement
   | Text
   | string
   | number
@@ -48,13 +51,69 @@ type Child =
  * Helper functions
  * ------------------------------------------------------------------------- */
 
+/**
+ * Create an element
+ *
+ * @param tag - HTML or SVG tag
+ *
+ * @return Element
+ */
+function createElement(tag: string): HTMLElement | SVGElement {
+  switch (tag) {
+
+    /* SVG elements */
+    case "svg":
+    case "path":
+      return document.createElementNS("http://www.w3.org/2000/svg", tag)
+
+    /* HTML elements */
+    default:
+      return document.createElement(tag)
+  }
+}
+
+/**
+ * Set an attribute
+ *
+ * @param el - Element
+ * @param name - Attribute name
+ * @param value - Attribute value
+ */
+function setAttribute(
+  el: HTMLElement | SVGElement, name: string, value: string) {
+  switch (name) {
+
+    /* Attributes to be ignored */
+    case "xmlns":
+      break
+
+    /* Attributes of SVG elements */
+    case "viewBox":
+    case "d":
+      if (typeof value !== "boolean")
+        el.setAttributeNS(null, name, value)
+      else if (value)
+        el.setAttributeNS(null, name, "")
+      break
+
+    /* Attributes of HTML elements */
+    default:
+      if (typeof value !== "boolean")
+        el.setAttribute(name, value)
+      else if (value)
+        el.setAttribute(name, "")
+  }
+}
+
 /**
  * Append a child node to an element
  *
  * @param el - Element
  * @param child - Child node(s)
  */
-function appendChild(el: HTMLElement, child: Child | Child[]): void {
+function appendChild(
+  el: HTMLElement | SVGElement, child: Child | Child[]
+): void {
 
   /* Handle primitive types (including raw HTML) */
   if (typeof child === "string" || typeof child === "number") {
@@ -78,7 +137,7 @@ function appendChild(el: HTMLElement, child: Child | Child[]): void {
 /**
  * JSX factory
  *
- * @param tag - HTML tag
+ * @param tag - HTML or SVG tag
  * @param attributes - HTML attributes
  * @param children - Child elements
  *
@@ -86,16 +145,13 @@ function appendChild(el: HTMLElement, child: Child | Child[]): void {
  */
 export function h(
   tag: string, attributes: Attributes | null, ...children: Child[]
-): HTMLElement {
+): HTMLElement | SVGElement {
-  const el = document.createElement(tag)
+  const el = createElement(tag)
 
   /* Set attributes, if any */
   if (attributes)
     for (const attr of keys(attributes))
-      if (typeof attributes[attr] !== "boolean")
+      setAttribute(el, attr, attributes[attr])
-        el.setAttribute(attr, attributes[attr])
-      else if (attributes[attr])
-        el.setAttribute(attr, "")
 
   /* Append child nodes */
   for (const child of children)
@@ -111,7 +167,7 @@ export function h(
 
 export declare namespace h {
   namespace JSX {
-    type Element = HTMLElement
+    type Element = HTMLElement | SVGElement
     type IntrinsicElements = JSXInternal.IntrinsicElements
   }
 }

src/assets/stylesheets/app-palette.scss

@@ -136,7 +136,7 @@ button[data-md-color-accent] {
     @include break-to-device(tablet) {
 
       // Site title in main navigation
-      html & .md-nav--primary .md-nav__title--site {
+      html & .md-nav--primary .md-nav__title[for="drawer"] {
         background-color: $color;
       }
     }
@@ -211,7 +211,7 @@ button[data-md-color-primary="white"] {
   @include break-to-device(tablet) {
 
     // Site title in main navigation
-    html & .md-nav--primary .md-nav__title--site {
+    html & .md-nav--primary .md-nav__title[for="drawer"] {
       background-color: $md-color-white;
       color: $md-color-black;
     }
@@ -278,7 +278,7 @@ button[data-md-color-primary="black"] {
   @include break-to-device(tablet) {
 
     // Site title in main navigation
-    html & .md-nav--primary .md-nav__title--site {
+    html & .md-nav--primary .md-nav__title[for="drawer"] {
       background-color: $clr-black;
     }
   }

src/assets/stylesheets/base/.stylelintrc

@@ -1,7 +0,0 @@
-{
-  "extends": "../../../../.stylelintrc",
-  "rules": {
-    "font-weight-notation": null,
-    "property-no-vendor-prefix": null
-  }
-}

src/assets/stylesheets/base/_icons.scss

@@ -20,78 +20,27 @@
 /// DEALINGS
 ////
 
-// stylelint-disable font-family-no-missing-generic-family-keyword
-
-// ----------------------------------------------------------------------------
-// Font faces
-// ----------------------------------------------------------------------------
-
-// Icon font
-@font-face {
-  font-family: "Material Icons";
-  font-style: normal;
-  font-weight: 400;
-  src: local("Material Icons"),
-       local("MaterialIcons-Regular"),
-       url("../fonts/MaterialIcons-Regular.woff2") format("woff2"),
-       url("../fonts/MaterialIcons-Regular.woff") format("woff"),
-       url("../fonts/MaterialIcons-Regular.ttf") format("truetype")
-}
-
 // ----------------------------------------------------------------------------
 // Rules
 // ----------------------------------------------------------------------------
 
-// Icon placeholders
+// Icon
-%md-icon {
+.md-icon {
-  font-family: "Material Icons";
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-  line-height: 1;
-  text-transform: none;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
 
-  // Icon rendered as button
+  // Icon with button spacing
   &__button {
     display: inline-block;
-    width: #{$md-icon-size + 2 * $md-icon-padding};
+    margin: px2rem(4px);
-    margin: $md-icon-margin;
+    padding: px2rem(8px);
-    padding: $md-icon-padding;
-    font-size: $md-icon-size;
     cursor: pointer;
   }
-}
 
-// Representational classes
+  // Inherit current color
-.md-icon {
+  svg {
-  @extend %md-icon;
+    display: block;
-
+    width: px2rem(24px);
-  // Build representational classes
+    height: px2rem(24px);
-  @each $ligature, $name in (
+    margin: 0 auto;
-    "\E5C4": "arrow-back", // arrow_back
+    fill: currentColor;
-    "\E5C8": "arrow-forward", // arrow_forward
-    "\E5D2": "menu", // menu
-    "\E8B6": "search" // search
-  ) {
-    &--#{$name}::before {
-      content: $ligature;
-    }
-  }
-
-  // Adjust for RTL languages
-  [dir="rtl"] & {
-
-    // Flip ligatures for arrows
-    @each $ligature, $name in (
-      "\E5C8": "arrow-back", // arrow_forward
-      "\E5C4": "arrow-forward" // arrow_back
-    ) {
-      &--#{$name}::before {
-        content: $ligature;
-      }
-    }
   }
 }

src/assets/stylesheets/base/_reset.scss

@@ -56,7 +56,7 @@ hr {
 
 // Remove gaps in underlined links in iOS >= 8 and Safari >= 8
 a {
-  -webkit-text-decoration-skip: objects;
+  -webkit-text-decoration-skip: objects; // stylelint-disable-line
 }
 
 // Reset tap outlines on iOS and Android
@@ -111,7 +111,7 @@ table {
 // Reset table cell styles
 td,
 th {
-  font-weight: normal;
+  font-weight: normal; // stylelint-disable-line
   vertical-align: top;
 }
 

src/assets/stylesheets/base/_typeset.scss

@@ -60,7 +60,7 @@ kbd {
   line-height: 1.6;
 
   // Colors should be kept when printing
-  -webkit-print-color-adjust: exact;
+  -webkit-print-color-adjust: exact; // stylelint-disable-line
 
   // Default spacing
   p,
@@ -143,9 +143,9 @@ kbd {
       transition: color 125ms;
     }
 
-    // Hovered and active links
+    // Focused or hover links
-    &:hover,
+    &:focus,
-    &:active {
+    &:hover {
       color: $md-color-accent;
     }
 
@@ -242,7 +242,7 @@ kbd {
         height: px2rem(4px);
       }
 
-      // Style scrollbar thumb
+      // Scrollbar thumb
       &::-webkit-scrollbar-thumb {
         background-color: $md-color-black--lighter;
 
@@ -314,7 +314,7 @@ kbd {
   sub {
     margin-left: 0.0625em * 1 / 0.8;
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
       margin-right: 0.0625em * 1 / 0.8;
       margin-left: initial;
@@ -327,7 +327,7 @@ kbd {
     border-left: px2rem(4px) solid $md-color-black--lighter;
     color: $md-color-black--light;
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
       padding-right: px2rem(12px);
       padding-left: initial;
@@ -347,7 +347,7 @@ kbd {
     margin-left: 0.625em;
     padding: 0;
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
       margin-right: 0.625em;
       margin-left: initial;
@@ -368,7 +368,7 @@ kbd {
       margin-bottom: 0.5em;
       margin-left: 1.25em;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         margin-right: 1.25em;
         margin-left: initial;
@@ -390,7 +390,7 @@ kbd {
       ol {
         margin: 0.5em 0 0.5em 0.625em;
 
-        // Adjust for RTL languages
+        // Adjust for right-to-left languages
         [dir="rtl"] & {
           margin-right: 0.625em;
           margin-left: initial;
@@ -403,7 +403,7 @@ kbd {
   dd {
     margin: 1em 0 1em 1.875em;
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
       margin-right: 1.875em;
       margin-left: initial;
@@ -439,7 +439,7 @@ kbd {
     td:not([align]) {
       text-align: left;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         text-align: right;
       }

src/assets/stylesheets/extensions/_admonition.scss

@@ -31,16 +31,21 @@
   .admonition {
     margin: 1.5625em 0;
     padding: 0 px2rem(12px);
-    border-left: px2rem(4px) solid $clr-blue-a200;
+    border-left: px2rem(3px) solid $clr-blue-a200;
     border-radius: px2rem(2px);
     font-size: ms(-1);
-    box-shadow: inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85);
+    box-shadow:
+      inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85),
+      inset 1px 0 $clr-blue-a200;
     overflow: auto;
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
-      border-right: px2rem(4px) solid $clr-blue-a200;
+      border-right: px2rem(3px) solid $clr-blue-a200;
       border-left: none;
+      box-shadow:
+        inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85),
+        inset -1px 0 $clr-blue-a200;
     }
 
     // Adjust spacing on last element
@@ -60,7 +65,7 @@
       background-color: transparentize($clr-blue-a200, 0.9);
       font-weight: 700;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
       }
@@ -72,8 +77,6 @@
 
       // Icon
       &::before {
-        @extend %md-icon;
-
         position: absolute;
         width: px2rem(20px);
         height: px2rem(20px);
@@ -82,7 +85,7 @@
         mask-image: url("{{ pencil }}");
         content: "";
 
-        // Adjust for RTL languages
+        // Adjust for right-to-left languages
         [dir="rtl"] & {
           margin-right: px2rem(-28px);
           margin-left: initial;
@@ -111,11 +114,16 @@
       &%#{nth($names, 1)},
       &.#{nth($names, 1)} {
         border-left-color: $tint;
-        box-shadow: inset 0 0 0 px2rem(1px) transparentize($tint, 0.85);
+        box-shadow:
+          inset 0 0 0 px2rem(1px) transparentize($tint, 0.85),
+          inset 1px 0 $tint;
 
-        // Adjust for RTL languages
+        // Adjust for right-to-left languages
         [dir="rtl"] & {
           border-right-color: $tint;
+          box-shadow:
+            inset 0 0 0 px2rem(1px) transparentize($tint, 0.85),
+            inset -1px 0 $tint;
         }
 
         // Title

src/assets/stylesheets/extensions/_codehilite.scss

@@ -268,6 +268,7 @@ $codehilite-whitespace: transparent;
     }
   }
 
+  // TODO: refactor
   [data-linenos] {
     &::before {
       display: inline-block;

src/assets/stylesheets/extensions/_footnotes.scss

@@ -115,8 +115,6 @@
 
   // Footnote back reference
   .footnote-backref {
-    @extend %md-icon;
-
     display: inline-block;
     transform: translateX(px2rem(5px));
     transition:
@@ -129,7 +127,7 @@
     opacity: 0;
     vertical-align: text-bottom;
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
       transform: translateX(px2rem(-5px));
     }
@@ -137,10 +135,13 @@
     // Back reference icon
     &::before {
       display: inline-block;
-      font-size: px2rem(16px);
+      width: px2rem(16px);
-      content: "\E31B"; // keyboard_return
+      height: px2rem(16px);
+      background-color: currentColor;
+      mask-image: url("{{ anchor }}");
+      content: "";
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         transform: scaleX(-1)
       }

src/assets/stylesheets/extensions/_permalinks.scss

@@ -35,12 +35,12 @@
     transition:
       transform  250ms 250ms,
       color      250ms,
-      opacity    125ms 250ms,
+      opacity    125ms 250ms;
-      visibility   0ms 500ms;
+      // visibility   0ms 500ms;
     opacity: 0;
     // Hack: If we don't set visibility hidden, the text content of the node
     // will include the headerlink character, which is why Google indexes them.
-    visibility: hidden;
+    // visibility: hidden;
 
     // Adjust for RTL languages
     [dir="rtl"] & {
@@ -92,10 +92,10 @@
         transition:
           transform  250ms 250ms,
           color      250ms,
-          opacity    125ms 250ms,
+          opacity    125ms 250ms;
-          visibility   0ms;
+          // visibility   0ms;
         opacity: 1;
-        visibility: visible;
+        // visibility: visible;
       }
 
       // Active or targeted permalink

src/assets/stylesheets/extensions/pymdown/_critic.scss

@@ -39,7 +39,7 @@
 
   // Deletion
   del.critic {
-    background-color: $codehilite-diff-deleted;                                 // TODO: dependent on order of inclusion
+    background-color: $codehilite-diff-deleted;
     box-shadow:
       +0.25em 0 0 $codehilite-diff-deleted,
       -0.25em 0 0 $codehilite-diff-deleted;
@@ -47,7 +47,7 @@
 
   // Addition
   ins.critic {
-    background-color: $codehilite-diff-inserted;                                // TODO: dependent on order of inclusion
+    background-color: $codehilite-diff-inserted;
     box-shadow:
       +0.25em 0 0 $codehilite-diff-inserted,
       -0.25em 0 0 $codehilite-diff-inserted;
@@ -55,20 +55,16 @@
 
   // Comment
   .critic.comment {
-    background-color: $md-code-background;                                      // TODO: rename, centralize somehow
+    color: $codehilite-comment;
-    color: $md-code-color;
-    box-shadow:
-      +0.25em 0 0 $md-code-background,
-      -0.25em 0 0 $md-code-background;
 
-    // Icon
+    // Comment opening mark
     &::before {
-      @extend %md-icon;
+      content: "/* ";
+    }
 
-      padding-right: 0.125em;
+    // Comment closing mark
-      color: $md-color-black--lighter;
+    &::after {
-      content: "\E0B7"; // chat
+      content: " */";
-      vertical-align: -0.125em;
     }
   }
 

src/assets/stylesheets/extensions/pymdown/_details.scss

@@ -54,25 +54,11 @@
       position: relative;
       padding-right: px2rem(40px);
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         padding-left: px2rem(40px);
       }
     }
-
-    // Manually hide and show, if browser doesn't support details
-    .no-details &:not([open]) {
-
-      // Hide all nested tags ...
-      > * {
-        display: none;
-      }
-
-      // ... but show title
-      summary {
-        display: block;
-      }
-    }
   }
 
   // Title
@@ -91,16 +77,15 @@
 
     // Icon
     &::after {
-      @extend %md-icon;
-
       position: absolute;
-      top: px2rem(8px);
       right: px2rem(12px);
-      color: $md-color-black--lighter;
+      width: px2rem(20px);
-      font-size: px2rem(20px);
+      height: px2rem(20px);
-      content: "\E313"; // keyboard_arrow_down
+      background-color: $md-color-black--lighter;
+      mask-image: url("{{ chevron-down }}");
+      content: "";
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         right: initial;
         left: px2rem(12px);

src/assets/stylesheets/extensions/pymdown/_tasklist.scss

@@ -39,7 +39,7 @@
       top: 0.45em;
       left: -2em;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         right: -2em;
         left: initial;
@@ -52,26 +52,26 @@
 
     // Checkbox icon in unchecked state
     .task-list-indicator::before {
-      @extend %md-icon;
-
       position: absolute;
       top: 0.15em;
-      left: -1.25em;
+      left: px2em(-24px);
-      color: $md-color-black--lighter;
+      width: px2em(20px);
-      font-size: 1.25em;
+      height: px2em(20px);
-      content: "\E835"; // check_box_outline_blank
+      background-color: $md-color-black--lightest;
-      vertical-align: -0.25em;
+      mask-image: url("{{ checkbox-blank-circle }}");
+      content: "";
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
-        right: -1.25em;
+        right: px2em(-24px);
         left: initial;
       }
     }
 
     // Checkbox icon in checked state
     [type="checkbox"]:checked + .task-list-indicator::before {
-      content: "\E834"; // check_box
+      background-color: $clr-green-a400;
+      mask-image: url("{{ check-circle }}");
     }
 
     // Hide original checkbox behind icon

src/assets/stylesheets/layout/_base.scss

@@ -119,6 +119,14 @@ hr {
   }
 }
 
+// Apply ellipsis in case of overflowing text
+.md-ellipsis {
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 // ----------------------------------------------------------------------------
 // Rules: navigational elements
 // ----------------------------------------------------------------------------
@@ -158,37 +166,6 @@ hr {
   }
 }
 
-// ----------------------------------------------------------------------------
-// Rules: flexible elements
-// ----------------------------------------------------------------------------
-
-// Flexible layout container
-.md-flex {
-  display: flex;
-
-  // Flexible layout container cell/element
-  &__cell {
-    position: relative;
-
-    // Shrink to minimum width
-    &--shrink {
-      flex-grow: 0;
-    }
-
-    // Stretch to maximum width
-    &--stretch {
-      flex-grow: 1;
-    }
-  }
-
-  // Apply ellipsis in case of overflowing text
-  &__ellipsis {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-}
-
 // ----------------------------------------------------------------------------
 // Rules: skip link
 // ----------------------------------------------------------------------------

src/assets/stylesheets/layout/_clipboard.scss

@@ -27,14 +27,13 @@
 // Copy to clipboard
 .md-clipboard {
   position: absolute;
-  top: px2rem(6px);
+  top: px2rem(8px);
-  right: px2rem(6px);
+  right: px2rem(8px);
-  width: px2rem(28px);
+  width: px2rem(24px);
-  height: px2rem(28px);
+  height: px2rem(24px);
   transition: color 250ms;
   border-radius: px2rem(2px);
   color: $md-color-black--lightest;
-  font-size: px2rem(16px);
   cursor: pointer;
   z-index: 1;
   // Hack: put everything on the GPU to omit flickering
@@ -45,6 +44,12 @@
     display: none;
   }
 
+  // Slightly smaller icon
+  svg {
+    width: px2rem(18px);
+    height: px2rem(18px);
+  }
+
   // Show on container hover
   pre:hover &,
   .codehilite:hover & {

src/assets/stylesheets/layout/_content.scss

@@ -31,7 +31,7 @@
   @include break-from-device(tablet landscape) {
     margin-right: px2rem(242px);
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
       margin-right: initial;
       margin-left: px2rem(242px);
@@ -42,7 +42,7 @@
   @include break-from-device(screen) {
     margin-left: px2rem(242px);
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
       margin-right: px2rem(242px);
     }
@@ -73,20 +73,36 @@
     }
   }
 
-  // Icons
+  // Button next to the title
-  &__icon {
+  &__button {
-    @extend %md-icon__button;
-
-    position: relative;
     margin: px2rem(8px) 0;
+    margin-left: px2rem(8px);
     padding: 0;
     float: right;
 
+    // Adjust for right-to-left languages
+    [dir="rtl"] & {
+      margin-right: px2rem(8px);
+      margin-left: initial;
+      float: left;
+
+      // Flip icon vertically
+      svg {
+        transform: scaleX(-1);
+      }
+    }
+
     // Override default link color for icons
     .md-typeset & {
       color: $md-color-black--lighter;
     }
 
+    // Align text with icon
+    svg {
+      display: inline;
+      vertical-align: top;
+    }
+
     // Hide for print
     @media print {
       display: none;

src/assets/stylesheets/layout/_footer.scss

@@ -38,12 +38,6 @@
   background-color: $md-color-black;
   color: $md-color-white;
 
-  // Icons
-  svg {
-    display: block;
-    fill: currentColor;
-  }
-
   // Set spacing
   &__inner {
     padding: px2rem(4px);
@@ -52,6 +46,7 @@
 
   // Links to previous and next page
   &__link {
+    display: flex;
     padding-top: px2rem(28px);
     padding-bottom: px2rem(8px);
     transition: opacity 250ms;
@@ -61,7 +56,8 @@
       width: 50%;
     }
 
-    // Hovered link
+    // Focused or hovered links
+    &:focus,
     &:hover {
       opacity: 0.7;
     }
@@ -71,9 +67,14 @@
       width: 25%;
       float: left;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         float: right;
+
+        // Flip icon vertically
+        svg {
+          transform: scaleX(-1);
+        }
       }
 
       // Title
@@ -92,24 +93,24 @@
       float: right;
       text-align: right;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         float: left;
         text-align: left;
-      }
-    }
-  }
 
-  // Icon buttons
+        // Flip icon vertically
-  &__button {
+        svg {
-    @extend %md-icon__button;
+          transform: scaleX(-1);
-
+        }
-    transition: background 250ms;
+      }
+    }
   }
 
   // Link title - set line height to match icon for correct alignment
   &__title {
     position: relative;
+    flex-grow: 1;
+    max-width: calc(100% - #{px2rem(48px)});
     padding: 0 px2rem(20px);
     font-size: px2rem(18px);
     line-height: px2rem(48px);
@@ -161,7 +162,7 @@
     max-width: 75%;
     float: left;
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
       float: right;
     }
@@ -183,7 +184,7 @@
     padding: px2rem(12px) 0;
     float: right;
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
       float: left;
     }
@@ -194,7 +195,7 @@
     display: inline-block;
     width: px2rem(32px);
     height: px2rem(32px);
-    font-size: px2rem(16px);
+    transition: color 250ms;
     text-align: center;
 
     // Adjust line-height to match height for correct alignment
@@ -205,15 +206,8 @@
     // Social icon
     svg {
       width: px2rem(16px);
-      transition: fill 250ms;
       vertical-align: -25%;
-      fill: $md-color-white--light;
+      fill: currentColor;
-    }
-
-    // Focused or hovered link
-    &:focus svg,
-    &:hover svg {
-      fill: $md-color-white;
     }
   }
 }

src/assets/stylesheets/layout/_header.scss

@@ -41,12 +41,6 @@
   // Hack: putting the header on the GPU avoids unnecessary repaints
   backface-visibility: hidden;
 
-  // Icons
-  svg {
-    display: block;
-    fill: currentColor;
-  }
-
   // Always hide shadow, in case JavaScript is not available
   .no-js & {
     transition: none;
@@ -72,28 +66,50 @@
 
 // Navigation within header
 .md-header-nav {
+  display: flex;
   padding: 0 px2rem(4px);
 
   // Icon buttons
   &__button {
-    @extend %md-icon__button;
-
     position: relative;
     transition: opacity 250ms;
     z-index: 1;
 
-    // Hovered icon
+    // Adjust for right-to-left languages
+    [dir="rtl"] & {
+
+      // Flip icon vertically
+      svg {
+        transform: scaleX(-1);
+      }
+    }
+
+    // Focused or hovered icon
+    &:focus,
     &:hover {
       opacity: 0.7;
     }
 
+    // Logo
+    &.md-logo {
+      margin: px2rem(4px);
+      padding: px2rem(8px);
+
       // Set correct display on image or icon
-    &.md-logo * {
+      * {
         display: block;
       }
 
+      // Inherit current color
+      svg {
+        width: px2rem(24px);
+        height: px2rem(24px);
+        fill: currentColor;
+      }
+    }
+
     // Hide search icon, if JavaScript is not available.
-    .no-js &.md-icon--search {
+    .no-js &[for="search"] {
       display: none;
     }
 
@@ -129,7 +145,8 @@
   &__topic {
     display: block;
     position: absolute;
-    width: calc(100% - #{px2rem(20px)});
+    width: calc(100% - #{px2rem(40px)});
+    padding: 0 px2rem(20px);
     transition:
       transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
       opacity   150ms;
@@ -147,7 +164,7 @@
       z-index: -1;
       pointer-events: none;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         transform: translateX(px2rem(-25px));
       }
@@ -166,7 +183,7 @@
 
   // Header title - set line height to match icon for correct alignment
   &__title {
-    padding: 0 px2rem(20px);
+    flex-grow: 1;
     font-size: px2rem(18px);
     line-height: px2rem(48px);
 
@@ -180,7 +197,7 @@
       z-index: -1;
       pointer-events: none;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         transform: translateX(px2rem(25px));
       }
@@ -196,6 +213,13 @@
         pointer-events: initial;
       }
     }
+
+    // Patch ellipsis
+    > .md-header-nav__ellipsis {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
   }
 
   // Repository containing source
@@ -209,7 +233,7 @@
       max-width: px2rem(234px);
       margin-left: px2rem(20px);
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         margin-right: px2rem(20px);
         margin-left: initial;
@@ -220,7 +244,7 @@
     @include break-from-device(screen) {
       margin-left: px2rem(28px);
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         margin-right: px2rem(28px);
       }

src/assets/stylesheets/layout/_nav.scss

@@ -37,22 +37,20 @@
     text-overflow: ellipsis;
     overflow: hidden;
 
-    // Icon, hidden by default
+    // Hide buttons by default
-    &::before {
-      @extend %md-icon, %md-icon__button;
-
-      display: none;
-      content: "\E5C4"; // arrow_back
-
-      // Adjust for RTL languages
-      [dir="rtl"] & {
-        content: "\E5C8"; // arrow_forward
-      }
-    }
-
-    // Hide button by default
     .md-nav__button {
       display: none;
+
+      // Stretch images
+      img {
+        width: 100%;
+        height: auto;
+      }
+
+      // Logo
+      &.md-logo svg {
+        fill: currentColor;
+      }
     }
   }
 
@@ -76,7 +74,7 @@
     & & {
       padding-right: 0;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         padding-right: px2rem(12px);
         padding-left: 0;
@@ -89,17 +87,6 @@
     }
   }
 
-  // Button with logo
-  &__button {
-    @extend %md-icon, %md-icon__button;
-
-    // Stretch image
-    img {
-      width: 100%;
-      height: auto;
-    }
-  }
-
   // Link inside item
   &__link {
     display: block;
@@ -110,16 +97,6 @@
     overflow: hidden;
     scroll-snap-align: start;
 
-    // Icon
-    &::after {
-      @extend %md-icon;
-
-      // Item contains a nested list
-      .md-nav__item--nested > & {
-        content: "\E313"; // keyboard_arrow_down
-      }
-    }
-
     // Hide link to table of contents by default - this will only match the
     // table of contents inside the drawer below and including tablet portrait
     html &[for="__toc"] {
@@ -129,11 +106,6 @@
       & ~ .md-nav {
         display: none;
       }
-
-      // Hide icon for current item
-      + .md-nav__link::after {
-        display: none;
-      }
     }
 
     // Blurred link
@@ -142,8 +114,7 @@
     }
 
     // Active link
-    &:active,
+    .md-nav__item &--active {
-    &--active {
       color: $md-color-primary;
     }
 
@@ -191,9 +162,8 @@
         line-height: 1.5;
       }
 
-      // List title - higher specificity is necessary to ensure that the title
+      // List title
-      // inside the drawer is always styled accordingly
+      .md-nav__title {
-      html & .md-nav__title {
         position: relative;
         height: px2rem(112px);
         padding: px2rem(60px) px2rem(16px) px2rem(4px);
@@ -205,14 +175,20 @@
         cursor: pointer;
 
         // Icon
-        &::before {
+        .md-nav__icon {
           display: block;
           position: absolute;
-          top: px2rem(4px);
+          top: px2rem(8px);
-          left: px2rem(4px);
+          left: px2rem(8px);
-          width: px2rem(40px);
+          width: px2rem(24px);
-          height: px2rem(40px);
+          height: px2rem(24px);
-          color: $md-color-black--light;
+          margin: px2rem(4px);
+
+          // Adjust for right-to-left languages
+          [dir="rtl"] & {
+            right: px2rem(8px);
+            left: initial;
+          }
         }
 
         // Main lists
@@ -229,7 +205,7 @@
         }
 
         // Site title in main navigation
-        &--site {
+        &[for="__drawer"] {
           position: relative;
           background-color: $md-color-primary;
           color: $md-color-white;
@@ -242,27 +218,18 @@
             left: px2rem(4px);
             width: px2rem(64px);
             height: px2rem(64px);
+            margin: px2rem(4px);
+            padding: px2rem(8px);
             font-size: px2rem(48px);
           }
-
-          // Hide back arrow icon
-          &::before {
-            display: none;
-          }
         }
       }
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       html [dir="rtl"] & .md-nav__title {
 
-        // Icon
-        &::before {
-          right: px2rem(4px);
-          left: initial;
-        }
-
         // Site title in main navigation
-        &--site .md-nav__button {
+        &[for="__drawer"] .md-nav__button {
           right: px2rem(4px);
           left: initial;
         }
@@ -278,7 +245,7 @@
         padding: 0;
         border-top: px2rem(1px) solid $md-color-black--lightest;
 
-        // Adjust for RTL languages
+        // Adjust for right-to-left languages
         [dir="rtl"] & {
           padding: 0;
         }
@@ -287,21 +254,11 @@
         &--nested > .md-nav__link {
           padding-right: px2rem(48px);
 
-          // Adjust for RTL languages
+          // Adjust for right-to-left languages
           [dir="rtl"] & {
             padding-right: px2rem(16px);
             padding-left: px2rem(48px);
           }
-
-          // Replace icon with right arrow
-          &::after {
-            content: "\E315"; // keyboard_arrow_right
-
-            // Adjust for RTL languages
-            [dir="rtl"] & {
-              content: "\E314"; // keyboard_arrow_left
-            }
-          }
         }
       }
 
@@ -311,8 +268,8 @@
         margin-top: 0;
         padding: px2rem(12px) px2rem(16px);
 
-        // Rotate icon
+        // Icon
-        &::after {
+        .md-nav__icon {
           position: absolute;
           top: 50%;
           right: px2rem(12px);
@@ -320,7 +277,7 @@
           color: inherit;
           font-size: px2rem(24px);
 
-          // Adjust for RTL languages
+          // Adjust for right-to-left languages
           [dir="rtl"] & {
             right: initial;
             left: px2rem(12px);
@@ -328,6 +285,19 @@
         }
       }
 
+      // Icon
+      .md-nav__icon {
+
+        // Adjust for right-to-left languages
+        [dir="rtl"] & {
+
+          // Flip icon vertically
+          svg {
+            transform: scale(-1);
+          }
+        }
+      }
+
       // Table of contents inside navigation
       .md-nav--secondary {
 
@@ -345,7 +315,7 @@
           .md-nav__link {
             padding-left: px2rem(28px);
 
-            // Adjust for RTL languages
+            // Adjust for right-to-left languages
             [dir="rtl"] & {
               padding-right: px2rem(28px);
               padding-left: initial;
@@ -356,7 +326,7 @@
           .md-nav .md-nav__link {
             padding-left: px2rem(40px);
 
-            // Adjust for RTL languages
+            // Adjust for right-to-left languages
             [dir="rtl"] & {
               padding-right: px2rem(40px);
               padding-left: initial;
@@ -367,7 +337,7 @@
           .md-nav .md-nav .md-nav__link {
             padding-left: px2rem(52px);
 
-            // Adjust for RTL languages
+            // Adjust for right-to-left languages
             [dir="rtl"] & {
               padding-right: px2rem(52px);
               padding-left: initial;
@@ -378,7 +348,7 @@
           .md-nav .md-nav .md-nav .md-nav__link {
             padding-left: px2rem(64px);
 
-            // Adjust for RTL languages
+            // Adjust for right-to-left languages
             [dir="rtl"] & {
               padding-right: px2rem(64px);
               padding-left: initial;
@@ -397,15 +367,10 @@
         opacity   125ms 50ms;
       opacity: 0;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         transform: translateX(-100%);
       }
-
-      // Just hide navigation, if browser doesn't supports 3D transforms
-      .no-csstransforms3d & {
-        display: none;
-      }
     }
 
     // Expand nested navigation, if toggle is checked
@@ -415,11 +380,6 @@
         transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
         opacity   125ms 125ms;
       opacity: 1;
-
-      // Just show navigation, if browser doesn't supports 3D transforms
-      .no-csstransforms3d & {
-        display: flex;
-      }
     }
   }
 
@@ -432,12 +392,6 @@
       display: block;
       padding-right: px2rem(48px);
 
-      // Unrotate icon for table of contents
-      &::after {
-        color: inherit;
-        content: "\E8DE"; // toc
-      }
-
       // Hide link to current item
       + .md-nav__link {
         display: none;
@@ -449,7 +403,7 @@
       }
     }
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     html [dir="rtl"] &__link {
       padding-right: px2rem(16px);
       padding-left: px2rem(48px);
@@ -471,12 +425,21 @@
     // property must be calculated before transitioning
     transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
 
+    // List title
+    .md-nav__title {
+
       // Snap to site and table of contents title
-    .md-nav__title[for="__drawer"],
+      &[for="__drawer"],
-    .md-nav__title[for="__toc"] {
+      &[for="__toc"] {
         scroll-snap-align: start;
       }
 
+      // Hide icons
+      .md-nav__icon {
+        display: none;
+      }
+    }
+
     // Hide nested navigation by default
     .md-nav__toggle ~ & {
       display: none;
@@ -492,27 +455,23 @@
       display: none;
     }
 
-    // Link inside item - ideally the link display method would be set to
+    // Icon
-    // inline on screen, but this doesn't work with text ellipsis
+    &__icon {
-    &__link {
+      height: px2rem(18px);
+      float: right;
+      transition: transform 250ms;
 
-      // Item contains a nested list
+      // Inline icon and adjust to match font size
-      .md-nav__item--nested > &::after {
+      svg {
         display: inline-block;
-        transform-origin: 0.45em 0.45em;
+        width: px2rem(18px);
-        transform-style: preserve-3d;
+        height: px2rem(18px);
-        vertical-align: -0.125em;
+        vertical-align: px2rem(-2px);
-
-        // Only animate icon when JavaScript is available, as the height can
-        // not be animated anyway, and better no fun than half the fun
-        .js & {
-          transition: transform 400ms;
-        }
       }
 
       // Rotate icon for expanded lists
-      .md-nav__item--nested .md-nav__toggle:checked ~ &::after {
+      .md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link & {
-        transform: rotateX(180deg);
+        transform: rotateZ(90deg);
       }
     }
   }

src/assets/stylesheets/layout/_search.scss

@@ -34,6 +34,7 @@ $md-toggle__search--checked:
 
 // Search container
 .md-search {
+  position: relative;
 
   // Hide search, if JavaScript is not available.
   .no-js & {
@@ -42,7 +43,6 @@ $md-toggle__search--checked:
 
   // [tablet landscape +]: Header-embedded search
   @include break-from-device(tablet landscape) {
-    margin-left: px2rem(4px);
     padding: px2rem(4px) 0;
   }
 
@@ -55,9 +55,9 @@ $md-toggle__search--checked:
     @include break-to-device(tablet portrait) {
       position: absolute;
       top: px2rem(4px);
-      left: px2rem(4px);
+      left: px2rem(-44px);
-      width: px2rem(36px);
+      width: px2rem(40px);
-      height: px2rem(36px);
+      height: px2rem(40px);
       transform-origin: center;
       transition:
         transform 300ms 100ms,
@@ -67,9 +67,9 @@ $md-toggle__search--checked:
       overflow: hidden;
       pointer-events: none;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
-        right: px2rem(4px);
+        right: px2rem(-44px);
         left: initial;
       }
 
@@ -115,7 +115,7 @@ $md-toggle__search--checked:
       background-color: $md-color-black--light;
       cursor: pointer;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         right: 0;
         left: initial;
@@ -164,14 +164,14 @@ $md-toggle__search--checked:
           opacity   150ms 150ms;
         opacity: 1;
 
-        // Adjust for RTL languages
+        // Adjust for right-to-left languages
         [dir="rtl"] & {
           right: 0;
           left: initial;
         }
       }
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       html [dir="rtl"] & {
         right: 100%;
         left: initial;
@@ -187,7 +187,7 @@ $md-toggle__search--checked:
       float: right;
       transition: width 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         float: left;
       }
@@ -225,7 +225,7 @@ $md-toggle__search--checked:
     text-overflow: ellipsis;
     z-index: 2;
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
       padding: 0 px2rem(72px) 0 px2rem(44px);
     }
@@ -239,10 +239,6 @@ $md-toggle__search--checked:
     ~ .md-search__icon,
     &::placeholder {
       color: $md-color-black--light;
-
-      svg {
-        fill: $md-color-black--light; // TODO: currentColor?
-      }
     }
 
     // Remove the "x" rendered by Internet Explorer
@@ -270,14 +266,14 @@ $md-toggle__search--checked:
       color: inherit;
       font-size: ms(0);
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         padding-right: px2rem(44px);
       }
 
       // Icon color
       + .md-search__icon {
-        fill: inherit;
+        color: $md-color-white;
       }
 
       // Placeholder color
@@ -306,7 +302,7 @@ $md-toggle__search--checked:
     }
   }
 
-  // Icons
+  // Icon
   &__icon {
     position: absolute;
     width: px2rem(24px);
@@ -328,33 +324,41 @@ $md-toggle__search--checked:
       top: px2rem(6px);
       left: px2rem(10px);
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         right: px2rem(10px);
         left: initial;
-      }
 
-      // // Set search icon on pseudo class, so it can be overridden for mobile
+        // Flip icon vertically
-      // // and tablet when the search is rendered in an overlay
+        svg {
-      // &::before {
+          transform: scaleX(-1);
-      //   content: "\E8B6"; // search
+        }
-      // }
+      }
 
       // [tablet portrait -]: Full-screen search bar
       @include break-to-device(tablet portrait) {
         top: px2rem(12px);
         left: px2rem(16px);
 
-        // // Show back arrow instead of search icon
+        // Adjust for right-to-left languages
-        // &[for="__search"]::before {
+        [dir="rtl"] & {
-        //   content: "\E5C4"; // arrow_back
+          right: px2rem(16px);
+          left: initial;
+        }
 
-        //   // Adjust for RTL languages
+        // Hide the magnifying glass (1st icon)
-        //   [dir="rtl"] & {
+        svg:first-child {
-        //     content: "\E5C8"; // arrow_forward
+          display: none;
-        //   }
+        }
-        // }
+      }
-        // TODO: directly include it template, then switch
+
+      // [tablet landscape +]: Header-embedded search
+      @include break-from-device(tablet landscape) {
+
+        // Hide the arrow (2nd icon)
+        svg:last-child {
+          display: none;
+        }
       }
     }
 
@@ -368,7 +372,7 @@ $md-toggle__search--checked:
         opacity   150ms;
       opacity: 0;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         right: initial;
         left: px2rem(10px);
@@ -378,6 +382,12 @@ $md-toggle__search--checked:
       @include break-to-device(tablet portrait) {
         top: px2rem(12px);
         right: px2rem(16px);
+
+        // Adjust for right-to-left languages
+        [dir="rtl"] & {
+          right: initial;
+          left: px2rem(16px);
+        }
       }
 
       // Show reset button if search is active and input non-empty
@@ -461,7 +471,7 @@ $md-toggle__search--checked:
         height: px2rem(4px);
       }
 
-      // Style scrollbar thumb
+      // Scrollbar thumb
       &::-webkit-scrollbar-thumb {
         background-color: $md-color-black--lighter;
 
@@ -492,7 +502,7 @@ $md-toggle__search--checked:
     @include break-from-device(tablet landscape) {
       padding-left: px2rem(44px);
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         padding-right: px2rem(44px);
         padding-left: initial;
@@ -548,7 +558,7 @@ $md-toggle__search--checked:
     @include break-from-device(tablet landscape) {
       padding-left: px2rem(44px);
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         padding-right: px2rem(44px);
         padding-left: px2rem(16px);
@@ -558,18 +568,25 @@ $md-toggle__search--checked:
     // Document
     &--document {
 
-      // Icon
+      // Title
-      &::before {
+      .md-search-result__title {
-        @extend %md-icon, %md-icon__button;
+        margin: px2rem(11px) 0;
+        font-size: ms(0);
+        font-weight: 400;
+        line-height: 1.4;
+      }
+    }
+  }
 
+  // Icon
+  &__icon {
     position: absolute;
     left: 0;
     margin: px2rem(2px);
     transition: opacity 250ms;
     color: $md-color-black--light;
-        content: "\E880"; // find_in_page
 
-        // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
       right: 0;
       left: initial;
@@ -581,16 +598,6 @@ $md-toggle__search--checked:
     }
   }
 
-      // Title
-      .md-search-result__title {
-        margin: px2rem(11px) 0;
-        font-size: ms(0);
-        font-weight: 400;
-        line-height: 1.4;
-      }
-    }
-  }
-
   // Title
   &__title {
     margin: 0.5em 0;

src/assets/stylesheets/layout/_sidebar.scss

@@ -67,32 +67,22 @@ $md-toggle__drawer--checked:
       background-color: $md-color-white;
       z-index: 3;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         right: px2rem(-242px);
         left: initial;
       }
 
-      // Just hide drawer, if browser doesn't support 3D transforms
-      .no-csstransforms3d & {
-        display: none;
-      }
-
       // Expanded drawer
       #{$md-toggle__drawer--checked} & {
         @include z-depth(8);
 
         transform: translateX(px2rem(242px));
 
-        // Adjust for RTL languages
+        // Adjust for right-to-left languages
         [dir="rtl"] & {
           transform: translateX(px2rem(-242px));
         }
-
-        // Just show drawer, if browser doesn't support 3D transforms
-        .no-csstransforms3d & {
-          display: block;
-        }
       }
 
       // Hide overflow for nested navigation
@@ -111,7 +101,7 @@ $md-toggle__drawer--checked:
       display: block;
       margin-left: calc(100% - #{px2rem(242px)});
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         margin-right: calc(100% - #{px2rem(242px)});
         margin-left: initial;
@@ -127,7 +117,7 @@ $md-toggle__drawer--checked:
     @include break-from-device(screen) {
       margin-left: px2rem((1220 - 242) * 1px);
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         margin-right: px2rem((1220 - 242) * 1px);
         margin-left: initial;
@@ -166,7 +156,7 @@ $md-toggle__drawer--checked:
       height: px2rem(4px);
     }
 
-    // Style scrollbar thumb
+    // Scrollbar thumb
     &::-webkit-scrollbar-thumb {
       background-color: $md-color-black--lighter;
 

src/assets/stylesheets/layout/_source.scss

@@ -65,7 +65,7 @@
   line-height: 1.2;
   white-space: nowrap;
 
-  // Adjust for RTL languages
+  // Adjust for right-to-left languages
   [dir="rtl"] & {
     padding-right: initial;
     padding-left: px2rem(12px);
@@ -91,16 +91,12 @@
     height: px2rem(48px);
     vertical-align: middle;
 
-    // Align SVG, do not scale, as this will incur strange formatting bugs
+    // Align with margin only (as opposed to normal button alignment)
-    // in Internet Explorer and Edge
     svg {
-      width: px2rem(24px);
-      height: px2rem(24px);
       margin-top: px2rem(12px);
       margin-left: px2rem(12px);
-      fill: $md-color-white;
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         margin-right: px2rem(12px);
         margin-left: initial;
@@ -112,7 +108,7 @@
       margin-left: px2rem(-40px);
       padding-left: px2rem(40px);
 
-      // Adjust for RTL languages
+      // Adjust for right-to-left languages
       [dir="rtl"] & {
         margin-right: px2rem(-40px);
         margin-left: initial;
@@ -153,7 +149,7 @@
   &__fact {
     float: left;
 
-    // Adjust for RTL languages
+    // Adjust for right-to-left languages
     [dir="rtl"] & {
       float: right;
     }
@@ -175,60 +171,3 @@
     }
   }
 }
-
-// Source file
-.md-source-file {
-  display: inline-block;
-  margin: 1em 0.5em 1em 0;
-  padding-right: px2rem(5px);
-  border-radius: px2rem(2px);
-  background-color: $md-color-black--lightest;
-  font-size: ms(-1);
-  list-style-type: none;
-  cursor: pointer;
-  overflow: hidden;
-
-  // Icon
-  &::before {
-    @extend %md-icon;
-
-    display: inline-block;
-    margin-right: px2rem(5px);
-    padding: px2rem(5px);
-    background-color: $md-color-black--lighter;
-    color: $md-color-white;
-    font-size: ms(0);
-    content: "\E86F"; // code
-    vertical-align: middle;
-  }
-
-  // Some properties need to be set with higher specificity due to the default
-  // styling of text links inside typesetted content
-  html & {
-    transition:
-      background 400ms,
-      color      400ms,
-      box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
-
-    // Icon
-    &::before {
-      transition: inherit;
-    }
-  }
-
-  // Color needs even higher specifity because custom color palettes are set
-  // using the body and override text links inside typesetted content
-  html body .md-typeset & {
-    color: $md-color-black--light;
-  }
-
-  // Hovered source file
-  &:hover {
-    @include z-depth-focus;
-
-    // Icon
-    &::before {
-      background-color: $md-color-accent;
-    }
-  }
-}

src/assets/stylesheets/layout/_tabs.scss

@@ -126,7 +126,7 @@
         }
 
         // Hide site title
-        .md-nav__title--site {
+        .md-nav__title[for="__drawer"] {
           display: none;
         }
 

src/assets/stylesheets/utilities/_break.scss

@@ -44,10 +44,6 @@
 ///     )
 ///   );
 ///
-/// @group  helpers
-/// @access private
-/// @type   Map
-///
 $break-devices: () !default;
 
 // ----------------------------------------------------------------------------
@@ -57,11 +53,6 @@ $break-devices: () !default;
 ///
 /// Choose minimum and maximum device widths
 ///
-/// @group  helpers
-/// @access private
-/// @param  {Map}  $devices Map of devices
-/// @return {List}          Minimum and maximum width
-///
 @function break-select-min-max($devices) {
   $min: 1000000;
   $max: 0;
@@ -93,11 +84,6 @@ $break-devices: () !default;
 ///
 /// Select minimum and maximum widths for a device breakpoint
 ///
-/// @group  helpers
-/// @access private
-/// @param  {String} $device Device
-/// @return {List}           Minimum and maximum width
-///
 @function break-select-device($device) {
   $current: $break-devices;
   @for $n from 1 through length($device) {
@@ -120,10 +106,6 @@ $break-devices: () !default;
 ///
 /// A minimum-maximum media query breakpoint
 ///
-/// @group  helpers
-/// @access public
-/// @param  {Number|List} $breakpoint Number or number pair
-///
 @mixin break-at($breakpoint) {
   @if type-of($breakpoint) == number {
     @media only screen and (min-width: $breakpoint) {
@@ -147,10 +129,6 @@ $break-devices: () !default;
 ///
 /// An orientation media query breakpoint
 ///
-/// @group  helpers
-/// @access public
-/// @param  {String} $breakpoint Orientation
-///
 @mixin break-at-orientation($breakpoint) {
   @if type-of($breakpoint) == string {
     @media only screen and (orientation: $breakpoint) {
@@ -164,10 +142,6 @@ $break-devices: () !default;
 ///
 /// A maximum-aspect-ratio media query breakpoint
 ///
-/// @group  helpers
-/// @access public
-/// @param  {Number} $breakpoint Ratio
-///
 @mixin break-at-ratio($breakpoint) {
   @if type-of($breakpoint) == number {
     @media only screen and (max-aspect-ratio: $breakpoint) {
@@ -181,10 +155,6 @@ $break-devices: () !default;
 ///
 /// A minimum-maximum media query device breakpoint
 ///
-/// @group  helpers
-/// @access public
-/// @param  {String|List} $breakpoint Device
-///
 @mixin break-at-device($device) {
   @if type-of($device) == string {
     $device: $device,;
@@ -208,10 +178,6 @@ $break-devices: () !default;
 ///
 /// A minimum media query device breakpoint
 ///
-/// @group  helpers
-/// @access public
-/// @param  {String|List} $breakpoint Device
-///
 @mixin break-from-device($device) {
   @if type-of($device) == string {
     $device: $device,;
@@ -230,10 +196,6 @@ $break-devices: () !default;
 ///
 /// A maximum media query device breakpoint
 ///
-/// @group  helpers
-/// @access public
-/// @param  {String|List} $breakpoint Device
-///
 @mixin break-to-device($device) {
   @if type-of($device) == string {
     $device: $device,;

src/assets/stylesheets/utilities/_px2em.scss

@@ -27,13 +27,7 @@
 // ----------------------------------------------------------------------------
 
 ///
-/// Convert font size in px to em.
+/// Convert font size in px to em
-///
-/// @group  helpers
-/// @access public
-/// @param  {Number} $size Font size in px
-/// @param  {Number} $base Base font size
-/// @return {Number}       Font size in em
 ///
 @function px2em($size, $base: 16px) {
   @if unit($size) == px {
@@ -48,13 +42,7 @@
 }
 
 ///
-/// Convert font size in px to rem.
+/// Convert font size in px to rem
-///
-/// @group  helpers
-/// @access public
-/// @param  {Number} $size Font size in px
-/// @param  {Number} $base Base font size
-/// @return {Number}       Font size in rem
 ///
 @function px2rem($size, $base: 20px) {
   @if unit($size) == px {

src/base.html

@@ -291,15 +291,40 @@
               <!-- Content -->
               {% block content %}
 
-                <!-- Edit button, if URL was defined -->
+                <!-- Edit button -->
                 {% if page.edit_url %}
                   <a
                     href="{{ page.edit_url }}"
                     title="{{ lang.t('edit.link.title') }}"
-                    class="md-icon md-content__icon"
+                    class="md-content__button md-icon"
-                  >&#xE3C9;<!-- edit --></a>
+                  >
+                    {% include ".icons/material/pencil.svg" %}
+                  </a>
                 {% endif %}
 
+                <!-- Link to source file -->
+                {% block source %}
+                  {% if page and page.meta and page.meta.source %}
+                    {% set repo = config.repo_url %}
+                    {% if repo | last == "/" %}
+                      {% set repo = repo[:-1] %}
+                    {% endif %}
+                    {% set path = page.meta.path | default([""]) %}
+                    {% set file = page.meta.source %}
+                    {% set repo_icon = config.extra.repo_icon | default(
+                      "fontawesome/brands/git-alt"
+                    ) %}
+                    <a
+                      href="{{ [repo, path, page.meta.source] | join('/') }}"
+                      title="{{ file }}"
+                      class="md-content__button md-icon"
+                    >
+                      {{ lang.t("meta.source") }}
+                      {% include ".icons/" ~ repo_icon ~ ".svg" %}
+                    </a>
+                  {% endif %}
+                {% endblock %}
+
                 <!--
                   Hack: check whether the content contains a h1 headline. If it
                   doesn't, the page title (or respectively site name) is used
@@ -312,26 +337,6 @@
                 <!-- Content -->
                 {{ page.content }}
 
-                <!-- Source files -->
-                {% block source %}
-                  {% if page and page.meta and page.meta.source %}
-                    <h2 id="__source">{{ lang.t("meta.source") }}</h2>
-                    {% set repo = config.repo_url %}
-                    {% if repo | last == "/" %}
-                      {% set repo = repo[:-1] %}
-                    {% endif %}
-                    {% set path = page.meta.path | default([""]) %}
-                    {% set file = page.meta.source %}
-                    <a
-                      href="{{ [repo, path, file] | join('/') }}"
-                      title="{{ file }}"
-                      class="md-source-file"
-                    >
-                      {{ file }}
-                    </a>
-                  {% endif %}
-                {% endblock %}
-
                 <!-- Support for mkdocs-git-revision-date-localized-plugin -->
                 {% if page and page.meta and (
                       page.meta.git_revision_date_localized or

src/partials/footer.html

@@ -35,23 +35,19 @@
           <a
             href="{{ page.previous_page.url | url }}"
             title="{{ page.previous_page.title | striptags }}"
-            class="md-flex md-footer-nav__link md-footer-nav__link--prev"
+            class="md-footer-nav__link md-footer-nav__link--prev"
             rel="prev"
           >
-            <div class="md-flex__cell md-flex__cell--shrink">
+            <div class="md-icon md-icon__button">
-              <div class="md-footer-nav__button">
               {% include ".icons/material/arrow-left.svg" %}
             </div>
-            </div>
+            <div class="md-footer-nav__title">
-            <div
+              <div class="md-ellipsis">
-              class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"
-            >
-              <span class="md-flex__ellipsis">
                 <span class="md-footer-nav__direction">
                   {{ lang.t("footer.previous") }}
                 </span>
                 {{ page.previous_page.title }}
-              </span>
+              </div>
             </div>
           </a>
         {% endif %}
@@ -61,24 +57,20 @@
           <a
             href="{{ page.next_page.url | url }}"
             title="{{ page.next_page.title | striptags }}"
-            class="md-flex md-footer-nav__link md-footer-nav__link--next"
+            class="md-footer-nav__link md-footer-nav__link--next"
             rel="next"
           >
-            <div
+            <div class="md-footer-nav__title">
-              class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"
+              <div class="md-ellipsis">
-            >
-              <span class="md-flex__ellipsis">
                 <span class="md-footer-nav__direction">
                   {{ lang.t("footer.next") }}
                 </span>
                 {{ page.next_page.title }}
-              </span>
               </div>
-            <div class="md-flex__cell md-flex__cell--shrink">
+            </div>
-              <div class="md-footer-nav__button">
+            <div class="md-icon md-icon__button">
               {% include ".icons/material/arrow-right.svg" %}
             </div>
-            </div>
           </a>
         {% endif %}
       </nav>

src/partials/header.html

@@ -25,10 +25,8 @@
 
   <!-- 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) | url }}"
       title="{{ config.site_name }}"
@@ -46,17 +44,16 @@
         />
       {% endif %}
     </a>
-        <label class="md-header-nav__button" for="__drawer">
+    <label
+      class="md-header-nav__button md-icon md-icon__button"
+      for="__drawer"
+    >
       {% include ".icons/material/menu.svg" %}
     </label>
-      </div>
 
     <!-- Header title -->
-      <div class="md-flex__cell md-flex__cell--stretch">
+    <div class="md-header-nav__title" data-md-component="header-title">
-        <div
+      <div class="md-header-nav__ellipsis md-ellipsis">
-          class="md-flex__ellipsis md-header-nav__title"
-          data-md-component="header-title"
-        >
         {% if config.site_name == page.title %}
           {{ config.site_name }}
         {% else %}
@@ -75,25 +72,23 @@
     </div>
 
     <!-- Button to open search dialogue -->
-      <div class="md-flex__cell md-flex__cell--shrink">
     {% if "search" in config["plugins"] %}
-          <label class="md-header-nav__button" for="__search">
+      <label
+        class="md-header-nav__button md-icon md-icon__button"
+        for="__search"
+      >
         {% include ".icons/material/magnify.svg" %}
       </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>
   </nav>
 </header>

src/partials/nav-item.html

@@ -33,7 +33,7 @@
     <!-- Active checkbox expands items contained within nested section -->
     {% if nav_item.active %}
       <input
-        class="md-toggle md-nav__toggle"
+        class="md-nav__toggle md-toggle"
         data-md-toggle="{{ path }}"
         type="checkbox"
         id="{{ path }}"
@@ -41,7 +41,7 @@
       />
     {% else %}
       <input
-        class="md-toggle md-nav__toggle"
+        class="md-nav__toggle md-toggle"
         data-md-toggle="{{ path }}"
         type="checkbox"
         id="{{ path }}"
@@ -51,9 +51,15 @@
     <!-- Expand active pages -->
     <label class="md-nav__link" for="{{ path }}">
       {{ nav_item.title }}
+      <span class="md-nav__icon md-icon">
+        {% include ".icons/material/chevron-right.svg" %}
+      </span>
     </label>
     <nav class="md-nav" data-md-level="{{ level }}">
       <label class="md-nav__title" for="{{ path }}">
+        <span class="md-nav__icon md-icon">
+          {% include ".icons/material/arrow-left.svg" %}
+        </span>
         {{ nav_item.title }}
       </label>
       <ul class="md-nav__list" data-md-scrollfix>
@@ -76,7 +82,7 @@
 
     <!-- Active checkbox expands items contained within nested section -->
     <input
-      class="md-toggle md-nav__toggle"
+      class="md-nav__toggle md-toggle"
       data-md-toggle="toc"
       type="checkbox"
       id="__toc"
@@ -91,6 +97,9 @@
     {% if toc_ | first is defined %}
       <label class="md-nav__link md-nav__link--active" for="__toc">
         {{ nav_item.title }}
+        <span class="md-nav__icon md-icon">
+          {% include ".icons/material/table-of-contents.svg" %}
+        </span>
       </label>
     {% endif %}
     <a

src/partials/nav.html

@@ -24,14 +24,15 @@
 <nav class="md-nav md-nav--primary" data-md-level="0">
 
   <!-- Site title -->
-  <label class="md-nav__title md-nav__title--site" for="__drawer">
+  <label class="md-nav__title" for="__drawer">
     <a
       href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
       title="{{ config.site_name }}"
+      aria-label="{{ config.site_name }}"
       class="md-nav__button md-logo"
     >
       {% if config.theme.logo.icon %}
-        <i class="md-icon">{{ config.theme.logo.icon }}</i>
+        {% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
       {% else %}
         <img
           src="{{ config.theme.logo | url }}"

src/partials/search.html

@@ -41,12 +41,13 @@
         data-md-state="active"
         required
       />
-      <label class="md-search__icon" for="__search">
+      <label class="md-search__icon md-icon" for="__search">
         {% include ".icons/material/magnify.svg" %}
+        {% include ".icons/material/arrow-left.svg" %}
       </label>
       <button
         type="reset"
-        class="md-search__icon"
+        class="md-search__icon md-icon"
         data-md-component="search-reset"
         tabindex="-1"
       >

src/partials/source.html

@@ -28,7 +28,7 @@
   title="{{ lang.t('source.link.title') }}"
   class="md-source"
 >
-  <div class="md-source__icon">
+  <div class="md-source__icon md-icon">
     {% set repo_icon = config.extra.repo_icon | default(
       "fontawesome/brands/git-alt"
     ) %}

src/partials/toc.html

@@ -38,35 +38,16 @@
 
   <!-- Render item list -->
   {% if toc_ | first is defined %}
-    <label class="md-nav__title" for="__toc">{{ lang.t("toc.title") }}</label>
+    <label class="md-nav__title" for="__toc">
+      <span class="md-nav__icon md-icon">
+        {% include ".icons/material/arrow-left.svg" %}
+      </span>
+      {{ lang.t("toc.title") }}
+    </label>
     <ul class="md-nav__list" data-md-scrollfix>
       {% for toc_item in toc_ %}
         {% include "partials/toc-item.html" %}
       {% endfor %}
-
-      <!-- Source files -->
-      {% if page.meta.source and page.meta.source | length > 0 %}
-        <li class="md-nav__item">
-          <a href="#__source" class="md-nav__link md-nav__link--active">
-            {{ lang.t("meta.source") }}
-          </a>
-        </li>
-      {% endif %}
-
-      <!-- Set from config but allow override -->
-      {% set disqus = config.extra.disqus %}
-      {% if page and page.meta and page.meta.disqus is string %}
-        {% set disqus = page.meta.disqus %}
-      {% endif %}
-
-      <!-- Disqus integration -->
-      {% if not page.is_homepage and disqus %}
-        <li class="md-nav__item">
-          <a href="#__comments" class="md-nav__link md-nav__link--active">
-            {{ lang.t("meta.comments") }}
-          </a>
-        </li>
-      {% endif %}
     </ul>
   {% endif %}
 </nav>

webpack.config.ts

@@ -173,7 +173,7 @@ function config(args: Configuration): Configuration {
       entrypoints: false,
       excludeAssets: [
         /\.(icons)/,
-        /\/(fonts|images|lunr)\//,
+        /\/(images|lunr)\//,
         /\.(html|py|yml)$/
       ],
       warningsFilter: [
@@ -217,7 +217,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
       plugins: [
         ...base.plugins,
 
-        /* Copy FontAwesome SVGs to dot directory, so MkDocs ignores them */
+        /* FontAwesome icons */
         new CopyPlugin([
           { to: ".icons/fontawesome", from: "**/*.svg" },
           { to: ".icons/fontawesome", from: "../LICENSE.txt" }
@@ -225,7 +225,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
           context: "node_modules/@fortawesome/fontawesome-free/svgs"
         }),
 
-        /* Copy Material icons SVGs to dot directory, so MkDocs ignores them */
+        /* Material icons */
         new CopyPlugin([
           {
             to: ".icons/material/[name].svg",
@@ -237,7 +237,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
           context: "node_modules/material-design-icons-svg/paths"
         }),
 
-        /* Copy search stemmers and segmenters */
+        /* Search stemmers and segmenters */
         new CopyPlugin([
           { to: "assets/javascripts/lunr", from: "min/*.js" },
           {
@@ -249,13 +249,10 @@ export default (_env: never, args: Configuration): Configuration[] => {
           context: "node_modules/lunr-languages"
         }),
 
-        /* Copy assets like fonts and images */
+        /* Template files */
         new CopyPlugin([
-          { from: "assets/fonts/**/*.!(css)" },
+          { from: "assets/images/*" },
-          { from: "assets/images/*.{ico,png,svg}" },
           { from: "**/*.{py,yml}" },
-
-          /* Copy and minify HTML */
           {
             from: "**/*.html",
             transform: content => {