Only show active subsection on screen when tabs are active

lib/tasks/assets/images/build/ico.js

@@ -28,7 +28,7 @@ import changed from "gulp-changed"
 
 export default (gulp, config) => {
   return () => {
-    return gulp.src(`${config.assets.src}/images/**/*.ico`)
+    return gulp.src(`${config.assets.src}/images/**/favicon.*`)
       .pipe(changed(`${config.assets.build}/images`))
       .pipe(gulp.dest(`${config.assets.build}/images`))
   }

material/404.html

@@ -1,4 +1,4 @@
-{% extends "main.html" %}
+{% extends "base.html" %}
 {% block content %}
   <h1>404 - Not found</h1>
 {% endblock %}

material/base.html

@@ -17,15 +17,13 @@
       {% if config.site_favicon %}
         <link rel="shortcut icon" href="{{ base_url }}/{{ config.site_favicon }}">
       {% else %}
-        <link rel="shortcut icon" href="{{ base_url }}/assets/images/favicon.ico">
+        <link rel="shortcut icon" href="{{ base_url }}/assets/images/favicon.png">
       {% endif %}
       <meta name="generator" content="mkdocs+mkdocs-material#1.0.3">
     {% endblock %}
     {% block htmltitle %}
-      {% if page.title %}
+      {% if page.title and not page.is_homepage %}
         <title>{{ page.title }} - {{ config.site_name }}</title>
-      {% elif config.site_description %}
-        <title>{{ config.site_name }} - {{ config.site_description }}</title>
       {% else %}
         <title>{{ config.site_name }}</title>
       {% endif %}
@@ -45,7 +43,7 @@
       <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-5bd62fe5d3.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-22ac52ce22.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
       {% endif %}
@@ -128,7 +126,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-ce981a9b53.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-baa758dc1b.js"></script>
       <script>var config={url:{base:"{{ base_url }}"}},app=new Application(config);app.initialize()</script>
       {% for path in extra_javascript %}
         <script src="{{ path }}"></script>

material/partials/nav-item.html

@@ -8,14 +8,15 @@
     <label class="md-nav__link" for="{{ path }}">
       {{ nav_item.title }}
     </label>
-    <nav class="md-nav" data-md-component="collapsible">
+    <nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}">
       <label class="md-nav__title" for="{{ path }}">
-        {{ nav_item.title}}
+        {{ nav_item.title }}
       </label>
       <ul class="md-nav__list" data-md-scrollfix>
         {% set base = path %}
         {% for nav_item in nav_item.children %}
           {% set path = base + "-" + loop.index | string %}
+          {% set level = level + 1 %}
           {% include "partials/nav-item.html"  %}
         {% endfor %}
       </ul>

material/partials/nav.html

@@ -1,4 +1,4 @@
-<nav class="md-nav md-nav--primary">
+<nav class="md-nav md-nav--primary" data-md-level="0">
   <label class="md-nav__title md-nav__title--site" for="drawer">
     <i class="{% if config.extra.logo %} md-logo {% else %} md-icon md-icon--home {% endif %} md-nav__button">
       {% if config.extra.logo %}
@@ -15,6 +15,7 @@
   <ul class="md-nav__list" data-md-scrollfix>
     {% for nav_item in nav %}
       {% set path = "nav-" + loop.index | string %}
+      {% set level = 1 %}
       {% include "partials/nav-item.html" %}
     {% endfor %}
   </ul>

material/partials/tabs-item.html

@@ -1,11 +1,13 @@
-<li class="md-tabs__item">
-  {% if nav_item.children and nav_item.children | length > 0 %}
-  <a href="{{ nav_item.children[0].url }}" title="{{ nav_item.title }}" class="md-tabs__link {% if nav_item.active %} md-tabs__link--active {% endif %}">
-    {{ nav_item.title }}
-  </a>
-  {% elif nav_item.url == base_url %}
-    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-tabs__link {% for nav_item_ in nav %} {{nav_item_.children | length}} {% if nav_item_.url == page.url and nav_item_.children | length == 0 %} md-tabs__link--active {% endif %} {% endfor %}">
+{% if nav_item.children and nav_item.children | length > 0 %}
+  <li class="md-tabs__item">
+    <a href="{{ nav_item.children[0].url }}" title="{{ nav_item.title }}" class="md-tabs__link {% if nav_item.active %} md-tabs__link--active {% endif %}">
       {{ nav_item.title }}
     </a>
-  {% endif %}
-</li>
+  </li>
+{% elif nav_item.url == base_url %}
+  <li class="md-tabs__item">
+    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-tabs__link {% for nav_item_ in nav %} {% if nav_item_.url == page.url and nav_item_.children | length == 0 %} md-tabs__link--active {% endif %} {% endfor %}">
+      {{ nav_item.title }}
+    </a>
+  </li>
+{% endif %}

src/404.html

@@ -20,7 +20,7 @@
   IN THE SOFTWARE.
 -->
 
-{% extends "main.html" %}
+{% extends "base.html" %}
 
 <!-- Content block -->
 {% block content %}

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

@@ -53,6 +53,7 @@ export default class Shadow {
     let current = this.el_
     while ((current = current.previousElementSibling))
       this.height_ += current.offsetHeight
+    this.update()
   }
 
   /**

src/assets/stylesheets/_shame.scss

@@ -23,3 +23,60 @@
 // ----------------------------------------------------------------------------
 // Nothing to see here, move along
 // ----------------------------------------------------------------------------
+
+// TODO: ONLY for screen+
+.md-nav--primary {
+
+  // // WE'RE IN THE TOP LEVEL LIST
+  & > .md-nav__list {
+    > .md-nav__item > .md-nav__link {
+      display: none;
+    }
+    // the single nested entry that is active
+    > .md-nav__item--nested > .md-nav__toggle:checked ~ .md-nav__link {
+      display: block;
+      margin-top: 0;      // TODO: this really sucks... refactor into margin collapse if possible
+      padding-top: 1.2rem;  // TODO: first write gemini tests!
+      font-weight: 700;
+      cursor: text;
+      pointer-events: none;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    > .md-nav__item--nested > .md-nav__toggle:checked ~ .md-nav {
+      margin-left: -1.2rem;
+    }
+  }
+
+  // WE'RE IN THE SUB LIST
+  // TODO: SET THE ACTIVE ITEM
+  // LINK IS ALREADY ACTIVE, MAYBE CHANGE
+  // & > .md-nav__list {
+  //   > .md-nav__item {
+  //     display: none;
+  //   }
+  //
+  //   > .md-nav__item--active {
+  //     display: block;
+  //
+  //     // OVERRIDE EXPAND...
+  //     > .md-nav__link {
+  //       font-weight: 700;
+  //
+  //       &::after {
+  //         display: none;
+  //       }
+  //     }
+  //   }
+  // }
+  //     [data-md-tier="1"] > .md-nav__list > .md-nav__item {
+  //       padding-left: 0 !important;
+  //
+  //       // data-attribute for LEVEL
+  //       // data-md-level=0,1,2,3,4
+  //       // fix nested nav selectors in nav.scss (and toc!)
+  //     }
+}

src/assets/stylesheets/layout/_header.scss

@@ -40,7 +40,7 @@
 
   // Always show shadow, in case JavaScript is not available
   .no-js & {
-    @include z-depth(2);
+    @include z-depth(3);
   }
 
   // [screen +]: Show shadow depending on scroll offset
@@ -50,10 +50,6 @@
     // Show and animate shadow
     &[data-md-state="shadow"] {
       @include z-depth(3);
-
-      transition:
-        background-color 0.25s,
-        box-shadow 0.25s;
     }
   }
 

src/assets/stylesheets/layout/_nav.scss

@@ -66,7 +66,7 @@
 
   // List item
   &__item {
-    padding: 0.625em 1.2rem 0;
+    padding: 0 1.2rem;
 
     // Add bottom spacing to last item
     &:last-child {
@@ -98,6 +98,7 @@
   // Link inside item
   &__link {
     display: block;
+    margin-top: 0.625em;
     transition: color 0.125s;
     text-overflow: ellipsis;
     cursor: pointer;
@@ -289,6 +290,7 @@
       // Link inside item
       .md-nav__link {
         position: relative;
+        margin-top: 0;
         padding: 1.6rem;
 
         // Rotate icon
@@ -429,7 +431,8 @@
       display: none;
     }
 
-    // Link inside item
+    // Link inside item - ideally the link display method would be set to
+    // inline on screen, but this doesn't work with text ellipsis
     &__link {
 
       // Item contains a nested list

src/assets/stylesheets/layout/_tabs.scss

@@ -29,6 +29,7 @@
   width: 100%;
   background: $md-color-primary;
   overflow-x: scroll;
+  overflow-y: hidden;
 
   // [tablet -]: Hide tabs for tablet and below, as they don't make any sense
   @include break-to-device(tablet) {
@@ -40,7 +41,6 @@
     margin: 0;
     margin-left: 0.4rem;
     padding: 0;
-    transition: opacity   0.1s;
     list-style: none;
     white-space: nowrap;
   }
@@ -48,31 +48,41 @@
   // List item
   &__item {
     display: inline-block;
-  }
-
-  // Link inside item
-  &__link {
-    display: block;
+    height: 4.8rem;
     padding-right: 1.2rem;
     padding-left: 1.2rem;
+  }
+
+  // Link inside item - could be defined as block elements and aligned via
+  // line height, but this would imply more repaints when scrolling
+  &__link {
+    display: block;
+    margin-top: 1.6rem;
     transition:
       color 0.25s,
-      transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
+      transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
+      opacity 0.1s;
     color: $md-color-white--light;
     font-size: 1.4rem;
-    line-height: 4.8rem;
 
     // Active or hovered link
     &--active,
     &:hover {
       color: $md-color-white;
     }
+
+    // Delay transitions by a small amount
+    @for $i from 2 through 16 {
+      .md-tabs__item:nth-child(#{$i}) & {
+        transition-delay: 0.02s * ($i - 1);
+      }
+    }
   }
 
   // Hide tabs upon scrolling - disable transition to minimizes repaints whilte
   // scrolling down, while scrolling up seems to be okay
   &[data-md-state="hidden"] .md-tabs__link {
-    transform: translateY(10%);
+    transform: translateY(50%);
     transition: none;
     opacity: 0;
   }

src/base.html

@@ -52,7 +52,7 @@
             href="{{ base_url }}/{{ config.site_favicon }}">
       {% else %}
         <link rel="shortcut icon"
-            href="{{ base_url }}/assets/images/favicon.ico">
+            href="{{ base_url }}/assets/images/favicon.png">
       {% endif %}
 
       <!-- Generator banner -->
@@ -61,10 +61,8 @@
 
     <!-- Block: site title -->
     {% block htmltitle %}
-      {% if page.title %}
+      {% if page.title and not page.is_homepage %}
         <title>{{ page.title }} - {{ config.site_name }}</title>
-      {% elif config.site_description %}
-        <title>{{ config.site_name }} - {{ config.site_description }}</title>
       {% else %}
         <title>{{ config.site_name }}</title>
       {% endif %}

src/partials/nav-item.html

@@ -37,9 +37,10 @@
     <label class="md-nav__link" for="{{ path }}">
       {{ nav_item.title }}
     </label>
-    <nav class="md-nav" data-md-component="collapsible">
+    <nav class="md-nav" data-md-component="collapsible"
+        data-md-level="{{ level }}">
       <label class="md-nav__title" for="{{ path }}">
-        {{ nav_item.title}}
+        {{ nav_item.title }}
       </label>
       <ul class="md-nav__list" data-md-scrollfix>
 
@@ -47,6 +48,7 @@
         {% set base = path %}
         {% for nav_item in nav_item.children %}
           {% set path = base + "-" + loop.index | string %}
+          {% set level = level + 1 %}
           {% include "partials/nav-item.html"  %}
         {% endfor %}
       </ul>

src/partials/nav.html

@@ -21,7 +21,7 @@
 -->
 
 <!-- Main navigation -->
-<nav class="md-nav md-nav--primary">
+<nav class="md-nav md-nav--primary" data-md-level="0">
   <label class="md-nav__title md-nav__title--site" for="drawer">
     <i class="
           {% if config.extra.logo %}
@@ -43,6 +43,7 @@
   <ul class="md-nav__list" data-md-scrollfix>
     {% for nav_item in nav %}
       {% set path = "nav-" + loop.index | string %}
+      {% set level = 1 %}
       {% include "partials/nav-item.html" %}
     {% endfor %}
   </ul>

src/partials/tabs-item.html

@@ -20,21 +20,21 @@
   IN THE SOFTWARE.
 -->
 
-<!-- Tab item -->
-<li class="md-tabs__item">
+<!-- Main navigation item with nested items -->
+{% if nav_item.children and nav_item.children | length > 0 %}
+  <li class="md-tabs__item">
+    <a href="{{ nav_item.children[0].url }}" title="{{ nav_item.title }}"
+        class="md-tabs__link
+          {% if nav_item.active %}
+            md-tabs__link--active
+          {% endif %}">
+      {{ nav_item.title }}
+    </a>
+  </li>
 
-  <!-- Main navigation item with nested items -->
-  {% if nav_item.children and nav_item.children | length > 0 %}
-  <a href="{{ nav_item.children[0].url }}" title="{{ nav_item.title }}"
-      class="md-tabs__link
-        {% if nav_item.active %}
-          md-tabs__link--active
-        {% endif %}">
-    {{ nav_item.title }}
-  </a>
-
-  <!-- Home page -->
-  {% elif nav_item.url == base_url %}
+<!-- Home page -->
+{% elif nav_item.url == base_url %}
+  <li class="md-tabs__item">
 
     <!--
       Hack: the item should be active, if we're sure that we're on the first
@@ -43,7 +43,6 @@
     <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
         class="md-tabs__link
           {% for nav_item_ in nav %}
-          {{nav_item_.children | length}}
             {% if nav_item_.url == page.url and
                   nav_item_.children | length == 0 %}
               md-tabs__link--active
@@ -51,5 +50,5 @@
           {% endfor %}">
       {{ nav_item.title }}
     </a>
-  {% endif %}
-</li>
+  </li>
+{% endif %}