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.
223 lines
9.6 KiB
223 lines
9.6 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-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-4 col-xs-4 p-0">
|
|
<div class="row" style="height: 100%">
|
|
<div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md">
|
|
<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-12 col-xs-2 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="#goals"><li class="list-group-item rb-sidebar">
|
|
Goals & Principles
|
|
</li></a>
|
|
|
|
|
|
|
|
<a class="sidebar__link__light" href="#voice"><li class="list-group-item rb-sidebar">
|
|
Voice & Tone
|
|
</li></a>
|
|
|
|
|
|
|
|
<a class="sidebar__link__light" href="#grammar"><li class="list-group-item rb-sidebar">
|
|
Grammar
|
|
</li></a>
|
|
|
|
|
|
|
|
<a class="sidebar__link__light" href="#mechanics"><li class="list-group-item rb-sidebar">
|
|
Mechanics
|
|
</li></a>
|
|
|
|
|
|
|
|
<a class="sidebar__link__light" href="#people"><li class="list-group-item rb-sidebar">
|
|
People & Design
|
|
</li></a>
|
|
|
|
|
|
|
|
<a class="sidebar__link__light" href="#blog-posts"><li class="list-group-item rb-sidebar">
|
|
Blog Posts
|
|
</li></a>
|
|
|
|
|
|
|
|
<a class="sidebar__link__light" href="#newsletter"><li class="list-group-item rb-sidebar">
|
|
Newsletter
|
|
</li></a>
|
|
|
|
|
|
|
|
<a class="sidebar__link__light" href="#social-media"><li class="list-group-item rb-sidebar">
|
|
Social Media
|
|
</li></a>
|
|
|
|
|
|
|
|
<a class="sidebar__link__light" href="#copyright"><li class="list-group-item rb-sidebar">
|
|
Copyright
|
|
</li></a>
|
|
|
|
|
|
|
|
<a class="sidebar__link__light" href="#word-list"><li class="list-group-item rb-sidebar">
|
|
Word List
|
|
</li></a>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9 col-sm-8 col-xs-8 container-wrapper">
|
|
<!--<p>This is the Copywriting page!</p>
|
|
-->
|
|
<h1 id="goals"></h1>
|
|
<div class="page-header mb-4 mt-3">
|
|
<h3>Writing Goals and Principles</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 p-0">
|
|
<p>With every piece of content we publish, we aim to:</p>
|
|
<ul>
|
|
<li><b>Empower.</b> Help people understand Ura Design by using language that informs them and encourages them to make the most of our products.</li>
|
|
<li><b>Respect.</b> Treat readers with the respect they deserve. Put yourself in their shoes, and don’t patronize them. Remember that they have other things to do. Be considerate and inclusive. Don’t market at people; communicate with them.</li>
|
|
<li><b>Educate.</b> Tell readers what they need to know, not just what we want to say. Give them the exact information they need, along with opportunities to learn more. Remember that you’re the expert, and readers don’t have access to everything you know.</li>
|
|
<li><b>Guide</b> Think of yourself as a tour guide for our readers. Whether you’re leading them through our website, apps, or educational materials, communicate in a friendly and helpful way.</li>
|
|
<li><b>Speak truth.</b> Understand Ura's place in our customers’ lives. Avoid dramatic storytelling and grandiose claims. Focus on our real strengths.</li>
|
|
</ul>
|
|
<p>In order to achieve those goals, we make sure our content is:</p>
|
|
<ul>
|
|
<li><b>Clear.</b> Understand the topic you’re writing about. Use simple words and sentences.</li>
|
|
<li><b>Useful.</b> Before you start writing, ask yourself: What purpose does this serve? Who is going to read it? What do they need to know?</li>
|
|
<li><b>Friendly.</b> Write like a human. Don’t be afraid to break a few rules if it makes your writing more relatable. All of our content, from splashy homepage copy to system alerts, should be warm and human.</li>
|
|
<li><b>Appropriate.</b> Write in a way that suits the situation. Just like you do in face-to-face conversations, adapt your tone depending on who you’re writing to and what you’re writing about.</li>
|
|
</ul>
|
|
</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>
|
|
|