Added support for sliding title

material/base.html

@@ -46,9 +46,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-63c41eb78d.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-fed1d0cce1.css">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-34bd9d9ec8.palette.css">
+        <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-3e082b9545.palette.css">
       {% endif %}
     {% endblock %}
     {% block libs %}
@@ -162,7 +162,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-23f8e48ddb.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-b31fe15f6a.js"></script>
       {% if lang.t("search.language") != "en" %}
         {% set languages = lang.t("search.language").split(",") %}
         {% if languages | length and languages[0] != "" %}

material/partials/header.html

@@ -14,11 +14,20 @@
         <label class="md-icon md-icon--menu md-header-nav__button" for="drawer"></label>
       </div>
       <div class="md-flex__cell md-flex__cell--stretch">
-        <span class="md-flex__ellipsis md-header-nav__title">
+        <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
           {% block site_name %}
+            {% if config.site_name == page.title %}
+              {{ config.site_name }}
+            {% else %}
+              <span class="md-header-nav__topic">
                 {{ config.site_name }}
-          {% endblock %}
               </span>
+              <span class="md-header-nav__topic">
+                {{ page.title }}
+              </span>
+            {% endif %}
+          {% endblock %}
+        </div>
       </div>
       <div class="md-flex__cell md-flex__cell--shrink">
         {% block search_box %}

mkdocs.yml

@@ -48,7 +48,7 @@ theme:
   # Default values, taken from mkdocs_theme.yml
   language: en
   feature:
-    tabs: false
+    tabs: true
   palette:
     primary: indigo
     accent: indigo

src/assets/javascripts/application.js

@@ -199,6 +199,14 @@ function initialize(config) { // eslint-disable-line func-style
       "[data-md-component=container]",
       "[data-md-component=header]")))
 
+  /* Component: header title toggle */
+  new Material.Event.Listener(window, [
+    "scroll", "resize", "orientationchange"
+  ], new Material.Header.Title(
+    "[data-md-component=title]",
+    ".md-typeset h1")
+  ).listen()
+
   /* Component: tabs visibility toggle */
   if (document.querySelector("[data-md-component=tabs]"))
     new Material.Event.Listener(window, [

src/assets/javascripts/components/Material/Header.js

@@ -21,11 +21,13 @@
  */
 
 import Shadow from "./Header/Shadow"
+import Title from "./Header/Title"
 
 /* ----------------------------------------------------------------------------
  * Module
  * ------------------------------------------------------------------------- */
 
 export default {
-  Shadow
+  Shadow,
+  Title
 }

src/assets/javascripts/components/Material/Header/Title.js

@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Class
+ * ------------------------------------------------------------------------- */
+
+export default class Title {
+
+  /**
+   * Swap header title topics when header is scrolled past
+   *
+   * @constructor
+   *
+   * @property {HTMLElement} el_ - Element
+   * @property {HTMLElement} header_ - Header
+   * @property {boolean} active_ - Title state
+   *
+   * @param {(string|HTMLElement)} el - Selector or HTML element
+   * @param {(string|HTMLHeadingElement)} header - Selector or HTML element
+   */
+  constructor(el, header) {
+    let ref = (typeof el === "string")
+      ? document.querySelector(el)
+      : el
+    if (!(ref instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref
+
+    /* Retrieve header */
+    ref = (typeof header === "string")
+      ? document.querySelector(header)
+      : header
+    if (!(ref instanceof HTMLHeadingElement))
+      throw new ReferenceError
+    this.header_ = ref
+
+    /* Initialize state */
+    this.active_ = false
+  }
+
+  /**
+   * Update title state
+   */
+  update() {
+    const active = window.pageYOffset >= this.header_.offsetTop
+    if (active !== this.active_)
+      this.el_.dataset.mdState = (this.active_ = active) ? "active" : ""
+  }
+
+  /**
+   * Reset title state
+   */
+  reset() {
+    this.el_.dataset.mdState = ""
+    this.active_ = false
+  }
+}

src/assets/stylesheets/application.palette.scss

@@ -76,8 +76,8 @@ button[data-md-color-accent] {
   "green":       $clr-green-500,
   "light-green": $clr-light-green-600,
   "lime":        $clr-lime-600,
-  "yellow":      $clr-yellow-600,
+  "yellow":      $clr-yellow-800,
-  "amber":       $clr-amber-600,
+  "amber":       $clr-amber-700,
   "orange":      $clr-orange-600,
   "deep-orange": $clr-deep-orange-400,
   "brown":       $clr-brown-500,
@@ -171,6 +171,11 @@ button[data-md-color-accent] {
     }
   }
 
+  // Table of contents
+  .md-nav--secondary {
+    border-left: 0.4rem solid $md-color-black--light;
+  }
+
   // [tablet portrait -]: Layered navigation
   @include break-to-device(tablet portrait) {
 
@@ -191,9 +196,15 @@ button[data-md-color-accent] {
     }
   }
 
-  // Table of contents
+  // [screen +]: Set background color for tabs
-  .md-nav--secondary {
+  @include break-from-device(screen) {
-    border-left: 0.4rem solid $md-color-black--light;
+
+    // Tabs with outline
+    .md-tabs {
+      border-bottom: 0.1rem solid $md-color-black--lightest;
+      background: $md-color-white;
+      color: $md-color-black;
+    }
   }
 }
 

src/assets/stylesheets/layout/_header.scss

@@ -35,8 +35,8 @@
   background-color: $md-color-primary;
   color: $md-color-white;
   box-shadow:
-    0 0      0.4rem rgba(0, 0, 0, 0.14),
+    0 0      0.4rem rgba(0, 0, 0, 0.1),
-    0 0.4rem 0.8rem rgba(0, 0, 0, 0.28);
+    0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
   z-index: 2;
   // Hack: putting the header on the GPU avoids unnecessary repaints
   backface-visibility: hidden;
@@ -44,8 +44,8 @@
   // Always show shadow, in case JavaScript is not available
   .no-js & {
     box-shadow:
-      0 0      0.4rem rgba(0, 0, 0, 0.14),
+      0 0      0.4rem rgba(0, 0, 0, 0.1),
-      0 0.4rem 0.8rem rgba(0, 0, 0, 0.28);
+      0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
   }
 
   // [screen +]: Show shadow depending on scroll offset
@@ -54,9 +54,10 @@
 
     // Show and animate shadow
     &[data-md-state="shadow"] {
+      transition: box-shadow 0.25s;
       box-shadow:
-        0 0      0.4rem rgba(0, 0, 0, 0.14),
+        0 0      0.4rem rgba(0, 0, 0, 0.1),
-        0 0.4rem 0.8rem rgba(0, 0, 0, 0.28);
+        0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
     }
   }
 
@@ -122,11 +123,52 @@
     }
   }
 
+  // Header topics
+  &__topic {
+    display: block;
+    position: absolute;
+    transition:
+      transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
+      opacity   0.25s;
+
+    // Page title
+    & + & {
+      transform: translateX(25%);
+      opacity: 0;
+      z-index: -1;
+      pointer-events: none;
+    }
+  }
+
   // Header title - set line height to match icon for correct alignment
   &__title {
     padding: 0 2rem;
     font-size: 1.8rem;
     line-height: 4.8rem;
+
+    // Show page title
+    &[data-md-state="active"] {
+      .md-header-nav__topic {
+        transform: translateX(-25%);
+        transition:
+          transform 0s 0.4s,
+          opacity   0.1s;
+        opacity: 0;
+        z-index: -1;
+        pointer-events: none;
+
+        // Page title
+        & + .md-header-nav__topic {
+          transform: translateX(0);
+          transition:
+            transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
+            opacity   0.25s;
+          opacity: 1;
+          z-index: 0;
+          pointer-events: initial;
+        }
+      }
+    }
   }
 
   // Repository containing source

src/assets/stylesheets/layout/_tabs.scss

@@ -29,6 +29,7 @@
   width: 100%;
   transition: background 0.25s;
   background: $md-color-primary;
+  color: $md-color-white;
   overflow: auto;
 
   // [tablet -]: Hide tabs for tablet and below, as they don't make any sense
@@ -64,16 +65,16 @@
     display: block;
     margin-top: 1.6rem;
     transition:
-      color     0.25s,
       transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
-      opacity   0.1s;
+      opacity   0.25s;
-    color: $md-color-white--light;
     font-size: 1.4rem;
+    opacity: 0.7;
 
     // Active or hovered link
     &--active,
     &:hover {
-      color: $md-color-white;
+      color: inherit;
+      opacity: 1;
     }
 
     // Delay transitions by a small amount

src/partials/header.html

@@ -49,11 +49,21 @@
 
       <!-- Header title -->
       <div class="md-flex__cell md-flex__cell--stretch">
-        <span class="md-flex__ellipsis md-header-nav__title">
+        <div class="md-flex__ellipsis md-header-nav__title"
+            data-md-component="title">
           {% block site_name %}
+            {% if config.site_name == page.title %}
+              {{ config.site_name }}
+            {% else %}
+              <span class="md-header-nav__topic">
                 {{ config.site_name }}
-          {% endblock %}
               </span>
+              <span class="md-header-nav__topic">
+                {{ page.title }}
+              </span>
+            {% endif %}
+          {% endblock %}
+        </div>
       </div>
 
       <!-- Button to open search dialogue -->