[tor-commits] [lego/develop] Fix banner

[hiro at torproject.org]

commit eeeb665a9b147f046fc9029b8733956982dcebc0
Author: hiro <hiro at 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 at 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 at 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>