Anxhelo Lushka
6 years ago
16 changed files with 25 additions and 571 deletions
@ -1,546 +0,0 @@ |
|||||
<!DOCTYPE html> |
|
||||
<html lang="en" dir="ltr"> |
|
||||
<head> |
|
||||
<meta charset="utf-8"> |
|
||||
<title>I2P Styleguide</title> |
|
||||
<link rel="stylesheet" href="/i2p-styleguide/assets/static/open-iconic-bootstrap.css" /> |
|
||||
<link rel="stylesheet" href="/i2p-styleguide/assets/static/bootstrap.min.css"> |
|
||||
<link rel="stylesheet" href="/i2p-styleguide/assets/styles/main.css"> |
|
||||
<link rel="shortcut icon" type="image/png" href="/i2p-styleguide/assets/images/favicon.png"/> |
|
||||
<link href="/i2p-styleguide/assets/fonts/sourcesans.css" rel="stylesheet"> |
|
||||
<link href="/i2p-styleguide/assets/fonts/sourcecode.css" rel="stylesheet"> |
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||
</head> |
|
||||
|
|
||||
<body> |
|
||||
<nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top"> |
|
||||
<a class="navbar-brand" href="https://geti2p.net/"> |
|
||||
<img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img> |
|
||||
</a> |
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> |
|
||||
<span class="navbar-toggler-icon"></span> |
|
||||
</button> |
|
||||
<div class="collapse navbar-collapse " id="navbarSupportedContent"> |
|
||||
<ul class="navbar-nav mr-auto display-xs"> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="/i2p-styleguide/">About</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="/i2p-styleguide/getting-started">Getting Started</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="/i2p-styleguide/visuals/">Visuals</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="/i2p-styleguide/components/">Components</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="/i2p-styleguide/copywriting/">Copywriting</a> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</div> |
|
||||
</nav> |
|
||||
|
|
||||
<div class="row"> |
|
||||
<div class="col-md-3 col-sm-5 hidden-sm p-0"> |
|
||||
<div class="row" style="height: 100%"> |
|
||||
<div class="col-md-6 col-sm-6 col-xs-6 p-0"> |
|
||||
<div class="sidebar rb-sidebar__1" id="sidebar1"> |
|
||||
<ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill"> |
|
||||
<a href="/i2p-styleguide/" class="sidebar__link__light"> |
|
||||
<li class="list-group-item rb-main-sidebar">About</li> |
|
||||
</a> |
|
||||
|
|
||||
<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light"> |
|
||||
<li class="list-group-item rb-main-sidebar">Getting Started</li> |
|
||||
</a> |
|
||||
|
|
||||
<a href="/i2p-styleguide/visuals/" class="sidebar__link__light"> |
|
||||
<li class="list-group-item rb-main-sidebar">Visuals</li> |
|
||||
</a> |
|
||||
|
|
||||
<a href="/i2p-styleguide/components/" class="sidebar__link__light"> |
|
||||
<li class="list-group-item rb-main-sidebar">Components</li> |
|
||||
</a> |
|
||||
|
|
||||
<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light"> |
|
||||
<li class="list-group-item rb-main-sidebar">Copywriting</li> |
|
||||
</a> |
|
||||
</ul> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
<div class="col-md-6 col-sm-6 col-xs-6 p-0"> |
|
||||
<div class="sidebar border-left-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;"> |
|
||||
<ul class="p-0 list-group pt-3 sidebar-fill"> |
|
||||
|
|
||||
|
|
||||
<a class="sidebar__link__light" href="#colors"><li class="list-group-item rb-sidebar"> |
|
||||
Colors |
|
||||
</li></a> |
|
||||
|
|
||||
|
|
||||
|
|
||||
<a class="sidebar__link__light" href="#grid"><li class="list-group-item rb-sidebar"> |
|
||||
Grid |
|
||||
</li></a> |
|
||||
|
|
||||
|
|
||||
|
|
||||
<a class="sidebar__link__light" href="#typography"><li class="list-group-item rb-sidebar"> |
|
||||
Typography |
|
||||
</li></a> |
|
||||
|
|
||||
|
|
||||
|
|
||||
<a class="sidebar__link__light" href="#assets"><li class="list-group-item rb-sidebar"> |
|
||||
Assets |
|
||||
</li></a> |
|
||||
|
|
||||
|
|
||||
</ul> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="col-lg-9 pt-3 pl-5"> |
|
||||
|
|
||||
|
|
||||
<div id="colors" class="page-header mb-4"> |
|
||||
<h2>Colors</h2> |
|
||||
<p class="text-muted">The main I2P color is Blue. Use Green as a secondary option and Yellow as accent color.</p> |
|
||||
</div> |
|
||||
<div class="row"> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-primary text-white small">#4661A9</div> |
|
||||
<h6 class="pt2 text-left">Primary Color</h6> |
|
||||
</div> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-secondary text-white small">#60AB60</div> |
|
||||
<h6 class="pt2 text-left">Secondary color</h6> |
|
||||
</div> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-warning text-white small">#FFC434</div> |
|
||||
<h6 class="pt2 text-left">Warning</h6> |
|
||||
</div> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-danger text-white small">#E15647</div> |
|
||||
<h6 class="pt2 text-left">Danger</h6> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row"> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-0 text-black small">#f8f9fa</div> |
|
||||
<h6 class="pt2 text-left">Gray 0</h6> |
|
||||
</div> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-1 text-black small">#f1f3f5</div> |
|
||||
<h6 class="pt2 text-left">Gray 1</h6> |
|
||||
</div> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-2 text-black small">#e9ecef</div> |
|
||||
<h6 class="pt2 text-left">Gray 2</h6> |
|
||||
</div> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-3 text-black small">#dee2e6</div> |
|
||||
<h6 class="pt2 text-left">Gray 3</h6> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row"> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-4 text-black small">#ced4da</div> |
|
||||
<h6 class="pt2 text-left">Gray 4</h6> |
|
||||
</div> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-5 text-black small">#adb5bd</div> |
|
||||
<h6 class="pt2 text-left">Gray 5</h6> |
|
||||
</div> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-6 text-white small">#868e96</div> |
|
||||
<h6 class="pt2 text-left">Gray 6</h6> |
|
||||
</div> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-7 text-white small">#495057</div> |
|
||||
<h6 class="pt2 text-left">Gray 7</h6> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="row"> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-8 text-white small">#343a40</div> |
|
||||
<h6 class="pt2 text-left">Gray 8</h6> |
|
||||
</div> |
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"> |
|
||||
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-9 text-white small">#212529</div> |
|
||||
<h6 class="pt2 text-left">Gray 9</h6> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div id="grid" class="page-header mb-4 mt-5"> |
|
||||
<h2>Grid</h2> |
|
||||
<p class="text-muted">Our main used grid compositions are outlined here. Use them to generate one column or various columns layouts.</p> |
|
||||
</div> |
|
||||
<div class="container bg-light p-5"> |
|
||||
<div class="row mb-1"> |
|
||||
<div class="col-12"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
12 |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row mb-1"> |
|
||||
<div class="col-4"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
4 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-8"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
8 |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row mb-1"> |
|
||||
<div class="col-3"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
3 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-9"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
9 |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row mb-1"> |
|
||||
<div class="col-2"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
2 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-2"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
2 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-2"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
2 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-2"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
2 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-2"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
2 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-2"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
2 |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row mb-1"> |
|
||||
<div class="col-3"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
3 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-3"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
3 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-3"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
3 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-3"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
3 |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row mb-1"> |
|
||||
<div class="col-4"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
4 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-4"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
4 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-4"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
4 |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row mb-1"> |
|
||||
<div class="col-6"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
6 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-6"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
6 |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row mb-1"> |
|
||||
<div class="col-8 offset-2"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
8 |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row mb-1"> |
|
||||
<div class="col-6 offset-3"> |
|
||||
<p class="background-primary p-3 text-white small"> |
|
||||
6 |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div id="typography" class="page-header mb-4 mt-5"> |
|
||||
<h2>Typography</h2> |
|
||||
<p class="text-muted">Our main typography is Source Sans made by Adobe.</p> |
|
||||
</div> |
|
||||
<div class="row"> |
|
||||
<div class="col-12 typography__headers"> |
|
||||
<div class="typography__headers__item"> |
|
||||
<p class="text-black small text-muted">H1</p> |
|
||||
<h1>Protect communications from monitoring</h1> |
|
||||
</div> |
|
||||
<div class="typography__headers__item"> |
|
||||
<p class="text-black small text-muted">H2</p> |
|
||||
<h2>Protect communications from monitoring</h2> |
|
||||
</div> |
|
||||
<div class="typography__headers__item"> |
|
||||
<p class="text-black small text-muted">H3</p> |
|
||||
<h3>Protect communications from monitoring</h3> |
|
||||
</div> |
|
||||
<div class="typography__headers__item"> |
|
||||
<p class="text-black small text-muted">H4</p> |
|
||||
<h4>Protect communications from monitoring</h4> |
|
||||
</div> |
|
||||
<div class="typography__headers__item"> |
|
||||
<p class="text-black small text-muted">H5</p> |
|
||||
<h5>Protect communications from monitoring</h5> |
|
||||
</div> |
|
||||
<div class="typography__headers__item"> |
|
||||
<p class="text-black small text-muted">H6</p> |
|
||||
<h6>Protect communications from monitoring</h6> |
|
||||
</div> |
|
||||
|
|
||||
<div class="typography__headers__item"> |
|
||||
<p class="text-black small pt-5 text-muted">H1 display</p> |
|
||||
<h1 class="header-display color-secondary">I2P Anonymous Network</h1> |
|
||||
</div> |
|
||||
<div class="typography__headers__item"> |
|
||||
<p class="text-black small text-muted">H2 display</p> |
|
||||
<h2 class="header-display color-secondary">I2P Anonymous Network</h2> |
|
||||
</div> |
|
||||
<div class="typography__headers__item"> |
|
||||
<p class="text-black small text-muted">H3 display</p> |
|
||||
<h3 class="header-display color-secondary">I2P Anonymous Network</h3> |
|
||||
</div> |
|
||||
<div class="typography__headers__item"> |
|
||||
<p class="text-black small text-muted">H4 display</p> |
|
||||
<h4 class="header-display color-secondary">I2P Anonymous Network</h4> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row pt-5"> |
|
||||
<div class="col-md-5"> |
|
||||
<p class="text-black small"> |
|
||||
<span class="text-left color-gray-2 rb-isBold">Paragraph</span> |
|
||||
<span class="text-right color-primary rb-isBold" style="float: right;">Source Sans Regular</span> |
|
||||
</p> |
|
||||
<p> |
|
||||
I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other. |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="col-md-1"></div> |
|
||||
<div class="col-md-6"> |
|
||||
<p class="text-black small"> |
|
||||
<span class="text-left color-gray-2 rb-isBold">Code Snippet</span> |
|
||||
<span class="text-right color-primary rb-isBold" style="float: right;">Source Code</span> |
|
||||
</p> |
|
||||
<pre class="bg-light p-2 prettyprint rb-code" style="border: none;"> |
|
||||
$('.rb-sidebar').on('click', 'a',function() { |
|
||||
$('.rb-sidebar a.active').removeClass('active'); |
|
||||
$(this).addClass('active'); |
|
||||
}); |
|
||||
</pre> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div id="assets" class="page-header mb-4 mt-5"> |
|
||||
<h2>Identity Assets</h2> |
|
||||
<p class="text-muted">The I2P brand assets are included here. Use them responsibly.</p> |
|
||||
</div> |
|
||||
<div class="row"> |
|
||||
<div class="col-xs-12 col-md-5 col-sm-6"> |
|
||||
<div class="image border p-5"> |
|
||||
<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_color.png" class="rb-contain"> |
|
||||
</div> |
|
||||
<p class="text-black pt-3 align-horizontally flex-space-between"> |
|
||||
<span class="text-left color-gray-2 rb-isBold">Default</span> |
|
||||
<span class="text-right color-primary rb-isBold" style="float: right;"> |
|
||||
<a target="_blank" |
|
||||
href="https://demo.identihub.co/assets/SecureDrop_ICONS_62.svg" |
|
||||
class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a> |
|
||||
</span> |
|
||||
</p> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<div class="col-xs-12 col-md-5 col-sm-6"> |
|
||||
<div class="image border p-5 bg-dark"> |
|
||||
<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="rb-contain"> |
|
||||
</div> |
|
||||
<p class="text-black pt-3 align-horizontally flex-space-between"> |
|
||||
<span class="text-left color-gray-2 rb-isBold">White</span> |
|
||||
<span class="text-right color-primary rb-isBold" style="float: right;"> |
|
||||
<a target="_blank" |
|
||||
href="https://demo.identihub.co/assets/SecureDrop_ICONS_6.svg" |
|
||||
class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a> |
|
||||
</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="row mt-5"> |
|
||||
<div class="col-xs-12 col-md-5 col-sm-6"> |
|
||||
<div class="image border p-5"> |
|
||||
<img src="https://github.com/uracreative/works/raw/master/I2P/PNG/vertical_color.png" class="rb-contain"> |
|
||||
</div> |
|
||||
<p class="text-black pt-3 align-horizontally flex-space-between"> |
|
||||
<span class="text-left color-gray-2 rb-isBold">Default</span> |
|
||||
<span class="text-right color-primary rb-isBold" style="float: right;"> |
|
||||
<a target="_blank" |
|
||||
href="https://demo.identihub.co/assets/SecureDrop_ICONS_63.svg" |
|
||||
class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a> |
|
||||
</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
|
|
||||
<div class="col-xs-12 col-md-5 col-sm-6"> |
|
||||
<div class="image border p-5 bg-dark"> |
|
||||
<img src="https://github.com/uracreative/works/raw/master/I2P/PNG/vertical_white.png" class="rb-contain"> |
|
||||
</div> |
|
||||
<p class="text-black pt-3 align-horizontally flex-space-between"> |
|
||||
<span class="text-left color-gray-2 rb-isBold">White</span> |
|
||||
<span class="text-right color-primary rb-isBold" style="float: right;"> |
|
||||
<a target="_blank" |
|
||||
href="https://demo.identihub.co/assets/SecureDrop_ICONS_9.svg" |
|
||||
class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a> |
|
||||
</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="row mt-5"> |
|
||||
<div class="col-xs-12 col-md-5 col-sm-6"> |
|
||||
<div class="image border p-5"> |
|
||||
<img src="https://github.com/uracreative/works/raw/master/I2P/PNG/icon_color.png" class="rb-contain"> |
|
||||
</div> |
|
||||
<p class="text-black pt-3 align-horizontally flex-space-between"> |
|
||||
<span class="text-left color-gray-2 rb-isBold">Default</span> |
|
||||
<span class="text-right color-primary rb-isBold" style="float: right;"> |
|
||||
<a target="_blank" |
|
||||
href="https://demo.identihub.co/assets/SecureDrop_ICONS_1.svg" |
|
||||
class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a> |
|
||||
</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
|
|
||||
<div class="col-xs-12 col-md-5 col-sm-6"> |
|
||||
<div class="image bg-dark border p-5"> |
|
||||
<img src="https://github.com/uracreative/works/raw/master/I2P/PNG/icon_white.png" class="rb-contain"> |
|
||||
</div> |
|
||||
<p class="text-black pt-3 align-horizontally flex-space-between"> |
|
||||
<span class="text-left color-gray-2 rb-isBold">White</span> |
|
||||
<span class="text-right color-primary rb-isBold" style="float: right;"> |
|
||||
<a target="_blank" |
|
||||
href="https://demo.identihub.co/assets/SecureDrop_ICONS_3.svg" |
|
||||
class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a> |
|
||||
</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="row mt-5"> |
|
||||
<div class="col-md-6"> |
|
||||
<div class="bg-box p-5 mb-3"> |
|
||||
<h6>I2P repo</h6> |
|
||||
<p class="m-0">Download SVG and PNG files</p> |
|
||||
<a class="btn btn-lg btn-link p-0" title="I2P Repo" |
|
||||
href="https://github.com/uracreative/works/tree/master/I2P" target="_blank">Visit Repo</a></div> |
|
||||
</div> |
|
||||
<div class="col-md-6"> |
|
||||
<div class="bg-box p-5 text-left"> |
|
||||
<h6>Styleguide Mirror on Identihub</h6> |
|
||||
<p class="m-0">Identihub Project</p> |
|
||||
<a class="btn btn-lg btn-link p-0" href="https://demo.identihub.co/project/securedrop" |
|
||||
target="_blank">Visit Project Page</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="page-header mb-4 mt-5 d-none d-sm-none"> |
|
||||
<h3>Scrollspy</h3> |
|
||||
<!--p class="text-muted">Some Description about scrollspy.</p--> |
|
||||
</div> |
|
||||
<div class="row p-0 pt-5 bg-light d-none d-sm-none"> |
|
||||
<div class="bd-example"> |
|
||||
<div class="row"> |
|
||||
<div class="col-4"> |
|
||||
<div id="list-example" class="list-group"> |
|
||||
<a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a> |
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a> |
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a> |
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="col-8"> |
|
||||
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example"> |
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt! |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="dropdown-divider mt-5 wi"></div> |
|
||||
|
|
||||
<div class="row"> |
|
||||
<div class="col-12 p-0"> |
|
||||
<p class="mt-5 mb-5"> |
|
||||
<span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<script src="/i2p-styleguide/assets/javascript/modernizr.min.js"></script> |
|
||||
<script src="/i2p-styleguide/assets/javascript/jquery-3.3.1.slim.min.js"></script> |
|
||||
<script src="/i2p-styleguide/assets/javascript/popper.min.js"></script> |
|
||||
<script src="/i2p-styleguide/assets/javascript/bootstrap.min.js"></script> |
|
||||
<!-- <script src="/i2p-styleguide/assets/javascript/run_prettify.js"></script> /* --> |
|
||||
<script type="text/javascript" src="/i2p-styleguide/assets/javascript/index.js"></script> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
</body> |
|
||||
</html> |
|
||||
@ -1,7 +1,7 @@ |
|||||
--- |
--- |
||||
layout: visuals |
layout: design |
||||
title: Visuals |
title: Design |
||||
permalink: /visuals/ |
permalink: /design/ |
||||
|
|
||||
sidebar: |
sidebar: |
||||
- colors: Colors |
- colors: Colors |
||||
Loading…
Reference in new issue