mirror of
https://github.com/torproject/styleguide.git
synced 2024-11-23 09:29:49 +00:00
Fix visual page layout
This commit is contained in:
hiromipaw
parent
97e44b429f
commit
71ce838c02
@ -4,125 +4,5 @@ title:
|
||||
---
|
||||
body:
|
||||
|
||||
/Visuals
|
||||
Colors
|
||||
Grid
|
||||
Typography
|
||||
Icons
|
||||
Identity Assets
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div class="page-header mb-4 mt-5">
|
||||
<h3>Colors</h3>
|
||||
<p class="text-muted">Some Description</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-sm-3 m-2 border">
|
||||
<div class="pt-5 pl-2 pb-2 mt-3 mb-2 bg-primary text-white">#7D4698</div>
|
||||
<h6 class="p-2 text-center">Purple</h6>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 m-2 border">
|
||||
<div class="pt-5 pl-2 pb-2 mt-3 mb-2 bg-dark text-white">#27AE60</div>
|
||||
<h6 class="p-2 text-center">Dark Purple</h6>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 m-2 border">
|
||||
<div class="pt-5 pl-2 pb-2 mt-3 mb-2 bg-success text-white">#2980B9</div>
|
||||
<h6 class="p-2 text-center">Green</h6>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 m-2 border">
|
||||
<div class="pt-5 pl-2 pb-2 mt-3 mb-2 bg-light text-black">#2C3E50</div>
|
||||
<h6 class="p-2 text-center">Grey</h6>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 m-2 border">
|
||||
<div class="pt-5 pl-2 pb-2 mt-3 mb-2 bg-secondary text-black">#2C3E50</div>
|
||||
<h6 class="p-2 text-center">Dark Grey</h6>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 m-2 border">
|
||||
<div class="pt-5 pl-2 pb-2 mt-3 mb-2 bg-white text-black">#2C3E50</div>
|
||||
<h6 class="p-2 text-center">White</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-header mb-4 mt-5">
|
||||
<h3>Grid</h3>
|
||||
<p class="text-muted">Some Description about grids</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<!-- Content here -->
|
||||
</div>
|
||||
<div class="bg-light p-5">
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-12">col-12</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-4">col-4</div>
|
||||
<div class="bg-primary p-3 col-8">col-8</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-3">col-3</div>
|
||||
<div class="bg-primary p-3 col-9">col-9</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-2">col-2</div>
|
||||
<div class="bg-primary p-3 col-2">col-2</div>
|
||||
<div class="bg-primary p-3 col-2">col-2</div>
|
||||
<div class="bg-primary p-3 col-2">col-2</div>
|
||||
<div class="bg-primary p-3 col-2">col-2</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-3">col-3</div>
|
||||
<div class="bg-primary p-3 col-3">col-3</div>
|
||||
<div class="bg-primary p-3 col-3">col-3</div>
|
||||
<div class="bg-primary p-3 col-3">col-3</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-4">col-4</div>
|
||||
<div class="bg-primary p-3 col-4">col-4</div>
|
||||
<div class="bg-primary p-3 col-4">col-4</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-6">col-6</div>
|
||||
<div class="bg-primary p-3 col-6">col-6</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-8 offset-2">col-6</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-6 offset-3">col-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-header mb-4 mt-5">
|
||||
<h3>Typography</h3>
|
||||
<p class="text-muted">Some Description about headings and body text.</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1>Privacy is a right, not a privilege</h1>
|
||||
<h2>Privacy is a right, not a privilege.</h2>
|
||||
<h3>Privacy is a right, not a privilege</h3>
|
||||
<h4>Privacy is a right, not a privilege</h4>
|
||||
<h5>Privacy is a right, not a privilege</h5>
|
||||
<h6>Privacy is a right, not a privilege</h6>
|
||||
<h1 class="display-1">Privacy is a right, not a privilege</h1>
|
||||
<h1 class="display-2">Privacy is a right, not a privilege</h1>
|
||||
<h1 class="display-3">Privacy is a right, not a privilege</h1>
|
||||
<h1 class="display-4">Privacy is a right, not a privilege </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col pt-3">
|
||||
<p class="font-size-lg">Privacy is a right, not a privilege.<a href="#">nostrud voluptate</a> Tor protects your identity online—namely your IP address—by encrypting your traffic in at least three layers and bouncing it through a chain of three volunteer computers chosen among thousands around the world, each of which strips off just one layer of encryption before bouncing your data to the next computer. All of that makes it very difficult for anyone to trace your connection from origin to destination—not the volunteer computers relaying your information, not your internet service provider, and not the websites or online services you visit.
|
||||
That overhaul should cement <mark>Tor’s reputation as an indispensable anonymity tool</mark>, says Marc Rogers, a security researcher for tech firm Cloudflare, who has also worked on a still-in-development Tor-based network router project himself. “It’s still pretty much the only game in town,” he says. “After this update, I can say that yes, Tor is the best privacy tool out there.”
|
||||
Here's how you can use Tor today, whether you want to want to browse controversial sites in peace, or send messages the NSA can't peep.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col pt-3">
|
||||
<p class="font-size-lg serif">Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure <a href="#">nostrud voluptate</a> aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiat adipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco est in eu laboris Ut Excepteur nisi aliquip occaecat deserunt incididunt eiusmod aute Excepteur Excepteur non ut ut fugiat nostrud laboris dolore Excepteur id qui eiusmod esse mollit fugiat eiusmod dolore quis quis aliquip reprehenderit sint commodo dolore proident officia Duis eiusmod esse cupidatat id consequat aliqua Excepteur dolore tempor consequat laboris dolore sit aliqua eu sed dolore laboris ad tempor et in incididunt dolore dolor irure anim adipisicing cillum dolor in laborum laboris veniam voluptate Ut irure ad dolor irure in ex sint dolor deserunt ut adipisicing est pariatur Excepteur dolore ullamco pariatur in non Excepteur mollit consequat laborum ullamco reprehenderit ea id ut anim ex consectetur occaecat.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
---
|
||||
_template: visuals.html
|
||||
|
||||
24
databags/visuals.ini
Normal file
24
databags/visuals.ini
Normal file
@ -0,0 +1,24 @@
|
||||
[Colors]
|
||||
path = #colors
|
||||
label = Colors
|
||||
|
||||
[Grid]
|
||||
path = #grid
|
||||
label = Grid
|
||||
|
||||
[Typography]
|
||||
path = #typography
|
||||
label = Typography
|
||||
|
||||
[Icons]
|
||||
path = #icons
|
||||
label = Icons
|
||||
|
||||
[Identity]
|
||||
path = #identity
|
||||
label = Identity
|
||||
|
||||
[Assets]
|
||||
|
||||
path = #assets
|
||||
label = Assets
|
||||
131
templates/visuals.html
Normal file
131
templates/visuals.html
Normal file
@ -0,0 +1,131 @@
|
||||
{% extends "layout.html" %}
|
||||
{% block title %}{{ this.title }}{% endblock %}
|
||||
{% block body %}
|
||||
|
||||
<nav id="components-nav" class="nav flex-column d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="nav nav-pills flex-column sticky-top">
|
||||
{% for id, item in bag('visuals').items() %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ item.path }}">{{ item.label }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main role="main" class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content content-scroll sticky-top" data-spy="scroll" data-target="#navbar-example2" data-offset="0">
|
||||
<h1>{{ this.title }}</h1>
|
||||
|
||||
{{ this.body }}
|
||||
|
||||
|
||||
<div class="page-header mb-4 mt-5">
|
||||
<h3>Colors</h3>
|
||||
<p class="text-muted">Some Description</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-sm-3 m-2 border">
|
||||
<div class="pt-5 pl-2 pb-2 mt-3 mb-2 bg-primary text-white">#7D4698</div>
|
||||
<h6 class="p-2 text-center">Purple</h6>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 m-2 border">
|
||||
<div class="pt-5 pl-2 pb-2 mt-3 mb-2 bg-dark text-white">#27AE60</div>
|
||||
<h6 class="p-2 text-center">Dark Purple</h6>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 m-2 border">
|
||||
<div class="pt-5 pl-2 pb-2 mt-3 mb-2 bg-success text-white">#2980B9</div>
|
||||
<h6 class="p-2 text-center">Green</h6>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 m-2 border">
|
||||
<div class="pt-5 pl-2 pb-2 mt-3 mb-2 bg-light text-black">#2C3E50</div>
|
||||
<h6 class="p-2 text-center">Grey</h6>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 m-2 border">
|
||||
<div class="pt-5 pl-2 pb-2 mt-3 mb-2 bg-secondary text-black">#2C3E50</div>
|
||||
<h6 class="p-2 text-center">Dark Grey</h6>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 m-2 border">
|
||||
<div class="pt-5 pl-2 pb-2 mt-3 mb-2 bg-white text-black">#2C3E50</div>
|
||||
<h6 class="p-2 text-center">White</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-header mb-4 mt-5">
|
||||
<h3>Grid</h3>
|
||||
<p class="text-muted">Some Description about grids</p>
|
||||
</div>
|
||||
<div class="bg-light p-5">
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-12">col-12</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-4">col-4</div>
|
||||
<div class="bg-primary p-3 col-8">col-8</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-3">col-3</div>
|
||||
<div class="bg-primary p-3 col-9">col-9</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-2">col-2</div>
|
||||
<div class="bg-primary p-3 col-2">col-2</div>
|
||||
<div class="bg-primary p-3 col-2">col-2</div>
|
||||
<div class="bg-primary p-3 col-2">col-2</div>
|
||||
<div class="bg-primary p-3 col-2">col-2</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-3">col-3</div>
|
||||
<div class="bg-primary p-3 col-3">col-3</div>
|
||||
<div class="bg-primary p-3 col-3">col-3</div>
|
||||
<div class="bg-primary p-3 col-3">col-3</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-4">col-4</div>
|
||||
<div class="bg-primary p-3 col-4">col-4</div>
|
||||
<div class="bg-primary p-3 col-4">col-4</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-6">col-6</div>
|
||||
<div class="bg-primary p-3 col-6">col-6</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-8 offset-2">col-6</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="bg-primary p-3 col-6 offset-3">col-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-header mb-4 mt-5">
|
||||
<h3>Typography</h3>
|
||||
<p class="text-muted">Some Description about headings and body text.</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1>Privacy is a right, not a privilege</h1>
|
||||
<h2>Privacy is a right, not a privilege.</h2>
|
||||
<h3>Privacy is a right, not a privilege</h3>
|
||||
<h4>Privacy is a right, not a privilege</h4>
|
||||
<h5>Privacy is a right, not a privilege</h5>
|
||||
<h6>Privacy is a right, not a privilege</h6>
|
||||
<h1 class="display-1">Privacy is a right, not a privilege</h1>
|
||||
<h1 class="display-2">Privacy is a right, not a privilege</h1>
|
||||
<h1 class="display-3">Privacy is a right, not a privilege</h1>
|
||||
<h1 class="display-4">Privacy is a right, not a privilege </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col pt-3">
|
||||
<p class="font-size-lg">Privacy is a right, not a privilege.<a href="#">nostrud voluptate</a> Tor protects your identity online—namely your IP address—by encrypting your traffic in at least three layers and bouncing it through a chain of three volunteer computers chosen among thousands around the world, each of which strips off just one layer of encryption before bouncing your data to the next computer. All of that makes it very difficult for anyone to trace your connection from origin to destination—not the volunteer computers relaying your information, not your internet service provider, and not the websites or online services you visit.
|
||||
That overhaul should cement <mark>Tor’s reputation as an indispensable anonymity tool</mark>, says Marc Rogers, a security researcher for tech firm Cloudflare, who has also worked on a still-in-development Tor-based network router project himself. “It’s still pretty much the only game in town,” he says. “After this update, I can say that yes, Tor is the best privacy tool out there.”
|
||||
Here's how you can use Tor today, whether you want to want to browse controversial sites in peace, or send messages the NSA can't peep.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col pt-3">
|
||||
<p class="font-size-lg serif">Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure <a href="#">nostrud voluptate</a> aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiat adipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco est in eu laboris Ut Excepteur nisi aliquip occaecat deserunt incididunt eiusmod aute Excepteur Excepteur non ut ut fugiat nostrud laboris dolore Excepteur id qui eiusmod esse mollit fugiat eiusmod dolore quis quis aliquip reprehenderit sint commodo dolore proident officia Duis eiusmod esse cupidatat id consequat aliqua Excepteur dolore tempor consequat laboris dolore sit aliqua eu sed dolore laboris ad tempor et in incididunt dolore dolor irure anim adipisicing cillum dolor in laborum laboris veniam voluptate Ut irure ad dolor irure in ex sint dolor deserunt ut adipisicing est pariatur Excepteur dolore ullamco pariatur in non Excepteur mollit consequat laborum ullamco reprehenderit ea id ut anim ex consectetur occaecat.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include 'footer.html' %}
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user