torproject/lego
1
0
Fork 0
mirror of https://github.com/torproject/lego.git synced 2024-11-27 03:30:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

rework onion pattern on footer

Browse Source 
use direction: rtl to anchor the image on the right to avoid the need to
use a background image which scales badly on different browser window
sizes

this way the height of the image remains identical no matter the width
of the viewport
This commit is contained in:
Jérôme Charaoui 2023-10-18 22:59:11 -04:00
parent 1a972c9520
commit 10adf9b548
No known key found for this signature in database
GPG Key ID: 69C52F658E988542
2 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
assets/scss/_tpo.scss
View File

@ -44,6 +44,15 @@ footer .border{
border-bottom: 1px solid rgba(255,255,255,0.3) !important; border-bottom: 1px solid rgba(255,255,255,0.3) !important;
} }
.footer .onion-pattern {
direction: rtl;
max-height: 280px;
}
.footer .download-section {
max-width: 36rem;
}
main{ main{
padding-bottom: 5em; padding-bottom: 5em;
} }
@ -54,14 +63,6 @@ main{
background-size: cover; background-size: cover;
} }
.onion-bg{
background: url("../images/circle-pattern.png");
background-color: rgba(0, 0, 0, 0);
background-position-x: -85%;
background-repeat: no-repeat;
background-size: 65%;
}
.btn-shadow { .btn-shadow {
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.20000000298023224); box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.20000000298023224);
opacity: 0.8; opacity: 0.8;
@ -129,8 +130,11 @@ main{
font-size: 1.3rem; font-size: 1.3rem;
} }
.window-bg, .window-bg,
.onion-bg { .footer .onion-pattern {
background: none; display: none !important;
}
.footer .download-section {
margin: 3rem auto 0 !important;
} }
.hero > p{ .hero > p{
font-size: 2.5rem; font-size: 2.5rem;

32
templates/footer.html
View File

@ -6,22 +6,22 @@
{% if this.path != '/download' %} {% if this.path != '/download' %}
<div class="row onion-bg"> <div class="row">
<div class="col-12 d-flex justify-content-right"> <div class="col-4 d-flex onion-pattern">
<div class="container pt-5 justify-content-right"> <img src="{{ '/static/images/circle-pattern.png'|asseturl }}" class="img-svg">
<div class="offset-lx-2 offset-sm-4 mt-5"> </div>
<h2 class="text-white text-bold">{{ _('Download Tor Browser') }}</h2> <div class="col-sm-8 d-flex download-section mt-auto">
<p class="text-white">{{ _('Download Tor Browser to experience real private browsing without tracking, surveillance, or censorship.') }}</p> <div class="container pb-2 justify-content-right">
{% set download = site.get('/download') %} <h2 class="text-white text-bold">{{ _('Download Tor Browser') }}</h2>
{% if download == None %} <p class="text-white">{{ _('Download Tor Browser to experience real private browsing without tracking, surveillance, or censorship.') }}</p>
<a class="btn text-primary bg-white btn-light pull-right mt-2" href="https://www.torproject.org/download/"> {%- set download = site.get('/download') -%}
{% else %} {% if download == None -%}
<a class="btn text-primary bg-white btn-light pull-right mt-2" href="{{ this.url_to(download, alt=this.alt) }}"> <a class="btn text-primary bg-white btn-light pull-right mt-2" href="https://www.torproject.org/download/">
{% endif %} {% else %}
<a class="btn text-primary bg-white btn-light pull-right mt-2" href="{{ this.url_to(download, alt=this.alt) }}">
{{ _("Download Tor Browser") }}<i class="ml-2 pt-1 fas fa-arrow-down-png-purple"></i> {% endif -%}
</a> {{ _("Download Tor Browser") }}<i class="ml-2 pt-1 fas fa-arrow-down-png-purple"></i>
</div> </a>
</div> </div>
</div> </div>
</div> </div>