Bug 21131: Remove 2016 donation banner

5b89d079 · Arthur Edelstein · Georg Koppen · dd927687 · 5b89d079 · dd927687
Commit 5b89d079 authored Jan 03, 2017 by Arthur Edelstein Committed by Georg Koppen Jan 13, 2017
--- a/src/chrome/content/aboutTor/aboutTor.xhtml
+++ b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -21,8 +21,6 @@
  <title>&aboutTor.title;</title>
  <link rel="stylesheet" type="text/css" media="all"
        href="chrome://torbutton/skin/aboutTor.css"/>
-  <link rel="stylesheet" type="text/css" media="all"
-        href="chrome://torbutton/skin/donation_banner.css"/>
 <script type="text/javascript;version=1.7">
 <![CDATA[
 function onLoad()
@@ -166,29 +164,6 @@ window.addEventListener("pageshow", function() {
 </script>
 </head>
 <body dir="&locale.dir;" onload="onLoad();">
-  <div id="banner" class="onions-bg">
-    <div id="banner-contents-container">
-      <div id="banner-logo-container">
-        <img id="banner-logo" alt="Tor Onion-Heart Logo"
-             src="chrome://torbutton/content/aboutTor/onion-heart.svg"/>
-      </div>
-      <div id="banner-text">
-        <div id="banner-tagline"><span></span></div>
-        <div id="banner-heart"><span></span></div>
-      </div>
-      <a id="banner-donate-button-link"
-         href="https://www.torproject.org/donate/donate-tbb">
-        <div id="banner-donate-button-container">
-          <div id="banner-donate-button">
-            <div id="banner-donate-button-text">
-              <span></span>
-            </div>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
-  <div id="banner-spacer"></div>
 <div id="torstatus" class="top">
  <div id="torstatus-version"/>
  <div id="torstatus-image"/>
@@ -270,6 +245,6 @@ window.addEventListener("pageshow", function() {
  <p>&aboutTor.footer.label;
 <a href="&aboutTor.learnMore.link;">&aboutTor.learnMore.label;</a></p>
 </div>
-  <script src="chrome://torbutton/content/aboutTor/donation_banner.js"></script>
+
 </body>
 </html>
--- a/src/chrome/content/aboutTor/donation_banner.js
+++ b/src/chrome/content/aboutTor/donation_banner.js
-/* jshint esnext:true */
-
-// A list of locales for which the banner has been translated.
-let kBannerLocales = [
-  "de",
-  "en",
-  "es",
-  "fa",
-  "fr",
-  "it",
-  "nl",
-  "pt",
-  "ru",
-  "tr",
-  "vi",
-  "zh",
-];
-
-// A list of donation page locales (at least redirects should exist).
-let kDonationPageLocales = [
-  "ar",
-  "de",
-  "en",
-  "es",
-  "fa",
-  "fr",
-  "it",
-  "ja",
-  "ko",
-  "nl",
-  "pl",
-  "pt",
-  "ru",
-  "tr",
-  "vi",
-  "zh",
-];
-
-let kPropertiesURL = "chrome://torbutton/locale/aboutTor.properties";
-Components.utils.import("resource://gre/modules/Services.jsm");
-let gStringBundle = Services.strings.createBundle(kPropertiesURL);
-let kBrowserLocale = Services.prefs.getCharPref("general.useragent.locale");
-let kBrowserLocaleShort = kBrowserLocale.match(/[a-zA-Z]+/)[0].toLowerCase();
-
-let sel = selector => document.querySelector(selector);
-
-// Check if we should show the banner, depends on
-// browser locale, current date, and how many times
-// we have already shown the banner.
-let shouldShowBanner = function () {
-  try {
-    // Don't show a banner if update is needed.
-    let updateNeeded = Services.prefs.getBoolPref("extensions.torbutton.updateNeeded");
-    if (updateNeeded) {
-      return false;
-    }
-    // Only show banner when we have that locale and if a donation redirect exists.
-    if (kBannerLocales.indexOf(kBrowserLocaleShort) === -1 ||
-        kDonationPageLocales.indexOf(kBrowserLocaleShort) === -1) {
-      return false;
-    }
-    // Only show banner between 2016 Nov 23 and 2017 Jan 25.
-    let now = new Date();
-    let start = new Date(2016, 10, 23);
-    let end = new Date(2017, 0, 26);
-    let shownCountPref = "extensions.torbutton.donation_banner2016.shown_count";
-    if (now < start || now > end) {
-      // Clean up pref if not in use.
-      Services.prefs.clearUserPref(shownCountPref);
-      return false;
-    }
-    // Only show banner 50 times.
-    let count = 0;
-    if (Services.prefs.prefHasUserValue(shownCountPref)) {
-      count = Services.prefs.getIntPref(shownCountPref);
-    }
-    if (count >= 50) {
-      return false;
-    }
-    Services.prefs.setIntPref(shownCountPref, count+1);
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
-
-// Shrink the font size if the text in the given element is overflowing.
-let fitTextInElement = function (element) {
-  element.style.fontSize = "8px";
-  let defaultWidth = element.scrollWidth,
-      defaultHeight = element.scrollHeight;
-  for (let testSize = 8; testSize <= 40; testSize += 0.5) {
-    element.style.fontSize = `${testSize}px`;
-    if (element.scrollWidth <= defaultWidth &&
-        element.scrollHeight <= defaultHeight) {
-      bestSize = testSize;
-    } else {
-      break;
-    }
-  }
-  element.style.fontSize = `${bestSize}px`;
-};
-
-// Increase padding at left and right to "squeeze" text, until it gets
-// squeezed so much that it gets longer vertically.
-let avoidWidows = function (element) {
-  element.style.paddingLeft = "0px";
-  element.style.paddingRight = "0px";
-  let originalWidth = element.scrollWidth;
-  let originalHeight = element.scrollHeight;
-  for (let testPadding = 0; testPadding < originalWidth / 2; testPadding += 0.5) {
-    element.style.paddingLeft = element.style.paddingRight = `${testPadding}px`;
-    if (element.scrollHeight <= originalHeight) {
-      bestPadding = testPadding;
-    } else {
-      break;
-    }
-  }
-  element.style.paddingLeft = element.style.paddingRight = `${bestPadding}px`;
-};
-
-// Resize the text inside banner to fit.
-let updateTextSizes = function () {
-  fitTextInElement(sel("#banner-tagline"));
-  fitTextInElement(sel("#banner-heart"));
-  fitTextInElement(sel("#banner-donate-button-text"));
-  avoidWidows(sel("#banner-tagline span"));
-  avoidWidows(sel("#banner-donate-button-text"));
-};
-
-// Read the tagline with the given index.
-let getTagline = index => gStringBundle.GetStringFromName(
-  "aboutTor.donationBanner.tagline" + (index + 1));
-
-// Returns a random integer x, such that 0 <= x < max
-let randomInteger = max => Math.floor(max * Math.random());
-
-
-// The main donation banner function.
-let runDonationBanner = function () {
-  try {
-    if (!shouldShowBanner()) {
-      return;
-    }
-    sel("#banner-tagline span").innerText = getTagline(randomInteger(4));
-    sel("#banner-heart span").innerText =
-      gStringBundle.GetStringFromName("aboutTor.donationBanner.heart");
-    sel("#banner-donate-button-text span").innerHTML =
-      gStringBundle.GetStringFromName("aboutTor.donationBanner.donate") + "&#160;&#187;";
-    sel("#banner").style.display = "flex";
-    sel("#banner-spacer").style.display = "block";
-    addEventListener("resize", updateTextSizes);
-    updateTextSizes();
-    // Add a suffix corresponding to locale so we can send user
-    // to a correctly-localized donation page via redirect.
-    sel("#banner-donate-button-link").href += "-" + kBrowserLocaleShort;
-    sel("#torstatus-image").style.display = "none";
-  } catch (e) {
-    // Something went wrong.
-    console.error(e.message);
-    sel("#banner").style.display = "none";
-    sel("#bannerSpacer").style.display = "none";
-    sel("#torstatus-image").style.display = "block";
-  }
-};
-
-// Calls callback(attributeValue) when the specified attribute changes on
-// target. Returns a zero-arg function that stops observing.
-let observeAttribute = function (target, attributeName, callback) {
-  let observer = new MutationObserver(mutations => {
-    mutations.forEach(mutation => {
-      if (mutation.type === "attributes" &&
-          mutation.attributeName === attributeName) {
-        callback(target.getAttribute(attributeName));
-      }
-    });
-  });
-  observer.observe(target, { attributes: true });
-  return () => observer.disconnect();
-};
-
-// Start the donation banner if "toron" has been set to "yes".
-let stopObserving = observeAttribute(document.body, "toron", value => {
-  stopObserving();
-  if (value === "yes") {
-    runDonationBanner();
-  }
-});
--- a/src/chrome/content/aboutTor/onion-heart.svg
+++ b/src/chrome/content/aboutTor/onion-heart.svg
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="svg3004"
-   version="1.1"
-   inkscape:version="0.48.5 r10040"
-   width="399.96011"
-   height="574.18964"
-   xml:space="preserve"
-   sodipodi:docname="tor_onion-heart-no-roots.svg"><metadata
-     id="metadata3010"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
-     id="defs3008"><clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath3730"><path
-         d="M 0,936 936,936 936,0 0,0 0,936 z"
-         id="path3732"
-         inkscape:connector-curvature="0" /></clipPath><linearGradient
-       x1="0"
-       y1="0"
-       x2="1"
-       y2="0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(48.064392,308.5928,-308.5928,48.064392,538.70312,416.25879)"
-       spreadMethod="pad"
-       id="linearGradient4548"><stop
-         style="stop-opacity:1;stop-color:#533c5f"
-         offset="0"
-         id="stop4550" /><stop
-         style="stop-opacity:1;stop-color:#c3a1cc"
-         offset="1"
-         id="stop4552" /></linearGradient><clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath4560"><path
-         d="M 0,936 936,936 936,0 0,0 0,936 z"
-         id="path4562"
-         inkscape:connector-curvature="0" /></clipPath></defs><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="640"
-     inkscape:window-height="480"
-     id="namedview3006"
-     showgrid="false"
-     inkscape:zoom="0.20512821"
-     inkscape:cx="191.66224"
-     inkscape:cy="225.57375"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="g3012"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" /><g
-     id="g3012"
-     inkscape:groupmode="layer"
-     inkscape:label="tor_onion-heart-tat_k"
-     transform="matrix(1.25,0,0,-1.25,-393.33776,933.61587)"><g
-       id="g5498"><g
-         transform="translate(467.2668,636.4615)"
-         id="g4534"><path
-           inkscape:connector-curvature="0"
-           id="path4536"
-           style="fill:#fefbde;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="m 0,0 38.336,-23.387 c -1.623,-10.421 -7.42,-42.074 -2.365,-52.467 54.488,-98.402 15.611,-272.581 -55.594,-266.116 -107.359,16.723 -136.943,96.034 -126.502,163.069 9.521,61.129 89.133,90.349 138.523,119.652 C 5.023,-51.257 6.441,-29.463 0,0" /></g><g
-         transform="translate(-11.7,-132.6)"
-         id="g4538"><g
-           id="g4540"><g
-             id="g4546"><path
-               inkscape:connector-curvature="0"
-               id="path4554"
-               style="fill:url(#linearGradient4548);stroke:none"
-               d="m 515.125,691.615 c 14.398,-33.193 21.002,-61.614 23.349,-92.216 l 0,0 c 5.282,-78.024 -18.683,-145.076 -69.431,-171.68 l 0,0 c 82.295,-22.068 194.019,58 153.076,169.678 l 0,0 c -11.436,31.663 -47.526,67.164 -86.427,100.616 l 0,0 c -8.858,7.069 -7.588,28.931 -4.684,38.436 l 0,0 -13.594,9.835 c -2.5,-20.602 -8.252,-38.547 -2.289,-54.669" /></g></g></g><g
-         transform="translate(539.4914,722.0167)"
-         id="g4564"><path
-           inkscape:connector-curvature="0"
-           id="path4566"
-           style="fill:#acce45;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="M 0,0 -20.238,-47.718 C 2.938,-15.399 35.18,6.613 71.105,24.853 43.215,1.096 17.408,-22.991 -0.063,-48.373 27.033,-20.575 59.609,-7.864 95.082,-1.648 44.057,-34.611 1.818,-71.932 -31.735,-110.53 l -20.071,12.731 C -42.881,-64.259 -24.406,-31.065 0,0" /></g><g
-         transform="translate(610.6633,746.8927)"
-         id="g4568"><path
-           inkscape:connector-curvature="0"
-           id="path4570"
-           style="fill:#4f7944;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="m 0,0 c -18.732,-14.643 -51.215,-40.396 -70.211,-64.362 -16.199,-20.443 -28.023,-39.03 -34.963,-51.689 -4.435,-8.1 -16.986,-6.057 -11.148,7.569 0.06,0.134 0.131,0.231 0.189,0.368 6.617,10.675 16.436,25.483 25.996,38.372 l 18.924,44.909 c -8.81,-18.827 -19.836,-35.509 -28.074,-55.15 0.006,0 -12.072,-19.051 -15.252,-23.871 -1.08,-1.638 -2.02,-3.232 -2.857,-4.727 -0.055,-0.094 -0.12,-0.144 -0.17,-0.239 -1.356,-2.085 -2.416,-4.43 -3.268,-6.515 -0.141,-0.342 -0.145,-0.56 -0.27,-0.887 -1.146,-2.966 -1.884,-5.274 -1.884,-5.274 3.131,-3.687 19.793,-14.219 19.793,-14.219 33.797,38.847 76.142,76.218 127.17,109.18 C -11.502,-32.75 -44.096,-45.426 -71.191,-73.223 -53.719,-47.841 -27.889,-23.757 0,0" /></g><g
-         transform="translate(504.0246,614.7198)"
-         id="g4572"><path
-           inkscape:connector-curvature="0"
-           id="path4574"
-           style="fill:#364733;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="M 0,0 3.443,-3.542 C 37.24,35.305 79.586,72.676 130.613,105.638 101.641,88.618 62.617,65.032 45.039,48.176 22.799,26.855 37.211,47.893 37.211,47.893 c 0,0 13.723,23.78 33.42,36.975 C 59.879,81.646 39.172,62.772 35.447,58.95 35.447,58.95 18.482,35.696 7.662,13.96 4.756,8.131 0,0 0,0" /></g><g
-         transform="translate(495.4396,619.3077)"
-         id="g4576"><path
-           inkscape:connector-curvature="0"
-           id="path4578"
-           style="fill:#f3ecac;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="m 0,0 -50.606,-324.234 c 1.214,-0.211 1.599,-0.373 2.834,-0.564 71.205,-6.467 110.13,167.744 55.642,266.146 -5.057,10.391 0.705,41.975 2.328,52.398 L 0,0 z" /></g><g
-         transform="translate(496.173,618.858)"
-         id="g4580"><path
-           inkscape:connector-curvature="0"
-           id="path4582"
-           style="fill:#292929;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="m 0,0 32.734,-10.453 c -13.681,-28.463 9.821,-53.468 17.739,-59.683 17.775,-13.799 34.8,-27.831 47.625,-43.702 24.132,-30.084 34.48,-68.694 28.527,-106.9 -5.895,-37.853 -28.941,-71.615 -61.904,-91.384 -31.006,-18.65 -70.377,-22.477 -107.196,-16.742 -22.92,3.57 -43.251,7.801 -64.341,18.556 -48.054,24.922 -79.152,74.228 -74.163,126.815 3.549,41.068 17.397,70.575 54.035,97.952 18.971,14.475 54.997,28.784 80.01,40.897 12.305,5.91 27.467,25.606 11.219,69.755 l 5.057,2.771 30.42,-27.723 -26.887,16.145 c 1.891,-3.854 6.055,-20.512 6.742,-25.242 1.125,-13.337 -2.211,-25.627 -5.855,-30.748 -18.242,-23.485 -43.637,-26.643 -63.619,-38.471 -35.263,-20.832 -72.493,-36.022 -79.655,-107.122 -3.672,-35 16.819,-81.593 54.367,-107.718 21.193,-14.688 46.887,-23.316 73.415,-28.867 23.8,-4.774 71.867,2.324 100.117,19.265 30.201,18.063 50.386,49.427 55.742,83.807 5.41,34.736 -3.344,69.895 -25.768,97.222 C 75.537,-105.7 53.42,-85.534 39.496,-74.471 25.564,-63.407 10.248,-36.12 20.123,-13.825 L 0,0 z" /></g><g
-         transform="translate(504.3195,604.0934)"
-         id="g4584"><path
-           inkscape:connector-curvature="0"
-           id="path4586"
-           style="fill:#292929;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="m 0,0 c -3.924,-18.399 -5.262,-25.191 -3.904,-39.278 1.494,-15.528 17.593,-40.092 21.738,-65.995 7.926,-49.617 -5.521,-110.842 -24.156,-157.384 -6.819,-16.368 -30.459,-37.95 -51.5,-42.849 l 14.047,-5.748 c 8.041,-0.892 31.505,15.016 42.904,35.65 18.207,32.385 27.021,72.987 28.521,116.866 0.299,4.223 -0.861,42.469 -5.025,59.125 C 16.871,-74.884 3.447,-51.447 2.414,-46.666 0.484,-38.538 -3.91,-21.602 0,0" /></g><g
-         transform="translate(495.4807,619.3595)"
-         id="g4588"><path
-           inkscape:connector-curvature="0"
-           id="path4590"
-           style="fill:#292929;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="M 0,0 C 0.155,-0.008 -49.259,-320.493 -50.456,-319.838 L -0.062,-0.032 C -0.062,0.16 -0.009,-0.035 0,0 c 0.003,0.037 0.231,-0.25 1.218,-0.73 0,0 -43.223,-281.344 -49.418,-321.118 -0.852,0.131 -1.707,0.265 -2.559,0.396 C -44.276,-279.334 -0.148,0.039 0,0" /></g><g
-         transform="translate(453.0549,350.485)"
-         id="g4592"><path
-           inkscape:connector-curvature="0"
-           id="path4594"
-           style="fill:#df3441;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="m 0,0 c 0,0 -89.234,63.608 -79.039,129.324 3.929,25.318 23.153,43.156 51.53,38.994 38.91,-5.709 47.481,-43.043 47.481,-43.043 L 0,0 z" /></g><g
-         transform="translate(473.216,476.2032)"
-         id="g4596"><path
-           inkscape:connector-curvature="0"
-           id="path4598"
-           style="fill:#bc303a;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="m 0,0 c 0,0 15.029,38.665 32.414,24.385 10.727,-8.813 7.828,-36.448 3.953,-51.406 -12.875,-49.717 -56.528,-98.697 -56.528,-98.697 L 0,0 z" /></g></g></g></svg>
\ No newline at end of file
--- a/src/chrome/content/aboutTor/tor-roots-only.svg
+++ b/src/chrome/content/aboutTor/tor-roots-only.svg
--- a/src/chrome/locale/en/aboutTor.properties
+++ b/src/chrome/locale/en/aboutTor.properties
@@ -13,10 +13,3 @@ aboutTor.searchDC.privacy=Search <a href="%1$S">securely</a> with <a href="%2$S"
 aboutTor.searchDC.privacy.link=https://disconnect.me/privacy
 # The following string is a link which replaces %2$S above.
 aboutTor.searchDC.search.link=https://search.disconnect.me/
-
-aboutTor.donationBanner.donate=Please Donate!
-aboutTor.donationBanner.heart=Tor is at the heart of Internet freedom
-aboutTor.donationBanner.tagline1=Millions of People Depend on Tor for Online Security & Privacy
-aboutTor.donationBanner.tagline2=A Network of People Protecting People
-aboutTor.donationBanner.tagline3=Surveillance = Oppression
-aboutTor.donationBanner.tagline4=Protecting Journalists, Activists & Whistleblowers Since 2006
--- a/src/chrome/locale/fr/aboutTor.properties
+++ b/src/chrome/locale/fr/aboutTor.properties
@@ -14,7 +14,7 @@ aboutTor.searchDC.privacy.link=https://disconnect.me/privacy
 # The following string is a link which replaces %2$S above.
 aboutTor.searchDC.search.link=https://search.disconnect.me/

-aboutTor.donationBanner.donate=Faites un don maintenant&#160;!
+aboutTor.donationBanner.donate=Faites un don maintenant !
 aboutTor.donationBanner.heart=Tor est au cœur de la liberté sur Internet
 aboutTor.donationBanner.tagline1=Des millions de personnes dépendent de Tor pour leur sécurité et la protection de leurs renseignements personnels en ligne
 aboutTor.donationBanner.tagline2=Un réseau de personnes qui protège les gens

--- a/src/chrome/skin/donation_banner.css
+++ b/src/chrome/skin/donation_banner.css
-#banner {
-    -khtml-user-select: none;    /* Konqueror */
-    -moz-user-select: none;      /* Firefox */
-    -ms-user-select: none;       /* Internet Explorer/Edge */
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none;   /* Chrome/Safari/Opera */
-    background-color: #406;
-    background-opacity: 10%;
-    background-size: cover;
-    background: radial-gradient(circle, #406 90%, #203 100%);
-    border-bottom:  6px solid #305;
-    border-top: 5px solid #305;
-    display: none;
-    height: 120px;
-    justify-content: center;
-    left: 0px;
-    margin-top: 40px;
-    min-width: 900px;
-    opacity: 1;
-    position: absolute;
-    user-select: none;
-    width: 100%;
-    z-index: 1;
-}
-#banner:before {
-    background-image: url('chrome://torbutton/content/aboutTor/tor-roots-only.svg');
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: cover;
-    content: ' ';
-    display: block;
-    height: 100%;
-    left: 0;
-    opacity: 0.20;
-    position: absolute;
-    top: 0;
-    width: 100%;
-}
-#banner-contents-container {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    max-width: 700px;
-    position: relative;
-    width: 700px;
-}
-#banner-text {
-    align-self: stretch;
-    color: white;
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    font-family: sans-serif;
-    font-size: 8px;
-    margin: 10px 20px 10px 20px;
-    max-height: 100%;
-}
-#banner-tagline {
-    align-items: center;
-    display: flex;
-    flex: 2 2 67%;
-    font-weight: bold;
-    justify-content: center;
-    text-align: center;
-}
-#banner-heart {
-    align-items: center;
-    color: #f8f8a0;
-    display: flex;
-    flex: 1 1 33%;
-    justify-content: center;
-    text-align: center;
-    white-space: nowrap;
-}
-#banner-logo-container {
-    display: inline-block;
-    flex: 0 0 auto;
-    margin: 0px;
-    position: relative;
-}
-#banner-logo {
-    height: 155px;
-    position: relative;
-    padding-bottom: 40px;
-    width: 108px;
-}
-#banner-donate-button-container {
-    background-color: #FFD;
-    border: 4px solid #204;
-    color: #A20;
-    display: block;
-    flex-grow: 0.0;
-    flex: 0;
-    height: 50px;
-    letter-spacing: -0.00em;
-    opacity: 100%;
-    padding: 10px;
-    width: 100px;
-}
-#banner-donate-button-container:hover {
-    border-color: #610;
-}
-#banner-donate-button-container:active {
-    border-color: #A20;
-}
-#banner-donate-button {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    font-family: sans-serif;
-    font-size: 12px;
-    font-weight: bold;
-    height: 100%;
-    text-align: start;
-    width: 100%;
-}
-#banner-donate-button-text {
-    align-self: stretch;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    flex: 2 2 67%;
-}
-#banner-donate-button-link {
-    flex: 0 0 auto;
-    text-decoration: none;
-}
-#banner-donate-button-link:link {
-    color: #A20;
-}
-#banner-donate-button-link:hover {
-    color: #C40;
-}
-#banner-donate-button-link:visited {
-    color: #408;
-}
-#banner-donate-button-linka:active {
-    color: black;
-}
-#banner-spacer {
-    display: none;
-    height: 150px;
-    position: relative;
-    top: 0;
-};