text & design adjustments

master
alice 3 years ago
parent 3058d8834c
commit 17487e29d8

@ -87,7 +87,7 @@ div#captcha > div {
header{ header{
color: #1c619a; color: #1c619a;
padding: 1em 6em; padding: 2em 8em;
} }
header .inner { header .inner {
display: flex; display: flex;
@ -206,7 +206,7 @@ header .site-menu a{
@media screen and (max-width: 64em) { @media screen and (max-width: 64em) {
header { header {
padding: 0.6em 1em; padding: 1em 2em;
} }
header nav { header nav {
margin-left: 3em; margin-left: 3em;
@ -292,9 +292,6 @@ header .site-menu a{
} }
.content h2 { .content h2 {
font-size: 1.5em;
font-weight: normal;
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
font-family: 'Arvo', serif; font-family: 'Arvo', serif;
@ -310,6 +307,7 @@ header .site-menu a{
.flex-page { .flex-page {
display: flex; display: flex;
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
align-items: flex-start;
} }
.flex-page .left-menu { .flex-page .left-menu {
display: block; display: block;
@ -624,9 +622,9 @@ ul.errorlist {
.homepage h2 { .homepage h2 {
text-align: center; text-align: center;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 2.3em; font-size: 2.5em;
font-weight: bold; font-weight: bold;
margin: 3em 0.5em; margin: 2.75em 0.5em;
-webkit-text-fill-color: #D99C7E; -webkit-text-fill-color: #D99C7E;
-webkit-text-stroke-width: 1px; -webkit-text-stroke-width: 1px;
@ -660,7 +658,7 @@ ul.errorlist {
.homepage h3 { .homepage h3 {
font-family: 'Arvo', serif; font-family: 'Arvo', serif;
font-weight: normal; font-weight: normal;
font-size: 1.2em; font-size: 1.3em;
} }
.homepage ul { .homepage ul {
list-style-type: circle; list-style-type: circle;
@ -702,6 +700,9 @@ ul.errorlist {
} }
@media screen and (max-width: 48em) { @media screen and (max-width: 48em) {
.homepage h2 {
font-size: 2.3em;
}
.homepage .title h3, .homepage .inner { .homepage .title h3, .homepage .inner {
width: 90%; width: 90%;
} }
@ -760,7 +761,6 @@ a.home-signup-button {
} }
.account-status table td { .account-status table td {
padding: 0.5em 1em; padding: 0.5em 1em;
width: 50%;
} }
.account-status table td:first-child { .account-status table td:first-child {
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
@ -904,13 +904,13 @@ a.home-signup-button {
/***************************************************/ /***************************************************/
/********************* Gateways */ /********************* Gateways */
#gateways table { table.flat-table {
width: 100%; width: 100%;
} }
#gateways td { .flat-table td {
padding: 10px; padding: 10px;
} }
#gateways table thead td { .flat-table thead td {
text-align: center; text-align: center;
font-size: 1.1em; font-size: 1.1em;
border: 1px solid #bbb; border: 1px solid #bbb;
@ -918,37 +918,37 @@ a.home-signup-button {
color: #1c619a; color: #1c619a;
background: #ddd; background: #ddd;
} }
#gateways table thead tr td:first-child { .flat-table thead tr td:first-child {
border-left: 0; border-left: 0;
} }
#gateways table thead tr td:last-child { .flat-table thead tr td:last-child {
border-right: 0; border-right: 0;
} }
#gateways table tbody tr td:first-child { .flat-table tbody tr td:first-child {
border-left: 0; border-left: 0;
} }
#gateways table tbody tr td { .flat-table tbody tr td {
border: 1px solid #bbb; border: 1px solid #bbb;
} }
#gateways table tbody tr td:first-child { .flat-table tbody tr td:first-child {
border-left: 0; border-left: 0;
} }
#gateways table tbody tr td:last-child { .flat-table tbody tr td:last-child {
border-right: 0; border-right: 0;
} }
#gateways table tbody tr:last-child td { .flat-table tbody tr:last-child td {
border-bottom: 0; border-bottom: 0;
} }
#gateways table tbody tr:nth-child(even) { .flat-table tbody tr:nth-child(even) {
background: #eee; background: #eee;
} }
#gateways .host_name { .flat-table .host_name {
font-family: monospace; font-family: monospace;
} }
#gateways td { .flat-table td {
white-space: nowrap; white-space: nowrap;
} }
#gateways .right { .flat-table .right {
text-align: right; text-align: right;
} }

@ -21,12 +21,10 @@
<i class="fa fa-download fa-fw" aria-hidden="true"></i>&nbsp; <i class="fa fa-download fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'OpenVPN' %} {% trans 'OpenVPN' %}
</a></li> </a></li>
{% if config.WIREGUARD %}
<li><a href="/account/wireguard"> <li><a href="/account/wireguard">
<i class="icon icon-wireguard fa-fw" aria-hidden="true"></i>&nbsp; <i class="icon icon-wireguard fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'WireGuard' %} {% trans 'WireGuard' %}
</a></li> </a></li>
{% endif %}
<li><a href="/payments"> <li><a href="/payments">
<i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; <i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Payments' %} {% trans 'Payments' %}
@ -39,8 +37,10 @@
</div> </div>
</div> </div>
{% block account_content_outer %} {% block account_content_outer %}
<div class="content-box"> <div class="flex-page-content">
<div class="content-box">
{% block account_content %}{% endblock %} {% block account_content %}{% endblock %}
</div>
</div> </div>
{% endblock %} {% endblock %}
</div> </div>

@ -15,10 +15,15 @@
<h3>{% trans 'Hide your IP Address' %}</h3> <h3>{% trans 'Hide your IP Address' %}</h3>
</div> </div>
<div class="inner"> <div class="inner">
<p> <p>
{% blocktrans trimmed %}
From sites and corporations tracking you for advertising, marketing, geo-blocking, ...
and sometimes leaking the data or ignoring regulations.
{% endblocktrans %}
</p>
<p>
{% blocktrans trimmed %} {% blocktrans trimmed %}
From corporations and attackers tracking you for advertising, marketing, geo-blocking, extortion, ... From attackers collecting leaked data or harvesting IP addresses on P2P networks to stalk or extort you.
and irresponsibly storing personal data that can leak to malicious parties and be used against you.
{% endblocktrans %} {% endblocktrans %}
</p> </p>
</div> </div>

@ -4,65 +4,60 @@
{% block pagetitle %}{% trans 'OpenVPN Configuration' %}{% endblock %} {% block pagetitle %}{% trans 'OpenVPN Configuration' %}{% endblock %}
{% block account_content %} {% block account_content %}
<div> <form action="/account/config_dl" method="get" class="pure-form pure-form-aligned">
<form action="/account/config_dl" method="get" class="pure-form pure-form-aligned"> <fieldset>
<fieldset> <div class="pure-control-group">
<div class="pure-control-group"> <label for="p_os">{% trans 'OS' %}</label>
<label for="p_os">{% trans 'OS' %}</label> <select name="platform" id="p_os" class="pure-input-1-2">
<select name="platform" id="p_os" class="pure-input-1-2"> {% for k, v in config_os %}
{% for k, v in config_os %} <option value="{{k}}">{{v}}</option>
<option value="{{k}}">{{v}}</option> {% endfor %}
{% endfor %} </select>
</select> </div>
</div>
<div class="pure-control-group">
<div class="pure-control-group"> <label for="p_gw">{% trans 'Gateway' %}</label>
<label for="p_gw">{% trans 'Gateway' %}</label> <select name="gateway" id="p_gw" class="pure-input-1-2">
<select name="gateway" id="p_gw" class="pure-input-1-2"> <option value="" selected>{% trans 'Random' %}</option>
<option value="" selected>{% trans 'Random' %}</option> <option value="all">{% trans 'All (multiple config files)' %}</option>
<option value="all">{% trans 'All (multiple config files)' %}</option> {% for c in config_countries %}
{% for c in config_countries %} <option value="cc_{{c.country_code}}">
<option value="cc_{{c.country_code}}"> {% trans 'Country' %}: {{c.country_name}}
{% trans 'Country' %}: {{c.country_name}} {% if c.message %}
{% if c.message %} [ {{ c.message }} ]
[ {{ c.message }} ] {% endif %}
{% endif %} </option>
</option> {% endfor %}
{% endfor %} </select>
</select> </div>
</div>
<div class="pure-control-group">
<div class="pure-control-group"> <label for="p_proto">{% trans 'Protocol' %}</label>
<label for="p_proto">{% trans 'Protocol' %}</label> <select name="protocol" id="p_proto" class="pure-input-1-2">
<select name="protocol" id="p_proto" class="pure-input-1-2"> {% for k, v in config_protocols %}
{% for k, v in config_protocols %} <option value="{{k}}">{{v}}</option>
<option value="{{k}}">{{v}}</option> {% endfor %}
{% endfor %} </select>
</select> <p class="inputinfo">{% trans 'TCP is slower. Use it only if you have important packet loss or if UDP is filtered.' %}</p>
<p class="inputinfo">{% trans 'TCP is slower. Use it only if you have important packet loss or if UDP is filtered.' %}</p> </div>
</div>
<div class="pure-control-group">
<div class="pure-control-group"> <label for="p_proxy">{% trans 'Use HTTP Proxy?' %}</label>
<label for="p_proxy">{% trans 'Use HTTP Proxy?' %}</label> <input type="text" name="http_proxy" id="p_proxy"
<input type="text" name="http_proxy" id="p_proxy" placeholder="{% trans "Leave empty if you don't know." %}"
placeholder="{% trans "Leave empty if you don't know." %}" class="pure-input-1-2" />
class="pure-input-1-2" /> <p class="inputinfo">{% trans 'Requires TCP.' %}</p>
<p class="inputinfo">{% trans 'Requires TCP.' %}</p> </div>
</div>
<div class="pure-controls">
<div class="pure-controls"> <label for="p_ipv6" class="pure-checkbox">
<label for="p_ipv6" class="pure-checkbox"> <input type="checkbox" name="enable_ipv6" id="p_ipv6" checked />
<input type="checkbox" name="enable_ipv6" id="p_ipv6" checked /> {% trans 'Enable IPv6?' %}
{% trans 'Enable IPv6?' %} </label>
</label>
<input type="submit" class="pure-button pure-button-primary"
<input type="submit" class="pure-button pure-button-primary" value="{% trans 'Download config' %}" />
value="{% trans 'Download config' %}" /> </div>
</div> </fieldset>
</fieldset> </form>
</form>
</div>
{% endblock %} {% endblock %}

@ -8,7 +8,7 @@
<div class="pure-u-1 pure-u-xl-2-3" id="gateways"> <div class="pure-u-1 pure-u-xl-2-3" id="gateways">
<h2>{% trans 'Our Servers' %}</h2> <h2>{% trans 'Our Servers' %}</h2>
<table> <table class="flat-table">
<thead> <thead>
<tr><td>{% trans 'Location' %}</td> <tr><td>{% trans 'Location' %}</td>
<td>{% trans 'Hostname' %}</td> <td>{% trans 'Hostname' %}</td>

@ -3,8 +3,8 @@
{% load static %} {% load static %}
{% block pagetitle %}{% trans 'Payments' %}{% endblock %} {% block pagetitle %}{% trans 'Payments' %}{% endblock %}
{% block account_content %} {% block account_content_outer %}
<table class="admin-list"> <table class="flat-table">
<thead> <thead>
<tr> <tr>
<td>{% trans 'Date' %}</td> <td>{% trans 'Date' %}</td>
@ -15,7 +15,7 @@
<tbody> <tbody>
{% for payment in payments %} {% for payment in payments %}
<tr> <tr>
<td>{{ payment.created }}</td> <td>{{ payment.created|date:'Y-m-d H:i' }}</td>
<td>{{ payment.time }} <td>{{ payment.time }}
({{ payment.get_amount_display }}) ({{ payment.get_amount_display }})
</td> </td>

Loading…
Cancel
Save