r26569: {website} update download page per ticket 10330 (in website/trunk: css download/en images)
Author: phobos Date: 2014-01-30 03:57:58 +0000 (Thu, 30 Jan 2014) New Revision: 26569
Added: website/trunk/images/headerbg.jpg Modified: website/trunk/css/layout.css website/trunk/css/typography.css website/trunk/download/en/download-easy.wml website/trunk/images/btn_donateCC_LG.gif website/trunk/images/button-downloadpage.png Log: update download page per ticket 10330
Modified: website/trunk/css/layout.css =================================================================== --- website/trunk/css/layout.css 2014-01-30 02:49:40 UTC (rev 26568) +++ website/trunk/css/layout.css 2014-01-30 03:57:58 UTC (rev 26569) @@ -237,6 +237,7 @@ margin-bottom: 20px; }
+ #dow-don-left, #maincol-left { float: left; width: 710px; @@ -270,6 +271,7 @@ margin-right: 20px; }
+#dow-don-right, #sidecol-right { float: right; width: 230px; @@ -580,7 +582,7 @@
.package { float: left; - width: 668px; + height: 280px; margin: 0px; padding: 25px 20px 20px 20px; border-top: 1px solid #888888; @@ -591,16 +593,15 @@ }
.package p { - margin-top: 20px; - margin-bottom: 5px; + margin-top: 16px; padding-left: 10px; }
.downloads { - float: right; - width: 200px; - padding: 0px; - margin: 0px 0 0 20px; + display: block; + float: left; + width: 238px; + padding: 0 16px 0 0; text-align: center; }
@@ -625,28 +626,24 @@ .button { text-align: center; display: block; - width: 200px; - height: 60px; + width: 234px; + height: 69px; text-decoration: none; - background: url(../images/button-downloadpage.png) bottom left no-repeat #FF9800; - margin: 0px auto 0px auto; + background: url(../images/button-downloadpage.png) bottom left no-repeat; + margin: 0px auto 8px auto; text-shadow: 1px 1px 0px rgba(17, 17, 17, 1); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
-.button:hover { - background: url(../images/button-downloadpage.png) top left no-repeat #FF9800; - } - .button .strong { display: block; - padding: 10px 0 0 0px; + padding: 10px 0 0 57px; }
.button .normal { - padding: 5px 0 0 0px; + padding: 5px 0 0 57px; display: block; }
@@ -658,29 +655,38 @@ /* DOWNLOAD-EASY ---*/
.easy { - width: 710px; - background: url(../images/easy-bg.png) repeat-x scroll left 85px; - margin-bottom: 10px; - padding-bottom: 15px; - } + width: 712px; + margin-bottom: 10px; + padding-bottom: 8px; +}
+#download-donate { + background-attachment: scroll; + background-clip: border-box; + background-color: transparent; + background-image: url(../images/headerbg.jpg); + background-origin: padding-box; + background-position: 0% 0%; + background-repeat: no-repeat; + background-size: 100% 100%; +} + .easy .package h2, .easy .package em { display: block; width: 100%; - text-align: center; + text-align: left; }
.easy .package h2 { - font-size: 24px; - font-weight: normal; padding-top: 10px; padding-bottom: 5px; }
.easy .package em { - font-size: 12px; - padding-bottom: 30px; + font-size: 1.2em; + padding-top: 8px; + padding-bottom: 4px; }
.easy .package p { @@ -690,7 +696,7 @@ }
.easy .package p.alt-dl { - text-align: center; + text-align: left; text-indent: 0px; padding-left: 0px; margin-top: 32px; @@ -698,7 +704,7 @@
.all-dl { display: block; - text-align: center; + text-align: left; width: 100%; font-size: 15px; } @@ -714,25 +720,9 @@
.easy .package { float: none; - padding-left: 30px; - padding-right: 30px; - width: 651px; + padding: 0 8px 0 12px ; }
-.easy .downloads { - margin-left: 30px; - padding-top: 125px; - background: url(../images/easy-tbb.png) no-repeat scroll center 10px; - } - -.easy.windows, -.easy.linux, -.easy.mac { - border: 1px solid #885CA4; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; } - .open { display: block; } @@ -777,6 +767,7 @@ .paypal span { padding-right: 20px; }
.warning-top { + width: 618px; padding: 10px 10px 10px 60px; margin: 0px 10px 0px 10px; display: block; @@ -986,14 +977,10 @@ text-align: center; color: #222222; border: none; - background: #F0DBFA; - padding: 20px 20px; + padding: 1.4em 0.7em; width: 163px; margin: 0px 0px 0px 10px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - } +}
.dbox p { display: block; @@ -1002,74 +989,26 @@ }
.dbox h2 { - background: url('../images/top_bg.png') no-repeat; - color: #23300E; padding:13px 0px 15px 0px; position: relative; - top: -33px; width: 190px; - color: white; + color: black; font-family: Helvetica, Arial, sans-serif; - font-size: 15px; + font-size: 18px; font-weight: normal; height: 35px; margin-bottom: -20px; margin-left: -6px; }
- .dbox input , - .dbox select { - background-color: #fefff7; - color: #23300E; - border:2px solid #BAB8BD; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - padding: 0px 0px 0px 5px; - margin: 0px 0px 10px 0px; - } - - .dbox input:focus , - .dbox select:focus { - outline:none; - border:2px solid #BAB8BD; - } - - .dbox input.radio { - border: 0px solid; - background: #ffffed; - padding: 0px 0px; - } - - .dbox select.cur { - margin-right: 5px; - text-align: left; - } - - .dbox input.amount { - width: 100px; - margin-right: 0px; - text-align: left; - } - - .dbox select#t3 { - width: 100%; - margin-bottom: 20px; - padding: 0px 0px; - } - .dbox input.donate-btn { background: url(../images/btn_donateCC_LG.gif) left top no-repeat transparent; - height: 26px; - width: 150px; + height: 68px; + width: 186px; margin-top: 0px; display: block; background-color: transparent; color: transparent; - border:0px solid transparent; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; margin: 10px auto 10px auto; padding: 0px 0px 0px 0px; } @@ -1094,14 +1033,13 @@ margin: 0px auto 0px auto; text-align: center; font-size: 10px; - font-style: italic; + font-style: normal; }
.dbox.dl { float: none; width: 177px; margin: 0px 5px 20px 5px; - border:1px solid #785688; }
@@ -1296,9 +1234,3 @@ } /* End hide from IE-mac */
-.dbox.dl p:last-child a{color: #785688; -text-decoration: underline; -font-weight: bold; -} -.dbox.dl select{ -width: 70px;outline-inset:1px;}
Modified: website/trunk/css/typography.css =================================================================== --- website/trunk/css/typography.css 2014-01-30 02:49:40 UTC (rev 26568) +++ website/trunk/css/typography.css 2014-01-30 03:57:58 UTC (rev 26569) @@ -248,17 +248,25 @@ /* DL PAGE ------------*/
.package h2 { - color: #4E6A20; - font-size: 22px; - line-height: 22px; - font-weight: bold; + color: #2A2A2A; + font-family: Helvetica, Arial, sans-serif; + font-size: 24px; + font-weight: normal; }
+.package h2 big { + font-size: 1.5em; +} + .package p { text-indent: 0px; line-height: 18px; }
+.package em { + font-style: normal; +} + .lang { line-height: 18px; color: #23300E; @@ -266,6 +274,7 @@ }
.button .strong { + text-transform: uppercase; font-size: 20px; font-weight: bold; color: #FFFFFF; @@ -274,14 +283,12 @@ .button .normal { font-size: 12px; font-weight: bold; - font-style: italic; color: #FFFFFF; }
.siginfo { font-size: 10px; text-decoration: none; - font-style: italic; }
.additional {
Modified: website/trunk/download/en/download-easy.wml =================================================================== --- website/trunk/download/en/download-easy.wml 2014-01-30 02:49:40 UTC (rev 26568) +++ website/trunk/download/en/download-easy.wml 2014-01-30 03:57:58 UTC (rev 26569) @@ -19,21 +19,29 @@ #include "dlhead.wmi" TITLE="Download Tor" CHARSET="UTF-8"
<div id="content" class="clearfix"> - <div id="breadcrumbs"><a href="<page index>">Home » </a><a href="<page download/download>">Download</a></div> - <div id="maincol-left"> -<!-- BEGIN TEASER WARNING --> - <div class="warning-top"> - <h2>Want Tor to really work?</h2> - <p>You need to change some of your habits, as some things won't work exactly as -you are used to. Please read the <a href="#warning">full list of warnings</a> for details. - </p> - </div> -<!-- END TEASER WARNING --> -<!-- START DOWNLOADS --> -<!-- START DOWNLOADS --> -<!-- START WINDOWS --> + <div id="breadcrumbs"><a href="<page index>">Home » </a><a href="<page download/download>">Download</a></div> + <!-- BEGIN TEASER WARNING --> + <div class="warning-top"> + <h2>Want Tor to really work?</h2> + <p>You need to change some of your habits, as some things won't work exactly as you are used to. Please read the <a href="#warning">full list of warnings</a> for details.</p> + </div> + <!-- END TEASER WARNING --> + <div id="download-donate" class="clearfix"> + <!-- START DOWNLOADS --> + <!-- START WINDOWS --> + + + +<div id="dow-don-left"> + + <div id="windows" class="easy windows"> <div class="package" style="padding-top: 13px; border-top: 0px;"> + <div class="desc"> + <h2>Tor Browser Bundle for Windows</h2> + <em>Version <version-torbrowserbundle> - Windows 8, 7, Vista, and XP</em> + <p>Everything you need to safely browse the Internet. This package requires no installation. Just extract it and run.<br /><a href="<page projects/torbrowser>">Learn more »</a></p> + </div> <form class="downloads"> <a class="button win-tbb" href="../dist/torbrowser/<version-torbrowserbundledir>/torbrowser-install-<version-torbrowserbundle>_<lang>.exe"><span class="strong">Download</span><span class="normal"><button-win-tbb32></span></a> <select name="language" id="win-tbb" class="lang"> @@ -44,17 +52,17 @@ (<a class="win-tbb-sig" href="../dist/torbrowser/<version-torbrowserbundledir>/torbrowser-install-<version-torbrowserbundle>_<lang>.exe.asc">sig</a>) <a class="siginfo" href="<page docs/verifying-signatures>">What's This?</a> </div> </form> - <div class="desc"> - <h2>Tor Browser Bundle for Windows</h2> - <em>Version <version-torbrowserbundle> - Windows 8, 7, Vista, and XP</em> - <p>Everything you need to safely browse the Internet. This package requires no installation. Just extract it and run. <a href="<page projects/torbrowser>">Learn more »</a></p> - </div> - <p class="alt-dl">Not Using Windows? Download for <a href="#mac">Mac</a> or <a href="#linux">GNU/Linux</a></p> + <p class="alt-dl">Not Using Windows?<br />Download for <a href="#mac">Mac</a> or <a href="#linux">GNU/Linux</a></p> </div> </div> <!-- START MAC --> <div id="mac" class="easy mac"> <div class="package" style="padding-top: 13px; border-top: 0px;"> + <div class="desc"> + <h2>Tor Browser Bundle for Mac</h2> + <em>Version <version-torbrowserbundleosx32> - OS X (10.6+)</em> + <p>Everything you need to safely browse the Internet. This package requires no installation. Just extract it and run.<br /><a href="<page projects/torbrowser>">Learn more »</a></p> + </div> <form class="downloads"> <a class="button osx-tbb" href="../dist/torbrowser/<version-torbrowserbundledir>/TorBrowserBundle-<version-torbrowserbundleosx32>-osx32_<lang>.zip"><span class="strong">Download</span><span class="normal"><button-osx-tbb32></span></a> <select name="language" id="osx-tbb" class="lang"> @@ -65,17 +73,18 @@ (<a class="osx-tbb-sig" href="../dist/torbrowser/<version-torbrowserbundledir>/TorBrowserBundle-<version-torbrowserbundleosx32>-osx32_<lang>.zip.asc">sig</a>) <a class="siginfo" href="<page docs/verifying-signatures>">What's This?</a> </div> </form> - <div class="desc"> - <h2>Tor Browser Bundle for Mac</h2> - <em>Version <version-torbrowserbundleosx32> - OS X (10.6+)</em> - <p>Everything you need to safely browse the Internet. This package requires no installation. Just extract it and run. <a href="<page projects/torbrowser>">Learn more »</a></p> - </div> <p class="alt-dl">Not Using Mac? Download for <a href="#windows">Windows</a> or <a href="#linux">GNU/Linux</a></p> </div> </div> <!-- START LINUX --> <div id="linux" class="easy linux"> <div class="package" style="padding-top: 13px; border-top: 0px;"> + <div class="desc"> + <h2>Tor Browser Bundle for GNU/Linux</h2> + <em>Version <version-torbrowserbundlelinux32> - Linux, Unix, BSD</em> + <p>Everything you need to safely browse the Internet. This package requires no installation. Just extract it and run.<br /> + <a href="<page projects/torbrowser>">Learn more »</a></p> + </div> <form class="downloads"> <a class="button lin-tbb32" href="../dist/torbrowser/<version-torbrowserbundledir>/tor-browser-linux32-<version-torbrowserbundlelinux32>_<lang>.tar.xz"><span class="strong">Download</span><span class="normal"><button-lin-tbb32></span></a> <select name="language" id="lin-tbb32" class="lang"> @@ -86,17 +95,17 @@ (<a class="lin-tbb32-sig" href="../dist/torbrowser/<version-torbrowserbundledir>/tor-browser-linux32-<version-torbrowserbundlelinux32>_<lang>.tar.xz.asc">sig</a>) <a class="siginfo" href="<page docs/verifying-signatures>">What's This?</a> </div> </form> - <div class="desc"> - <h2>Tor Browser Bundle for GNU/Linux</h2> - <em>Version <version-torbrowserbundlelinux32> - Linux, Unix, BSD</em> - <p>Everything you need to safely browse the Internet. This package requires no installation. Just extract it and run. <a href="<page projects/torbrowser>">Learn more »</a></p> - </div> <p class="alt-dl">Not Using GNU/Linux? Download for <a href="#mac">Mac</a> or <a href="#windows">Windows</a></p> </div> </div> <!-- START LINUX 64-Bit --> <div class="easy linux"> <div class="package" style="padding-top: 13px; border-top: 0px;"> + <div class="desc"> + <h2>Tor Browser Bundle for 64-Bit GNU/Linux</h2> + <em>Version <version-torbrowserbundlelinux64> - Linux, Unix, BSD (64-Bit)</em> + <p>Everything you need to safely browse the Internet. This package requires no installation. Just extract it and run.<br /><a href="<page projects/torbrowser>">Learn more »</a></p> + </div> <form class="downloads"> <a class="button lin-tbb64" href="../dist/torbrowser/<version-torbrowserbundledir>/tor-browser-linux64-<version-torbrowserbundlelinux64>_<lang>.tar.xz"><span class="strong">Download</span><span class="normal"><button-lin-tbb64></span></a> <select name="language" id="lin-tbb64" class="lang"> @@ -107,16 +116,78 @@ (<a class="lin-tbb64-sig" href="../dist/torbrowser/<version-torbrowserbundledir>/tor-browser-linux64-<version-torbrowserbundlelinux64>_<lang>.tar.xz.asc">sig</a>) <a class="siginfo" href="<page docs/verifying-signatures>">What's This?</a> </div> </form> - <div class="desc"> - <h2>Tor Browser Bundle for 64-Bit GNU/Linux</h2> - <em>Version <version-torbrowserbundlelinux64> - Linux, Unix, BSD (64-Bit)</em> - <p>Everything you need to safely browse the Internet. This package requires no installation. Just extract it and run. <a href="<page projects/torbrowser>">Learn more »</a></p> - </div> <p class="alt-dl">Not Using GNU/Linux? Download for <a href="#mac">Mac</a> or <a href="#windows">Windows</a></p> </div> </div> <p class="all-dl">Looking For Something Else? <a href="<page download/download>">View All Downloads</a></p> -<!-- END DOWNLOADS --><br> + <!-- END DOWNLOADS --><br> +</div> <!-- END dow-don-left --> + + + + +<div id="dow-don-right"> + +<!-- START DONATION WIDGET --> + <script async type="text/javascript"> + function displayVals() { + var t3 = $("#t3").val(); + var amount = $("#amount").val(); + if(t3 != 0){ + $('#a3').val(amount); + $('#p3').val(1); + $('#cmd').val('_xclick-subscriptions'); + $('#item_name').val('Tor Project Membership'); + $('#ppinfo').replaceWith('<h6 id="ppinfo"><small>(Requires a PayPal Account)</small></h6>'); + }else{ + $('#a3').val(0); + $('#p3').val(0); + $('#cmd').val('_donations'); + $('#item_name').val('Donation to the Tor Project'); + $('#ppinfo').replaceWith('<h6 id="ppinfo" style="height:0px;"></h6>'); + } + if( !t3 ) { + $('#cmd').val('_donations'); + $('#item_name').val('Donation to the Tor Project'); + $('#ppinfo').replaceWith('<h6 id="ppinfo" style="height:0px;"></h6>'); + } + } + $(function(){ + $("#amount").change(displayVals); + $("#t3").change(displayVals); + displayVals(); + }); + </script> +<form class="dbox dl" action="https://www.paypal.com/cgi-bin/webscr" method="post"> + <h2><big style="font-weight: bold; font-size: 1.2em;">Help</big><small style="font-size: 0.9em;" > Create more </small><big style="font-weight: bold; font-size: 1.2em;">Tor</big><big style="font-size: 1.2em;">!</big></h2> + <p> + <input type="hidden" name="currency_code" class="cur" value="USD"> + <input type="hidden" id="a3" name="a3" value="0"> + <input type="hidden" id="t3" name="t3" value="0"> + <input type="hidden" id="amount" class="amount" name="amount" value="10" size="10"> + <input type="hidden" id="p3" name="p3" value="1"> + <input type="hidden" name="sra" value="1"> + <input type="hidden" name="src" value="1"> + <input type="hidden" name="no_shipping" value="1"> + <input type="hidden" name="no_note" value="1"> + <input type="hidden" id="cmd" name="cmd" value="_donations"> + <input type="hidden" name="business" value="donations@torproject.org"> + <input type="hidden" id="item_name" name="item_name" value="Donation to the Tor Project"> + <input type="hidden" name="return" value="https://www.torproject.org/donate/thankyou"> + <input type="hidden" name="cancel_return" value="https://www.torproject.org/download/download-easy"> + </p> + <h6 id="ppinfo" style="height:0px;"></h6> + <p> + <input class="donate-btn" type="submit" name="donate" value="Donate"> + </p> + <p><a href="<page donate/donate>">Other donation options...</a></p> +</form> <!-- END DONATION WIDGET --> +</div> <!-- END dow-don-right --> + + + + </div> <!-- END download-donate --> + <div id="maincol-left"> <!-- BEGIN WARNING --> <div class="warning"> <a name="warning"></a> @@ -218,73 +289,6 @@ <!-- END MAINCOL --> <!-- START SIDECOL --> <div id="sidecol-right"> -<!-- START DONATION WIDGET --> - <script async type="text/javascript"> - function displayVals() { - var t3 = $("#t3").val(); - var amount = $("#amount").val(); - if(t3 != 0){ - $('#a3').val(amount); - $('#p3').val(1); - $('#cmd').val('_xclick-subscriptions'); - $('#item_name').val('Tor Project Membership'); - $('#ppinfo').replaceWith('<h6 id="ppinfo"><small>(Requires a PayPal Account)</small></h6>'); - }else{ - $('#a3').val(0); - $('#p3').val(0); - $('#cmd').val('_donations'); - $('#item_name').val('Donation to the Tor Project'); - $('#ppinfo').replaceWith('<h6 id="ppinfo" style="height:0px;"></h6>'); - } - if( !t3 ) { - $('#cmd').val('_donations'); - $('#item_name').val('Donation to the Tor Project'); - $('#ppinfo').replaceWith('<h6 id="ppinfo" style="height:0px;"></h6>'); - } - } - $(function(){ - $("#amount").change(displayVals); - $("#t3").change(displayVals); - displayVals(); - }); - </script> -<form class="dbox dl" action="https://www.paypal.com/cgi-bin/webscr" method="post"> - <h2>Support more privacy!</h2> - <p> - <select name="currency_code" class="cur"> - <option value="USD" selected="selected">$</option> - <option value="EUR">€</option> - <option value="GBP">£</option> - <option value="YEN">¥</option> - </select> - <input type="text" id="amount" class="amount" name="amount" value="10" size="10"> - </p> - <p> - <input type="hidden" id="a3" name="a3" value="0"> - <select id="t3" name="t3"> - <option value="0">One-time Donation</option> - <option value="M">Monthly Subscription</option> - </select> - </p> - <p> - <input type="hidden" id="p3" name="p3" value="1"> - <input type="hidden" name="sra" value="1"> - <input type="hidden" name="src" value="1"> - <input type="hidden" name="no_shipping" value="1"> - <input type="hidden" name="no_note" value="1"> - <input type="hidden" id="cmd" name="cmd" value="_donations"> - <input type="hidden" name="business" value="donations@torproject.org"> - <input type="hidden" id="item_name" name="item_name" value="Donation to the Tor Project"> - <input type="hidden" name="return" value="https://www.torproject.org/donate/thankyou.html"> - <input type="hidden" name="cancel_return" value="https://www.torproject.org/download/download.html"> - </p> - <h6 id="ppinfo" style="height:0px;"></h6> - <p> - <input class="donate-btn" type="submit" name="donate" value="Donate"> - </p> - <p><a href="<page donate/donate>">Other donation options...</a></p> -</form> -<!-- END DONATION WIDGET --> <div class="img-shadow sidenav-ez"> <div class="sidenav-sub"> <ul>
Modified: website/trunk/images/btn_donateCC_LG.gif =================================================================== (Binary files differ)
Modified: website/trunk/images/button-downloadpage.png =================================================================== (Binary files differ)
Added: website/trunk/images/headerbg.jpg =================================================================== (Binary files differ)
Property changes on: website/trunk/images/headerbg.jpg ___________________________________________________________________ Added: svn:mime-type + image/jpeg
tor-commits@lists.torproject.org
-
Andrew Lewman