Updated artwork for home page + cleaned up logo + new logo label font (#757)

_docs/index.md

@@ -12,8 +12,7 @@ type: markdown
 
 # Welcome to Istio
 
-Welcome to Istio's latest documentation home page. From here you can learn all about Istio by following
+From here you can learn all about Istio's architecture and how to deploy and use Istio.
-the links below:
 
 - [Concepts]({{home}}/docs/concepts/). Concepts explain some significant aspect of Istio. This
 is where you can learn about what Istio does and how it does it.

_faq/mixer/why-mixer.md

@@ -1,6 +1,6 @@
 ---
 title: Why does Istio need Mixer?
-order: 135
+order: 0
 type: markdown
 ---
 {% include home.html %}

_includes/footer.html

@@ -1,14 +1,11 @@
 <footer>
     <div class="container">
         <div class="row">
-            <div class="col-md-2"></div>
+            <div class="col-lg-2 col-md-2 col-sm-2"></div>
-
-            <div class="col-md-3 col-sm-4 col-xs-12 center-block">
-                <div class="header">
-                    <a href="{{home}}/docs">Docs</a>
-                </div>
 
+            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 center-block">
                 <ul>
+                    <li><a class="header" href="{{home}}/docs">Docs</a></li>
 		            <li><a href="{{home}}/docs/concepts">Concepts</a></li>
                     <li><a href="{{home}}/docs/setup">Setup</a></li>
                     <li><a href="{{home}}/docs/tasks">Tasks</a></li>
@@ -17,12 +14,9 @@
                 </ul>
             </div>
 
-            <div class="col-md-3 col-sm-4 col-xs-12 center-block">
+            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 center-block">
-                <div class="header">
-                  <a href="{{home}}/help">Help</a>
-                </div>
-
                 <ul>
+                    <li><a class="header" href="{{home}}/help">Help</a></li>
                     <li><a href="{{home}}/faq">FAQ</a></li>
                     <li><a href="{{home}}/glossary">Glossary</a></li>
                     <li><a href="{{home}}/troubleshooting">Troubleshooting</a></li>
@@ -32,24 +26,23 @@
                 </ul>
             </div>
 
-            <div class="col-md-3 col-sm-4 col-xs-12 center-block">
+            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 center-block">
-                <div class="header">
-                  <a href="{{home}}/community">Community</a>
-                </div>
-
                 <ul>
                     <li>
-                        <a href="https://groups.google.com/forum/#!forum/istio-users" target="_blank" rel="noopener"><span class="list">User</span></a> |
+                        <a class="header" href="{{home}}/community">Community</a>
+                    </li>
+                    <li>
+                        <a href="https://groups.google.com/forum/#!forum/istio-users" target="_blank" rel="noopener">User</a> |
                         <a href="https://groups.google.com/forum/#!forum/istio-dev" target="_blank" rel="noopener">Dev Mailing Lists</a>
                     </li>
-                    <li><a href="https://twitter.com/IstioMesh" target="_blank" rel="noopener"><span class="twitter">Twitter</span></a></li>
+                    <li><a href="https://twitter.com/IstioMesh" target="_blank" rel="noopener">Twitter</a></li>
-                    <li><a href="https://stackoverflow.com/questions/tagged/istio" target="_blank" rel="noopener"><span class="stack-overflow">Stack Overflow</span></a></li>
+                    <li><a href="https://stackoverflow.com/questions/tagged/istio" target="_blank" rel="noopener">Stack Overflow</a></li>
-                    <li><a href="https://github.com/istio/community" target="_blank" rel="noopener"><span class="github">GitHub</span></a></li>
+                    <li><a href="https://github.com/istio/community" target="_blank" rel="noopener">GitHub</a></li>
-                    <li><a href="https://github.com/istio/community/blob/master/WORKING-GROUPS.md" target="_blank" rel="noopener"><span class="group">Working Groups</span></a></li>
+                    <li><a href="https://github.com/istio/community/blob/master/WORKING-GROUPS.md" target="_blank" rel="noopener">Working Groups</a></li>
                 </ul>
             </div>
 
-            <div class="col-md-1"></div>
+            <div class="col-lg-1 col-md-1 col-sm-1"></div>
         </div>
 
         <div class="row">

_includes/nav.html

@@ -23,8 +23,7 @@
             </button>
             <a class="navbar-brand" href="{{home}}/">
               <div>
-                <img src="{{home}}/img/logo.png" alt="Istio" width="36px" height="54px"/>
+                <img src="{{home}}/img/istio-logo-and-name-horizontal.svg" alt="Istio Logo and Name" height="54px"/>
-                <span class="brand-name">Istio</span>
               </div>
             </a>
           </div>

_includes/search-box.html

@@ -4,7 +4,7 @@
 	<input type="hidden" name="hl" value="en" />
 	<div class="form-group">
 		<div class="input-group">
-			<input name="q" class="form-control" type="text" size="30" />
+			<input name="q" class="form-control search-box" type="text" size="30" />
 			<div class="input-group-addon">
 				<span class="btn-search glyphicon glyphicon-search"></span>
 			</div>

_layouts/base.html

@@ -40,7 +40,7 @@ layout: compress
     <!-- RSS -->
     <link rel="alternate" type="application/rss+xml" title="Istio Blog RSS" href="{{home}}/feed.xml">
 
-    <!-- Favicons: generated from img/istio-logo.svg by http://cthedot.de/icongen -->
+    <!-- Favicons: generated from img/istio-logo-social.svg by http://cthedot.de/icongen -->
     <link rel="shortcut icon" href="{{home}}/favicons/favicon.ico" >
     <link rel="apple-touch-icon" href="{{home}}/favicons/apple-touch-icon-180x180.png" sizes="180x180">
     <link rel="icon" type="image/png" href="{{home}}/favicons/favicon-16x16.png" sizes="16x16">
@@ -84,7 +84,6 @@ layout: compress
 
     <!-- our own scripts -->
     <script src="{{home}}/js/common.min.js"></script>
-    <script src="{{home}}/js/buttons.min.js"></script>
     <script src="{{home}}/js/search.min.js"></script>
     <script src="{{home}}/js/prism.min.js"></script>
   </body>

_layouts/help.html

@@ -5,7 +5,7 @@ layout: default
 
 <div class="container help">
   <div class="row">
-    <div class="col-sm-12 col-md-10 col-lg-10 nofloat center-block {{page.type}}">
+    <div class="col-sm-12 col-md-10 col-lg-7 nofloat center-block {{page.type}}">
       {{content}}
     </div>
   </div>

_sass/base/_common.scss

@@ -83,5 +83,5 @@ th {
 }
 
 html {
-    background-color: $mainBrandColor;
+  background-image: linear-gradient(to right, $mainBrandColor, $secondBrandColor);
 }

_sass/layouts/_landing.scss

@@ -1,23 +1,45 @@
 .landing {
 
+  .hero {
+    position: relative;
+    text-align: center;
+  }
+
+  .jumbotron {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+
   /* base styles and > 770px height */
   .nav-hero-container {
+    *[id]:before {
+      display: block;
+      content: " ";
+      margin-top: -1em;
+      height: 1em;
+      visibility: hidden;
+    }
+
+    background: $mainBrandColor linear-gradient(to right, $mainBrandColor, $secondBrandColor) no-repeat center/cover;
+    z-index: 9010;
+    position: relative;
     color: white;
 
-    .hero-title {
-      color: white;
-      margin: 80px 0 0 0;
-      padding: 0;
-    }
     .hero-logo {
-      height: 180px;
+      height: 170px;
-      margin: 98px 0 0 0;
+      margin: 78px 0 0 0;
       padding: 0;
     }
+
     .hero-lead {
-      margin: 102px 0 0 0;
+      color: $white;
+      display: block;
+      font-size: 18px;
+      font-weight: 300;
+      margin: 82px 0 0 0;
       padding: 0px;
     }
+
     .hero-down-arrow {
       display: inline-block;
       margin: 60px 0 20px 0;
@@ -29,9 +51,6 @@
   /* < 550px height */
   @media (max-height: 550px){
     .nav-hero-container {
-      .hero-title {
-        margin: 30px 0 0 0;
-      }
       .hero-logo {
         margin: 28px 0 0 0;
       }
@@ -44,71 +63,25 @@
     }
   }
 
-  /* 550 - 770px height */
-  @media (min-height: 550px) and (max-height: 770px) {
-    .hero {
-      height: calc(100vh - 70px);
-
-      .container {
-        height: 100%;
-        position: relative;
-        margin: 0;
-        padding: 0;
-        width: 100%;
-      }
-    }
-
-    .nav-hero-container {
-      height: calc(100vh - 70px);
-      min-height: 600px;
-
-      .hero-title {
-        position: absolute;
-        top: calc(10% - 70px);
-        transform: translate(0, -50%);
-        text-align: center;
-        width: 100%;
-      }
-      .hero-logo {
-        position: absolute;
-        left: 50%;
-        top: calc(55% - 70px);
-        transform: translate(-50%, -50%);
-        margin:0;
-      }
-      .hero-lead {
-        position: absolute;
-        top: 70%;
-        width: 100%;
-        text-align: center;
-        transform: translate(0, -50%);
-        margin:0;
-      }
-      .hero-down-arrow {
-        position: absolute;
-        bottom: 75px;
-        left: 50%;
-        transform: translate(-50%, 0);
-      }
-    }
-  }
-
-
-
   /* default styles */
   .section-content {
     padding: 20px 20px 20px 20px;
 
+    h2 {
+      text-align: center;
+    }
+
     p {
       font-weight: normal;
       font-size: 100%;
+      text-align: center;
     }
   }
 
   .landing-image {
     padding-top: 10px;
     padding-bottom: 20px;
-    max-height: 400px;
+    max-height: 300px;
   }
 
   .jumbotron {
@@ -120,14 +93,7 @@
   }
 
   .resilience, .reporting, .resilience h2, .reporting h2 {
-    background-color: #f5f5f5;
+    background-color: #f8f8f8;
-  }
-
-  .btn.btn-floating.down-caret {
-    position: relative;
-    transform: none;
-    bottom: 15px;
-    left: 49%;
   }
 
   #doc-call {
@@ -151,6 +117,7 @@
       height: 400px;
       clear:both;
     }
+
     .landing-image {
       position: relative;
       top: 50%;
@@ -159,6 +126,7 @@
       padding-right: 20px;
       padding-left: 20px;
     }
+
     .section-content {
       padding: 10% 0;
       position: relative;
@@ -169,15 +137,16 @@
 
       h2 {
         font-size: 2rem;
-        background: transparent !important;
-        margin:0;
         padding:0;
+        text-align: left;
       }
+
       p {
         padding:0;
         margin:15px 0 30px 0;
         font-size: 14px;
         line-height: 1.5;
+        text-align: left;
       }
     }
   }

_sass/modules/_buttons.scss

@@ -1,4 +1,4 @@
-.btn, .btn-flat {
+.btn {
 
   &:focus {
     outline: 0 !important;
@@ -7,9 +7,9 @@
   &.btn-istio {
     background-color: $secondBrandColor;
     color: $white;
-    font-weight: 300;
+    font-weight: 400;
     letter-spacing: 1px;
-    border-radius: 4px;
+    border-radius: 0px;
 
     a {
       color: $white;
@@ -19,70 +19,11 @@
     &.inverse {
       background-color: transparent;
       border: 2px solid $mainBrandColor;
-      border-radius: 4px;
       color: $mainBrandColor;
     }
 
     &.btn-istio:hover {
       background-color: $popBrandColor;
     }
-
-    // Hero Button
-    &.btn-hero {
-      background-color: $white;
-      border: 2px solid $secondBrandColor;
-      border-radius: 4px;
-      color: $secondBrandColor;
-      font-weight: 500;
-      font-size: $font-size--primary;
-    }
-  }
-
-  // Floating Action Button
-  &.btn-floating {
-    background-color: $white;
-    height: 30px;
-    width: 30px;
-    z-index: $z-top;
-
-    @media (min-width: $tablet) {
-      height: 50px;
-      width: 50px;
-    }
-
-    &:hover,
-    &:focus {
-      background-color: $white;
-    }
-
-    &.down-caret {
-      bottom: -15px;
-      left: 50%;
-      padding: 0;
-      position: absolute;
-      transform: translateX(-50%);
-
-      @media (min-width: $tablet) {
-        bottom: -25px;
-      }
-    }
-  }
-}
-
-// Link Button
-.btn-link {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.icon-caret {
-  background: url('../img/caret.svg') no-repeat center/cover;
-  height: 20px;
-  margin: 3px auto 0;
-  width: 24px;
-
-  @media (min-width: $tablet) {
-    height: 45px;
-    width: 45px;
   }
 }

_sass/modules/_footer.scss

@@ -1,5 +1,5 @@
 footer {
-  background: linear-gradient(to right, $mainBrandColor, $secondBrandColor);
+  background-image: linear-gradient(to right, $mainBrandColor, $secondBrandColor);
   box-shadow: 0px 500px 0px 500px $footerColor;
   color: $white;
   overflow: hidden;
@@ -7,9 +7,11 @@ footer {
   position: relative;
 
   @media (max-width: 767px) {
-    padding: 15px 0 30px;
+    padding: 15px 0 20px;
+    text-align: center;
 
     ul {
+      padding-top: 20px;
       &.active li {
         display: initial;
       }
@@ -38,6 +40,18 @@ footer {
     }
   }
 
+  a.header {
+    font-weight: 400;
+    font-size: 1.1em;
+    padding: 10px 0 0px;
+    position: relative;
+    letter-spacing: .5px;
+    line-height: 2.0em;
+
+    @media (max-width: 767px) {
+    }
+  }
+
   .active {
     display: initial;
   }
@@ -48,44 +62,4 @@ footer {
     line-height: 1.6em;
     font-size: 0.7em;
   }
-
-  div.header {
-    font-weight: 400;
-    font-size: 1.3em;
-    letter-spacing: .5px;
-    padding: 10px 0 10px;
-    position: relative;
-  }
-
-  @mixin social-icon($image-url) {
-    &::before {
-      content: '';
-      display: inline-block;
-      background: url($image-url) no-repeat center/cover;
-      width: 25px;
-      height: 25px;
-      vertical-align: middle;
-      margin: 0 15px 0 0;
-    }
-  }
-
-  .github {
-    @include social-icon('../img/github.png');
-  }
-
-  .group {
-    @include social-icon('../img/group.svg');
-  }
-
-  .list {
-    @include social-icon('../img/list.png');
-  }
-
-  .stack-overflow {
-    @include social-icon('../img/stackoverflow.png');
-  }
-
-  .twitter {
-    @include social-icon('../img/icon_twitter.svg');
-  }
 }

_sass/modules/_hero.scss

@@ -1,34 +0,0 @@
-// Background for nav and hero
-.nav-hero-container {
-    *[id]:before {
-      display: block;
-      content: " ";
-      margin-top: -1em;
-      height: 1em;
-      visibility: hidden;
-    }
-
-
-  background: $mainBrandColor linear-gradient(to right, $mainBrandColor, $secondBrandColor) no-repeat center/cover;
-  z-index: 9010;
-  position: relative;
-}
-
-// Landing page hero
-.hero {
-  position: relative;
-  text-align: center;
-
-  .logo {
-    margin-bottom: $spacing--l;
-  }
-
-  .hero-lead {
-    color: $white;
-    display: block;
-    font-size: 18px;
-    margin-top: 0;
-    margin-bottom: $spacing--l;
-    font-weight: 300;
-  }
-}

_sass/modules/_nav.scss

@@ -6,8 +6,7 @@
 }
 
 #header-nav {
-  background: $mainBrandColor linear-gradient(to right, $mainBrandColor, $secondBrandColor) no-repeat center/cover;
+  background-image: linear-gradient(to right, $mainBrandColor, $secondBrandColor);
-
   padding-top: 10px;
   padding-bottom: 10px;
 }
@@ -43,7 +42,6 @@
 }  
 
 .navbar-header {
-  margin-top: 15px;
   margin-left: 15px;
 }
 

_sass/modules/_search-box.scss

@@ -1,47 +1,7 @@
-.search-box {
-    right: 50px;
-    top: 3px;
-    display: block;
-    position: absolute;
-
-    input {
-        position: relative;
-        height: 30px;
-        padding: 0 10px;
-        line-height: 30px;
-        font-size: 16px;
-        vertical-align: top;
-        background: #fff;
-
-        border-color: $mainBrandColor;
-        border-radius: 4px;
-        border-width: 1px;
-    }
-
-    input::placeholder {
-        color: lighten($gray, 35%);
-        font-style: italic;
-    }
-}
-
-::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-  color: pink;
-}
-::-moz-placeholder { /* Firefox 19+ */
-  color: pink;
-}
-:-ms-input-placeholder { /* IE 10+ */
-  color: pink;
-}
-:-moz-placeholder { /* Firefox 18- */
-  color: pink;
-}
-
 .btn-search {
   color: #aaa;
   cursor:pointer;
-  padding-left: 5px;
+  padding-left: 3px;
   font-size: 1.2em;
   vertical-align: middle;
 }
- 

community/index.md

@@ -29,7 +29,7 @@ There are quite a few ways to get plugged in with the Istio community:
     </tr>
 
     <tr>
-      <td class="logo"><img src="{{home}}/img/twitter.png" alt="Twitter"/></td>
+      <td class="logo"><img src="{{home}}/img/twitter.svg" alt="Twitter"/></td>
       <td>
         Follow us on <a href="https://twitter.com/IstioMesh">Twitter</a> to get the latest news.
       </td>

css/all.scss

@@ -12,7 +12,6 @@
 @import "modules/buttons";
 @import "modules/doc-nav";
 @import "modules/footer";
-@import "modules/hero";
 @import "modules/nav";
 @import "modules/search-box";
 @import "modules/section-index";

img/icon_twitter.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="54.767" height="54.765" viewBox="0 0 54.767 54.765"><path fill="#B8B8B8" d="M27.384 9.266c-10.006 0-18.118 8.111-18.118 18.117 0 10.007 8.112 18.117 18.118 18.117S45.5 37.39 45.5 27.383c0-10.006-8.11-18.117-18.116-18.117zm9.636 14.005c.009.206.014.413.014.621 0 6.346-4.83 13.662-13.662 13.662-2.712 0-5.236-.795-7.36-2.157.375.044.758.066 1.145.066 2.25 0 4.32-.768 5.963-2.055a4.808 4.808 0 0 1-4.485-3.335c.293.057.594.086.903.086.438 0 1.386-.059 1.79-.168C19.13 29.552 18 27.609 18 25.284v-.061c0 .36.864.576 1.651.601-1.288-.861-2.397-2.331-2.397-3.997 0-.879.105-1.704.518-2.413 2.369 2.904 5.841 4.816 9.831 5.017-.081-.352-.156-.718-.156-1.095a4.788 4.788 0 0 1 8.282-3.285 9.612 9.612 0 0 0 3.045-1.165 4.82 4.82 0 0 1-2.114 2.657 9.592 9.592 0 0 0 2.757-.757 9.732 9.732 0 0 1-2.397 2.485z"/></svg>

img/istio-logo-and-name-horizontal.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 930 240">
+  <g fill="#ffffff">
+    <g id="logo">
+      <polygon id="hull" points="0,210 160,210 60,240"/>
+      <polygon id="mainsail" points="0,200 60,190 60,80"/>
+      <polygon id="headsail" points="70,190 160,200 70,0"/>
+    </g>
+    <g id="name">
+      <g id="I">
+        <polygon points="250 100 290 100 290 180 330 180 310 200 230 200 250 180 270 180 270 120 230 120 250 100"/>
+        <polygon points="330 100 300 100 300 130 330 100"/>
+      </g>
+      <g id="S">
+        <path d="M450,140H416l-17.65,17.65A30,30,0,0,0,410,160h40a10,10,0,0,1,0,20H400l-20,20h70a30,30,0,0,0,0-60Z"/>
+        <polygon points="460 120 480 100 456 100 436 120 460 120"/>
+        <path d="M389.75,152.11l14.18-14.18L421.86,120l20-20H410a30,30,0,0,0-20.25,52.11Z"/>
+      </g>
+      <g id="T">
+        <polygon points="530 120 570 120 570 200 590 180 590 100 550 100 530 120"/>
+        <polygon points="600 100 600 130 630 100 600 100"/>
+      </g>
+      <g id="I2">
+        <polygon points="740 100 700 100 680 120 720 120 720 180 700 180 680 200 760 200 780 180 740 180 740 100"/>
+        <polygon points="750 100 750 130 780 100 750 100"/>
+      </g>
+      <g id="O">
+        <path d="M871.86,120l20-20H860a30,30,0,0,0-30,30v31.86l20-20Z"/>
+        <path d="M905.49,100.52,886,120h14a10,10,0,0,1,10,10v40a10,10,0,0,1-10,10H860a10,10,0,0,1-10-10V156l-19.49,19.49A30,30,0,0,0,860,200h40a30,30,0,0,0,30-30V130A30,30,0,0,0,905.49,100.52Z"/>
+      </g>
+    </g>
+  </g>
+</svg>

img/istio-logo-and-name-vertical.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 400">
+  <g fill="#ffffff">
+    <g id="logo">
+      <polygon class="hull" points="270 210 430 210 334 240 270 210"/>
+      <polygon class="mainsail" points="270 200 330 190 330 80 270 200"/>
+      <polygon class="headsail" points="340 190 430 200 340 0 340 190"/>
+    </g>
+    <g id="name">
+      <g id="I">
+        <polygon points="20 300 60 300 60 380 100 380 80 400 0 400 20 380 40 380 40 320 0 320 20 300"/>
+        <polygon points="100 300 70 300 70 330 100 300"/>
+      </g>
+      <g id="S">
+        <path d="M220,340H186l-17.65,17.65A30,30,0,0,0,180,360h40a10,10,0,0,1,0,20H170l-20,20h70a30,30,0,0,0,0-60Z"/>
+        <polygon points="230 320 250 300 226 300 206 320 230 320"/>
+        <path d="M159.75,352.11l14.18-14.18L191.86,320l20-20H180a30,30,0,0,0-20.25,52.11Z"/>
+      </g>
+      <g id="T">
+        <polygon points="300 320 340 320 340 400 360 380 360 300 320 300 300 320"/>
+        <polygon points="370 300 370 330 400 300 370 300"/>
+      </g>
+      <g id="I2">
+        <polygon points="510 300 470 300 450 320 490 320 490 380 470 380 450 400 530 400 550 380 510 380 510 300"/>
+        <polygon points="520 300 520 330 550 300 520 300"/>
+      </g>
+      <g id="O">
+        <path d="M641.86,320l20-20H630a30,30,0,0,0-30,30v31.86l20-20Z"/>
+        <path d="M675.49,300.51,656,320h14a10,10,0,0,1,10,10v40a10,10,0,0,1-10,10H630a10,10,0,0,1-10-10V356l-19.49,19.49A30,30,0,0,0,630,400h40a30,30,0,0,0,30-30V330A30,30,0,0,0,675.49,300.51Z"/>
+      </g>
+    </g>
+  </g>
+</svg>

img/istio-logo-social.svg

@@ -0,0 +1,9 @@
+<svg id="options" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
+  <g id="logo" data-name="2x2">
+    <g fill="#fff">
+      <polygon class="hull" points="80 250 240 250 140 280 80 250"/>
+      <polygon class="mainsail" points="80 240 140 230 140 120 80 240"/>
+      <polygon class="headsail" points="150 230 240 240 150 40 150 230"/>
+    </g>
+  </g>
+</svg>

img/istio-logo.svg

@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="650" height="650" viewBox="0 0 649.99999 649.99999"><path fill="transparent" stroke="transparent" stroke-width="1.01" d="M.505.504h648.99v648.99H.505z"/><g fill="#fff"><path d="M561.157 558.192l-292.45 78.538-118.25-78.463 410.7-.075zM278.76 208.106V487.93l-138.1 45.125 138.1-324.95z"/><path d="M312.036 8.1l-.912 479.825 250.037 46.937L312.036 8.1z" stroke="none" stroke-opacity="0"/></g></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" class="istio-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 240">
+  <g fill="#ffffff">
+    <g id="logo">
+      <polygon id="hull" points="0,210 160,210 60,240"/>
+      <polygon id="mainsail" points="0,200 60,190 60,80"/>
+      <polygon id="headsail" points="70,190 160,200 70,0"/>
+    </g>
+  </g>
+</svg>

img/istio-name.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" class="istio-label" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 100">
+  <g fill="#ffffff">
+    <g id="name">
+      <g id="I">
+        <polygon points="20 0 60 0 60 80 100 80 80 100 0 100 20 80 40 80 40 20 0 20 20 0"/>
+        <polygon points="100 0 70 0 70 30 100 0"/>
+      </g>
+      <g id="S">
+        <path d="M220,40H186L168.35,57.65A30,30,0,0,0,180,60h40a10,10,0,0,1,0,20H170l-20,20h70a30,30,0,0,0,0-60Z"/>
+        <polygon points="230 20 250 0 226 0 206 20 230 20"/>
+        <path d="M159.75,52.11l14.18-14.18L191.86,20l20-20H180a30,30,0,0,0-20.25,52.11Z"/>
+      </g>
+      <g id="T">
+        <polygon points="300 20 340 20 340 100 360 80 360 0 320 0 300 20"/>
+        <polygon points="370 0 370 30 400 0 370 0"/>
+      </g>
+      <g id="I2">
+        <polygon points="510 0 470 0 450 20 490 20 490 80 470 80 450 100 530 100 550 80 510 80 510 0"/>
+        <polygon points="520 0 520 30 550 0 520 0"/>
+      </g>
+      <g id="O">
+        <path d="M641.86,20l20-20H630a30,30,0,0,0-30,30V61.86l20-20Z"/>
+        <path d="M675.49.51,656,20h14a10,10,0,0,1,10,10V70a10,10,0,0,1-10,10H630a10,10,0,0,1-10-10V56L600.51,75.49A30,30,0,0,0,630,100h40a30,30,0,0,0,30-30V30A30,30,0,0,0,675.49.51Z"/>
+      </g>
+    </g>
+  </g>
+</svg>

img/twitter.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300.00006 244.18703" height="244.19" width="300" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <g fill="#1da1f2" transform="translate(-539.18 -568.86)">
+  <path d="m633.9 812.04c112.46 0 173.96-93.168 173.96-173.96 0-2.6463-0.0539-5.2806-0.1726-7.903 11.938-8.6302 22.314-19.4 30.498-31.66-10.955 4.8694-22.744 8.1474-35.111 9.6255 12.623-7.5693 22.314-19.543 26.886-33.817-11.813 7.0031-24.895 12.093-38.824 14.841-11.157-11.884-27.041-19.317-44.629-19.317-33.764 0-61.144 27.381-61.144 61.132 0 4.7978 0.5364 9.4646 1.5854 13.941-50.815-2.5569-95.874-26.886-126.03-63.88-5.2508 9.0354-8.2785 19.531-8.2785 30.73 0 21.212 10.794 39.938 27.208 50.893-10.031-0.30992-19.454-3.0635-27.69-7.6468-0.009 0.25652-0.009 0.50661-0.009 0.78077 0 29.61 21.075 54.332 49.051 59.934-5.1376 1.4006-10.543 2.1516-16.122 2.1516-3.9336 0-7.766-0.38716-11.491-1.1026 7.7838 24.293 30.355 41.971 57.115 42.465-20.926 16.402-47.287 26.171-75.937 26.171-4.929 0-9.7983-0.28036-14.584-0.84634 27.059 17.344 59.189 27.464 93.722 27.464"/>
+ </g>
+</svg>

index.html

@@ -7,8 +7,7 @@ title: Istio
 <div class="nav-hero-container">
     <div class="hero">
         <div class="container">
-            <h1 class="hero-title">Istio</h1>
+            <img class="hero-logo" alt="Istio Logo and Label" src="{{home}}/img/istio-logo-and-name-vertical.svg" />
-            <img class="hero-logo" alt="Istio" src="{{home}}/img/istio-logo.svg" />
             <h1 class="hero-lead">An open platform to connect, manage, and secure microservices</h1>
             <span class="hero-down-arrow fa fa-2 fa-caret-down"></span>
         </div>
@@ -24,8 +23,8 @@ title: Istio
                 <p>
                     Control traffic between services with dynamic route configuration,
                     conduct A/B tests, release canaries, and gradually upgrade versions using red/black deployments.
+                    <a href="{{home}}/docs/concepts/traffic-management/overview.html">Learn more...</a>
                 </p>
-                <a href="{{home}}/docs/concepts/what-is-istio/overview.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
             </div>
         </div>
     </div>
@@ -37,8 +36,10 @@ title: Istio
             <img class="landing-image pull-right" src="{{home}}/img/resilience.svg" alt="Timeouts, Retries, Circuit Breakers">
             <div class="section-content pull-left">
                 <h2>Resilience Across Languages and Platforms</h2>
-                <p>Increase reliability by shielding applications from flaky networks and cascading failures in adverse conditions.</p>
+                <p>
-                <a href="{{home}}/about"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
+                    Increase reliability by shielding applications from flaky networks and cascading failures in adverse conditions.
+                    <a href="{{home}}/docs/concepts/traffic-management/handling-failures.html">Learn more...</a>
+                </p>
             </div>
         </div>
     </div>
@@ -50,8 +51,11 @@ title: Istio
             <img class="landing-image pull-left" src="{{home}}/img/policy.svg" alt="Policy Enforcement">
             <div class="section-content pull-right">
                 <h2>Fleet-Wide Policy Enforcement</h2>
-                <p>Apply organizational policy to the interaction between services, ensure access policies are enforced and resources are fairly distributed among consumers.</p>
+                <p>
-                <a href="{{home}}/docs/concepts/policy-and-control/mixer.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
+                    Apply organizational policy to the interaction between services, ensure access policies are enforced and resources are fairly distributed
+                    among consumers.
+                    <a href="{{home}}/docs/concepts/policy-and-control/mixer.html">Learn more...</a>
+                </p>
             </div>
         </div>
     </div>
@@ -63,8 +67,10 @@ title: Istio
             <img class="landing-image pull-right" src="{{home}}/img/monitoring.svg" alt="Distributed tracing and telemetry">
             <div class="section-content pull-left">
                 <h2>In-Depth Telemetry and Reporting</h2>
-                <p>Understand the dependencies between services, the nature and flow of traffic between them, and quickly identify issues with distributed tracing.</p>
+                <p>
-                <a href="{{home}}/docs/concepts/what-is-istio/overview.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
+                    Understand the dependencies between services, the nature and flow of traffic between them, and quickly identify issues with distributed tracing.
+                    <a href="{{home}}/docs/concepts/what-is-istio/overview.html">Learn more...</a>
+                </p>
             </div>
         </div>
     </div>

js/buttons.js

@@ -1,91 +0,0 @@
-(function ($) {
-  $(document).ready(function() {
-
-    // jQuery reverse
-    $.fn.reverse = [].reverse;
-
-    // Hover behaviour: make sure this doesn't work on .click-to-toggle FABs!
-    $(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) {
-      var $this = $(this);
-      openFABMenu($this);
-    });
-    $(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) {
-      var $this = $(this);
-      closeFABMenu($this);
-    });
-
-    // Toggle-on-click behaviour.
-    $(document).on('click.fixedActionBtn', '.fixed-action-btn.click-to-toggle > a', function(e) {
-      var $this = $(this);
-      var $menu = $this.parent();
-      if ($menu.hasClass('active')) {
-        closeFABMenu($menu);
-      } else {
-        openFABMenu($menu);
-      }
-    });
-
-  });
-
-  $.fn.extend({
-    openFAB: function() {
-      openFABMenu($(this));
-    },
-    closeFAB: function() {
-      closeFABMenu($(this));
-    }
-  });
-
-
-  var openFABMenu = function (btn) {
-    $this = btn;
-    if ($this.hasClass('active') === false) {
-
-      // Get direction option
-      var horizontal = $this.hasClass('horizontal');
-      var offsetY, offsetX;
-
-      if (horizontal === true) {
-        offsetX = 40;
-      } else {
-        offsetY = 40;
-      }
-
-      $this.addClass('active');
-      $this.find('ul .btn-floating').velocity(
-        { scaleY: ".4", scaleX: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'},
-        { duration: 0 });
-
-      var time = 0;
-      $this.find('ul .btn-floating').reverse().each( function () {
-        $(this).velocity(
-          { opacity: "1", scaleX: "1", scaleY: "1", translateY: "0", translateX: '0'},
-          { duration: 80, delay: time });
-        time += 40;
-      });
-    }
-  };
-
-  var closeFABMenu = function (btn) {
-    $this = btn;
-    // Get direction option
-    var horizontal = $this.hasClass('horizontal');
-    var offsetY, offsetX;
-
-    if (horizontal === true) {
-      offsetX = 40;
-    } else {
-      offsetY = 40;
-    }
-
-    $this.removeClass('active');
-    var time = 0;
-    $this.find('ul .btn-floating').velocity("stop", true);
-    $this.find('ul .btn-floating').velocity(
-      { opacity: "0", scaleX: ".4", scaleY: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'},
-      { duration: 80 }
-    );
-  };
-
-
-}( jQuery ));

js/buttons.min.js

@@ -1 +0,0 @@
-!function(t){t(document).ready(function(){t.fn.reverse=[].reverse,t(document).on("mouseenter.fixedActionBtn",".fixed-action-btn:not(.click-to-toggle)",function(i){var a=t(this);n(a)}),t(document).on("mouseleave.fixedActionBtn",".fixed-action-btn:not(.click-to-toggle)",function(n){var a=t(this);i(a)}),t(document).on("click.fixedActionBtn",".fixed-action-btn.click-to-toggle > a",function(a){var e=t(this),o=e.parent();o.hasClass("active")?i(o):n(o)})}),t.fn.extend({openFAB:function(){n(t(this))},closeFAB:function(){i(t(this))}});var n=function(n){if($this=n,$this.hasClass("active")===!1){var i,a,e=$this.hasClass("horizontal");e===!0?a=40:i=40,$this.addClass("active"),$this.find("ul .btn-floating").velocity({scaleY:".4",scaleX:".4",translateY:i+"px",translateX:a+"px"},{duration:0});var o=0;$this.find("ul .btn-floating").reverse().each(function(){t(this).velocity({opacity:"1",scaleX:"1",scaleY:"1",translateY:"0",translateX:"0"},{duration:80,delay:o}),o+=40})}},i=function(t){$this=t;var n,i,a=$this.hasClass("horizontal");a===!0?i=40:n=40,$this.removeClass("active");$this.find("ul .btn-floating").velocity("stop",!0),$this.find("ul .btn-floating").velocity({opacity:"0",scaleX:".4",scaleY:".4",translateY:n+"px",translateX:i+"px"},{duration:80})}}(jQuery);