Added possibility to add tabs

material/base.html

@@ -31,7 +31,7 @@
       {% endif %}
     {% endblock %}
     {% block libs %}
-      <script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/modernizr-facb31f4a3.js"></script>
     {% endblock %}
     {% block fonts %}
       {% if config.extra.font != "none" %}
@@ -82,6 +82,10 @@
       {% include "partials/header.html" %}
     {% endblock %}
     <div class="md-container">
+      {% set feature = config.extra.get("feature", {}) %}
+      {% if feature.tabs %}
+        {% include "partials/tabs.html" %}
+      {% endif %}
       <main class="md-main">
         <div class="md-main__inner md-grid" data-md-component="container">
           {% block site_nav %}

material/partials/tabs-item.html

@@ -0,0 +1,11 @@
+<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>
+  {% else %}
+    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-tabs__link {% if nav_item.active %} md-tabs__link--active {% endif %}">
+      {{ nav_item.title }}
+    </a>
+  {% endif %}
+</li>

material/partials/tabs.html

@@ -0,0 +1,9 @@
+<nav class="md-tabs">
+  <div class="md-tabs__inner md-grid">
+    <ul class="md-tabs__list">
+      {% for nav_item in nav %}
+        {% include "partials/tabs-item.html" %}
+      {% endfor %}
+    </ul>
+  </div>
+</nav>

scripts/lint

@@ -28,7 +28,7 @@ if [[ ! -d `npm bin` ]]; then
 fi
 
 # Run ESLint
-`npm bin`/eslint .
+`npm bin`/eslint --max-warnings 0 .
 ESLINT=$?
 
 # Run Stylelint

src/assets/stylesheets/layout/_tabs.scss

@@ -0,0 +1,43 @@
+// TODO: proof of concept - needs refactor
+.md-tabs {
+  width: 100%;
+  background: mix($md-color-primary, $md-color-black, 75%);
+  overflow: scroll;
+
+  &__list {
+    margin: 0;
+    margin-left: 6rem;
+    padding: 0;
+    list-style: none;
+    white-space: nowrap;
+  }
+
+  &__item {
+    display: inline-block;
+
+    // text-transform: uppercase;
+  }
+
+  &__link {
+    display: block;
+    padding-right: 1.2rem;
+    padding-left: 1.2rem;
+    transition: color 0.25s;
+    color: $md-color-white--light;
+    font-size: 1.4rem;      // TODO: somehow centralize
+    line-height: 4.8rem;
+
+    &--active,
+    &:hover {
+      color: $md-color-white;
+    }
+
+    &--active {
+      box-shadow: 0 -0.2rem 0 mix($md-color-accent, $md-color-white, 25) inset;
+    }
+  }
+}
+
+.md-header {
+  box-shadow: none !important;
+}

src/base.html

@@ -170,6 +170,10 @@
 
     <!-- Container, necessary for web-application context -->
     <div class="md-container">
+      {% set feature = config.extra.get("feature", {}) %}
+      {% if feature.tabs %}
+        {% include "partials/tabs.html" %}
+      {% endif %}
 
       <!-- Main container -->
       <main class="md-main">

src/partials/tabs-item.html

@@ -0,0 +1,46 @@
+<!--
+  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.
+-->
+
+<!-- Tab item -->
+<li class="md-tabs__item">
+
+  <!-- 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>
+
+  <!-- Main navigation item -->
+  {% else %}
+    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
+        class="md-tabs__link
+          {% if nav_item.active %}
+            md-tabs__link--active
+          {% endif %}">
+      {{ nav_item.title }}
+    </a>
+  {% endif %}
+</li>

src/partials/tabs.html

@@ -0,0 +1,32 @@
+<!--
+  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.
+-->
+
+<!-- Tabs with outline -->
+<nav class="md-tabs">
+  <div class="md-tabs__inner md-grid">
+    <ul class="md-tabs__list">
+      {% for nav_item in nav %}
+        {% include "partials/tabs-item.html" %}
+      {% endfor %}
+    </ul>
+  </div>
+</nav>