mirror of
https://github.com/torproject/webwml.git
synced 2024-11-27 03:30:40 +00:00
Bug 23484: 2017 Homepage donation banner
This commit is contained in:
Arthur Edelstein
parent
f6648f3169
commit
7f17ea2515
113
css/donation-banner.css
Normal file
113
css/donation-banner.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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">
|
||||
|
||||
BIN
images/onion-hand.png
Normal file
BIN
images/onion-hand.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
@ -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>
|
||||
|
||||
33
js/donation_banner.js
Normal file
33
js/donation_banner.js
Normal file
@ -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();
|
||||
Loading…
Reference in New Issue
Block a user