Added dynamic box shadow on header

material/base.html

@@ -45,7 +45,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-d970c8bd45.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-fe760eefaa.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
       {% endif %}
@@ -128,7 +128,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-62dc17fe98.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-adb933686d.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>

mkdocs.yml

@@ -36,6 +36,8 @@ theme_dir: material
 
 # Options
 extra:
+  feature:
+    tabs: true
   palette:
     primary: indigo
     accent: indigo

src/assets/javascripts/application.js

@@ -44,6 +44,22 @@ export default class Application {
    */
   initialize() {
 
+    // TODO: just a proof of concept
+    window.addEventListener("scroll", () => {
+
+      if (window.pageYOffset > 5) {
+        document.body.classList.add("bigger5")
+      } else {
+        document.body.classList.remove("bigger5")
+      }
+
+      if (window.pageYOffset > 48) {
+        document.body.classList.add("bigger48")
+      } else {
+        document.body.classList.remove("bigger48")
+      }
+    })
+
     /* Initialize Modernizr and FastClick */
     new Material.Event.Listener(document, "DOMContentLoaded", () => {
 

src/assets/stylesheets/_shame.scss

@@ -23,3 +23,21 @@
 // ----------------------------------------------------------------------------
 // Nothing to see here, move along
 // ----------------------------------------------------------------------------
+
+.md-tabs__list {
+  transition: opacity 0.1s;
+}
+
+.bigger5 {
+  .md-tabs__list {
+    opacity: 0;
+  }
+}
+
+.bigger48 {
+  .md-header {
+    @include z-depth(2);
+
+    transition: box-shadow 0.25s;
+  }
+}

src/assets/stylesheets/layout/_header.scss

@@ -26,7 +26,7 @@
 
 // Application header (stays always on top)
 .md-header {
-  @include z-depth(2);
+  // @include z-depth(2);
 
   position: fixed;
   top: 0;

src/assets/stylesheets/layout/_tabs.scss

@@ -1,7 +1,7 @@
 // TODO: proof of concept - needs refactor
 .md-tabs {
   width: 100%;
-  background: mix($md-color-primary, $md-color-black, 75%);
+  background: $md-color-primary; //mix($md-color-primary, $md-color-black, 75%);
   overflow: scroll;
 
   &__list {
@@ -37,7 +37,3 @@
     }
   }
 }
-
-.md-header {
-  box-shadow: none !important;
-}