uracreative
/
i2p-styleguide
mirror of https://github.com/uracreative/i2p-styleguide
1
0
Fork 0
Code Issues Releases Wiki Activity
I2P brand styleguides for the web
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 Commits
5 Branches
0 Tags
3.2 MiB
Tree: fc86b36751
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'fc86b36751'
${ noResults }
i2p-styleguide/_includes/brand/logo.html

231 lines
12 KiB
Raw Normal View History

Added dark theme, draft variables and branding page
5 years ago
<div id="logo" class="col page-header mb-5 mt-5">
<h2>Logo</h2>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 mb-3">
<h5 class="pb-3">Composition (Horizontal)</h5>
<div class="bg-box text-center p-5">
<img src="{{ site.baseurl }}/assets/images/composition-horizontal.svg" alt="I2P Horizontal Composition">
</div>
</div>
<div class="col-md-6 col-sm-12">
<h5 class="pb-3">Composition (Vertical)</h5>
<div class="bg-box text-center p-5">
<img src="{{ site.baseurl }}/assets/images/composition-vertical.svg" alt="I2P Vertical Composition">
</div>
</div>
</div>
<div class="row my-5">
<div class="col-md-6 col-sm-12 mb-3">
<h5 class="pb-3">Safe Space (Horizontal)</h5>
<div class="bg-box text-center p-5">
<img src="{{ site.baseurl }}/assets//images/safespace-horizontal.svg" alt="I2P Safe Space Horizontal">
</div>
</div>
<div class="col-md-6 col-sm-12">
<h5 class="pb-3">Safe Space (Vertical)</h5>
<div class="bg-box text-center p-5">
<img src="{{ site.baseurl }}/assets//images/safespace-vertical.svg" alt="I2P Safe Space Vertical">
</div>
</div>
</div>
<div id="assets" class="col mb-4 mt-5">
<h4>Download Logo Assets</h4>
</div>
<div class="row mb-5">
<div class="col-sm-12 col-md-3 col-sm-3 mb-4">
<div class="image flexing border p-4">
<img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_horizontal_color.png" alt="I2P Horizontal color logo">
</div>
<p class="mb-0 mt-2 caption">Horizontal Color Light Background</p>
<div class="dropdown mb-5">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="/images/i2p_horizontal_color.png" download>PNG</a>
<a class="dropdown-item" href="/images/i2p_horizontal_color.svg" download>SVG</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-sm-3 mb-4">
<div class="image flexing border p-4">
<img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_horizontal_black.png" alt="I2P Horizontal black logo">
</div>
<p class="mb-0 mt-2 caption">Horizontal Black Light Background</p>
<div class="dropdown mb-5">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="/images/i2p_horizontal_black.png" download>PNG</a>
<a class="dropdown-item" href="/images/i2p_horizontal_black.svg" download>SVG</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-sm-3 mb-4">
<div class="image flexing border p-4 background-indigo-600">
<img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_horizontal_white.png" alt="I2P Horizontal color logo with light background">
</div>
<p class="mb-0 mt-2 caption">Horizontal Color Light Background</p>
<div class="dropdown mb-5">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="/images/i2p_horizontal_color_bg.png" download>PNG</a>
<a class="dropdown-item" href="/images/i2p_horizontal_color_bg.svg" download>SVG</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-sm-3 mb-4">
<div class="image flexing border p-4 background-black">
<img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_horizontal_white.png" alt="I2P Horizontal white logo with black background">
</div>
<p class="mb-0 mt-2 caption">Horizontal White Black Background</p>
<div class="dropdown mb-5">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="/images/i2p_horizontal_white_bg.png" download>PNG</a>
<a class="dropdown-item" href="/images/i2p_horizontal_white_bg.svg" download>SVG</a>
</div>
</div>
</div>
</div>
<div class="row pt-2">
<div class="col-sm-12 col-md-3 col-sm-3">
<div class="image border p-4">
<img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_vertical_color.png" alt="I2P Vertical color logo">
</div>
<p class="mb-0 mt-2 caption">Vertical Color Light Background</p>
<div class="dropdown mb-5">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="/images/i2p_vertical_color.png" download>PNG</a>
<a class="dropdown-item" href="/images/i2p_vertical_color.svg" download>SVG</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-sm-3">
<div class="image border p-4">
<img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_vertical_black.png" alt="I2P Vertical black logo">
</div>
<p class="mb-0 mt-2 caption">Vertical Black Light Background</p>
<div class="dropdown mb-5">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="/images/i2p_vertical_black.png" download>PNG</a>
<a class="dropdown-item" href="/images/i2p_vertical_black.svg" download>SVG</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-sm-3">
<div class="image border p-4 background-indigo-600">
<img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_vertical_white.png" alt="I2P Vertical color logo with light background">
</div>
<p class="mb-0 mt-2 caption">Vertical Color Light Background</p>
<div class="dropdown mb-5">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="/images/i2p_vertical_color_bg.png" download>PNG</a>
<a class="dropdown-item" href="/images/i2p_vertical_color_bg.svg" download>SVG</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-sm-3">
<div class="image border p-4 background-black">
<img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_vertical_white.png" alt="I2P Vertical white logo with black background">
</div>
<p class="mb-0 mt-2 caption">Vertical White Black Background</p>
<div class="dropdown mb-5">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="/images/i2p_vertical_white_bg.png" download>PNG</a>
<a class="dropdown-item" href="/images/i2p_vertical_white_bg.svg" download>SVG</a>
</div>
</div>
</div>
</div>
<div class="row mb-5">
<div class="col-sm-12 col-md-3 col-sm-3">
<div class="image border p-5">
<img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_icon_color.png" alt="I2P icon color logo">
</div>
<p class="mb-0 mt-2 caption">Icon Color Light Background</p>
<div class="dropdown mb-5">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="/images/i2p_icon_color.png" download>PNG</a>
<a class="dropdown-item" href="/images/i2p_icon_color.svg" download>SVG</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-sm-3">
<div class="image border p-5">
<img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_icon_black.png" alt="I2P icon black logo">
</div>
<p class="mb-0 mt-2 caption">Icon Black Light Background</p>
<div class="dropdown mb-5">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="/images/i2p_icon_black.png" download>PNG</a>
<a class="dropdown-item" href="/images/i2p_icon_black.svg" download>SVG</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-sm-3">
<div class="image border p-5 background-indigo-600">
<img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_icon_white.png" alt="I2P icon color logo with light background">
</div>
<p class="mb-0 mt-2 caption">Icon Color Light Background</p>
<div class="dropdown mb-5">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="/images/i2p_icon_color_bg.png" download>PNG</a>
<a class="dropdown-item" href="/images/i2p_icon_color_bg.svg" download>SVG</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-sm-3">
<div class="image border p-5 background-black">
<img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_icon_white.png" alt="I2P icon white logo with black background">
</div>
<p class="mb-0 mt-2 caption">Icon White Black Background</p>
<div class="dropdown mb-5">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="/images/i2p_icon_white_bg.png" download>PNG</a>
<a class="dropdown-item" href="/images/i2p_icon_white_bg.svg" download>SVG</a>
</div>
</div>
</div>
</div>