torproject/lego
1
0
Fork 0
mirror of https://github.com/torproject/lego.git synced 2024-11-23 01:29:45 +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;
}
.footer .onion-pattern {
direction: rtl;
max-height: 280px;
}
.footer .download-section {
max-width: 36rem;
}
main{
padding-bottom: 5em;
}
@ -54,14 +63,6 @@ main{
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 {
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.20000000298023224);
opacity: 0.8;
@ -129,8 +130,11 @@ main{
font-size: 1.3rem;
}
.window-bg,
.onion-bg {
background: none;
.footer .onion-pattern {
display: none !important;
}
.footer .download-section {
margin: 3rem auto 0 !important;
}
.hero > p{
font-size: 2.5rem;

32
templates/footer.html
View File

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