commit c27d7dd8d7a192ce0e99bc9bb217469a3ab2916d Author: Arthur Edelstein arthuredelstein@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);