mirror of https://github.com/istio/istio.io.git
Media resources (#12531)
* Remove media-resources page and redirect * Remove old SVGs and add a new, correct-shaped image for OpenGraph * This file was committed elsewhere.
This commit is contained in:
Craig Box
GitHub
parent
9f5e7c3522
commit
2bd8fbe321
|
|
@ -1,74 +0,0 @@
|
|||
---
|
||||
title: Media Resources
|
||||
description: Official Istio resources for digital and printed materials.
|
||||
weight: 90
|
||||
---
|
||||
|
||||
Here are a few assets in case you want to show off your support for Istio, integration to Istio, or want to link back to
|
||||
us. Please feel free to borrow these:
|
||||
|
||||
<div class="media-resources">
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="logo"><img src="/img/istio-whitelogo-bluebackground-unframed.svg" alt="White logo with 'Istio Blue' background"></td>
|
||||
<td class="logo"><img style="background-color: lightgrey" src="/img/istio-whitelogo-nobackground-unframed.svg" alt="White logo with no background"></td>
|
||||
<td class="desc">White logo in minimal container, with and without <i>Istio Blue</i> background</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="logo"><img src="/img/istio-whitelogo-bluebackground-framed.svg" alt="White logo with 'Istio Blue' background, square container"></td>
|
||||
<td class="logo"><img style="background-color: lightgrey" src="/img/istio-whitelogo-nobackground-framed.svg" alt="White logo with no background, square container"></td>
|
||||
<td class="desc">White logo in square container, with and without <i>Istio Blue</i> background</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="logo"><img src="/img/istio-bluelogo-whitebackground-unframed.svg" alt="'Istio Blue` logo with white background"></td>
|
||||
<td class="logo"><img style="background-color: lightgrey" src="/img/istio-bluelogo-nobackground-unframed.svg" alt="`Istio Blue` logo with no background"></td>
|
||||
<td class="desc"><i>Istio Blue</i> logo in minimal container, with and without white background</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="logo"><img src="/img/istio-bluelogo-whitebackground-framed.svg" alt="'Istio Blue` logo with white background, square container"></td>
|
||||
<td class="logo"><img style="background-color: lightgrey" src="/img/istio-bluelogo-nobackground-framed.svg" alt="'Istio Blue` logo with no background, square container"></td>
|
||||
<td class="desc"><i>Istio Blue</i> logo in square container, with and without white background</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="logo" colspan="2"><img src="/img/istio-embroideredlogo.png" alt="Embroidered Istio logo"></td>
|
||||
<td class="desc">If you're interested in sticking an Istio logo on some physical goods, check out this <a href="/misc/embroidering_logo_instructions.zip">zip file</a> with embroidering instructions.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Here's some advice about using these images:
|
||||
|
||||
<div class="advice">
|
||||
<div class="panel">
|
||||
<div class="title">
|
||||
<div>
|
||||
<p>Cool</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<ul>
|
||||
<li>{{< checkmark_icon >}} Use the Istio logo to link to istio.io</li>
|
||||
<li>{{< checkmark_icon >}} Use the Istio logo to advertise that your product has support for Istio</li>
|
||||
<li>{{< checkmark_icon >}} Use the Istio logo in a blog post or news article about Istio</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="title">
|
||||
<div>
|
||||
<p>Not Cool</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<ul>
|
||||
<li>{{< cancel_icon >}} Use the Istio logo for your application’s icon</li>
|
||||
<li>{{< cancel_icon >}} Create a modified version of the Istio logo</li>
|
||||
<li>{{< cancel_icon >}} Integrate the Istio logo into your logo</li>
|
||||
<li>{{< cancel_icon >}} Change the Istio logo's colors or aspect ratio</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
---
|
||||
title: 媒体资源
|
||||
description: Istio 官方资源，用于数字和印刷的。
|
||||
weight: 90
|
||||
icon: istio-blue-logo
|
||||
---
|
||||
|
||||
如果您想展示对 Istio 的支持、集成 Istio 或在页面上添加指向我们的链接，您可借用下面这些资源：
|
||||
|
||||
<div class="media-resources">
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="logo"><img src="/img/istio-whitelogo-bluebackground-unframed.svg" alt="'Istio 蓝'背景的 logo（白色）"></td>
|
||||
<td class="logo"><img style="background-color: lightgrey" src="/img/istio-whitelogo-nobackground-unframed.svg" alt="透明背景的 logo（白色）"></td>
|
||||
<td class="desc">没有内边距的白色 logo，提供 <i>Istio 蓝</i> 背景色和透明背景色两种样式。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="logo"><img src="/img/istio-whitelogo-bluebackground-framed.svg" alt="正方形'Istio 蓝'背景的 logo（白色）"></td>
|
||||
<td class="logo"><img style="background-color: lightgrey" src="/img/istio-whitelogo-nobackground-framed.svg" alt="正方形透明背景的 Istio logo（白色）"></td>
|
||||
<td class="desc">带有内边距的正方形白色 logo，提供 <i>Istio 蓝</i> 背景色和透明背景色两种样式。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="logo"><img src="/img/istio-bluelogo-whitebackground-unframed.svg" alt="白色背景的 logo（Istio 蓝）"></td>
|
||||
<td class="logo"><img style="background-color: lightgrey" src="/img/istio-bluelogo-nobackground-unframed.svg" alt="透明背景的 logo（Istio 蓝）"></td>
|
||||
<td class="desc">没有内边距的 <i>Istio 蓝</i> logo，提供白色背景和透明背景两种可选样式。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="logo"><img src="/img/istio-bluelogo-whitebackground-framed.svg" alt="正方形白色背景的 logo（Istio 蓝）"></td>
|
||||
<td class="logo"><img style="background-color: lightgrey" src="/img/istio-bluelogo-nobackground-framed.svg" alt="正方形透明背景的 logo（Istio 蓝）"></td>
|
||||
<td class="desc">带有内边距的正方形 <i>Istio 蓝</i> logo，提供白色背景和透明背景两种可选样式。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="logo" colspan="2"><img src="/img/istio-embroideredlogo.png" alt="装饰 Istio logo"></td>
|
||||
<td class="desc">如果您有兴趣在一些实物上粘贴 Istio logo， 请检查 <a href="/misc/embroidering_logo_instructions.zip">压缩文件</a> 中关于装饰的说明。</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
以下是有关使用这些图像的一些建议：
|
||||
|
||||
<div class="advice">
|
||||
<div class="panel">
|
||||
<div class="title">
|
||||
<div>
|
||||
<p>正确</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<ul>
|
||||
<li>{{< checkmark_icon >}} 使用 Istio logo 连接到 istio.io</li>
|
||||
<li>{{< checkmark_icon >}} 使用 Istio logo 宣传您的产品支持 Istio</li>
|
||||
<li>{{< checkmark_icon >}} 在有关 Istio 的博客文章或新闻文章中使用 Istio logo</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="title">
|
||||
<div>
|
||||
<p>错误</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<ul>
|
||||
<li>{{< cancel_icon >}} 使用 Istio logo 作为您的应用程序图标</li>
|
||||
<li>{{< cancel_icon >}} 创建 Istio logo 的修改版本</li>
|
||||
<li>{{< cancel_icon >}} 集成 Istio logo 到您的 logo 中</li>
|
||||
<li>{{< cancel_icon >}} 更改 Istio logo 的颜色或宽高比</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,10 +34,10 @@
|
|||
{{ if .Permalink }}
|
||||
<meta property="og:url" content="{{ .Permalink }}">
|
||||
{{ end }}
|
||||
<meta property="og:image" content="https://raw.githubusercontent.com/istio/istio.io/master/static/img/istio-whitelogo-bluebackground-framed.svg">
|
||||
<meta property="og:image" content="https://raw.githubusercontent.com/istio/istio.io/master/static/img/istio-social.svg">
|
||||
<meta property="og:image:alt" content="Istio Logo">
|
||||
<meta property="og:image:width" content="1024">
|
||||
<meta property="og:image:height" content="1024">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="600">
|
||||
<meta property="og:site_name" content="Istio">
|
||||
|
||||
<!-- Twitter card -->
|
||||
|
|
|
|||
|
|
@ -71,4 +71,11 @@ https://archive.istio.io/* https://istio.io/:splat 301!
|
|||
# /latest/faq/ /about/faq
|
||||
/latest/faq/* /about/faq/
|
||||
/about/faq/* /about/faq/
|
||||
/latest/about/faq/* /about/faq/
|
||||
/latest/about/faq/* /about/faq/
|
||||
|
||||
# media-resources page
|
||||
|
||||
/about/media-resources https://github.com/cncf/artwork/tree/master/projects/istio
|
||||
/latest/about/media-resources https://github.com/cncf/artwork/tree/master/projects/istio
|
||||
/about/zh/media-resources https://github.com/cncf/artwork/tree/master/projects/istio
|
||||
/latest/zh/about/media-resources https://github.com/cncf/artwork/tree/master/projects/istio
|
||||
|
|
@ -37,7 +37,6 @@
|
|||
@import "misc/involve-block";
|
||||
@import "misc/landing";
|
||||
@import "misc/logo-gallery";
|
||||
@import "misc/media-resources";
|
||||
@import "misc/menu";
|
||||
@import "misc/modal";
|
||||
@import "misc/multi-block";
|
||||
|
|
|
|||
|
|
@ -1,81 +0,0 @@
|
|||
.media-resources {
|
||||
$panel-height: 11rem;
|
||||
$title-size: 2rem;
|
||||
|
||||
table, th, td {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
line-height: 1.15em;
|
||||
vertical-align: middle;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
td.logo {
|
||||
width: 100px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
td.desc {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.advice {
|
||||
display: grid;
|
||||
grid-template-columns: [panel] 1fr;
|
||||
grid-gap: 2rem;
|
||||
padding-top: 2rem;
|
||||
|
||||
@media (min-width: $bp-lg) {
|
||||
grid-template-columns: [panel] 1fr [panel] 1fr;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: table;
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid $mainBrandColor;
|
||||
min-height: $panel-height;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
width: $title-size;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
background-color: $mainBrandColor;
|
||||
min-height: 100%;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
top: $panel-height;
|
||||
width: $panel-height;
|
||||
text-align: center;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: left top 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $textBrandColor;
|
||||
font-size: $title-size;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: $title-size;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
display: table-cell;
|
||||
min-height: 100%;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 320 320"><g id="logo" fill="#466BB0"><polygon id="hull" points="80 250 240 250 140 280 80 250"/><polygon id="mainsail" points="80 240 140 230 140 120 80 240"/><polygon id="headsail" points="150 230 240 240 150 40 150 230"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 300 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 160 240"><g id="logo" fill="#466BB0"><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></svg>
|
||||
|
Before Width: | Height: | Size: 269 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 320 320"><g id="logo" fill="#466BB0"><rect id="background" width="320" height="320" fill="#FFF"/><polygon id="hull" points="80 250 240 250 140 280 80 250"/><polygon id="mainsail" points="80 240 140 230 140 120 80 240"/><polygon id="headsail" points="150 230 240 240 150 40 150 230"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 360 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 160 240"><g id="logo" fill="#466BB0"><rect id="background" width="160" height="240" fill="#fff"/><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></svg>
|
||||
|
Before Width: | Height: | Size: 329 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 320 320"><g id="logo" fill="#fff"><rect id="background" width="320" height="320" fill="#466BB0"/><polygon id="hull" points="80 250 240 250 140 280 80 250"/><polygon id="mainsail" points="80 240 140 230 140 120 80 240"/><polygon id="headsail" points="150 230 240 240 150 40 150 230"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 360 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 160 240"><g id="logo" fill="#fff"><rect id="background" width="160" height="240" fill="#466BB0"/><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></svg>
|
||||
|
Before Width: | Height: | Size: 329 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 320 320"><g id="logo" fill="#fff"><polygon id="hull" points="80 250 240 250 140 280 80 250"/><polygon id="mainsail" points="80 240 140 230 140 120 80 240"/><polygon id="headsail" points="150 230 240 240 150 40 150 230"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 297 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 160 240"><g id="logo" fill="#fff"><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></svg>
|
||||
|
Before Width: | Height: | Size: 266 B |
Loading…
Reference in New Issue