Browse code

Bug 20415: 2016 Donation banner

Arthur Edelstein authored on15/11/2016 08:05:59
Showing5 changed files
... ...
@@ -1296,3 +1296,161 @@ p.blogDate {
1296 1296
 }
1297 1297
 /* End hide from IE-mac */
1298 1298
 
1299
+#banner-container {
1300
+    -khtml-user-select: none;    /* Konqueror */
1301
+    -moz-user-select: none;      /* Firefox */
1302
+    -ms-user-select: none;       /* Internet Explorer/Edge */
1303
+    -webkit-touch-callout: none; /* iOS Safari */
1304
+    -webkit-user-select: none;   /* Chrome/Safari/Opera */
1305
+    background-color: #406;
1306
+    background-opacity: 10%;
1307
+    background-size: cover;
1308
+    background: radial-gradient(circle, #406 90%, #203 100%);
1309
+    border-bottom:  6px solid #305;
1310
+    border-top: 5px solid #305;
1311
+    display: flex;
1312
+    height: 120px;
1313
+    justify-content: center;
1314
+    left: 0px;
1315
+    margin-top: 36px;
1316
+    min-width: 900px;
1317
+    opacity: 1;
1318
+    position: absolute;
1319
+    user-select: none;
1320
+    width: 100%;
1321
+    z-index: 1;
1322
+}
1323
+#banner-container:before {
1324
+    background-image: url('../images/tor-roots-only.png');
1325
+    background-position: 50% 50%;
1326
+    background-repeat: no-repeat;
1327
+    background-size: cover;
1328
+    content: ' ';
1329
+    display: block;
1330
+    height: 100%;
1331
+    left: 0;
1332
+    opacity: 0.20;
1333
+    position: absolute;
1334
+    top: 0;
1335
+    width: 100%;
1336
+}
1337
+#banner-contents-container {
1338
+    align-items: center;
1339
+    display: flex;
1340
+    flex-direction: row;
1341
+    height: 100%;
1342
+    max-width: 700px;
1343
+    position: relative;
1344
+    width: 700px;
1345
+}
1346
+#banner-text {
1347
+    align-self: stretch;
1348
+    color: white;
1349
+    display: flex;
1350
+    flex-direction: column;
1351
+    flex: 1 1 auto;
1352
+    font-family: sans-serif;
1353
+    font-size: 24px;
1354
+    margin: 10px 20px 10px 20px;
1355
+    max-height: 100%;
1356
+    padding: 0px;
1357
+}
1358
+#banner-tagline {
1359
+    align-items: center;
1360
+    display: flex;
1361
+    flex: 2 2 67%;
1362
+    font-weight: bold;
1363
+    justify-content: center;
1364
+    max-width: 469px;
1365
+    text-align: center;
1366
+}
1367
+#banner-heart {
1368
+    align-items: center;
1369
+    color: #f8f8a0;
1370
+    display: flex;
1371
+    flex: 1 1 33%;
1372
+    justify-content: center;
1373
+    text-align: center;
1374
+    white-space: nowrap;
1375
+}
1376
+#banner-logo-container {
1377
+    display: inline-block;
1378
+    flex: 0 0 auto;
1379
+    margin: 0px;
1380
+    position: relative;
1381
+}
1382
+#banner-logo {
1383
+    height: 155px;
1384
+    position: relative;
1385
+    padding-bottom: 40px;
1386
+    width: 108px;
1387
+}
1388
+#banner-donate-button-container {
1389
+    background-color: #FFD;
1390
+    border: 4px solid #204;
1391
+    color: #A20;
1392
+    display: block;
1393
+    flex-grow: 0.0;
1394
+    flex: 0;
1395
+    height: 50px;
1396
+    letter-spacing: -0.00em;
1397
+    opacity: 100%;
1398
+    padding-bottom: 5px;
1399
+    padding-left: 5px;
1400
+    padding-right: 5px;
1401
+    padding-top: 5px;
1402
+    width: 100px;
1403
+}
1404
+#banner-donate-button-container:hover {
1405
+    border-color: #610;
1406
+}
1407
+#banner-donate-button-container:active {
1408
+    border-color: #A20;
1409
+}
1410
+#banner-donate-button {
1411
+    align-items: center;
1412
+    display: flex;
1413
+    flex-direction: column;
1414
+    font-family: sans-serif;
1415
+    font-size: 18px;
1416
+    font-weight: bold;
1417
+    height: 100%;
1418
+    text-align: center;
1419
+    width: 100%;
1420
+}
1421
+#banner-donate-button-text {
1422
+    align-self: stretch;
1423
+    align-items: center;
1424
+    display: flex;
1425
+    justify-content: center;
1426
+    flex: 2 2 67%;
1427
+}
1428
+#banner-donate-button-arrow {
1429
+    flex: 1 1 33%;
1430
+    font-size: 14px;
1431
+    line-height: 14px;
1432
+}
1433
+#banner-donate-button-arrow:-moz-dir(rtl) {
1434
+    transform: scaleX(-1);
1435
+}
1436
+#banner-donate-button-link {
1437
+    flex: 0 0 auto;
1438
+    text-decoration: none;
1439
+}
1440
+#banner-donate-button-link:link {
1441
+    color: #A20;
1442
+}
1443
+#banner-donate-button-link:hover {
1444
+    color: #C40;
1445
+}
1446
+#banner-donate-button-link:visited {
1447
+    color: #408;
1448
+}
1449
+#banner-donate-button-linka:active {
1450
+    color: black;
1451
+}
1452
+#banner-spacer {
1453
+    height: 180px;
1454
+    position: relative;
1455
+    top: 0;
1456
+}
... ...
@@ -2,6 +2,38 @@
2 2
 # Revision: $Revision$
3 3
 # Translation-Priority: 1-high
4 4
 
5
+  <div id="banner-container" class="onions-bg">
6
+    <div id="banner-contents-container">
7
+      <div id="banner-logo-container">
8
+        <img id="banner-logo" alt="Tor Onion-Heart Logo"
9
+             src="images/onion-heart.png"/>
10
+      </div>
11
+      <div id="banner-text">
12
+        <div id="banner-tagline">
13
+          <span>
14
+            <noscript>Protecting Journalists, Activists & Whistleblowers Since 2006</noscript>
15
+          </span></div>
16
+        <div id="banner-heart">
17
+          <span>
18
+            Tor is at the heart of Internet freedom
19
+          </span>
20
+        </div>
21
+      </div>
22
+      <a id="banner-donate-button-link"
23
+         href="./donate/donate-homepage-en">
24
+        <div id="banner-donate-button-container">
25
+          <div id="banner-donate-button">
26
+            <div id="banner-donate-button-text">
27
+              <span>Donate Now! &#187;</span>
28
+            </div>
29
+          </div>
30
+        </div>
31
+      </a>
32
+    </div>
33
+  </div>
34
+  <div id="banner-spacer"></div>
35
+  <script src="js/donation_banner.js"></script>
36
+
5 37
 #include "head.wmi" TITLE="Tor Project: Anonymity Online" CHARSET="UTF-8"
6 38
 
7 39
 <div id="home">
8 40
new file mode 100644
9 41
Binary files /dev/null and b/images/onion-heart.png differ
10 42
new file mode 100644
11 43
Binary files /dev/null and b/images/tor-roots-only.png differ
12 44
new file mode 100644
... ...
@@ -0,0 +1,36 @@
1
+/* jshint esnext:true */
2
+
3
+var kTaglines = [
4
+  "Millions of People Depend on Tor for Online Security & Privacy",
5
+  "A Network of People Protecting People",
6
+  "Surveillance = Oppression",
7
+  "Protecting Journalists, Activists & Whistleblowers Since 2006",
8
+];
9
+
10
+var kTaglineSizes = [
11
+  26,
12
+  32,
13
+  32,
14
+  26,
15
+];
16
+
17
+var sel = function (selector) {
18
+  return document.querySelector(selector)
19
+};
20
+
21
+// Returns a random integer x, such that 0 <= x < max
22
+var randomInteger = function (max) {
23
+  return Math.floor(max * Math.random());
24
+};
25
+
26
+// The main donation banner function.
27
+var runDonationBanner = function () {
28
+  // Load random tag line once page is loaded
29
+  var index = randomInteger(4);
30
+  var taglineElement = sel("#banner-tagline span");
31
+  taglineElement.innerText = kTaglines[index];
32
+  taglineElement.style.fontSize = kTaglineSizes[index];
33
+};
34
+
35
+// Run banner code on load.
36
+window.addEventListener("load", runDonationBanner);