[tor-commits] [webwml/staging] Bug 20415: 2016 Donation banner
sebastian at torproject.org
sebastian at torproject.org
Tue Nov 22 22:37:15 UTC 2016
commit c27d7dd8d7a192ce0e99bc9bb217469a3ab2916d
Author: Arthur Edelstein <arthuredelstein at gmail.com>
Date: Tue Nov 15 02:05:59 2016 -0500
Bug 20415: 2016 Donation banner
---
css/layout.css | 158 ++++++++++++++++++++++++++++++++++++++++++++++
en/index.wml | 32 ++++++++++
images/onion-heart.png | Bin 0 -> 10592 bytes
images/tor-roots-only.png | Bin 0 -> 119059 bytes
js/donation_banner.js | 36 +++++++++++
5 files changed, 226 insertions(+)
diff --git a/css/layout.css b/css/layout.css
index 8a79d9d..87f6b5c 100644
--- 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
index 836d3b0..4b9a92a 100644
--- 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! »</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
new file mode 100644
index 0000000..e1c0bdf
Binary files /dev/null and b/images/onion-heart.png differ
diff --git a/images/tor-roots-only.png b/images/tor-roots-only.png
new file mode 100644
index 0000000..db92ab4
Binary files /dev/null and b/images/tor-roots-only.png differ
diff --git a/js/donation_banner.js b/js/donation_banner.js
new file mode 100644
index 0000000..35823db
--- /dev/null
+++ 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);
More information about the tor-commits
mailing list