Updated artwork for home page + cleaned up logo + new logo label font (#757)
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: Why does Istio need Mixer?
|
||||
order: 135
|
||||
order: 0
|
||||
type: markdown
|
||||
---
|
||||
{% include home.html %}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -83,5 +83,5 @@ th {
|
|||
}
|
||||
|
||||
html {
|
||||
background-color: $mainBrandColor;
|
||||
background-image: linear-gradient(to right, $mainBrandColor, $secondBrandColor);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 813 B After Width: | Height: | Size: 539 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 771 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 367 B After Width: | Height: | Size: 291 B |
|
Before Width: | Height: | Size: 636 B After Width: | Height: | Size: 469 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 8.0 KiB |
|
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
BIN
img/logo.png
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 232 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 448 KiB After Width: | Height: | Size: 2.2 KiB |
BIN
img/twitter.png
|
Before Width: | Height: | Size: 1.6 KiB |
|
|
@ -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 |
24
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" 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>
|
||||
|
|
|
|||
|
|
@ -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 +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);
|
||||