Show WIP banner in production

docs/_assets/main.css

@@ -759,3 +759,18 @@ code[class*=language-], pre[class*=language-] {
     background-position: center center, center center;
   }
 }
+
+.docs-wip-banner {
+  position: fixed;
+  z-index: 999;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #B71C1C;
+  color: white;
+  font-size: 12px;
+  padding: 16px 40px;
+}
+.docs-banner em {
+  font-style: italic;
+}

docs/_assets/main.js

@@ -1,11 +1,13 @@
 (function() {
+  'use strict';
+
   var rightScroll = document.querySelector('.scrollindicator.scrollindicator--right');
   var leftScroll = document.querySelector('.scrollindicator.scrollindicator--left');
   var menuBar = document.querySelector('.docs-navigation');
   var delta = 40;
 
   function scrollMenuBar(delta) {
-      menuBar.scrollLeft += delta;
+    menuBar.scrollLeft += delta;
   }
 
   rightScroll.addEventListener('click', scrollMenuBar.bind(null, delta));
@@ -13,3 +15,16 @@
   leftScroll.addEventListener('click', scrollMenuBar.bind(null, -delta));
   leftScroll.addEventListener('tap', scrollMenuBar.bind(null, -delta));
 })();
+
+(function() {
+  'use strict';
+
+  var banner = document.querySelector('.docs-wip-banner');
+  if ((location.hostname !== 'localhost') &&
+      (location.hostname !== 'storage.googleapis.com')) {
+    banner.style.display = 'block';
+  }
+  if (location.search.indexOf('showbanner') !== -1) {
+    banner.style.display = 'block';
+  }
+})();

docs/_templates/layout.html

@@ -104,6 +104,9 @@
       </footer>
     </main>
   </div>
+  <div class="docs-wip-banner" style="display: none;">
+    This is a <em>preview</em> of Material Design Lite. It is still very much work-in-progress. We are launching soon!
+  </div>