Unverified Commit ee04ff2e authored by Matthew Finkel's avatar Matthew Finkel
Browse files

Merge remote-tracking branch 'richardgl/40051'

parents 77d1306c 72c6f77f
......@@ -70,6 +70,12 @@ var AboutTorListener = {
addEventListener("resize", this, false);
sendAsyncMessage(this.kAboutTorLoadedMessage);
// debug hook to set locale in the about:tor YEC header image
const debugLocale = Services.prefs.getStringPref("abouttor.debug_locale", "");
if (debugLocale) {
content.document.getElementById("slogan-layer").src = "resource://torbutton-assets/yec-placard.svg#" + debugLocale;
}
},
onPageHide: function() {
......@@ -116,6 +122,11 @@ var AboutTorListener = {
"https://tb-manual.torproject.org/" + aLocale;
content.document.getElementById("getInvolvedLink").href =
"https://community.torproject.org/" + aLocale;
const sloganLayer = content.document.getElementById("slogan-layer");
// don't overwrite if already set by the debug hook
if (!sloganLayer.src) {
sloganLayer.src = "resource://torbutton-assets/yec-placard.svg#" + aLocale;
}
// Display the Tor Browser product name and version.
try {
......
......@@ -20,10 +20,11 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src resource:; object-src 'none'" />
<meta http-equiv="Content-Security-Policy" content="default-src resource:; font-src data:; object-src 'none'" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>&aboutTor.title;</title>
<link rel="stylesheet" href="chrome://browser/skin/onionPattern.css" type="text/css" media="all" />
<link rel="stylesheet" href="chrome://browser/skin/corben-font.css" type="text/css" media="all" />
<link rel="stylesheet" href="resource://torbutton-assets/aboutTor.css" type="text/css" media="all" />
<script type="text/javascript" src="resource://torbutton-abouttor/aboutTor.js"></script>
</head>
......@@ -35,6 +36,12 @@
</div>
<img class="torcontent-logo" src="resource://torbutton-assets/torbrowser_mobile_logo.png"/>
<div id="torstatus" class="top">
<div class="hideIfTorOff header-container">
<div class="header-layered">
<img id="base-layer" src="resource://torbutton-assets/yec-activist.svg"/>
<img id="slogan-layer" src="resource://torbutton-assets/yec-placard.svg#en-US"/>
</div>
</div>
<div class="hideIfTorOff hideIfHasBeenUpdated torstatus-container">
<div class="heading1">&aboutTor.ready.label;</div>
<br/>
......@@ -65,13 +72,21 @@
</form>
</div>
<div id="donateMessageBox" class="hideIfTorOff">
<div id="motto">&aboutTor.yec.motto;</div>
<div id="donationBox">
<div id="donationMatch">&aboutTor.yec.donationMatch;</div>
<a id="donateButton" href="https://donate.torproject.org/" target="_blank">&aboutTor.donationBanner.buttonA;</a>
</div>
</div>
<div id="bottom">
<p id="donate" class="moreInfoLink">&aboutTor.donationBanner.freeToUse;
<a href="https://donate.torproject.org/">&aboutTor.donationBanner.buttonA; &#187;</a>
<a href="https://donate.torproject.org/" target="_blank">&aboutTor.donationBanner.buttonA; &#187;</a>
</p>
<p id="manual" class="showForManual moreInfoLink">&aboutTor.torbrowser_user_manual_questions.label;
<a id="manualLink" target="_blank">&aboutTor.torbrowser_user_manual_link.label;</a></p>
<p id="newsletter" class="moreInfoLink"><img class="imageStyle" src="chrome://browser/skin/mail.svg"/><br/>&aboutTor.newsletter.tagline;<br/>
<p id="newsletter" class="moreInfoLink"><img class="imageStyle" src="chrome://browser/skin/mail.svg"/>&aboutTor.newsletter.tagline;<br/>
<a href="https://newsletter.torproject.org">&aboutTor.newsletter.link_text; &#187;</a>
</p>
<p id="mission">&aboutTor.tor_mission.label;
......
......@@ -29,3 +29,31 @@
<!ENTITY aboutTor.newsletter.link_text "Sign up for Tor News.">
<!ENTITY aboutTor.donationBanner.freeToUse "Tor is free to use because of donations from people like you.">
<!ENTITY aboutTor.donationBanner.buttonA "Donate Now">
<!-- Year end campaign strings -->
<!-- LOCALIZATION NOTE (aboutTor.yec.slogan): This string is written on a protest sign and the translated
phrase needs to be a short and concise slogan. We would like the phrase to fit on 3 to 5 lines. If a
translation of 'HANDS OFF MY DATA' cannot be made short, we have provided these alternative slogans
with a similar theme:
- DON'T TOUCH MY DATA
- DON'T SPY ON MY DATA
- MY DATA IS PRIVATE
- KEEP OFF MY DATA
Please place newline characters (\n) between words or phrases which can be placed in separate lines
so we can word-wrap our final assets correctly.
Thank you!
-->
<!ENTITY aboutTor.yec.slogan "HANDS\nOFF\nMY\nDATA">
<!ENTITY aboutTor.yec.motto "Privacy is a human right">
<!-- LOCALIZATION NOTE (aboutTor.yec.donationMatch): Please translate the 'Friends of Tor' phrase, but
also format it like the name of an organization in whichever way that is appropriate for your locale.
Please keep the currency in USD.
Thank you!
-->
<!ENTITY aboutTor.yec.donationMatch "Your donation will be matched by Friends of Tor, up to $150,000.">
......@@ -6,8 +6,13 @@
*/
:root {
--abouttor-text-color: white;
--abouttor-bg-toron-color: #420C5D;
--abouttor-link-color: #e98346;
--abouttor-donate-button-bg: #efb149;
--abouttor-donate-button-bg-hover: #e5b6e3;
--abouttor-donate-button-bg-active: #b28db0;
--abouttor-donate-button-color: #0C0C0D;
--abouttor-text-color: #faf5df;
--abouttor-bg-toron-color: #05161c;
--abouttor-bg-toroff-color: #A4000F;
--onion-opacity: 0.2;
--onion-color: #fff;
......@@ -52,14 +57,14 @@ body:not([initialized]) {
}
.torcontent-container {
margin: 40px 20px 28px 20px;
margin: 80px 20px 28px 20px;
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 900px) {
.torcontent-container {
margin: 40px auto 28px auto;
margin-inline: auto;
max-width: 1000px;
}
}
......@@ -86,16 +91,14 @@ body:not([updatechannel="release"]):not([updatechannel="alpha"]) #torbrowser-cha
}
a {
color: var(--abouttor-text-color);
color: var(--abouttor-link-color);
}
#torstatus {
margin-top: 135px;
display: flex;
flex-direction: column;
align-content: center;
justify-content: flex-end;
vertical-align: bottom;
min-height: 92px;
}
......@@ -103,7 +106,28 @@ a {
white-space: nowrap;
}
.header-container {
display: flex;
justify-content: center;
max-width: 575px;
margin-inline: auto;
}
.header-container > div.header-layered {
width: 70%;
overflow: auto
}
.header-container > div.header-layered > img {
width: 100%;
float: left;
}
.header-container > div > img#slogan-layer {
margin-inline-start: -100%;
}
.torstatus-container {
display: none;
text-align: center;
}
......@@ -137,23 +161,80 @@ body:not([showmanual]) .showForManual {
margin-bottom: 20px;
}
#donateMessageBox {
max-width: 730px;
margin-top: 2em;
margin-inline: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
font-family: serif;
}
#donateMessageBox > * {
width: 50%;
}
#motto {
/* dynamically scale motto text based on window width */
font-size: clamp(24px, calc(100vw / 768 * 36) , 36px);
line-height: clamp(32px, calc(100vw / 768 * 48) , 48px);
flex-grow: 1;
font-family: Corben, sans-serif;
font-weight: 700;
}
#donationBox {
margin-inline-start: 2em;
flex-grow: 1;
display: flex;
flex-direction: column;
}
#donationMatch {
font-size: 1.1em;
font-family: Corben, sans-serif;
font-weight: 400;
line-height: 1.3em;
}
#donateButton {
margin-block-start: 1em;
margin-inline-end: auto;
background-color: var(--abouttor-donate-button-bg);
color: var(--abouttor-donate-button-color);
font-family: sans-serif;
font-weight: bold;
font-size: 0.9em;
box-sizing: border-box;
border-radius: 1.5em;
padding-inline: 1.25em;
text-decoration: none;
max-height: 3em;
height: 3em;
line-height: 3em;
}
#donateButton:hover {
background-color: var(--abouttor-donate-button-bg-hover);
}
#donateButton:active {
background-color: var(--abouttor-donate-button-bg-active);
}
#bottom {
margin-top: 10vh;
margin-inline: auto;
max-width: 730px;
}
#bottom p {
font-size: 10px;
text-align: start;
margin: auto;
padding-bottom: 20px;
}
@media only screen and (min-width: 900px) {
#bottom p {
margin: 0px 135px 0px 135px;
}
}
#bottom p:last-child {
padding-bottom: 0px;
}
......@@ -180,17 +261,13 @@ body:not([showmanual]) .showForManual {
}
.searchbox form {
width: 500px;
margin: 39px auto 0px auto;
max-width: 575px;
width: auto;
margin-block: 0;
margin-inline: auto;
text-align: left;
}
@media only screen and (max-width: 540px) {
.searchbox form {
width: auto !important;
}
}
.searchwrapper {
display: flex;
height: 46px;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment