tor-webwml.git

@@ -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;

+}

@@ -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! &#187;</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">

@@ -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);