Skip to content
GitLab
Commit ee12fc7a authored by Antonela's avatar Antonela
Browse files

UI Review

parent e7d78c77
Expand all Hide whitespace changes
Inline Side-by-side
assets/scss/_portal.scss
View file @ ee12fc7a
......@@ -8,14 +8,12 @@
font-weight: 400;
line-height: 36px;
text-align: left;
}
.preamble {
}
.preamble p {
color: #777777;
font-family: Source Sans Pro;
font-size: 36px;
font-size: 2rem;
font-weight: $font-weight-light;
}
.human-name {
......
assets/scss/_tor.scss
View file @ ee12fc7a
......@@ -250,6 +250,11 @@ mark, .mark {
}
}
.nav-link {
display: block;
padding: 1rem;
}
/*
* Sidebar
*/
......@@ -406,9 +411,9 @@ a.side-nav.active {
.text-tpo {
font-family: $font-family-sans;
font-size: 18px;
font-size: 1.1rem;
font-weight: 400;
line-height: 22px;
line-height: 1.7rem;
}
......
assets/scss/_tpo.scss
View file @ ee12fc7a
......@@ -46,7 +46,11 @@ footer {
}
.onion-bg{
background: url("assets/circle-pattern.png");
background: url("images/circle-pattern.png");
background-color: rgba(0, 0, 0, 0);
background-position-x: -85%;
background-repeat: no-repeat;
background-size: 65%;
}
......
assets/static/bootstrap.css
View file @ ee12fc7a
This diff is collapsed.
assets/static/bootstrap.css.map
View file @ ee12fc7a
This diff is collapsed.
templates/contact.html
View file @ ee12fc7a
......@@ -35,9 +35,9 @@
</div>
<div class="container py-5 justify-content-center">
<div class="row ml-5 mr-5">
<h4 class="text-primary">Join an email list <span class="oi oi-arrow-right p-1" title="icon arrow-right" aria-hidden="true"></span></h4>
<h4 class="text-primary">Join an email list <small class="oi oi-arrow-right p-1" title="icon arrow-right" aria-hidden="true"></small></h4>
</div>
<div class="row ml-5 mr-5">
<div class="row ml-5 mr-5 preamble">
<p>Our teams collaborate in open channels, including email lists, you are welcome to join. If you have a question for a specific team not answered on our support portal, you can ask the appropriate list. You're welcome to subscribe and just watch, too :)</p>
</div>
</div>
......@@ -88,7 +88,7 @@
<div class="col-4">
<h3 class="text-primary display-5">Send us Mail</h3>
<p class="text-tpo">The Tor Project <br/>

217 1st Ave South #4903</br>

217 1st Ave South #4903</br>

Seattle, WA 98194 USA</p>
</div>
</div>
......
templates/download.html
View file @ ee12fc7a
......@@ -5,10 +5,10 @@
<div class="oval-2"></div>
</div>
<h3 class="text-primary display-6 pt-5">Get connected</h3>
<div class="row pl-3 text-tpo">
<div class="row pl-3 pr-5 text-tpo">
<p class="text-tpo">If you are in a country where Tor is blocked, you can <span class="text-primary text-bold">configure</span> Tor to connect to a bridge during the setup process. Select <span class="text-primary">"Tor is censored in my country."</span></p>
</div>
<div class="row pl-3 text-tpo">
<div class="row pl-3 pr-5 text-tpo">
<p class="text-tpo">If Tor is not censored, one of the most common reasons Tor won’t connect is an incorrect system clock. Please make sure it’s set correctly. Read other FAQ’s at our <a href="https://support.torproject.org"><u>Support Portal</u></a>.</p>
</div>
</div>
......@@ -17,11 +17,11 @@
<div class="oval-2"></div>
</div>
<h3 class="text-primary display-6 pt-5">Stay safe</h3>
<div class="row pl-3 text-tpo">
<div class="row pl-3 pr-5 text-tpo">
<p class="text-tpo">Please do not torrent over Tor. <br />
Tor Browser will block browser plugins such as Flash, RealPlayer, Quicktime, and others: they can be manipulated into revealing your IP address.</p>
</div>
<div class="row pl-3 text-tpo">
<div class="row pl-3 pr-5 text-tpo">
<p class="text-tpo"><span class="text-primary text-bold">We do not recommend installing additional add-ons or plugins</span> into Tor Browser, as these may bypass Tor or compromise your privacy. Tor Browser already comes with HTTPS Everywhere, NoScript, and other patches to protect your privacy and security.</p>
</div>
</div>
......
templates/footer.html
View file @ ee12fc7a
<div class="container-fluid bg-dark footer">
<div class="container-fluid bg-dark footer onion-bg">
<div class="row">
<div class="col-12 d-flex justify-content-right">
<div class="container pt-5 justify-content-right onion-bg">
<div class="container pt-5 justify-content-right">
<div class="offset-lx-2 offset-sm-4 mt-5">
<h2 class="text-white text-bold">Download Tor Browser</h2>
<p class="text-white">Download Tor Browser to experience real private browsing without tracking, surveillance, or censorship.</p>
......
templates/hero-download.html
View file @ ee12fc7a
......@@ -31,7 +31,8 @@
</form>
</div>
<div class="row">
<a class="mx-auto text-white p-5 fade" href=""><u>Read the latest release announcements.</u></a>
<a class="mx-auto text-white p-5" href=""><u>Read the latest release announcements</u></a>
<a class="mx-auto text-white p-5" href=""><u>Advanced Install Options & Other Platforms</u></a>
</div>
<div class="row pt-5 justify-content-center">
<img src="{{ 'static/images/png/Group4.png'|asseturl }}" />
......
templates/macros/people.html
View file @ ee12fc7a
{% macro render_board(item, alternative) %}
<div class="card p-3 m-3 border-0 col-5">
<div class="card p-3 mx-auto border-0 col-4">
<div class="card-body">
<h5 class="card-title human-name">{{ item.name }}</h5>
<h6 class="card-subtitle mb-2 text-primary nick text-capitalize">{{ item.title }}</h6>
......@@ -10,7 +10,7 @@
{% endmacro %}
{% macro render_core(item, alternative) %}
<div class="card m-3 border-0 border-bottom border-light col-3">
<div class="card mx-auto border-0 border-bottom border-light col-3">
<div class="card-body">
<h5 class="card-title human-name human-name-small">{{ item.name }}</h5>
<h6 class="card-subtitle mb-2 text-primary nick text-lowercase">{{ item.nickname }}{% if item.pronoun %} - {{ item.pronoun }}{% endif %}{% if item.twitter_handle %} - <a href="https://twitter.com/{{ item.twitter_handle }}">@{{ item.twitter_handle }}</a>{% endif %}</h6>
......
templates/press.html
View file @ ee12fc7a
<div class="container py-3">
<div class="container py-5">
<div class="row">
<div class="col-6">
<h3 class="text-primary display-5">Get support</h3>
......@@ -33,21 +33,21 @@
</div>
<div class="container col-10">
<div class="row">
<div class="card m-3" style="width: 365px; height: 485px;">
<div class="card mx-auto" style="width: 365px; height: 485px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>New Release: Tor Browser 8.0a10</u></p>
<p class="card-text description description-small">Tor Browser 8.0a10 is now available from the Tor Browser Project page and also from our distribution directory. It is the second alpha release based on Firefox ESR 60 and contains a number of improvements and bug fixes.</p>
</div>
</div>
<div class="card m-3" style="width: 365px; height: 485px;">
<div class="card mx-auto" style="width: 365px; height: 485px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Help Us Translate Our New Support Portal</u></p>
<p class="card-text description description-small">Over 2 million people around the world rely on Tor for private access to the open web everyday, and we want to make sure that Tor and our resources are localized for as many of our users as possible.</p>
</div>
</div>
<div class="card m-3" style="width: 365px; height: 485px;">
<div class="card mx-auto" style="width: 365px; height: 485px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>New Release: Tor 0.3.4.7-rc</u></p>
......
templates/projects.html
View file @ ee12fc7a
<div class="container py-3">
<div class="container py-5">
<div class="row border-bottom border-light"><p></p></div>
</div>
</div><div class="container py-3">
......
templates/sponsors.html
View file @ ee12fc7a
......@@ -3,56 +3,28 @@
</div>
<div class="container col-10">
<div class="row">
<div class="card m-3" style="width: 255px; height: 329px;">
<div class="card mx-auto col-3">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<div class="card mx-auto col-3">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<div class="card mx-auto col-3">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<div class="card mx-auto col-3">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
......@@ -66,56 +38,14 @@
</div>
<div class="container col-10">
<div class="row">
<div class="card m-3" style="width: 255px; height: 329px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<div class="card mx-auto">
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
<p class="card-text description description-small">Some quick paragraph about the projects we are working with this sponsor and a link to the trac.</p>
</div>
</div>
<div class="card m-3" style="width: 255px; height: 329px;">
<div class="card mx-auto" >
<img class="card-img-top" src="{{ '/static/images/index.svg'|asseturl }}" alt="Card image cap">
<div class="card-body">
<p class="text-primary description description-small"><u>Sponsor Name</u></p>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment