Added support for hero text

src/assets/javascripts/application.js

@@ -212,12 +212,12 @@ function initialize(config) { // eslint-disable-line func-style
   }).listen()
 
   /* Component: header shadow toggle */
-  new Material.Event.MatchMedia("(min-width: 1220px)",
-    new Material.Event.Listener(window, [
-      "scroll", "resize", "orientationchange"
-    ], new Material.Header.Shadow(
-      "[data-md-component=container]",
-      "[data-md-component=header]")))
+  new Material.Event.Listener(window, [
+    "scroll", "resize", "orientationchange"
+  ], new Material.Header.Shadow(
+    "[data-md-component=container]",
+    "[data-md-component=header]")
+  ).listen()
 
   /* Component: header title toggle */
   new Material.Event.Listener(window, [
@@ -227,6 +227,12 @@ function initialize(config) { // eslint-disable-line func-style
     ".md-typeset h1")
   ).listen()
 
+  /* Component: hero visibility toggle */
+  if (document.querySelector("[data-md-component=hero]"))
+    new Material.Event.Listener(window, [
+      "scroll", "resize", "orientationchange"
+    ], new Material.Tabs.Toggle("[data-md-component=hero]")).listen()
+
   /* Component: tabs visibility toggle */
   if (document.querySelector("[data-md-component=tabs]"))
     new Material.Event.Listener(window, [

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

@@ -76,11 +76,18 @@ export default class Shadow {
 
   /**
    * Update shadow state
+   *
+   * @param {Event} ev - Event
    */
-  update() {
-    const active = window.pageYOffset >= this.height_
-    if (active !== this.active_)
-      this.header_.dataset.mdState = (this.active_ = active) ? "shadow" : ""
+  update(ev) {
+    if (ev && (ev.type === "resize" || ev.type === "orientationchange")) {
+      this.height_ = 0
+      this.setup()
+    } else {
+      const active = window.pageYOffset >= this.height_
+      if (active !== this.active_)
+        this.header_.dataset.mdState = (this.active_ = active) ? "shadow" : ""
+    }
   }
 
   /**

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

@@ -78,7 +78,7 @@ export default class Title {
       this.el_.dataset.mdState = (this.active_ = active) ? "active" : ""
 
     /* Hack: induce ellipsis on topics */
-    if (ev.type === "resize") {
+    if (ev.type === "resize" || ev.type === "orientationchange") {
       Array.prototype.forEach.call(this.el_.children, node => {
         node.style.width = `${this.el_.offsetWidth - 20}px`
       })

src/assets/javascripts/components/Material/Tabs/Toggle.js

@@ -46,7 +46,6 @@ export default class Toggle {
     this.el_ = ref
 
     /* Initialize offset and state */
-    this.offset_ = 5
     this.active_ = false
   }
 
@@ -54,7 +53,8 @@ export default class Toggle {
    * Update visibility
    */
   update() {
-    const active = window.pageYOffset >= this.offset_
+    const active = window.pageYOffset >=
+      this.el_.children[0].offsetTop + (5 - 48)                                 // TODO: quick hack to enable same handling for hero
     if (active !== this.active_)
       this.el_.dataset.mdState = (this.active_ = active) ? "hidden" : ""
   }