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

This commit is contained in:
Martin Taillefer 2017-12-04 19:22:02 -08:00 committed by GitHub
parent 465447984f
commit 05ae202696
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
48 changed files with 487 additions and 398 deletions

View File

@ -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
the links below:
From here you can learn all about Istio's architecture and how to deploy and use Istio.
- [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.

View File

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

View File

@ -1,14 +1,11 @@
<footer>
<div class="container">
<div class="row">
<div class="col-md-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-2 col-md-2 col-sm-2"></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="header">
<a href="{{home}}/help">Help</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}}/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="header">
<a href="{{home}}/community">Community</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 center-block">
<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://stackoverflow.com/questions/tagged/istio" target="_blank" rel="noopener"><span class="stack-overflow">Stack Overflow</span></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/blob/master/WORKING-GROUPS.md" target="_blank" rel="noopener"><span class="group">Working Groups</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">Stack Overflow</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">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">

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -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;
margin: 98px 0 0 0;
height: 170px;
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;
}
.btn.btn-floating.down-caret {
position: relative;
transform: none;
bottom: 15px;
left: 49%;
background-color: #f8f8f8;
}
#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;
}
}
}

View File

@ -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;
}
background-color: $popBrandColor;
}
}
}
// 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;
}
}

View File

@ -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');
}
}

View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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;
color: #aaa;
cursor:pointer;
padding-left: 5px;
padding-left: 3px;
font-size: 1.2em;
vertical-align: middle;
}

View File

@ -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>

View File

@ -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";

BIN
favicons/android-144x144.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
favicons/android-192x192.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
favicons/android-36x36.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 813 B

After

Width:  |  Height:  |  Size: 539 B

BIN
favicons/android-48x48.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 771 B

BIN
favicons/android-72x72.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
favicons/android-96x196.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
favicons/apple-touch-icon-180x180.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
favicons/favicon-16x16.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 367 B

After

Width:  |  Height:  |  Size: 291 B

BIN
favicons/favicon-32x32.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 636 B

After

Width:  |  Height:  |  Size: 469 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
favicons/pwa-192x192.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
favicons/pwa-512x512.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
favicons/tile150x150.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
favicons/tile310x150.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
favicons/tile310x310.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
favicons/tile70x70.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -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>

Before

Width:  |  Height:  |  Size: 856 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 367 B

View File

@ -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>

Before

Width:  |  Height:  |  Size: 443 B

After

Width:  |  Height:  |  Size: 373 B

28
img/istio-name.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 232 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 448 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

6
img/twitter.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -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" src="{{home}}/img/istio-logo.svg" />
<img class="hero-logo" alt="Istio Logo and Label" src="{{home}}/img/istio-logo-and-name-vertical.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>
<a href="{{home}}/about"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
<p>
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>
<a href="{{home}}/docs/concepts/policy-and-control/mixer.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
<p>
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>
<a href="{{home}}/docs/concepts/what-is-istio/overview.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
<p>
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>

View File

@ -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 ));

1
js/buttons.min.js vendored
View File

@ -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);