[tor-commits] [webwml/staging] Bug 23484: 2017 Homepage donation banner
hiro at torproject.org
hiro at torproject.org
Mon Oct 30 18:23:41 UTC 2017
commit 7f17ea251531e45fdf372ee8fd65a02baf9ad3e3
Author: Arthur Edelstein <arthuredelstein at gmail.com>
Date: Tue Nov 15 02:05:59 2016 -0500
Bug 23484: 2017 Homepage donation banner
---
css/donation-banner.css | 113 ++++++++++++++++++++++++++++++++++++++++++++++++
en/index.wml | 2 +-
images/onion-hand.png | Bin 0 -> 69055 bytes
include/head.wmi | 20 +++++++++
js/donation_banner.js | 33 ++++++++++++++
5 files changed, 167 insertions(+), 1 deletion(-)
diff --git a/css/donation-banner.css b/css/donation-banner.css
new file mode 100644
index 00000000..57c0af39
--- /dev/null
+++ b/css/donation-banner.css
@@ -0,0 +1,113 @@
+#banner-wrapper {
+ -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 */
+ display: block;
+ height: 150px;
+ justify-content: center;
+ left: 0px;
+ margin-top: 0px;
+ min-width: 900px;
+ opacity: 1;
+ position: absolute;
+ user-select: none;
+ width: 100%;
+ z-index: 1;
+}
+#banner-wrapper:before {
+ background-color: #551373;
+ background-image: url('../images/onion-hand.png');
+ background-position: calc(50% - 40px) 50%;
+ background-size: cover;
+ content: "";
+ height: 150px;
+ left: 0px;
+ position: absolute;
+ top: 0px;
+ right: 0px;
+}
+#banner-contents-container {
+ align-items: center;
+ height: 100%;
+ margin: 0 auto;
+ max-width: 960px;
+ position: relative;
+ width: 960px;
+}
+#banner-tagline {
+ align-items: center;
+ bottom: 60px;
+ color: white;
+ display: flex;
+ font-family: monospace;
+ font-weight: bold;
+ left: 200px;
+ position: absolute;
+ right: 0px;
+ text-align: start;
+ text-transform: uppercase;
+ top: 10px;
+}
+#banner-slogan {
+ align-items: center;
+ bottom: 30px;
+ color: #f8f8a0;
+ display: flex;
+ font-size: 20px;
+ font-family: monospace;
+ font-weight: bold;
+ left: 200px;
+ position: absolute;
+ right: 285px;
+ text-align: start;
+ top: 90px;
+ white-space: nowrap;
+}
+#banner-mozilla {
+ align-items: center;
+ bottom: 5px;
+ color: white;
+ display: flex;
+ font-size: 18px;
+ font-family: sans-serif;
+ left: 200px;
+ position: absolute;
+ right: 285px;
+ text-align: start;
+ top: 120px;
+ white-space: nowrap;
+}
+#banner-donate-button {
+ align-items: center;
+ background-color: #13a513;
+ border: 0px;
+ bottom: 10px;
+ color: #fbf7ef;
+ display: flex;
+ font-family: sans-serif;
+ font-size: 22px;
+ font-weight: bold;
+ justify-content: center;
+ left: 630px;
+ letter-spacing: -0.00em;
+ position: absolute;
+ right: 10px;
+ top: 90px;
+}
+#banner-donate-button:hover {
+ background-color: #38bc38;
+}
+#banner-spacer {
+ background-color: #551373;
+ display: block;
+ height: 150px;
+ position: relative;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+}
+body {
+ min-width: 960px;
+}
diff --git a/en/index.wml b/en/index.wml
index 478e96e9..5c166f10 100644
--- a/en/index.wml
+++ b/en/index.wml
@@ -2,7 +2,7 @@
# Revision: $Revision$
# Translation-Priority: 1-high
-#include "head.wmi" TITLE="Tor Project | Privacy Online" CHARSET="UTF-8"
+#include "head.wmi" TITLE="Tor Project | Privacy Online" CHARSET="UTF-8" DONATION_BANNER="true"
<div id="home">
diff --git a/images/onion-hand.png b/images/onion-hand.png
new file mode 100644
index 00000000..00a5a41c
Binary files /dev/null and b/images/onion-hand.png differ
diff --git a/include/head.wmi b/include/head.wmi
index dc4d5e26..f496462f 100644
--- a/include/head.wmi
+++ b/include/head.wmi
@@ -33,6 +33,7 @@
# begin WML to generate css/js paths
<ifneq "$(STYLESHEET)" "" "<link href="$(DOCROOT)/$(STYLESHEET)" rel="stylesheet">">
<ifeq "$(STYLESHEET)" "" "<link href="$(DOCROOT)/css/master.min.css" rel="stylesheet">">
+ <ifeq "$(DONATION_BANNER)" "true" "<link href="$(DOCROOT)/css/donation-banner.css" rel="stylesheet">">
#<link href="css/master.min.css" rel="stylesheet">
<!--[if lte IE 8]>
@@ -48,6 +49,25 @@
# end WML to generate css/js paths
</head>
<body>
+<!-- Insert donation banner if flag is true -->
+<ifeq "$(DONATION_BANNER)" "true" "
+ <div id="banner-wrapper">
+ <div id="banner-contents-container">
+ <div id="banner-tagline"><span><noscript>Protecting the Privacy of Millions Every Day</noscript></span></div>
+ <div id="banner-slogan"><span>Tor: Powering Digital Resistance</span></div>
+ <div id="banner-mozilla"><span>Give today and Mozilla will match your gift!</span></div>
+ <a id="banner-donate-button-link"
+ href="https://www.torproject.org/donate/donate-pdr-hp">
+ <div id="banner-donate-button">
+ <span>Donate Now! ▶</span>
+ </div>
+ </a>
+ </div>
+ </div>
+ <div id="banner-spacer"></div>
+ <script src="js/donation_banner.js"></script>
+
+">
<div id="wrap">
<div id="header">
<h1 id="logo"><a href="<page index>">Tor</a></h1>
diff --git a/js/donation_banner.js b/js/donation_banner.js
new file mode 100644
index 00000000..239fcafd
--- /dev/null
+++ b/js/donation_banner.js
@@ -0,0 +1,33 @@
+/* jshint esnext:true */
+
+let kTaglines = [
+ "Protecting Journalists, Whistleblowers, & Activists Since 2006",
+ "Networking Freedom Worldwide",
+ "Freedom Online",
+ "Fostering Free Expression Worldwide",
+ "Protecting the Privacy of Millions Every Day",
+];
+
+let kTaglineSizes = [
+ 30,
+ 40,
+ 48,
+ 36,
+ 36,
+];
+
+// Returns a random integer x, such that 0 <= x < max
+let randomInteger = function (max) {
+ return Math.floor(max * Math.random());
+};
+
+// The main donation banner function.
+let runDonationBanner = function () {
+ // Load random tag line once page is loaded
+ let index = randomInteger(kTaglines.length);
+ let taglineElement = document.querySelector("#banner-tagline span");
+ taglineElement.innerText = kTaglines[index];
+ taglineElement.style.fontSize = kTaglineSizes[index] + "px";
+};
+
+runDonationBanner();
More information about the tor-commits
mailing list