Bug 20415: 2016 Donation banner

arthuredelstein · Nov 18, 2016 · c27d7dd8d7a192ce0e99bc9bb217469a3ab2916d · c27d7dd
1 parent 8e14a81
commit c27d7dd8d7a192ce0e99bc9bb217469a3ab2916d
Showing with 226 additions and 0 deletions.

+158 −0 css/layout.css

+32 −0 en/index.wml

BIN images/onion-heart.png

BIN images/tor-roots-only.png

+36 −0 js/donation_banner.js
diff --git a/css/layout.css b/css/layout.css
@@ -1296,3 +1296,161 @@ p.blogDate {
 }
 /* End hide from IE-mac */
 
+#banner-container {
+    -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: flex;
+    height: 120px;
+    justify-content: center;
+    left: 0px;
+    margin-top: 36px;
+    min-width: 900px;
+    opacity: 1;
+    position: absolute;
+    user-select: none;
+    width: 100%;
+    z-index: 1;
+}
+#banner-container:before {
+    background-image: url('../images/tor-roots-only.png');
+    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: 24px;
+    margin: 10px 20px 10px 20px;
+    max-height: 100%;
+    padding: 0px;
+}
+#banner-tagline {
+    align-items: center;
+    display: flex;
+    flex: 2 2 67%;
+    font-weight: bold;
+    justify-content: center;
+    max-width: 469px;
+    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-bottom: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 5px;
+    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: 18px;
+    font-weight: bold;
+    height: 100%;
+    text-align: center;
+    width: 100%;
+}
+#banner-donate-button-text {
+    align-self: stretch;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    flex: 2 2 67%;
+}
+#banner-donate-button-arrow {
+    flex: 1 1 33%;
+    font-size: 14px;
+    line-height: 14px;
+}
+#banner-donate-button-arrow:-moz-dir(rtl) {
+    transform: scaleX(-1);
+}
+#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 {
+    height: 180px;
+    position: relative;
+    top: 0;
+}
diff --git a/en/index.wml b/en/index.wml
@@ -2,6 +2,38 @@
 # Revision: $Revision$
 # Translation-Priority: 1-high
 
+  <div id="banner-container" class="onions-bg">
+    <div id="banner-contents-container">
+      <div id="banner-logo-container">
+        <img id="banner-logo" alt="Tor Onion-Heart Logo"
+             src="images/onion-heart.png"/>
+      </div>
+      <div id="banner-text">
+        <div id="banner-tagline">
+          <span>
+            <noscript>Protecting Journalists, Activists & Whistleblowers Since 2006</noscript>
+          </span></div>
+        <div id="banner-heart">
+          <span>
+            Tor is at the heart of Internet freedom
+          </span>
+        </div>
+      </div>
+      <a id="banner-donate-button-link"
+         href="./donate/donate-homepage-en">
+        <div id="banner-donate-button-container">
+          <div id="banner-donate-button">
+            <div id="banner-donate-button-text">
+              <span>Donate Now! &#187;</span>
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+  <div id="banner-spacer"></div>
+  <script src="js/donation_banner.js"></script>
+
 #include "head.wmi" TITLE="Tor Project: Anonymity Online" CHARSET="UTF-8"
 
 <div id="home">

diff --git a/images/onion-heart.png b/images/onion-heart.png
diff --git a/images/tor-roots-only.png b/images/tor-roots-only.png
diff --git a/js/donation_banner.js b/js/donation_banner.js
@@ -0,0 +1,36 @@
+/* jshint esnext:true */
+
+var kTaglines = [
+  "Millions of People Depend on Tor for Online Security & Privacy",
+  "A Network of People Protecting People",
+  "Surveillance = Oppression",
+  "Protecting Journalists, Activists & Whistleblowers Since 2006",
+];
+
+var kTaglineSizes = [
+  26,
+  32,
+  32,
+  26,
+];
+
+var sel = function (selector) {
+  return document.querySelector(selector)
+};
+
+// Returns a random integer x, such that 0 <= x < max
+var randomInteger = function (max) {
+  return Math.floor(max * Math.random());
+};
+
+// The main donation banner function.
+var runDonationBanner = function () {
+  // Load random tag line once page is loaded
+  var index = randomInteger(4);
+  var taglineElement = sel("#banner-tagline span");
+  taglineElement.innerText = kTaglines[index];
+  taglineElement.style.fontSize = kTaglineSizes[index];
+};
+
+// Run banner code on load.
+window.addEventListener("load", runDonationBanner);