mirror of
https://github.com/torproject/styleguide.git
synced 2024-11-23 09:29:49 +00:00
Move about to home
This commit is contained in:
hiromipaw
parent
dbadc0d9dd
commit
6846639fe3
@ -1,28 +0,0 @@
|
||||
title: About this Website
|
||||
---
|
||||
subtitle: We are making Tor usable for everyone.
|
||||
---
|
||||
body:
|
||||
|
||||
<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>
|
||||
We hope that this guide will help you create materials and answer potential questions you might have about the use of the Tor “brand”.
|
||||
That said, there is a reason we call this a style guide and not a set of style rules. We expect there to be situations that this guide does not cover, or where you find yourself needing needing to stretch the standards a bit.
|
||||
</p>
|
||||
<p class="text-black small text-muted">Contact</p>
|
||||
<p class="purple">
|
||||
Please reach out to the UX team when you encounter such cases. We will work with you to help you find a solution for your design problem that is consistent with the guide. Your feedback will also help us expand and refine the guide to help it better meet the Tor Community’s needs.
|
||||
For any questions and inquiries you might have related to this styleguide, we encourage you to reach out to the UX team. We will try to help you find good answers!
|
||||
</p>
|
||||
<p class="text-black small text-muted">Conventions</p>
|
||||
<p class="text-muted">
|
||||
This guide aims to show by doing. The main body of each page contains examples of graphic elements that are (and, in some cases, are not) confor- mant with the style being described. The column on the le specifies the details of each style and o ers guidance on when and how to use it.
|
||||
</p>
|
||||
<p class="text-black small text-muted">License</p>
|
||||
<p class="text-muted">
|
||||
The content of this guide is Copyright The Tor Project, Inc. Reproduction of content is permitted under a Creative Commons Attribution 3.0 United States License. All use under such license must be accompanied by a clear and prominent attribution that identifies The Tor Project, Inc. as the owner and originator of such content. The Tor Project Inc. reserves the right to change licenses and permissions at any time in its sole discretion.
|
||||
For more information about the Tor registered trademark and how it can be used, please see:
|
||||
<span class="">https://www.torproject.org/docs/trademark-faq.html.en</span>
|
||||
</p>
|
||||
|
||||
---
|
||||
_template: about.html
|
||||
22
content/contents.lr
Executable file → Normal file
22
content/contents.lr
Executable file → Normal file
@ -1,6 +1,22 @@
|
||||
title: Welcome to styleguide!
|
||||
title: Tor Styleguide
|
||||
---
|
||||
body:
|
||||
|
||||
This is a basic demo website that shows how to use Lektor for a basic
|
||||
website with some pages.
|
||||
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>
|
||||
|
||||
We hope that this guide will help you create materials and answer potential questions you might have about the use of the Tor “brand”.
|
||||
That said, there is a reason we call this a style guide and not a set of style rules. We expect there to be situations that this guide does not cover, or where you find yourself needing needing to stretch the standards a bit.
|
||||
|
||||
<p class="text-black small text-muted">Contact</p>
|
||||
<p class="purple">
|
||||
Please reach out to the UX team when you encounter such cases. We will work with you to help you find a solution for your design problem that is consistent with the guide. Your feedback will also help us expand and refine the guide to help it better meet the Tor Community’s needs.
|
||||
For any questions and inquiries you might have related to this styleguide, we encourage you to reach out to the UX team. We will try to help you find good answers!
|
||||
</p>
|
||||
<p class="text-black small text-muted">Conventions</p>
|
||||
<p class="text-muted">
|
||||
This guide aims to show by doing. The main body of each page contains examples of graphic elements that are (and, in some cases, are not) confor- mant with the style being described. The column on the le specifies the details of each style and o ers guidance on when and how to use it.
|
||||
</p>
|
||||
|
||||
|
||||
---
|
||||
_template: about.html
|
||||
|
||||
@ -2,8 +2,6 @@ _model: page
|
||||
---
|
||||
title: Getting Started
|
||||
---
|
||||
subtitle: We are making Tor usable for everyone.
|
||||
---
|
||||
body:
|
||||
|
||||
The Tor Styleguide is based on [Bootstrap](https://getbootstrap.com/), an open source toolkit for developing with HTML, CSS, and JS. We are currently implementing [v4.0.0-beta.2](https://github.com/twbs/bootstrap/releases/tag/v4.0.0-beta.2).
|
||||
@ -16,7 +14,7 @@ If you want to use SASS you can download the complete archive for the [styleguid
|
||||
</p>
|
||||
|
||||
|
||||
Bootstrap contains a few JavaScript libraries for extra interaction with the DOM. We use these libraries but do not add extra JavaScript. You might notice that if you run Tor browser with *high security mode*, JavaScript is disabled by default. This styleguide is designed to also work for users using Tor browse in *high security mode*, so that only few elements are affected if you disabled JavaScript.
|
||||
Bootstrap contains a few JavaScript libraries for extra interaction with the DOM. We use these libraries but do not add extra JavaScript. You might notice that if you run Tor browser with *high security mode*, JavaScript is disabled by default. <mark>This styleguide is designed to also work for users using Tor browse in *high security mode*, so that only few elements are affected if you disable JavaScript.</mark>
|
||||
|
||||
This styleguide has been built using [Lektor](https://www.getlektor.com/). Lektor is a static content management system. You can build this yourself by [installing Lektor](https://www.getlektor.com/downloads/).
|
||||
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
_model: page
|
||||
---
|
||||
title: Identity Assets
|
||||
---
|
||||
body:
|
||||
|
||||
This is a list of the assets:
|
||||
|
||||
* Project 1
|
||||
* Project 2
|
||||
* Project 3
|
||||
@ -1,5 +1,5 @@
|
||||
[About]
|
||||
path = /about
|
||||
path = /
|
||||
label = About
|
||||
|
||||
[Getting Started]
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<li class="nav-item"></li>
|
||||
</ul>
|
||||
<div class="mt-2 mt-md-0">
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Download Tor Browser</button>
|
||||
<a class="btn btn-outline-light my-2 my-sm-0" href="https://www.torproject.org/download/download-easy.html.en">Download Tor Browser</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<li class="nav-item"></li>
|
||||
</ul>
|
||||
<div class="mt-2 mt-md-0">
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Download Tor Browser</button>
|
||||
<a class="btn btn-outline-light my-2 my-sm-0" href="https://www.torproject.org/download/download-easy.html.en">Download Tor Browser</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<li class="nav-item"></li>
|
||||
</ul>
|
||||
<div class="mt-2 mt-md-0">
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Download Tor Browser</button>
|
||||
<a class="btn btn-outline-light my-2 my-sm-0" href="https://www.torproject.org/download/download-easy.html.en">Download Tor Browser</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -64,7 +64,7 @@
|
||||
<p>The Tor Styleguide is based on <a href="https://getbootstrap.com/">Bootstrap</a>, an open source toolkit for developing with HTML, CSS, and JS. We are currently implementing <a href="https://github.com/twbs/bootstrap/releases/tag/v4.0.0-beta.2">v4.0.0-beta.2</a>.</p>
|
||||
<p>To use the Tor styleguide you can download our <a href="https://oniongit.eu/infra/styleguide/tree/master/assets/static">css style</a> and import it in your project. Alternatively, you can also clone this repository and use our SASS files. <a href="http://sass-lang.com/">SASS</a> is a CSS extension language. Bootstrap and this styleguide are based on <a href="http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#3_5_4__15_December_2017_">v3.5.4</a>.</p>
|
||||
<p class="purple">
|
||||
If you want to use SASS you can download the complete archive for the <a href="https://oniongit.eu/infra/styleguide">styleguide</a>. The <a href="https://oniongit.eu/infra/styleguide/tree/master/assets/scss">scss folder under assets</a> contains all the sass files. Since we use bootstrap, we only add a few styles without modifying bootstrap core or definying new elements whenever possible. These are <a href="https://oniongit.eu/infra/styleguide/blob/master/assets/scss/_tor-variables.scss">_tor_variables.scss</a> and <a href="https://oniongit.eu/infra/styleguide/blob/master/assets/scss/_tor.scss">_tor.scss</a>. These are imported in the main bootstrap scss file and compiled into the final css.</p><p>Bootstrap contains a few JavaScript libraries for extra interaction with the DOM. We use these libraries but do not add extra JavaScript. You might notice that if you run Tor browser with <em>high security mode</em>, JavaScript is disabled by default. This styleguide is designed to also work for users using Tor browse in <em>high security mode</em>, so that only few elements are affected if you disabled JavaScript.</p>
|
||||
If you want to use SASS you can download the complete archive for the <a href="https://oniongit.eu/infra/styleguide">styleguide</a>. The <a href="https://oniongit.eu/infra/styleguide/tree/master/assets/scss">scss folder under assets</a> contains all the sass files. Since we use bootstrap, we only add a few styles without modifying bootstrap core or definying new elements whenever possible. These are <a href="https://oniongit.eu/infra/styleguide/blob/master/assets/scss/_tor-variables.scss">_tor_variables.scss</a> and <a href="https://oniongit.eu/infra/styleguide/blob/master/assets/scss/_tor.scss">_tor.scss</a>. These are imported in the main bootstrap scss file and compiled into the final css.</p><p>Bootstrap contains a few JavaScript libraries for extra interaction with the DOM. We use these libraries but do not add extra JavaScript. You might notice that if you run Tor browser with <em>high security mode</em>, JavaScript is disabled by default. <mark>This styleguide is designed to also work for users using Tor browse in <em>high security mode</em>, so that only few elements are affected if you disable JavaScript.</mark></p>
|
||||
<p>This styleguide has been built using <a href="https://www.getlektor.com/">Lektor</a>. Lektor is a static content management system. You can build this yourself by <a href="https://www.getlektor.com/downloads/">installing Lektor</a>.</p>
|
||||
<div class="border p-5 mb-3">
|
||||
<h6>Use The Tor Project Styleguide</h6>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<li class="nav-item"></li>
|
||||
</ul>
|
||||
<div class="mt-2 mt-md-0">
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Download Tor Browser</button>
|
||||
<a class="btn btn-outline-light my-2 my-sm-0" href="https://www.torproject.org/download/download-easy.html.en">Download Tor Browser</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<li class="nav-item"></li>
|
||||
</ul>
|
||||
<div class="mt-2 mt-md-0">
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Download Tor Browser</button>
|
||||
<a class="btn btn-outline-light my-2 my-sm-0" href="https://www.torproject.org/download/download-easy.html.en">Download Tor Browser</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<li class="nav-item"></li>
|
||||
</ul>
|
||||
<div class="mt-2 mt-md-0">
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Download Tor Browser</button>
|
||||
<a class="btn btn-outline-light my-2 my-sm-0" href="https://www.torproject.org/download/download-easy.html.en">Download Tor Browser</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -1,2 +1,4 @@
|
||||
[project]
|
||||
name = styleguide
|
||||
url = https://styleguide.torproject.org/
|
||||
url_style = absolute
|
||||
@ -9,7 +9,7 @@
|
||||
<div class="col-12">
|
||||
<div class="page-header mb-4 mt-5">
|
||||
<h3>{% block title %}{{ this.title }}{% endblock %}</h3>
|
||||
<p class="text-muted">{% block subtitle %}{{ this.subtitle }}{% endblock %}</p>
|
||||
<p class="text-muted">We are making Tor usable for everyone.</p>
|
||||
</div>
|
||||
{{ this.body }}
|
||||
<div>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<div class="col-12">
|
||||
<div class="page-header mb-4 mt-5">
|
||||
<h3>{% block title %}{{ this.title }}{% endblock %}</h3>
|
||||
<p class="text-muted">{% block subtitle %}{{ this.subtitle }}{% endblock %}</p>
|
||||
<p class="text-muted">We are making Tor usable for everyone.</p>
|
||||
</div>
|
||||
{{ this.body }}
|
||||
<div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="{{ '/static/bootstrap.css'|url }}">
|
||||
<link rel="stylesheet" href="{{ '/static/bootstrap.css'|asseturl }}">
|
||||
<title>{% block title %}Welcome{% endblock %} — styleguide</title>
|
||||
<body>
|
||||
<header>
|
||||
@ -17,7 +17,7 @@
|
||||
<li class="nav-item"></li>
|
||||
</ul>
|
||||
<div class="mt-2 mt-md-0">
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Download Tor Browser</button>
|
||||
<a class="btn btn-outline-light my-2 my-sm-0" href="https://www.torproject.org/download/download-easy.html.en">Download Tor Browser</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -29,16 +29,7 @@
|
||||
<nav id="bd-docs-nav" class="collapse bd-links">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
{% for id, item in bag('menu').items() %}
|
||||
<li{% if this.is_child_of(item.path) %} class="nav-item toc-entry toc-h2 active" {% else %} class="toc-entry toc-h2"{% endif %}><a class="nav-link" href="{{ item.path|url }}">{{ item.label }}</a></li>
|
||||
{% set docs = site.get(item.path) %}
|
||||
{% for child in docs.children recursive %}
|
||||
<li{% if this._path == child._path %} class="toc-entry toc-h4 active" {% else %} class="toc-entry toc-h4"{% endif
|
||||
%}>{{ get_link(child) }}
|
||||
{% if this.is_child_of(child) %}
|
||||
<ul>{{ loop(child.children) }}</ul>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
<li{% if this.is_child_of(item.path) %} class="nav-item toc-entry toc-h2 active" {% else %} class="toc-entry toc-h2"{% endif %}><a class="nav-link" href="{{ item.path|url }}">{{ item.label }}</a></li> {% endfor %}
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
@ -52,10 +43,10 @@
|
||||
|
||||
</div>
|
||||
<footer>
|
||||
<script src="{{ '/static/js/jquery-3.2.1.min.js'|url }}" ></script>
|
||||
<script src="{{ '/static/js/popper.min.js'|url }}" ></script>
|
||||
<script src="{{ '/static/js/bootstrap.bundle.min.js'|url }}" ></script>
|
||||
<script src="{{ '/static/js/scrollspy.min.js'|url }}" ></script>
|
||||
<script src="{{ '/static/js/jquery-3.2.1.min.js'|asseturl }}" ></script>
|
||||
<script src="{{ '/static/js/popper.min.js'|asseturl }}" ></script>
|
||||
<script src="{{ '/static/js/bootstrap.bundle.min.js'|asseturl }}" ></script>
|
||||
<script src="{{ '/static/js/scrollspy.min.js'|asseturl }}" ></script>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user