commit eeeb665a9b147f046fc9029b8733956982dcebc0 Author: hiro hiro@torproject.org Date: Sat Oct 26 00:12:44 2019 +0200
Fix banner --- assets/static/css/eoy.css | 21 +++++++-------------- templates/bottom_banner.html | 33 ++++++++++++++------------------- 2 files changed, 21 insertions(+), 33 deletions(-)
diff --git a/assets/static/css/eoy.css b/assets/static/css/eoy.css index 8a79113..27027ff 100644 --- a/assets/static/css/eoy.css +++ b/assets/static/css/eoy.css @@ -8,7 +8,7 @@
@font-face { font-family: League Gothic; - src: url('fonts/LeagueGothic/LeagueGothic-Italic.otf') format('otf'); + src: url('fonts/LeagueGothic/LeagueGothic-Italic.otf'); }
.banner { @@ -23,6 +23,10 @@ bottom: 0; padding: 1.25rem 1.25rem 2rem; width: 100%; + background-image: url('../images/home/png/take-back@3x.png'); + background-position: bottom 10% right 30%; + background-repeat: no-repeat; + background-size: contain; }
.footer__close { @@ -38,36 +42,25 @@ visibility: inherit; }
-.take-back-monochrome-purple { - width: 533px; - height: 475px; -} - .tracking-surveillan { color: #2EF900 !important; font-family: Source Code Pro; - font-size: 18px; font-weight: 400; - line-height: 22px; text-align: left; }
.take-back-the-intern { color: #2FFF00; - font-family: League Gothic; - font-size: 80px; + font-family: League Gothic !important; font-style: italic; - font-weight: 400; - line-height: 96px; + font-weight: 400 !important; text-align: left; }
.give-today-and-mozi { color: #FFFFFF; font-family: Source Code Pro; - font-size: 14px; font-weight: 400; - line-height: 17px; text-align: left; }
diff --git a/templates/bottom_banner.html b/templates/bottom_banner.html index 5c790e6..31c1603 100644 --- a/templates/bottom_banner.html +++ b/templates/bottom_banner.html @@ -1,29 +1,24 @@ -<div class="banner__containter banner align-middle d-flex justify-content-center"> +<div class="banner__containter banner align-middle d-flex justify-content-center p-0"> <input id="trigger" type="checkbox" title="Close banner" /> <label for="trigger" class="footer__close text-white">X</label> <span class="eoy-sr-only text-white">Close banner</span> - <div class="eoy-banner row col-12 p-5" id="banner-header" role="contentinfo"> - <div class="col-2"></div> - <div class="col-8"> - <div class="col-12 row"> - <div class="col-9"> - <div class="row"> - <p class="tracking-surveillan">Tracking, surveillance, and censorship are widespread online.</p> - </div> - <div class="row"> - <p class="take-back-the-intern">TAKE BACK THE INTERNET WITH TOR</p> - </div> - <div class="row"> - <a class="btn-lg rectangle" href="https://donate.torproject.org">DONATE NOW</a> - <p class="give-today-and-mozi ml-5">Give today, and Mozilla will match your donation.</p> - </div> + <div class="eoy-banner row col-md-12" id="banner-header" role="contentinfo"> + <div class="col-lg-2 col-md-2 col-sm-1"></div> + <div class="col-lg-8 col-md-8 col-sm-4"> + <div class="col-12 p-5"> + <div class="row"> + <h4 class="tracking-surveillan">Tracking, surveillance, and censorship are widespread online.</h4> </div> - <div class="col-3"> - <img src="{{ '/static/images/home/png/take-back@3x.png'|asseturl }}" alt="{{ _("Take Back The Internet") }}" /> + <div class="row"> + <h2 class="take-back-the-intern display-3">TAKE BACK THE INTERNET WITH TOR</h2> + </div> + <div class="row"> + <a class="btn-lg rectangle" href="https://donate.torproject.org">DONATE NOW</a> + <p class="give-today-and-mozi ml-5">Give today, and Mozilla will match your donation.</p> </div> </div> </div> - <div class="col-2"> + <div class="col-lg-2 col-md-2 col-sm-1"> </div> </div> </div>