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

Add a Media Resources page. (#1832)

This commit is contained in:
Martin Taillefer 2018-07-16 15:54:17 -07:00 committed by GitHub
parent 5ba0a19293
commit de8893a255
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 222 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
content/about/media-resources/index.md Normal file
View File

@ -0,0 +1,95 @@
---
title: Media Resources
description: Official Istio resources for digital and printed materials.
weight: 90
type: media-resources
---
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">
<div class="container-fluid">
<table>
<tbody>
<tr>
<td class="logo"><img src="/img/istio-logo-blue-background.svg" alt="White logo with 'Istio Blue' background"></td>
<td class="logo"><img style="background-color: lightgrey" src="/img/istio-logo.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-logo-social-blue-background.svg" alt="White logo with 'Istio Blue' background, square container"></td>
<td class="logo"><img style="background-color: lightgrey" src="/img/istio-logo-social.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-blue-logo-white-background.svg" alt="'Istio Blue` logo with white background"></td>
<td class="logo"><img style="background-color: lightgrey" src="/img/istio-blue-logo.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-blue-logo-social-white-background.svg" alt="'Istio Blue` logo with white background, square container"></td>
<td class="logo"><img style="background-color: lightgrey" src="/img/istio-blue-logo-social.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>
</tbody>
</table>
<br>
Here's some advice about using these images:
<br><br>
<div class="row">
<div class="col-12 col-lg-6">
<div class="panel">
<div class="title">
<div>
<p>Cool</p>
</div>
</div>
<div class="body">
<ul>
<li><i class="do fa fa-check"></i> Use the Istio logo to link to istio.io</li>
<li><i class="do fa fa-check"></i> Use the Istio logo to advertise that your product has support for Istio</li>
<li><i class="do fa fa-check"></i> Use the Istio logo in a blog post or news article about Istio</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="panel">
<div class="title">
<div>
<p>Not Cool</p>
</div>
</div>
<div class="body">
<ul>
<li><i class="dont fa fa-times"></i> Use the Istio logo for your application’s icon</li>
<li><i class="dont fa fa-times"></i> Create a modified version of the Istio logo</li>
<li><i class="dont fa fa-times"></i> Integrate the Istio logo into your logo</li>
<li><i class="dont fa fa-times"></i> Change the colors or aspect ratio</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

1
src/sass/_common.scss
View File

@ -18,3 +18,4 @@
@import "layouts/blog";
@import "layouts/community";
@import "layouts/landing";
@import "layouts/media-resources";

80
src/sass/layouts/_media-resources.scss Normal file
View File

@ -0,0 +1,80 @@
.media-resources {
$panel-height: 11rem;
$title-size: 2rem;
table, th, td {
border: none;
}
td {
line-height: 1.15em;
vertical-align: middle;
padding-top: 1em;
padding-bottom: 1em;
}
td.logo {
width : 100px;
border: none;
}
td.desc {
border: none;
}
li {
list-style-type: none;
}
i.do {
color: green;
width: 1rem;
}
i.dont {
color: red;
width: 1rem;
}
.panel {
display: table;
border-radius: 4px;
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: 4px;
border-bottom-left-radius: 4px;
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;
}
}
}

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

9
static/img/istio-blue-logo-social-white-background.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
<g id="logo" fill="#466BB0">
<rect id="background" fill="#FFFFFF" width="320" height="320" />
<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>
Side by Side

After

Width:  |  Height:  |  Size: 431 B

8
static/img/istio-blue-logo-social.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 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>
Side by Side

After

Width:  |  Height:  |  Size: 362 B

9
static/img/istio-blue-logo-white-background.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 240">
<g id="logo" fill="#466BB0">
<rect id="background" fill="#fff" width="160" height="240" />
<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>
Side by Side

After

Width:  |  Height:  |  Size: 397 B

8
static/img/istio-blue-logo.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 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>
Side by Side

After

Width:  |  Height:  |  Size: 331 B