Browse Source

Change sidebar Visual -> Design

writing-page-updates
Anxhelo Lushka 6 years ago
parent
commit
0bd1f1764f
No known key found for this signature in database GPG Key ID: 86086158C83770F8
  1. 0
      _includes/design/assets.html
  2. 0
      _includes/design/colors.html
  3. 0
      _includes/design/grid.html
  4. 0
      _includes/design/icons.html
  5. 0
      _includes/design/typography.html
  6. 2
      _includes/navbar.html
  7. 4
      _includes/navbar_side.html
  8. 8
      _layouts/design.html
  9. 2
      _site/404.html
  10. 6
      _site/components/index.html
  11. 6
      _site/copywriting/index.html
  12. 6
      _site/getting-started/index.html
  13. 6
      _site/index.html
  14. 4
      _site/jekyll/update/2018/05/06/welcome-to-jekyll.html
  15. 546
      _site/visuals/index.html
  16. 6
      design.md

0
_includes/visuals/assets.html → _includes/design/assets.html

0
_includes/visuals/colors.html → _includes/design/colors.html

0
_includes/visuals/grid.html → _includes/design/grid.html

0
_includes/visuals/icons.html → _includes/design/icons.html

0
_includes/visuals/typography.html → _includes/design/typography.html

2
_includes/navbar.html

@ -14,7 +14,7 @@
<a class="nav-link" href="{{site.baseurl}}/getting-started">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{site.baseurl}}/visuals/">Visuals</a>
<a class="nav-link" href="{{site.baseurl}}/design/">Visuals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{site.baseurl}}/components/">Components</a>

4
_includes/navbar_side.html

@ -8,8 +8,8 @@
<li class="list-group-item rb-main-sidebar">Getting Started</li>
</a>
<a href="{{site.baseurl}}/visuals/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Visuals</li>
<a href="{{site.baseurl}}/design/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Design</li>
</a>
<a href="{{site.baseurl}}/components/" class="sidebar__link__light">

8
_layouts/visuals.html → _layouts/design.html

@ -16,10 +16,10 @@
</div>
<div class="col-lg-9 pt-3 pl-5">
{{ content }}
{% include /visuals/colors.html participants=site.data.profiles %}
{% include /visuals/grid.html participants=site.data.profiles %}
{% include /visuals/typography.html participants=site.data.profiles %}
{% include /visuals/assets.html participants=site.data.profiles %}
{% include /design/colors.html participants=site.data.profiles %}
{% include /design/grid.html participants=site.data.profiles %}
{% include /design/typography.html participants=site.data.profiles %}
{% include /design/assets.html participants=site.data.profiles %}
{% include scrollspy.html %}
{% include scripts.html %}
</div>

2
_site/404.html

@ -29,7 +29,7 @@
<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>
<a class="nav-link" href="/i2p-styleguide/design/">Visuals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/components/">Components</a>

6
_site/components/index.html

@ -29,7 +29,7 @@
<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>
<a class="nav-link" href="/i2p-styleguide/design/">Visuals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/components/">Components</a>
@ -55,8 +55,8 @@
<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 href="/i2p-styleguide/design/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Design</li>
</a>
<a href="/i2p-styleguide/components/" class="sidebar__link__light">

6
_site/copywriting/index.html

@ -29,7 +29,7 @@
<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>
<a class="nav-link" href="/i2p-styleguide/design/">Visuals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/components/">Components</a>
@ -55,8 +55,8 @@
<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 href="/i2p-styleguide/design/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Design</li>
</a>
<a href="/i2p-styleguide/components/" class="sidebar__link__light">

6
_site/getting-started/index.html

@ -29,7 +29,7 @@
<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>
<a class="nav-link" href="/i2p-styleguide/design/">Visuals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/components/">Components</a>
@ -55,8 +55,8 @@
<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 href="/i2p-styleguide/design/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Design</li>
</a>
<a href="/i2p-styleguide/components/" class="sidebar__link__light">

6
_site/index.html

@ -30,7 +30,7 @@
<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>
<a class="nav-link" href="/i2p-styleguide/design/">Visuals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/components/">Components</a>
@ -56,8 +56,8 @@
<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 href="/i2p-styleguide/design/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Design</li>
</a>
<a href="/i2p-styleguide/components/" class="sidebar__link__light">

4
_site/jekyll/update/2018/05/06/welcome-to-jekyll.html

@ -29,7 +29,7 @@
<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>
<a class="nav-link" href="/i2p-styleguide/design/">Visuals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/components/">Components</a>
@ -46,7 +46,7 @@
<header class="post-header">
<h1 class="post-title p-name" itemprop="name headline">Reproducible Builds Styleguide</h1>
<p class="post-meta">
<time class="dt-published" datetime="2018-05-06T07:24:53-03:00" itemprop="datePublished">May 6, 2018
<time class="dt-published" datetime="2018-05-06T12:24:53+02:00" itemprop="datePublished">May 6, 2018
</time></p>
</header>

546
_site/visuals/index.html

@ -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>

6
visuals.md → design.md

@ -1,7 +1,7 @@
---
layout: visuals
title: Visuals
permalink: /visuals/
layout: design
title: Design
permalink: /design/
sidebar:
- colors: Colors
Loading…
Cancel
Save