torproject/styleguide
1
0
Fork 0
mirror of https://github.com/torproject/styleguide.git synced 2024-12-11 19:23:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'content-updates' into 'master'

Browse Source 
content updates

See merge request infra/styleguide!4
This commit is contained in:
Hiro 2018-01-05 11:36:02 +00:00
commit 2be8252e2e
3 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/about.html
View File

@ -9,7 +9,7 @@
<div class="row">
<div class="col-12">
<div class="page-header mb-4 mt-5">
<h3>Why</h3>
<h3>About</h3>
<p class="text-muted">We are making Tor usable for everyone.</p>
</div>
<p>The visual identity of software is an integral part of its user experience. Correctly using a consistent and attractive style is important to The Tor Project because <mark> it helps users build trust in the work we do.</mark>

37
templates/components.html
View File

@ -25,16 +25,19 @@
</div>
<div class="row bg-light p-5">
<div class="col-sm-4 p-1">
<button type="button" class="btn btn-lg btn-primary mr-2">Primary</button>
<button type="button" class="btn btn-lg btn-outline-primary mr-2">Ghost</button>
<button type="button" class="btn btn-lg btn-link mr-2">Link</button>
<p class="text-black small text-muted m-0 pb-2">Primary</p>
<button type="button" class="btn btn-lg btn-primary mr-2">Download Tor Browser</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 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-sm-4 p-1">
<p class="text-black small text-muted m-0 pt-2 pb-2">Medium</p>
<button type="button" class="btn btn-primary mr-2">Primary</button>
<button type="button" class="btn btn-outline-primary mr-2">Ghost</button>
<button type="button" class="btn btn-link mr-2">Link</button>
</div>
<div class="col-sm-4 p-1">
<p class="text-black small text-muted m-0 pt-2 pb-2">Small</p>
<button type="button" class="btn btn-sm btn-primary mr-2">Primary</button>
<button type="button" class="btn btn-sm btn-outline-primary mr-2">Ghost</button>
<button type="button" class="btn btn-sm btn-link mr-2">Link</button>
@ -263,22 +266,22 @@
<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="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
<a class="list-group-item list-group-item-action active" href="#list-item-1">Install Tor Browser</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Tor on Android</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Other Tor</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Tor Wiki</a>
</div>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
<h4 id="list-item-1" style="">Item 1</h4>
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
<h4 id="list-item-2" style="">Item 2</h4>
<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
<h4 id="list-item-3" style="">Item 3</h4>
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
<h4 id="list-item-4" style="">Item 4</h4>
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
<h4 id="list-item-1" style="" class="text-muted">Install Tor Browser</h4>
<p>The Tor software protects you by bouncing your communications around a distributed network of relays run by volunteers all around the world: it prevents somebody watching your Internet connection from learning what sites you visit, it prevents the sites you visit from learning your physical location, and it lets you access sites which are blocked.</p>
<h4 id="list-item-2" style="" class="text-muted">Tor on Android</h4>
<p>Orbot is a free proxy app that empowers other apps to use the internet more securely. Orbot uses Tor to encrypt your Internet traffic and then hides it by bouncing through a series of computers around the world.</p>
<h4 id="list-item-3" style="" class="text-muted">Other To</h4>
<p>Tor Browser lets you use Tor on Microsoft Windows, Apple MacOS, or GNU/Linux without needing to install any software. It can run off a USB flash drive, comes with a pre-configured web browser to protect your anonymity, and is self-contained (portable).</p>
<h4 id="list-item-4" style="" class="text-muted">Tor Wiki</h4>
<p>Tor is a program you can run on your computer that helps keep you safe on the Internet. It protects you by bouncing your communications around a distributed network of relays run by volunteers all around the world: it prevents somebody watching your Internet connection from learning what sites you visit, and it prevents the sites you visit from learning your physical location. </p>
</div>
</div>
</div>

6
templates/visuals.html
View File

@ -28,11 +28,11 @@
<h6 class="pt-3 text-left">Purple</h6>
</div>
<div class="col-4">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-dark text-white small">#27AE60</div>
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-dark text-white small">#59316B</div>
<h6 class="pt-3 text-left">Dark Purple</h6>
</div>
<div class="col-4">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-success text-white small">#2980B9</div>
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-success text-white small">#68B044</div>
<h6 class="pt-3 text-left">Green</h6>
</div>
<div class="col-4">
@ -40,7 +40,7 @@
<h6 class="pt-3 text-left">Grey</h6>
</div>
<div class="col-4">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-secondary text-white small">#2C3E50</div>
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-secondary text-white small">#333A41</div>
<h6 class="pt-3 text-left">Dark Grey</h6>
</div>
<div class="col-4">