istio
/
istio.io
mirror of https://github.com/istio/istio.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Final release material (#2028) 

- New landing page layout and content.

- 1.0 announcement blog post

- New "what is istio" page
This commit is contained in:
Martin Taillefer 2018-07-30 21:37:03 -07:00 committed by GitHub
parent 682db1e3e3
commit 26bd62e408
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 511 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.spelling
View File

@ -492,6 +492,17 @@ tunneling
veth-pair
virtualization
Virtualization
HP
PubNub
Trulia
Sysdig
Aporeto
Styra
Kiali
Knative
Apigee
SLOs
serverless
- search.md
searchresults

166
content/_index.md
View File

@ -33,96 +33,108 @@ title: Istio
"image": [
"https://istio.io/img/logo.png"
],
"description": "Istio is an open platform to connect, manage, and secure microservices."
"description": "Istio lets you connect, secure, control, and observe services."
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('card1').style.opacity = 1;
window.setTimeout(function() {
document.getElementById('card2').style.opacity = 1;
}, 375);
window.setTimeout(function() {
document.getElementById('card3').style.opacity = 1;
}, 750);
window.setTimeout(function() {
document.getElementById('card4').style.opacity = 1;
}, 1125);
window.setTimeout(function() {
document.getElementById('buttons').style.opacity = 1;
}, 1500);
});
</script>
<main class="landing">
<div class="hero">
<div class="container">
<h1 class="hero-label">Istio{{< site_suffix >}} {{< istio_version >}}</h1>
<img class="hero-logo" alt="Istio Logo" src="/img/istio-logo.svg" />
<h1 class="hero-lead">An open platform to connect, manage, and secure microservices</h1>
<span onclick="getElementById('SCROLLME').scrollIntoView({block: 'start', inline: 'nearest', behavior: 'smooth'})" class="hero-down-arrow fa fa-2 fa-caret-down"></span>
<span id="SCROLLME"></span>
</div>
</div>
<div class="container-fluid traffic color1">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-5">
{{< inline_image "landing/routing-and-load-balancing.svg" >}}
</div>
<div class="col-12 col-md-5 landing-text">
<h2>Intelligent Routing and Load Balancing</h2>
<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="/docs/concepts/traffic-management/">Learn more...</a>
</p>
<div class="container-fluid">
<div class="row justify-content-center">
{{< inline_image "landing/istio-logo.svg" >}}
<div style="width: 20rem; margin-left: 3rem">
<h1 class="hero-label">Istio</h1>
<h1 class="hero-lead">Connect, secure, control, and observe services.
</div>
</div>
</div>
<div class="container-fluid resilience color2">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-5">
{{< inline_image "landing/resiliency.svg" >}}
<div class="container-fluid">
<div class="row justify-content-center">
<div id="card1" class="card">
<div class="card-img-top">
{{< inline_image "landing/routing-and-load-balancing.svg" >}}
</div>
<div class="card-body">
<hr class="card-line">
<h5 class="card-title text-center">Connect</h5>
<hr class="card-line">
<p class="card-text">
Intelligently control the flow of traffic and API calls between services, conduct a range of tests, and upgrade gradually with
red/black deployments.
</p>
</div>
</div>
<div class="col-12 col-md-5 order-md-first landing-text">
<h2>Resilience Across Languages and Platforms</h2>
<p>
Increase reliability by shielding applications from flaky networks and cascading failures in adverse conditions.
<a href="/docs/concepts/traffic-management/#handling-failures">Learn more...</a>
</p>
<div id="card2" class="card">
<div class="card-img-top">
{{< inline_image "landing/resiliency.svg" >}}
</div>
<div class="card-body">
<hr class="card-line">
<h5 class="card-title text-center">Secure</h5>
<hr class="card-line">
<p class="card-text">
Automatically secure your services through managed authentication, authorization, and encryption of communication between
services.
</p>
</div>
</div>
<div id="card3" class="card">
<div class="card-img-top">
{{< inline_image "landing/policy-enforcement.svg" >}}
</div>
<div class="card-body">
<hr class="card-line">
<h5 class="card-title text-center">Control</h5>
<hr class="card-line">
<p class="card-text">
Apply policies and ensure that they’re enforced, and that resources are fairly distributed among consumers.
</p>
</div>
</div>
<div id="card4" class="card">
<div class="card-img-top">
{{< inline_image "landing/telemetry-and-reporting.svg" >}}
</div>
<div class="card-body">
<hr class="card-line">
<h5 class="card-title text-center">Observe</h5>
<hr class="card-line">
<p class="card-text">
See what's happening with rich automatic tracing, monitoring, and logging of all your services.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid policy color1">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-5">
{{< inline_image "landing/policy-enforcement.svg" >}}
</div>
<div class="col-12 col-md-5 landing-text">
<h2>Fleet-Wide Policy Enforcement</h2>
<p>
Apply organizational policies to the interaction between services, ensure access policies are enforced and resources are fairly distributed
among consumers.
<a href="/docs/concepts/policies-and-telemetry/">Learn more...</a>
</p>
</div>
</div>
</div>
<div class="container-fluid reporting color2">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-5">
{{< inline_image "landing/telemetry-and-reporting.svg" >}}
</div>
<div class="col-12 col-md-5 order-md-first landing-text">
<h2>In-Depth Telemetry</h2>
<p>
Understand the dependencies between services, the nature and flow of traffic between them, and quickly identify issues with distributed tracing.
<a href="/docs/concepts/what-is-istio/">Learn more...</a>
</p>
</div>
</div>
</div>
<div class="container-fluid call color1">
<div class="row no-gutters">
<div class="col-12 col-md-6">
<h2>Want to learn more?</h2>
<p>Get started by learning Istio concepts and running through our Bookinfo sample.</p>
<a class="btn btn-istio" href="/docs/">GET STARTED</a>
</div>
<div class="col-12 col-md-6">
<h2>Ready to get started?</h2>
<p>Download the latest bits.</p>
<a class="btn btn-istio" href="https://github.com/istio/istio/releases/">DOWNLOAD</a>
</div>
<div id="buttons" class="buttons container-fluid">
<div class="row justify-content-center">
<a class="btn btn-istio" href="/docs/concepts/what-is-istio/">LEARN MORE</a>
<a class="btn btn-istio" href="https://github.com/istio/istio/releases/">DOWNLOAD</a>
</div>
</div>
</main>

55
content/blog/2018/announcing-1.0/index.md Normal file
View File

@ -0,0 +1,55 @@
---
title: Announcing Istio 1.0
subtitle: The production ready service mesh
description: Istio is ready for production use with its 1.0 release.
publishdate: 2018-07-31
attribution: The Istio Team
weight: 84
---
Today, we’re excited to announce [Istio 1.0](/about/notes/1.0). It’s been a little over a year since our initial 0.1 release. Since then, Istio has evolved significantly with the help of a thriving and growing community of contributors and users. We’ve now reached the point where many companies have successfully adopted Istio in production and have gotten real value from the insight and control it provides over their deployments. We’ve helped large enterprises and fast-moving startups like [eBay](https://www.ebay.com/), [Auto Trader UK](https://www.autotrader.co.uk/), [Descartes Labs](http://www.descarteslabs.com/), [HP FitStation](https://www.fitstation.com/), [Namely](https://www.namely.com/), [PubNub](https://www.pubnub.com/) & [Trulia](https://www.trulia.com/) use Istio to connect, manage and secure their services from the ground up. Shipping this release as 1.0 is recognition that we’ve built a core set of functionality that our users can rely on for production use.
## Ecosystem
We’ve seen substantial growth in Istio's ecosystem in the last year. [Envoy](https://www.envoyproxy.io/) continues its impressive growth and added numerous
features that are crucial for a production quality service mesh. Observability providers like [Datadog](https://www.datadoghq.com/),
[SolarWinds](https://www.solarwinds.com/), [Sysdig](https://sysdig.com/blog/monitor-istio/), [Google Stackdriver](https://cloud.google.com/stackdriver/) and
[Amazon CloudWatch](https://aws.amazon.com/cloudwatch/) have written plugins to integrate Istio with their products.
[Tigera](https://www.tigera.io/resources/using-network-policy-concert-istio-2/), [Aporeto](https://www.aporeto.com/), [Cilium](https://cilium.io/)
and [Styra](https://styra.com/) built extensions to our policy enforcement and networking capabilities. [Red Hat](https://www.redhat.com/en)built [Kiali](https://www.kiali.io) to wrap a nice user-experience around mesh management and observability. [Cloud Foundry](https://www.cloudfoundry.org/) is building on Istio for it’s next generation traffic routing stack, the recently announced [Knative](https://github.com/knative/docs) serverless project is doing the same and [Apigee](https://apigee.com/) announced that they plan to use it in their API management solution. These are just some of the integrations the community has added in the last year.
## Features
Since the 0.8 release we’ve added some important new features and more importantly marked many of our existing features as Beta signaling that they’re ready for production use. This is captured in more detail in the [release notes](/about/notes/1.0/) but it’s worth calling out some highlights
* Multiple Kubernetes clusters can now be [added to a single mesh](/docs/setup/kubernetes/multicluster-install) and enabling cross-cluster communication and consistent policy enforcement. Multi-cluster support is now Beta.
* Networking APIs that enable fine grained control over the flow of traffic through a mesh are now Beta. Explicitly modeling ingress and egress concerns using Gateways allows operators to [control the network topology](/blog/2018/v1alpha3-routing/) and meet access security requirements at the edge.
* Mutual TLS can now be [rolled out incrementally](/docs/tasks/security/mtls-migration) without requiring all clients of a service to be updated. This is a critical feature that unblocks adoption in-place by existing production deployments.
* Mixer now has support for [developing out-of-process adapters](https://github.com/istio/istio/wiki/Out-Of-Process-gRPC-Adapter-Dev-Guide). This will become the default way to extend Mixer over the coming releases and makes building adapters much simpler.
* [Authorization policies](/docs/concepts/security/#authorization) which control access to services are now entirely evaluated locally in Envoy increasing
their performance and reliability.
* [Helm chart installation](/docs/setup/kubernetes/helm-install/) is now the recommended install method offering rich customization options to adopt Istio on your terms.
* We’ve put a lot of effort into performance including continuous regression testing, large scale environment simulation and targeted fixes. We’re very happy with the results and will share more on this in detail in the coming weeks.
## What’s next?
While this is a significant milestone for the project there’s lots more to do. In working with adopters we’ve gotten a lot of great feedback about what to focus next. We’ve heard consistent themes around support for hybrid-cloud, install modularity, richer networking features and scalability for massive deployments. We’ve already taken some of this feedback into account in the 1.0 release and we’ll continue to aggressively tackle this work in the coming months.
## Getting Started
If you’re new to Istio and looking to use it for your deployment we’d love to hear from you. Take a look at [our docs](/docs/), stop by our
[chat forum](https://istio.rocket.chat) or reach out on the [mailing list](https://groups.google.com/forum/#!forum/istio-dev). If you’d like
to go deeper and [contribute to the project](/about/community) come to one of our community meetings and say hello.
## Finally
The Istio team would like to give huge thanks to everyone who has made a contribution to the project. It wouldn’t be where it is today without your help. The last year has been pretty amazing and we look forward to the next one with excitement about what we can achieve together as a community.
-- The Istio Team

138
content/docs/concepts/what-is-istio/index.md
View File

@ -8,95 +8,97 @@ aliases:
- /about/intro
---
Istio is an open platform to connect, manage, and secure microservices.
Cloud platforms provide a wealth of benefits for the organizations that use them. There’s no denying, however, that adopting the cloud can put strains on DevOps
teams. Developers must use microservices to architect for portability, meanwhile operators are managing extremely large hybrid and multi-cloud deployments.
Istio lets you connect, secure, control, and observe services.
Istio provides an easy way to create a network of deployed services with load
balancing, service-to-service authentication, monitoring, and more, without
requiring any changes in service code. You add Istio support to services by
deploying a special sidecar proxy throughout your environment that intercepts
all network communication between microservices, configured and managed using
Istio's control plane functionality.
At a high level, Istio helps reduce the complexity of these deployments, and eases the strain on your development teams. It is a completely open source service
mesh that layers transparently onto existing distributed applications. It is also a platform, including APIs that let it integrate into any logging platform, or
telemetry or policy system. Istio’s diverse feature set lets you successfully, and efficiently, run a distributed microservice architecture, and provides a
uniform way to secure, connect, and monitor microservices.
* Automatic load balancing for HTTP, gRPC, WebSocket, and TCP traffic.
## What is a service mesh?
* Fine-grained control of traffic behavior with rich routing rules,
retries, failovers, and fault injection.
Istio addresses the challenges developers and operators face as monolithic applications transition towards a distributed microservice architecture. To see how,
it helps to take a more detailed look at Istio’s service mesh.
* A pluggable policy layer and configuration API supporting access controls,
rate limits and quotas.
The term service mesh is used to describe the network of microservices that make up such applications and the interactions between them. As a service mesh grows
in size and complexity, it can become harder to understand and manage. Its requirements can include discovery, load balancing, failure recovery, metrics, and
monitoring. A service mesh also often has more complex operational requirements, like A/B testing, canary releases, rate limiting, access control, and
end-to-end authentication.
* Automatic metrics, logs, and traces for all traffic within a cluster,
including cluster ingress and egress.
* Secure service-to-service communication in a cluster with strong
identity-based authentication and authorization.
You can deploy Istio on [Kubernetes](https://kubernetes.io) or on
[Nomad](https://nomadproject.io) with [Consul](https://www.consul.io/). We
plan to add support for additional platforms such as
[Cloud Foundry](https://www.cloudfoundry.org/),
and [Apache Mesos](https://mesos.apache.org/) in the near future.
Istio currently supports:
* Service deployment on Kubernetes
* Services registered with Consul
* Services running on individual virtual machines.
Istio provides behavioral insights and operational control over the service mesh as a whole, offering a complete solution to satisfy the diverse requirements of
microservice applications.
## Why use Istio?
Istio addresses the challenges developers and operators face as monolithic
applications transition towards a distributed microservice architecture.
Istio makes it easy to create a network of deployed services with load balancing, service-to-service authentication, monitoring, and more, without any changes
in service code. You add Istio support to services by deploying a special sidecar proxy throughout your environment that intercepts all network communication
between microservices, then configure and manage Istio using its control plane functionality, which includes:
The term **service mesh** is used to describe the network of microservices that
make up such applications and the interactions between them. As a service mesh
grows in size and complexity, it can become harder to understand and manage.
Its requirements can include discovery, load balancing, failure recovery,
metrics, and monitoring. A service mesh often has more complex operational
requirements such as A/B testing, canary releases, rate limiting, access
control, and end-to-end authentication.
* Automatic load balancing for HTTP, gRPC, WebSocket, and TCP traffic.
Istio provides behavioral insights and operational control over the service
mesh as a whole offering a complete solution to satisfy the diverse
requirements of microservice applications.
* Fine-grained control of traffic behavior with rich routing rules, retries, failovers, and fault injection.
* A pluggable policy layer and configuration API supporting access controls, rate limits and quotas.
* Automatic metrics, logs, and traces for all traffic within a cluster, including cluster ingress and egress.
* Secure service-to-service communication in a cluster with strong identity-based authentication and authorization.
Istio is designed for extensibility and meets diverse deployment needs.
## Core features
Istio provides a number of key capabilities uniformly across a network of
services:
* **Traffic Management**: Control the flow of traffic and API calls between
services, make calls more reliable, and make the network more robust in the
face of adverse conditions.
### Traffic management
* **Service Identity and Security**: Provide services in the mesh with a
verifiable identity and provide the ability to protect service traffic as it
flows over networks of varying degrees of trustability.
Istio’s easy rules configuration and traffic routing lets you control the flow of traffic and API calls between services. Istio simplifies configuration of
service-level properties like circuit breakers, timeouts, and retries, and makes it a breeze to set up important tasks like A/B testing, canary rollouts, and
staged rollouts with percentage-based traffic splits.
* **Policy Enforcement**: Apply organizational policy to the interaction
between services, ensure access policies are enforced and that resources are
fairly distributed among consumers. To make policy changes, you change the
configuration of the mesh and don't need to change application code.
With better visibility into your traffic, and out-of-box failure recovery features, you can catch issues before they cause problems, making calls more reliable,
and your network more robust -- no matter what conditions you face.
* **Telemetry**: Gain understanding of the dependencies between services and
the nature and flow of traffic between them, providing the ability to quickly
identify issues.
### Security
In addition to these behaviors, Istio is designed for extensibility to meet
diverse deployment needs:
Istio’s security capabilities free developers to focus on security at the application level. Istio provides the underlying secure communication channel, and
manages authentication, authorization, and encryption of service communication at scale. With Istio, service communications are secured by default,
letting you enforce policies consistently across diverse protocols and runtimes -- all with little or no application changes.
* **Platform Support**: Istio is designed to run in a variety of environments
including ones that span Cloud, on-premise, Kubernetes, Mesos, etc. We’re
initially focused on Kubernetes, but are working to support other
environments soon.
While Istio is platform independent, using it with Kubernetes (or infrastructure) network policies, the benefits are even greater, including the ability to
secure pod-to-pod or service-to-service communication at the network and application layers.
* **Integration and Customization**: The policy enforcement component can be
extended and customized to integrate with existing solutions for ACLs,
logging, monitoring, quotas, auditing, and more.
### Observability
These capabilities greatly decrease the coupling between application code, the
underlying platform, and policy. This decreased coupling makes services easier
to implement and makes it simpler for operators to move application deployments
between environments or to new policy schemes. Applications become inherently
more portable as a result.
Istio’s robust tracing, monitoring, and logging give you deep insights into your service mesh deployment. Gain a real understanding of how service performance
impacts things upstream and downstream with Istio’s monitoring features, while its custom dashboards provide visibility into the performance of all your
services and let you see how that performance is affecting your other processes.
Istio’s Mixer component is responsible for policy controls and telemetry collection. It provides backend abstraction and intermediation, insulating the rest of
Istio from the implementation details of individual infrastructure backends, and giving operators fine-grained control over all interactions between the mesh
and infrastructure backends.
All these features let you more effectively set, monitor, and enforce SLOs on services. Of course, the bottom line is that you can detect and fix issues quickly
and efficiently.
### Platform support
Istio is platform-independent and designed to run in a variety of environments, including those spanning Cloud, on-premise, Kubernetes, Mesos, and more. You can
deploy Istio on Kubernetes, or on Nomad with Consul. Istio currently supports:
* Service deployment on Kubernetes
* Services registered with Consul
* Services running on individual virtual machines
### Integration and customization
The policy enforcement component of Istio can be extended and customized to integrate with existing solutions for ACLs, logging, monitoring, quotas, auditing,
and more.
## Architecture

188
landing.md Normal file
View File

@ -0,0 +1,188 @@
---
title: Istio
---
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "https://istio.io",
"logo": "https://istio.io/img/logo.png",
"sameAs": [
"https://twitter.com/IstioMesh",
"https://istio.rocket.chat/"
]
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://istio.io/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://istio.io/search.html?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "Istio",
"image": [
"https://istio.io/img/logo.png"
],
"description": "Istio lets you connect, secure, control, and observe services."
}
</script>
<style>
.buttons {
opacity: 0;
transition: opacity .25s ease-in;
}
.btn {
box-shadow: 3px 3px 8px #a7a7a7;
margin: 1rem 5rem;
width: 18rem;
}
.card {
opacity: 0.1;
transition: opacity .25s linear;
background-color: #f8f8f8;
border-color: #e0e0e0;
width: 18rem;
margin: 1rem;
box-shadow: 3px 3px 8px #a7a7a7;
}
.card-title {
text-align: center;
}
.card-line {
margin-left: 1.6rem;
margin-right: 1.6rem;
}
.card-img-top {
padding: 1.5em;
}
.landing .hero {
background: unset;
}
.landing .hero .hero-label {
color: unset;
text-align: left;
padding: 0;
margin: 0;
margin-top: 1rem;
}
.landing .hero .hero-lead {
color: unset;
text-align: left;
margin: 0;
padding: 0;
}
</style>
<main class="landing">
<div class="container-fluid hero">
<div class="row justify-content-center" style="vertical-align: center">
<img style="width: 90px; height: 150px" src="/img/istio-blue-logo.svg" />
<div style="width: 20rem; margin-left: 3rem">
<h1 class="hero-label">Istio</h1>
<h1 class="hero-lead">An open platform to connect, manage, and secure microservices</h1>
</div>
</div>
</div>
<div class="row justify-content-center">
<div id="card1" class="card">
<div class="card-img-top">
{{< inline_image "landing/routing-and-load-balancing.svg" >}}
</div>
<div class="card-body">
<h5 class="card-title text-center">Intelligent Routing and Load Balancing</h5>
<hr class="card-line">
<p class="card-text">
Control traffic between services with dynamic route configuration,
conduct A/B tests, release canaries, and gradually upgrade versions using red/black deployments.
</p>
</div>
</div>
<div id="card2" class="card">
<div class="card-img-top">
{{< inline_image "landing/resiliency.svg" >}}
</div>
<div class="card-body">
<h5 class="card-title text-center">Resilience Across Languages and Platforms</h5>
<hr class="card-line">
<p class="card-text">
Increase reliability by shielding applications from flaky networks and cascading failures in adverse conditions.
</p>
</div>
</div>
<div id="card3" class="card">
<div class="card-img-top">
{{< inline_image "landing/policy-enforcement.svg" >}}
</div>
<div class="card-body">
<h5 class="card-title text-center">Fleet-Wide Policy Enforcement</h5>
<hr class="card-line">
<p class="card-text">
Apply organizational policies to the interaction between services, ensure access policies are enforced and resources are fairly distributed
among consumers.
</p>
</div>
</div>
<div id="card4" class="card">
<div class="card-img-top">
{{< inline_image "landing/telemetry-and-reporting.svg" >}}
</div>
<div class="card-body">
<h5 class="card-title text-center">In-Depth Telemetry</h5>
<hr class="card-line">
<p class="card-text">
Understand the dependencies between services, the nature and flow of traffic between them, and quickly identify issues with distributed tracing.
</p>
</div>
</div>
</div>
<div id="buttons" class="buttons container-fluid call">
<div class="row justify-content-center">
<a class="btn btn-istio" href="/docs/concepts/what-is-istio/">LEARN MORE</a>
<a class="btn btn-istio" href="https://github.com/istio/istio/releases/">DOWNLOAD</a>
</div>
</div>
<script>
document.getElementById('card1').style.opacity = 1;
window.setTimeout(function() {
document.getElementById('card2').style.opacity = 1;
}, 375);
window.setTimeout(function() {
document.getElementById('card3').style.opacity = 1;
}, 750);
window.setTimeout(function() {
document.getElementById('card4').style.opacity = 1;
}, 1125);
window.setTimeout(function() {
document.getElementById('buttons').style.opacity = 1;
}, 1500);
</script>
</main>

14
layouts/index.html
View File

@ -1,17 +1,3 @@
{{ define "main" }}
{{ .Content }}
<style>
header .navbar {
box-shadow: none;
}
body {
padding-top: 2.8rem;
}
.navbar-brand {
visibility: hidden;
}
</style>
{{ end }}

5
layouts/partials/header.html
View File

@ -52,11 +52,6 @@
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="gearDropdown">
<a lang="en" href="/" class="dropdown-item {{ if eq $home.Lang "en" }}active{{ end }}" onclick="createCookie('nf_lang', 'en'); return true;">English</a>
<a lang="zh" href="/zh" class="dropdown-item {{ if eq $home.Lang "zh" }}active{{ end }}" onclick="createCookie('nf_lang', 'zh'); return true;">中文</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" id="light-theme-item" href="" onclick="setActiveStyleSheet('light');return false;">{{ i18n "light_theme" }}</a>
<a class="dropdown-item" id="dark-theme-item" href="" onclick="setActiveStyleSheet('dark');return false;">{{ i18n "dark_theme" }}</a>

7
layouts/partials/landing/istio-logo.svg Normal file
View File

@ -0,0 +1,7 @@
<svg class="hero-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 240">
<g>
<polygon points="0,210 160,210 60,240"/>
<polygon points="0,200 60,190 60,80"/>
<polygon points="70,190 160,200 70,0"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 247 B

155
src/sass/layouts/_landing.scss
View File

@ -1,80 +1,38 @@
.landing {
.hero {
background: $mainBrandColor linear-gradient(to right, $mainBrandColor, $secondBrandColor) no-repeat center/cover;
position: relative;
.hero-label {
margin: 0 0 0 0;
padding: 30px 0 0 0;
font-size: 4rem;
font-family: "Verdana", serif;
text-align: center;
}
.hero-label {
color: $textBrandColor;
margin: 0 0 0 0;
padding: 30px 0 0 0;
font-size: 62px;
font-family: "Verdana";
.hero-lead {
display: block;
font-size: 1rem;
font-weight: $heroLeadWeight;
text-align: center;
margin: 0;
padding: 0;
}
.hero-logo {
width: 0;
fill: $heroLogoColor;
}
@media (min-width: $bp-sm) {
.hero-logo {
width: 7rem;
}
.hero-logo {
height: 170px;
padding: 0;
margin: 28px 0 0 0;
.hero-label {
text-align: left;
}
.hero-lead {
color: $textBrandColor;
display: block;
font-size: 18px;
font-weight: $heroLeadWeight;
margin: 32px 0 0 0;
padding: 0;
text-align: left;
}
.hero-down-arrow {
color: $textBrandColor;
display: inline-block;
margin: 20px 0 20px 0;
padding: 5px;
cursor: pointer;
}
@media (min-width: $bp-sm) {
.hero-label {
padding: 80px;
}
.hero-logo {
margin: 78px 0 0 0;
}
.hero-lead {
margin: 82px 0 0 0;
}
.hero-down-arrow {
margin: 60px 0 20px 0;
}
}
}
h2 {
border: 0;
}
.landing-image {
max-height: 300px;
text-align: center;
}
.landing-text {
text-align: center;
}
.color1 {
background-color: $landingBackgroundColor1;
stroke: $landingBackgroundColor1;
}
.color2 {
background-color: $landingBackgroundColor2;
stroke: $landingBackgroundColor2;
}
.container-fluid {
@ -83,30 +41,55 @@
}
@media (min-width: $bp-md) {
.landing-text {
text-align: left;
.alt {
text-align: right;
}
}
.landing-image {
text-align: right;
.alt {
text-align: left;
}
}
.container-fluid {
padding-top: 30px;
padding-bottom: 30px;
}
}
.call {
height: auto;
.landing-image {
width: 12rem;
height: 12rem;
}
.card {
color: $landingCardTextColor;
opacity: 0.1;
transition: opacity .25s linear;
background-color: $landingCardBackgroundColor;
border-color: $landingCardBorderColor;
width: 18rem;
margin: 1rem;
box-shadow: 3px 3px 8px $landingCardShadowColor;
}
.card-title {
text-align: center;
}
.card-line {
margin-left: 1.6rem;
margin-right: 1.6rem;
background-color: $landingCardTextColor;
}
.card-img-top {
text-align: center;
padding: 0;
}
.card-body {
padding-top: 0;
}
.buttons {
opacity: 0;
transition: opacity .25s ease-in;
}
.btn {
box-shadow: 3px 3px 8px #a7a7a7;
margin: 1rem 5rem;
width: 18rem;
}
}

7
src/sass/themes/_dark.scss
View File

@ -41,8 +41,11 @@ $headerDarkShadowColor: rgba(0, 0, 0, .28);
$figureBackgroundColor: #a3a3a3;
$figureCaptionColor: $white;
$landingBackgroundColor1: lighten($dark-gray, 10%);
$landingBackgroundColor2: $dark-gray;
$heroLogoColor: $textColor;
$landingCardBackgroundColor: $dark-gray;
$landingCardBorderColor: #777777;
$landingCardTextColor: $textColor;
$landingCardShadowColor: #777777;
$floatingButtonColor: rgba(0, 0, 0, .4);

7
src/sass/themes/_light.scss
View File

@ -41,8 +41,11 @@ $headerDarkShadowColor: rgba(0, 0, 0, .28);
$figureBackgroundColor: $backgroundColor;
$figureCaptionColor: $textColor;
$landingBackgroundColor1: $white;
$landingBackgroundColor2: #f8f8f8;
$heroLogoColor: $mainBrandColor;
$landingCardBackgroundColor: $light-gray;
$landingCardBorderColor: #dddddd;
$landingCardTextColor: $textColor;
$landingCardShadowColor: #a7a7a7;
$floatingButtonColor: rgba(0, 0, 0, .4);

2
static/css/dark_theme_archive.css
View File

File diff suppressed because one or more lines are too long

2
static/css/dark_theme_archive.css.map
View File

File diff suppressed because one or more lines are too long

2
static/css/dark_theme_normal.css
View File

File diff suppressed because one or more lines are too long

2
static/css/dark_theme_normal.css.map
View File

File diff suppressed because one or more lines are too long

2
static/css/dark_theme_preliminary.css
View File

File diff suppressed because one or more lines are too long

2
static/css/dark_theme_preliminary.css.map
View File

File diff suppressed because one or more lines are too long

2
static/css/light_theme_archive.css
View File

File diff suppressed because one or more lines are too long

2
static/css/light_theme_archive.css.map
View File

File diff suppressed because one or more lines are too long

2
static/css/light_theme_normal.css
View File

File diff suppressed because one or more lines are too long

2
static/css/light_theme_normal.css.map
View File

File diff suppressed because one or more lines are too long

2
static/css/light_theme_preliminary.css
View File

File diff suppressed because one or more lines are too long

2
static/css/light_theme_preliminary.css.map
View File

File diff suppressed because one or more lines are too long