Fix some formatting issues and get rid of some dead stuff.

_docs/reference/contribute/editing.md

@@ -13,4 +13,4 @@ Click the button below to visit the GitHub repository for this whole web site. Y
 create a copy of our site in your GitHub account called a _fork_. Make any changes you want in your fork, and when you
 are ready to send those changes to us, go to the index page for your fork and click **New Pull Request** to let us know about it.
 
-<a class="btn btn-grpc waves-effect waves-light" href="https://github.com/istio/istio.github.io/">Browse this site's source code</a>
+<a class="btn btn-istio" href="https://github.com/istio/istio.github.io/">Browse this site's source code</a>

_layouts/base.html

@@ -1,5 +1,5 @@
 ---
-layout: compress
+#layout: compress
 ---
 {% include home.html %}
 
@@ -20,7 +20,12 @@ layout: compress
     <meta name="description" content="{{page.overview}}">
     <meta name="og:description" content="{{page.overview}}">
     {% endif %}
+
+    {% if page.title == 'Istio' %}
+    <title>Istio</title>
+    {% else %}
     <title>Istio / {{ page.title }}</title>
+    {% endif %}
 
     <!-- Webfont -->
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
@@ -74,7 +79,6 @@ layout: compress
     <script src="{{home}}/js/jquery.visible.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
     <script src="{{home}}/js/common.js" type="text/javascript" charset="utf-8"></script>
-    <script src="{{home}}/js/waves.js"></script>
     <script src="{{home}}/js/buttons.js"></script>
     <script src="{{home}}/js/search.js"></script>
     <script src="{{home}}/js/fixMarkdownImages.js"></script>

_layouts/landing.html

@@ -24,7 +24,7 @@ layout: base
 			<div class="col-sm-9 text-center nofloat center-block">
 				<h2 class="doc-call-title">Want to learn more?</h2>
 				<p class="doc-call-text"> Get started by learning Istio concepts and doing our BookInfo sample.</p>
-				<a href="{{home}}/docs"><button class="btn btn-grpc waves-effect waves-light btn-doc-call">GET STARTED</button></a>
+				<a href="{{home}}/docs"><button class="btn btn-istio btn-doc-call">GET STARTED</button></a>
 			</div>
 		</div>
 	</div>

_sass/modules/_buttons.scss

@@ -4,8 +4,7 @@
     outline: 0 !important;
   }
 
-  // GRPC Specific Buttons
+  &.btn-istio {
-  &.btn-grpc {
     background-color: $secondBrandColor;
     color: $white;
     font-weight: 300;
@@ -28,24 +27,7 @@
       padding: 4px 27px;
     }
 
-    // Landing Page Language Select Button
+    &.btn-istio:hover {
-    &.lang-select {
-      font-size: 14px;
-      font-weight: 500;
-      margin: 3px;
-      padding-left: 6px;
-      padding-right: 6px;
-      text-align: center;
-      text-transform: none;
-      width: 33%;
-
-      @media (min-width: $tablet) {
-        max-width: 160px;
-        margin: 10px;
-      }
-    }
-
-    &.btn-grpc:hover {
         background-color: $popBrandColor;
     }
 

css/community.scss

@@ -35,8 +35,4 @@ sitemap_exclude: y
     margin: 0px;
     padding-left: 30px;
   }
-
-  td {
-    width: 350px;
-  }
 }

js/waves.js

@@ -1,338 +0,0 @@
-/*!
- * Waves v0.6.4
- * http://fian.my.id/Waves
- *
- * Copyright 2014 Alfiana E. Sibuea and other contributors
- * Released under the MIT license
- * https://github.com/fians/Waves/blob/master/LICENSE
- */
-
-;(function(window) {
-    'use strict';
-
-    var Waves = Waves || {};
-    var $$ = document.querySelectorAll.bind(document);
-
-    // Find exact position of element
-    function isWindow(obj) {
-        return obj !== null && obj === obj.window;
-    }
-
-    function getWindow(elem) {
-        return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
-    }
-
-    function offset(elem) {
-        var docElem, win,
-            box = {top: 0, left: 0},
-            doc = elem && elem.ownerDocument;
-
-        docElem = doc.documentElement;
-
-        if (typeof elem.getBoundingClientRect !== typeof undefined) {
-            box = elem.getBoundingClientRect();
-        }
-        win = getWindow(doc);
-        return {
-            top: box.top + win.pageYOffset - docElem.clientTop,
-            left: box.left + win.pageXOffset - docElem.clientLeft
-        };
-    }
-
-    function convertStyle(obj) {
-        var style = '';
-
-        for (var a in obj) {
-            if (obj.hasOwnProperty(a)) {
-                style += (a + ':' + obj[a] + ';');
-            }
-        }
-
-        return style;
-    }
-
-    var Effect = {
-
-        // Effect delay
-        duration: 750,
-
-        show: function(e, element) {
-
-            // Disable right click
-            if (e.button === 2) {
-                return false;
-            }
-
-            var el = element || this;
-
-            // Create ripple
-            var ripple = document.createElement('div');
-            ripple.className = 'waves-ripple';
-            el.appendChild(ripple);
-
-            // Get click coordinate and element witdh
-            var pos         = offset(el);
-            var relativeY   = (e.pageY - pos.top);
-            var relativeX   = (e.pageX - pos.left);
-            var scale       = 'scale('+((el.clientWidth / 100) * 10)+')';
-
-            // Support for touch devices
-            if ('touches' in e) {
-              relativeY   = (e.touches[0].pageY - pos.top);
-              relativeX   = (e.touches[0].pageX - pos.left);
-            }
-
-            // Attach data to element
-            ripple.setAttribute('data-hold', Date.now());
-            ripple.setAttribute('data-scale', scale);
-            ripple.setAttribute('data-x', relativeX);
-            ripple.setAttribute('data-y', relativeY);
-
-            // Set ripple position
-            var rippleStyle = {
-                'top': relativeY+'px',
-                'left': relativeX+'px'
-            };
-
-            ripple.className = ripple.className + ' waves-notransition';
-            ripple.setAttribute('style', convertStyle(rippleStyle));
-            ripple.className = ripple.className.replace('waves-notransition', '');
-
-            // Scale the ripple
-            rippleStyle['-webkit-transform'] = scale;
-            rippleStyle['-moz-transform'] = scale;
-            rippleStyle['-ms-transform'] = scale;
-            rippleStyle['-o-transform'] = scale;
-            rippleStyle.transform = scale;
-            rippleStyle.opacity   = '1';
-
-            rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
-            rippleStyle['-moz-transition-duration']    = Effect.duration + 'ms';
-            rippleStyle['-o-transition-duration']      = Effect.duration + 'ms';
-            rippleStyle['transition-duration']         = Effect.duration + 'ms';
-
-            rippleStyle['-webkit-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
-            rippleStyle['-moz-transition-timing-function']    = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
-            rippleStyle['-o-transition-timing-function']      = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
-            rippleStyle['transition-timing-function']         = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
-
-            ripple.setAttribute('style', convertStyle(rippleStyle));
-        },
-
-        hide: function(e) {
-            TouchHandler.touchup(e);
-
-            var el = this;
-            var width = el.clientWidth * 1.4;
-
-            // Get first ripple
-            var ripple = null;
-            var ripples = el.getElementsByClassName('waves-ripple');
-            if (ripples.length > 0) {
-                ripple = ripples[ripples.length - 1];
-            } else {
-                return false;
-            }
-
-            var relativeX   = ripple.getAttribute('data-x');
-            var relativeY   = ripple.getAttribute('data-y');
-            var scale       = ripple.getAttribute('data-scale');
-
-            // Get delay beetween mousedown and mouse leave
-            var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
-            var delay = 350 - diff;
-
-            if (delay < 0) {
-                delay = 0;
-            }
-
-            // Fade out ripple after delay
-            setTimeout(function() {
-                var style = {
-                    'top': relativeY+'px',
-                    'left': relativeX+'px',
-                    'opacity': '0',
-
-                    // Duration
-                    '-webkit-transition-duration': Effect.duration + 'ms',
-                    '-moz-transition-duration': Effect.duration + 'ms',
-                    '-o-transition-duration': Effect.duration + 'ms',
-                    'transition-duration': Effect.duration + 'ms',
-                    '-webkit-transform': scale,
-                    '-moz-transform': scale,
-                    '-ms-transform': scale,
-                    '-o-transform': scale,
-                    'transform': scale,
-                };
-
-                ripple.setAttribute('style', convertStyle(style));
-
-                setTimeout(function() {
-                    try {
-                        el.removeChild(ripple);
-                    } catch(e) {
-                        return false;
-                    }
-                }, Effect.duration);
-            }, delay);
-        },
-
-        // Little hack to make <input> can perform waves effect
-        wrapInput: function(elements) {
-            for (var a = 0; a < elements.length; a++) {
-                var el = elements[a];
-
-                if (el.tagName.toLowerCase() === 'input') {
-                    var parent = el.parentNode;
-
-                    // If input already have parent just pass through
-                    if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) {
-                        continue;
-                    }
-
-                    // Put element class and style to the specified parent
-                    var wrapper = document.createElement('i');
-                    wrapper.className = el.className + ' waves-input-wrapper';
-
-                    var elementStyle = el.getAttribute('style');
-
-                    if (!elementStyle) {
-                        elementStyle = '';
-                    }
-
-                    wrapper.setAttribute('style', elementStyle);
-
-                    el.className = 'waves-button-input';
-                    el.removeAttribute('style');
-
-                    // Put element as child
-                    parent.replaceChild(wrapper, el);
-                    wrapper.appendChild(el);
-                }
-            }
-        }
-    };
-
-
-    /**
-     * Disable mousedown event for 500ms during and after touch
-     */
-    var TouchHandler = {
-        /* uses an integer rather than bool so there's no issues with
-         * needing to clear timeouts if another touch event occurred
-         * within the 500ms. Cannot mouseup between touchstart and
-         * touchend, nor in the 500ms after touchend. */
-        touches: 0,
-        allowEvent: function(e) {
-            var allow = true;
-
-            if (e.type === 'touchstart') {
-                TouchHandler.touches += 1; //push
-            } else if (e.type === 'touchend' || e.type === 'touchcancel') {
-                setTimeout(function() {
-                    if (TouchHandler.touches > 0) {
-                        TouchHandler.touches -= 1; //pop after 500ms
-                    }
-                }, 500);
-            } else if (e.type === 'mousedown' && TouchHandler.touches > 0) {
-                allow = false;
-            }
-
-            return allow;
-        },
-        touchup: function(e) {
-            TouchHandler.allowEvent(e);
-        }
-    };
-
-
-    /**
-     * Delegated click handler for .waves-effect element.
-     * returns null when .waves-effect element not in "click tree"
-     */
-    function getWavesEffectElement(e) {
-        if (TouchHandler.allowEvent(e) === false) {
-            return null;
-        }
-
-        var element = null;
-        var target = e.target || e.srcElement;
-
-        while (target.parentElement !== null) {
-            if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
-                element = target;
-                break;
-            } else if (target.classList.contains('waves-effect')) {
-                element = target;
-                break;
-            }
-            target = target.parentElement;
-        }
-
-        return element;
-    }
-
-    /**
-     * Bubble the click and show effect if .waves-effect elem was found
-     */
-    function showEffect(e) {
-        var element = getWavesEffectElement(e);
-
-        if (element !== null) {
-            Effect.show(e, element);
-
-            if ('ontouchstart' in window) {
-                element.addEventListener('touchend', Effect.hide, false);
-                element.addEventListener('touchcancel', Effect.hide, false);
-            }
-
-            element.addEventListener('mouseup', Effect.hide, false);
-            element.addEventListener('mouseleave', Effect.hide, false);
-        }
-    }
-
-    Waves.displayEffect = function(options) {
-        options = options || {};
-
-        if ('duration' in options) {
-            Effect.duration = options.duration;
-        }
-
-        //Wrap input inside <i> tag
-        Effect.wrapInput($$('.waves-effect'));
-
-        if ('ontouchstart' in window) {
-            document.body.addEventListener('touchstart', showEffect, false);
-        }
-
-        document.body.addEventListener('mousedown', showEffect, false);
-    };
-
-    /**
-     * Attach Waves to an input element (or any element which doesn't
-     * bubble mouseup/mousedown events).
-     *   Intended to be used with dynamically loaded forms/inputs, or
-     * where the user doesn't want a delegated click handler.
-     */
-    Waves.attach = function(element) {
-        //FUTURE: automatically add waves classes and allow users
-        // to specify them with an options param? Eg. light/classic/button
-        if (element.tagName.toLowerCase() === 'input') {
-            Effect.wrapInput([element]);
-            element = element.parentElement;
-        }
-
-        if ('ontouchstart' in window) {
-            element.addEventListener('touchstart', showEffect, false);
-        }
-
-        element.addEventListener('mousedown', showEffect, false);
-    };
-
-    window.Waves = Waves;
-
-    document.addEventListener('DOMContentLoaded', function() {
-        Waves.displayEffect();
-    }, false);
-
-})(window);

true-index.html

@@ -1,6 +1,6 @@
 ---
 layout: landing
-title: istio.io
+title: Istio
 ---
 {% include home.html %}
 
@@ -10,7 +10,7 @@ title: istio.io
             <h3 class="col-sm-7 landing-row-title">Rich Layer-7 Routing & Traffic Management</h3>
             <p class="col-sm-7">Control the flow of traffic and API calls between services using dynamic route configuration.</p>
             <div class="col-sm-7">
-                <a href="{{home}}/docs/concepts/what-is-istio/architecture.html"><button class="btn btn-grpc waves-effect waves-light btn-read-more">READ MORE</button></a>
+                <a href="{{home}}/docs/concepts/what-is-istio/architecture.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
             </div>
             <img class="col-sm-5 nofloat landing-image" src="{{home}}/img/routing.svg" alt="Traffic Management">
         </div>
@@ -22,7 +22,7 @@ title: istio.io
             <h3 class="col-sm-7 landing-row-title">Resilience across languages and platforms</h3>
             <p class="col-sm-7">Increase reliability by shielding applications from flaky networks and cascading failures in adverse conditions.</p>
             <div class="col-sm-7">
-                <a href="{{home}}/about"><button class="btn btn-grpc waves-effect waves-light btn-read-more">READ MORE</button></a>
+                <a href="{{home}}/about"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
             </div>
         </div>
     </div>
@@ -32,7 +32,7 @@ title: istio.io
             <h3 class="col-sm-7 landing-row-title">Fleet-wide Policy Enforcement</h3>
             <p class="col-sm-7">Apply organizational policy to the interaction between services, ensure access policies are enforced and resources are fairly distributed among consumers.</p>
             <div class="col-sm-7">
-                <a href="{{home}}/docs/concepts/policy-and-control/mixer.html"><button class="btn btn-grpc waves-effect waves-light btn-read-more">READ MORE</button></a>
+                <a href="{{home}}/docs/concepts/policy-and-control/mixer.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
             </div>
             <img class="col-sm-5 nofloat landing-image" src="{{home}}/img/policy.svg" alt="Policy Enforcement">
         </div>
@@ -44,10 +44,10 @@ title: istio.io
             <h3 class="col-sm-7 landing-row-title">In-depth Telemetry and Reporting</h3>
             <p class="col-sm-7">Understand the dependencies between services, the nature and flow of traffic between them and quickly identify issues with distributed tracing.</p>
             <div class="col-sm-7 col-sm-offset-5 col-sm-offset-0">
-                <a href="{{home}}/docs/concepts/what-is-istio/architecture.html"><button class="btn btn-grpc waves-effect waves-light btn-read-more">READ MORE</button></a>
+                <a href="{{home}}/docs/concepts/what-is-istio/architecture.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
             </div>
         </div>
     </div>
 
-    <button class="btn btn-floating waves-effect down-caret down-caret" data-target="doc-call"><div class="icon-caret"></div></button>
+    <button class="btn btn-floating down-caret down-caret" data-target="doc-call"><div class="icon-caret"></div></button>
 </div>