Added support for tabs

material/base.html

@@ -32,7 +32,7 @@
       <script src="{{ base_url }}/assets/javascripts/modernizr-56ade86843.js"></script>
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-954a1bc95b.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-4ee152c883.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
       {% endif %}

material/partials/header.html

@@ -2,11 +2,14 @@
   <nav class="md-header-nav md-grid">
     <div class="md-flex">
       <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="{% if config.extra.logo %} md-logo {% else %} md-icon md-icon--home {% endif %} md-header-nav__button">
+        {% if config.extra.logo %}
-          {% if config.extra.logo %}
+          <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="md-logo md-header-nav__button">
             <img src="{{ base_url }}/{{ config.extra.logo }}" width="24" height="24">
-          {% endif %}
+          </a>
-        </a>
+        {% else %}
+          <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="md-icon md-icon--home md-header-nav__button">
+          </a>
+        {% endif %}
       </div>
       <div class="md-flex__cell md-flex__cell--shrink">
         <label class="md-icon md-icon--menu md-header-nav__button" for="drawer"></label>

material/partials/nav.html

@@ -1,10 +1,12 @@
 <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 %}
-      {% if config.extra.logo %}
+      <i class="md-logo md-nav__button">
         <img src="{{ base_url }}/{{ config.extra.logo }}">
-      {% endif %}
+      </i>
-    </i>
+    {% else %}
+      <i class="md-icon md-icon--home md-nav__button"></i>
+    {% endif %}
     {{ config.site_name }}
   </label>
   {% if config.repo_url %}

material/partials/tabs-item.html

@@ -1,12 +1,12 @@
-{% if nav_item.children and nav_item.children | length > 0 %}
+{% if nav_item.is_homepage %}
   <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 %}">
+    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-tabs__link {% for nav_item_ in nav %} {% if nav_item_.url == page.url %} md-tabs__link--active {% endif %} {% endfor %}">
       {{ nav_item.title }}
     </a>
   </li>
-{% elif nav_item.url == base_url %}
+{% elif nav_item.children and nav_item.children | length > 0 %}
   <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 %}">
+    <a href="{{ (nav_item.children | first).url }}" title="{{ nav_item.title }}" class="md-tabs__link {% if nav_item.active %} md-tabs__link--active {% endif %}">
       {{ nav_item.title }}
     </a>
   </li>

material/partials/tabs.html

@@ -1,4 +1,4 @@
-<nav class="md-tabs" data-md-component="tabs">
+<nav class="md-tabs {% if page.ancestors | length > 0 %} md-tabs--active {% endif %}" data-md-component="tabs">
   <div class="md-tabs__inner md-grid">
     <ul class="md-tabs__list">
       {% for nav_item in nav %}

src/assets/stylesheets/_shame.scss

@@ -23,60 +23,3 @@
 // ----------------------------------------------------------------------------
 // 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/_tabs.scss

@@ -27,9 +27,9 @@
 // Tabs with outline
 .md-tabs {
   width: 100%;
-  background: $md-color-primary;
+  transition: background 0.25s;
-  overflow-x: scroll;
+  background: mix($md-color-primary, $md-color-black, 75%);
-  overflow-y: hidden;
+  overflow: auto;
 
   // [tablet -]: Hide tabs for tablet and below, as they don't make any sense
   @include break-to-device(tablet) {
@@ -81,9 +81,72 @@
 
   // 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 {
+  &[data-md-state="hidden"] {
-    transform: translateY(50%);
+    background: $md-color-primary;
-    transition: none;
+
-    opacity: 0;
+    .md-tabs__link {
+      transform: translateY(50%);
+      transition:
+        color 0.25s,
+        transform 0s 0.4s,
+        opacity 0.1s;
+      opacity: 0;
+    }
+  }
+
+  // [screen +]: Adjust main navigation styles
+  @include break-from-device(screen) {
+
+    // Hide 1st level nested items, as they are listed in the tabs by setting
+    // font-size to zero, as we need to preserve bottom padding
+    ~ .md-main .md-nav--primary > .md-nav__list > .md-nav__item--nested {
+      font-size: 0;
+    }
+
+    // We're on the 2nd+ level
+    &--active ~ .md-main {
+
+      // Adjust 1st level styles
+      .md-nav--primary {
+
+        // Hide site title
+        .md-nav__title--site {
+          display: none;
+        }
+
+        // Hide 1st level normal items
+        & > .md-nav__list > .md-nav__item {
+          font-size: 0;
+
+          // Show 1st level nested items and induce margin collapse
+          &--nested {
+            font-size: 1.4rem;
+            overflow: auto;
+
+            // Render link same as main navigation title
+            > .md-nav__link {
+              margin-top: 1.2rem;
+              font-weight: 700;
+              pointer-events: none;
+
+              // Hide icon for expansion
+              &::after {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+
+      // Always expand nested navigation on 2nd level
+      .md-nav[data-md-level="1"] {
+        max-height: initial;
+
+        // Remove left spacing on 2nd level items
+        > .md-nav__list > .md-nav__item {
+          padding-left: 0;
+        }
+      }
+    }
   }
 }

src/partials/header.html

@@ -29,18 +29,17 @@
 
       <!-- Link to home -->
       <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}"
+        {% if config.extra.logo %}
-            class="
+          <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}"
-              {% if config.extra.logo %}
+              class="md-logo md-header-nav__button">
-                md-logo
-              {% else %}
-                md-icon md-icon--home
-              {% endif %} md-header-nav__button">
-          {% if config.extra.logo %}
             <img src="{{ base_url }}/{{ config.extra.logo }}"
                 width="24" height="24" />
-          {% endif %}
+          </a>
-        </a>
+        {% else %}
+          <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}"
+              class="md-icon md-icon--home md-header-nav__button">
+          </a>
+        {% endif %}
       </div>
 
       <!-- Button to toggle drawer -->

src/partials/nav.html

@@ -23,16 +23,13 @@
 <!-- Main navigation -->
 <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 %}
-          {% if config.extra.logo %}
+      <i class="md-logo md-nav__button">
-            md-logo
-          {% else %}
-            md-icon md-icon--home
-          {% endif %} md-nav__button">
-      {% if config.extra.logo %}
         <img src="{{ base_url }}/{{ config.extra.logo }}" />
-      {% endif %}
+      </i>
-    </i>
+    {% else %}
+      <i class="md-icon md-icon--home md-nav__button"></i>
+    {% endif %}
     {{ config.site_name }}
   </label>
   {% if config.repo_url %}

src/partials/tabs-item.html

@@ -20,35 +20,29 @@
   IN THE SOFTWARE.
 -->
 
-<!-- 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>
-
 <!-- Home page -->
-{% elif nav_item.url == base_url %}
+{% if nav_item.is_homepage %}
   <li class="md-tabs__item">
-
-    <!--
-      Hack: the item should be active, if we're sure that we're on the first
-      level of the tree and the current item doesn't have children
-    -->
     <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
+            {% if nav_item_.url == page.url %}
-                  nav_item_.children | length == 0 %}
               md-tabs__link--active
             {% endif %}
           {% endfor %}">
       {{ nav_item.title }}
     </a>
   </li>
+
+<!-- Main navigation item with nested items -->
+{% elif nav_item.children and nav_item.children | length > 0 %}
+  <li class="md-tabs__item">
+    <a href="{{ (nav_item.children | first).url }}"
+        title="{{ nav_item.title }}" class="md-tabs__link
+          {% if nav_item.active %}
+            md-tabs__link--active
+          {% endif %}">
+      {{ nav_item.title }}
+    </a>
+  </li>
 {% endif %}

src/partials/tabs.html

@@ -20,8 +20,12 @@
   IN THE SOFTWARE.
 -->
 
-<!-- Tabs with outline -->
+<!-- Tabs with outline (level denotes the active level) -->
-<nav class="md-tabs" data-md-component="tabs">
+<nav class="md-tabs
+      {% if page.ancestors | length > 0 %}
+        md-tabs--active
+      {% endif %}"
+    data-md-component="tabs">
   <div class="md-tabs__inner md-grid">
     <ul class="md-tabs__list">
       {% for nav_item in nav %}