Author: art Date: 2012-02-22 07:02:18 +0000 (Wed, 22 Feb 2012) New Revision: 25467 Modified: website/trunk/css/layout.css website/trunk/projects/en/projects.wml Log: restyle projects page and add shadow icon to images dir Modified: website/trunk/css/layout.css =================================================================== --- website/trunk/css/layout.css 2012-02-22 07:01:08 UTC (rev 25466) +++ website/trunk/css/layout.css 2012-02-22 07:02:18 UTC (rev 25467) @@ -1211,7 +1211,40 @@ font-size: 11px; line-height: 13px; } + /* + Project page +*/ + + #projectpage td { + width: 50%; + } + + .projectbox { + width: 710px; + position: relative; + margin-bottom: 80px; + } + + + .projectbox .name { + font-size: 1.5em; + font-weight: bold; + } + + .projectbox a img { + float: none; + position: absolute; + top: 0; + left: 0; + } + + .projectbox .projectdesc { + margin-left: 100px; + } +/* END */ + +/* ** Markup free clearing ** Details: http://www.positioniseverything.net/easyclearing.html */ Modified: website/trunk/projects/en/projects.wml =================================================================== --- website/trunk/projects/en/projects.wml 2012-02-22 07:01:08 UTC (rev 25466) +++ website/trunk/projects/en/projects.wml 2012-02-22 07:02:18 UTC (rev 25467) @@ -12,112 +12,102 @@ <h1>Software & Services</h1> <p>The Tor community of software and services aims to make your Internet experience safer and better.</p> -<table class="topforty"> -<tr> -<td> -<a href="<page torbutton/index>"><img class="icon" - src="$(IMGROOT)/icon-TorButton.jpg" alt="TorButton Icon"></a> -<div class="name"><a href="<page torbutton/index>">Torbutton</a></div> -<p>Torbutton is integrated into <a href="<page projects/torbrowser>">Tor -Browser</a>. Torbutton disables many types of active content and threats + +<div class="projectbox"> +<a href="https://www.torproject.org/torbutton/index.html.en"><img class="icon" src="$(IMGROOT)/icon-TorButton.jpg" alt="TorButton Icon" width="75" height="75"></a> + +<div class="projectdesc"><div class="name"><a href="https://www.torproject.org/torbutton/index.html.en">Torbutton</a></div> +<p>Torbutton is integrated into <a href="https://www.torproject.org/projects/torbrowser.html.en">Tor Browser</a>.Torbutton disables many types of active content and threats to your privacy when using a web browser.</p> -</td> -<td> -<a href="<page projects/torbrowser>"><img class="icon" - src="$(IMGROOT)/icon-TorBrowser.jpg" alt="TorBrowser Icon"></a> -<div class="name"><a href="<page projects/torbrowser>">Tor Browser Bundle</a></div> +</div></div> + +<div class="projectbox"> +<a href="https://www.torproject.org/projects/torbrowser.html.en"><img class="icon" src="$(IMGROOT)/icon-TorBrowser.jpg" alt="TorBrowser Icon" width="75" height="75"></a> +<div class="projectdesc"><div class="name"><a href="https://www.torproject.org/projects/torbrowser.html.en">Tor Browser Bundle</a></div> <p>The Tor Browser Bundle contains everything you need to safely browse the Internet. This package requires no installation. Just extract it and run.</p> -</td> -</tr> -<tr> -<td> -<a href="<page projects/vidalia>"><img class="icon" - src="$(IMGROOT)/icon-Vidalia.jpg" alt="Vidalia Icon"></a> -<div class="name"><a href="<page projects/vidalia>">Vidalia</a></div> -<p>Vidalia is a graphical Tor controller. It allows you to +</div></div> + +<div class="projectbox"> +<a href="https://www.torproject.org/projects/vidalia.html.en"><img class="icon" src="$(IMGROOT)/icon-Vidalia.jpg" alt="Vidalia Icon" width="75" height="75"></a> +<div class="projectdesc"><div class="name"><a href="https://www.torproject.org/projects/vidalia.html.en">Vidalia</a></div> +<p>Vidalia is a graphical Tor controller. It allows you to see where your connections are in the world and configure Tor without getting into configuration files and code.</p> -</td> -<td> -<a href="http://www.atagar.com/arm/"><img class="icon" - src="$(IMGROOT)/icon-Arm.jpg" alt="Arm Icon"></a> -<div class="name"><a href="<page projects/arm>">Arm</a></div> +</div></div> + +<div class="projectbox"> +<a href="http://www.atagar.com/arm/"><img class="icon" src="$(IMGROOT)/icon-Arm.jpg" alt="Arm Icon" width="75" height="75"></a> +<div class="projectdesc"><div class="name"><a href="https://www.torproject.org/projects/arm.html.en">Arm</a></div> <p>Arm is a terminal status monitor for Tor, intended for command-line aficionados and ssh connections. This functions much like top does for system usage, providing real time information on -Tor's resource utilization and state.</p> </td> </tr> -<tr> -<td> -<a href="https://guardianproject.info/apps/orbot/"><img class="icon" - src="$(IMGROOT)/icon-Orbot.jpg" alt="Orbot Icon"></a> -<div class="name"><a -href="https://guardianproject.info/apps/orbot/">Orbot</a></div> -<p>In collaboration with <a href="https://guardianproject.info">The +Tor's resource utilization and state.</p> </div></div> + +<div class="projectbox"> +<a href="https://guardianproject.info/apps/orbot/"><img class="icon" src="$(IMGROOT)/icon-Orbot.jpg" alt="Orbot Icon" width="75" height="75"></a> +<div class="projectdesc"><div class="name"><a href="https://guardianproject.info/apps/orbot/">Orbot</a></div> +<p>In collaboration with <a href="https://guardianproject.info/">The Guardian Project</a>, we're developing Tor on the Google Android mobile -operating system. A related application is <a -href="https://guardianproject.info/apps/orlib/">Orlib</a>; a library for +operating system. A related application is <a href="https://guardianproject.info/apps/orlib/">Orlib</a>; a library for use by any Android application to route Internet traffic through Orbot/Tor.</p> -</td> -<td> -<a href="http://tails.boum.org/"><img class="icon" - src="$(IMGROOT)/icon-Tails.jpg" alt="Tails Icon"></a> -<div class="name"><a href="https://tails.boum.org/">Tails</a></div> +</div></div> + +<div class="projectbox"> +<a href="http://tails.boum.org/"><img class="icon" src="$(IMGROOT)/icon-Tails.jpg" alt="Tails Icon" width="75" height="75"></a> +<div class="projectdesc"><div class="name"><a href="https://tails.boum.org/">Tails</a></div> <p>The Amnesic Incognito Live System is a live CD/USB distribution preconfigured so that everything is safely routed through Tor and leaves no trace on the local system.</p> -</td> -</tr> -<tr> -<td> -<a href="http://torstatus.blutmagie.de/"><img class="icon" - src="$(IMGROOT)/icon-TorStatus.jpg" alt="TorStatus Icon"></a> -<div class="name"><a href="http://torstatus.blutmagie.de/">TorStatus</a></div> +</div></div> + + +<div class="projectbox"> +<a href="http://torstatus.blutmagie.de/"><img class="icon" src="$(IMGROOT)/icon-TorStatus.jpg" alt="TorStatus Icon" width="75" height="75"></a> +<div class="projectdesc"><div class="name"><a href="http://torstatus.blutmagie.de/">TorStatus</a></div> <p>Portal providing an overview of the Tor network, including a list of its -current relays and details on each. Mirrors are also available from <a -href="http://torstatus.cyberphunk.org/">cyberphunk</a> and others.</p> -</td> -<td> -<a href="https://metrics.torproject.org/"><img class="icon" src="$(IMGROOT)/onion.jpg" height="80px"/></a> -<div class="name"><a href="https://metrics.torproject.org/">Metrics Portal</a></div> +current relays and details on each. Mirrors are also available from <a href="http://torstatus.cyberphunk.org/">cyberphunk</a> and others.</p> +</div></div> + +<div class="projectbox"> +<a href="https://metrics.torproject.org/"><img class="icon" src="$(IMGROOT)/onion.jpg" height="80px" alt="" width="78"></a> +<div class="projectdesc"><div class="name"><a href="https://metrics.torproject.org/">Metrics Portal</a></div> <p>Analytics for the Tor network, including graphs of its available bandwidth and estimated userbase. This is a great resource for researchers interested in detailed statistics about Tor.</p> -</td> -</tr> -<tr> -<td> -<a href="https://cloud.torproject.org"><img class="icon" - src="$(IMGROOT)/icon-Cloud.jpg" alt="Cloud Icon"></a> -<div class="name"><a href="https://cloud.torproject.org/">Tor Cloud</a></div> +</div></div> + + +<div class="projectbox"> +<a href="https://cloud.torproject.org/"><img class="icon" src="$(IMGROOT)/icon-Cloud.jpg" alt="Cloud Icon" width="75" height="75"></a> +<div class="projectdesc"><div class="name"><a href="https://cloud.torproject.org/">Tor Cloud</a></div> <p>The Tor Cloud project gives you a user-friendly way of deploying bridges to help users access an uncensored Internet via the Amazon EC2 cloud. By setting up a bridge, you donate bandwidth to the Tor network and help improve the safety and speed at which users can access the Internet. -Get started with <a href="https://cloud.torproject.org">Tor Cloud</a>.</p> -</td> -<td> -<a href="<page projects/obfsproxy>"><img class="icon" src="$(IMGROOT)/onion.jpg" height="80px"/></a> -<div class="name"><a href="<page projects/obfsproxy>">Obfsproxy</a></div> +Get started with <a href="https://cloud.torproject.org/">Tor Cloud</a>.</p> +</div></div> +<div class="projectbox"> +<a href="https://www.torproject.org/projects/obfsproxy.html.en"><img class="icon" src="$(IMGROOT)/onion.jpg" height="80px" alt="" width="78"></a> +<div class="projectdesc"><div class="name"><a href="https://www.torproject.org/projects/obfsproxy.html.en">Obfsproxy</a></div> <p>Obfsproxy is a pluggable transports proxy written in C. It shapes Tor traffic, making it harder for censors to detect and block the Tor protocol.</p> -</td> -</tr> +</div> +</div> -<tr> -<td> -<a href="https://shadow.cs.umn.edu/"><img class="icon" - src="http://shadow.cs.umn.edu/shadow-favicon.png" height="80px"/></a> -<div class="name"><a href="https://shadow.cs.umn.edu/">Shadow</a></div> +<div class="projectbox"> +<a href="https://shadow.cs.umn.edu/"><img src="$(IMGROOT)/shadow-favicon.png" height="80px" alt=""></a> +<div class="projectdesc"><div class="name"><a href="https://shadow.cs.umn.edu/">Shadow</a></div> <p>Shadow is a discrete-event network simulator that runs the real Tor software as a plug-in. Shadow is open-source software that enables accurate, efficient, controlled, and repeatable Tor experimentation.</p> -</td> -</tr> +</div> +</div> + #<td class="beige"> #<div class="name">Project Name</div> #<div class="caps">By Author</div>