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.
493 lines
20 KiB
493 lines
20 KiB
<!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-light border-bottom border-black sticky-top rp-navbar__top">
|
|
<a class="navbar-brand" href="https://geti2p.net/">
|
|
<img src="/i2p-styleguide/assets/images/horizontal_color.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 hidden-sm p-0">
|
|
<div class="row" style="height: 100%">
|
|
<div class="col-md-6 col-sm-16 col-xs-12 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">
|
|
<li class="list-group-item rb-main-sidebar">
|
|
<a href="/i2p-styleguide/" class="sidebar__link__light">About</a>
|
|
</li>
|
|
|
|
<li class="list-group-item rb-main-sidebar">
|
|
<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">Getting Started</a>
|
|
</li>
|
|
|
|
<li class="list-group-item rb-main-sidebar">
|
|
<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">Visuals</a>
|
|
</li>
|
|
|
|
<li class="list-group-item rb-main-sidebar">
|
|
<a href="/i2p-styleguide/components/" class="sidebar__link__light">Components</a>
|
|
</li>
|
|
|
|
<li class="list-group-item rb-main-sidebar">
|
|
<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">Copywriting</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 col-xs-3 p-0">
|
|
<div class="sidebar border-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;">
|
|
<ul class="p-0 list-group pt-3 sidebar-fill">
|
|
|
|
|
|
<a href="#alerts"><li class="list-group-item rb-sidebar">
|
|
Alerts
|
|
</li></a>
|
|
|
|
|
|
|
|
<a href="#badges"><li class="list-group-item rb-sidebar">
|
|
Badges
|
|
</li></a>
|
|
|
|
|
|
|
|
<a href="#buttons"><li class="list-group-item rb-sidebar">
|
|
Buttons
|
|
</li></a>
|
|
|
|
|
|
|
|
<a href="#cards"><li class="list-group-item rb-sidebar">
|
|
Cards
|
|
</li></a>
|
|
|
|
|
|
|
|
<a href="#forms"><li class="list-group-item rb-sidebar">
|
|
Forms
|
|
</li></a>
|
|
|
|
|
|
|
|
<a href="#header"><li class="list-group-item rb-sidebar">
|
|
Header
|
|
</li></a>
|
|
|
|
|
|
|
|
<a href="#pagination"><li class="list-group-item rb-sidebar">
|
|
Pagination
|
|
</li></a>
|
|
|
|
|
|
|
|
<a href="#scrollspy"><li class="list-group-item rb-sidebar">
|
|
Scrollspy
|
|
</li></a>
|
|
|
|
|
|
|
|
<a href="#tables"><li class="list-group-item rb-sidebar">
|
|
Tables
|
|
</li></a>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
|
|
<!--<p>This is the components page</p>
|
|
-->
|
|
<div class="component-wrapper my-5" id="">
|
|
<div class="page-header mb-4">
|
|
<h2 id="alerts">Alerts</h2>
|
|
<p class="text-muted">Some Description about alerts.</p>
|
|
</div>
|
|
<div class="row p-5 bg-light">
|
|
<div class="col-12 alert alert-primary" role="alert">
|
|
<p class="mb-0">This is a primary alert — check it out!</p>
|
|
</div>
|
|
<div class="col-12 alert alert-secondary" role="alert">
|
|
<p class="mb-0">This is a default alert — check it out!</p>
|
|
</div>
|
|
<div class="col-12 alert alert-success" role="alert">
|
|
<p class="mb-0">This is a success alert — check it out!</p>
|
|
</div>
|
|
<div class="col-12 alert alert-warning" role="alert">
|
|
<p class="mb-0">This is a warning alert — check it out!</p>
|
|
</div>
|
|
<div class="col-12 alert alert-danger" role="alert">
|
|
<p class="mb-0">This is a danger alert — check it out!</p>
|
|
</div>
|
|
<div class="col-12 alert alert-success" role="alert">
|
|
<h4 class="alert-header">Well done!!</h4>
|
|
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
|
<hr>
|
|
<p class="mb-0">Also some extra text and a <a href="#alerts" class="alert-link">link</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="component-wrapper my-5" id="">
|
|
<div class="page-header mb-4">
|
|
<h2 id="badges">Badges</h2>
|
|
<!--p class="text-muted">Some Description about badges.</p-->
|
|
</div>
|
|
<div class="row p-5 bg-light">
|
|
<div class="col-12">
|
|
<h2>Example heading <span class="badge badge-primary">New</span></h2>
|
|
</div>
|
|
<div class="col-12">
|
|
<h4 class="pt-4">Example heading <span class="badge badge-secondary">New</span></h4>
|
|
</div>
|
|
<div class="col-12">
|
|
<h6 class="pt-4">Example heading <span class="badge-pill badge-primary">New</span></h6>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="component-wrapper my-5" id="">
|
|
<div id="buttons" class="mb-4">
|
|
<h2>Buttons</h2>
|
|
<!--p class="text-muted">Some Description about buttons.</p-->
|
|
</div>
|
|
<div class="row bg-light p-5">
|
|
<div class="col-xs-12 col-sm-6 col-md-6 p-1">
|
|
<p class="text-black small text-muted m-0 pb-2">Primary</p>
|
|
<button type="button" class="btn btn-lg btn-primary btn-pill mr-2">Primary</button>
|
|
<p class="text-black small text-muted m-0 pt-2 pb-2">Ghost</p>
|
|
<button type="button" class="btn btn-lg btn-outline-primary btn-pill mr-2">How to Contribute</button>
|
|
<p class="text-black small text-muted m-0 pt-2">Link</p>
|
|
<button type="button" class="btn btn-lg btn-link mr-2">Learn more</button>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-6 p-1">
|
|
<p class="text-black small text-muted m-0 pt-2 pb-2">Medium</p>
|
|
<button type="button" class="btn btn-medium btn-pill mr-2">Medium</button>
|
|
<button type="button" class="btn btn-outline-medium btn-pill mr-2">Ghost</button>
|
|
<button type="button" class="btn btn-link mr-2">Link</button>
|
|
<p class="text-black small text-muted m-0 pt-2 pb-2">Small</p>
|
|
<button type="button" class="btn btn-sm btn-small btn-pill mr-2">Small</button>
|
|
<button type="button" class="btn btn-sm btn-outline-small btn-pill mr-2">Ghost</button>
|
|
<button type="button" class="btn btn-sm btn-link mr-2">Link</button>
|
|
<p class="text-black small text-muted m-0 pt-5">Scroller</p>
|
|
<button type="button" class="btn btn-scroller mr-2 mt-2">Back to Top <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 256.1" class="faq__chevron-up"><path d="M145.4,136.5l-117.8,116c-4.7,4.7-12.3,4.7-17,0l-7.1-7.1c-4.7-4.7-4.7-12.3,0-17L105.8,128L3.6,27.6c-4.7-4.7-4.7-12.3,0-17l7.1-7.1c4.7-4.7,12.3-4.7,17,0l117.8,116C150.1,124.2,150.1,131.8,145.4,136.5L145.4,136.5z"></path></svg></button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="component-wrapper my-5" id="">
|
|
<div class="mb-4" id="cards">
|
|
<h2>Cards</h2>
|
|
<div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
|
|
<div class="col-md-6 col-sm-12 col-xs-12">
|
|
<div class="card mb-2">
|
|
<div class="card-body">
|
|
<h4 class="card-title">I2P</h4>
|
|
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
|
|
<a href="#" class="btn btn-medium btn-pill" onclick="return false;">Visit website</a>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-2">
|
|
<div class="card-body">
|
|
<h4 class="card-title">I2P</h4>
|
|
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
|
|
<a href="#" class="rb-link" onclick="return false;">Apply</a>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">I2P</h4>
|
|
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 col-xs-12">
|
|
<div class="card">
|
|
<img class="card-img-top"
|
|
src="/i2p-styleguide/assets/images/placeholder.jpg" alt="Card image cap">
|
|
<div class="card-body">
|
|
<h4 class="card-title">A few things everyone can do now</h4>
|
|
<p class="card-text text-muted">Numerous people contribute to the project to varying extents.</p>
|
|
</div>
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item">Consider <a href="#" class="rb-link" onclick="return false;">
|
|
<mark>contributing</mark>
|
|
</a> to help the I2P project grow.
|
|
</li>
|
|
<li class="list-group-item">Take a moment to
|
|
<mark>donate</mark>
|
|
to support further development.
|
|
</li>
|
|
<li class="list-group-item">Help
|
|
<mark>translate</mark>
|
|
the documentation into <a href="#" class="rb-link" onclick="return false;">other languages</a>.
|
|
</li>
|
|
</ul>
|
|
<div class="card-body">
|
|
<a href="#" class="rb-link" onclick="return false;">View All</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="component-wrapper my-5" id="">
|
|
<div class="page-header mb-4" id="forms">
|
|
<h2>Forms</h2>
|
|
<!--p class="text-muted">Some Description about Forms.</p-->
|
|
</div>
|
|
<div class="row">
|
|
<form class="bg-light p-5 col-sm-6">
|
|
<div class="form-group">
|
|
<label for="exampleInputEmail1">Email address</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
|
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exampleInputPassword1">Password</label>
|
|
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="check_me_out">
|
|
<label for="check_me_out" class="form-check-label ml-2 mt-1">Check me out</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-medium btn-pill mt-4" onclick="return false;">Submit</button>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="component-wrapper my-5" id="">
|
|
<div id="header" class="mb-4">
|
|
<h2>Header</h2>
|
|
<!--p class="text-muted">Some Description about buttons.</p-->
|
|
</div>
|
|
<div class="bg-light p-5" id="">
|
|
<nav class="navbar navbar-expand-lg navbar-light border-bottom align-items-end pb-0" id="styleguide-nav" "style=background: $oc-white">
|
|
<a class="navbar-brand mr-5" href="https://geti2p.net/">
|
|
<img src="/i2p-styleguide/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SGnavSupportedContent" aria-controls="SGnavSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="SGnavSupportedContent">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item pb-2">
|
|
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Blog</a>
|
|
</li>
|
|
<li class="nav-item pb-2">
|
|
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Getting started</a>
|
|
</li>
|
|
<li class="nav-item pb-2">
|
|
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Docs & data</a>
|
|
</li>
|
|
<li class="nav-item pb-2">
|
|
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Contribute</a>
|
|
</li>
|
|
<li class="nav-item pb-2">
|
|
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">About us</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="component-wrapper my-5" id="">
|
|
<div class="page-header mb-4 " id="pagination">
|
|
<h2>Pagination</h2>
|
|
<!--p class="text-muted">Some Description about pagination.</p-->
|
|
</div>
|
|
<div class="row bg-light p-5">
|
|
<nav aria-label="...">
|
|
<ul class="pagination m-0">
|
|
<li class="page-item disabled">
|
|
<span class="page-link">Previous</span>
|
|
</li>
|
|
<li class="page-item"><a class="page-link" href="#" onclick="return false;">1</a></li>
|
|
<li class="page-item">
|
|
<span class="page-link rb-paginate-active">
|
|
2<span class="sr-only">(current)</span>
|
|
</span>
|
|
</li>
|
|
<li class="page-item"><a class="page-link" href="#" onclick="return false;">3</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" onclick="return false;">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="component-wrapper my-5" id="">
|
|
<div class="page-header mb-4" id="scrollspy">
|
|
<h3>Scrollspy</h3>
|
|
<!--p class="text-muted">Some Description about scrollspy.</p-->
|
|
</div>
|
|
|
|
<div class="row bg-light p-5">
|
|
<div class="col-12 p-0">
|
|
<p>
|
|
<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>
|
|
|
|
</div>
|
|
<div class="component-wrapper my-5" id="">
|
|
<div class="page-header mb-4" id="tables">
|
|
<h2>Tables</h2>
|
|
</div>
|
|
<div class="row bg-light p-5">
|
|
<span>Default</span>
|
|
<br />
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First</th>
|
|
<th scope="col">Last</th>
|
|
<th scope="col">Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Mark</td>
|
|
<td>Otto</td>
|
|
<td>@mdo</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Jacob</td>
|
|
<td>Thornton</td>
|
|
<td>@fat</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Larry</td>
|
|
<td>the Bird</td>
|
|
<td>@twitter</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<span>Striped</span>
|
|
<br />
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First</th>
|
|
<th scope="col">Last</th>
|
|
<th scope="col">Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Mark</td>
|
|
<td>Otto</td>
|
|
<td>@mdo</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Jacob</td>
|
|
<td>Thornton</td>
|
|
<td>@fat</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Larry</td>
|
|
<td>the Bird</td>
|
|
<td>@twitter</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</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>
|
|
|
|
</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>
|
|
|
|
</body>
|
|
</html>
|
|
|