Browse code

restyle projects page and add shadow icon to images dir

Arturo Filastò authored on 22/02/2012 08:02:18
Showing 2 changed files
... ...
@@ -1211,6 +1211,39 @@ small {
1211 1211
 		font-size: 11px;
1212 1212
 		line-height: 13px;
1213 1213
 		}
1214
+
1215
+/*
1216
+ Project page
1217
+*/
1218
+
1219
+    #projectpage td {
1220
+        width: 50%;
1221
+    }
1222
+
1223
+    .projectbox {
1224
+        width: 710px;
1225
+        position: relative;
1226
+        margin-bottom: 80px;
1227
+    }
1228
+
1229
+
1230
+    .projectbox .name {
1231
+        font-size: 1.5em;
1232
+        font-weight: bold;
1233
+    }
1234
+
1235
+    .projectbox a img {
1236
+        float: none;
1237
+        position: absolute;
1238
+        top: 0;
1239
+        left: 0;
1240
+    }
1241
+
1242
+    .projectbox .projectdesc {
1243
+        margin-left: 100px;
1244
+    }
1245
+/* END */
1246
+
1214 1247
 /*
1215 1248
 ** Markup free clearing
1216 1249
 ** Details: http://www.positioniseverything.net/easyclearing.html
... ...
@@ -12,111 +12,101 @@
12 12
 <h1>Software &amp; Services</h1>
13 13
 <p>The Tor community of software and services aims to make your Internet
14 14
 experience safer and better.</p>
15
-<table class="topforty">
16
-<tr>
17
-<td>
18
-<a href="<page torbutton/index>"><img class="icon"
19
-                src="$(IMGROOT)/icon-TorButton.jpg" alt="TorButton Icon"></a>
20
-<div class="name"><a href="<page torbutton/index>">Torbutton</a></div>
21
-<p>Torbutton is integrated into <a href="<page projects/torbrowser>">Tor
22
-Browser</a>. Torbutton disables many types of active content and threats
15
+
16
+<div class="projectbox">
17
+<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>
18
+
19
+<div class="projectdesc"><div class="name"><a href="https://www.torproject.org/torbutton/index.html.en">Torbutton</a></div>
20
+<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
23 21
 to your privacy when using a web browser.</p>
24
-</td>
25
-<td>
26
-<a href="<page projects/torbrowser>"><img class="icon"
27
-                src="$(IMGROOT)/icon-TorBrowser.jpg" alt="TorBrowser Icon"></a>
28
-<div class="name"><a href="<page projects/torbrowser>">Tor Browser Bundle</a></div>
22
+</div></div>
23
+
24
+<div class="projectbox">
25
+<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>
26
+<div class="projectdesc"><div class="name"><a href="https://www.torproject.org/projects/torbrowser.html.en">Tor Browser Bundle</a></div>
29 27
 <p>The Tor Browser Bundle contains everything you need to safely
30 28
 browse the Internet. This package requires no installation. Just
31 29
 extract it and run.</p>
32
-</td>
33
-</tr>
34
-<tr>
35
-<td>
36
-<a href="<page projects/vidalia>"><img class="icon"
37
-              src="$(IMGROOT)/icon-Vidalia.jpg" alt="Vidalia Icon"></a>
38
-<div class="name"><a href="<page projects/vidalia>">Vidalia</a></div>
39
-<p>Vidalia is a graphical Tor controller.  It allows you to
30
+</div></div>
31
+
32
+<div class="projectbox">
33
+<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>
34
+<div class="projectdesc"><div class="name"><a href="https://www.torproject.org/projects/vidalia.html.en">Vidalia</a></div>
35
+<p>Vidalia is a graphical Tor controller. It allows you to
40 36
 see where your connections are in the world and configure
41 37
 Tor without getting into configuration files and code.</p>
42
-</td>
43
-<td>
44
-<a href="http://www.atagar.com/arm/"><img class="icon"
45
-                src="$(IMGROOT)/icon-Arm.jpg" alt="Arm Icon"></a>
46
-<div class="name"><a href="<page projects/arm>">Arm</a></div>
38
+</div></div>
39
+
40
+<div class="projectbox">
41
+<a href="http://www.atagar.com/arm/"><img class="icon" src="$(IMGROOT)/icon-Arm.jpg" alt="Arm Icon" width="75" height="75"></a>
42
+<div class="projectdesc"><div class="name"><a href="https://www.torproject.org/projects/arm.html.en">Arm</a></div>
47 43
 <p>Arm is a terminal status monitor for Tor, intended for
48 44
 command-line aficionados and ssh connections. This functions much
49 45
 like top does for system usage, providing real time information on
50
-Tor's resource utilization and state.</p> </td> </tr>
51
-<tr>
52
-<td>
53
-<a href="https://guardianproject.info/apps/orbot/"><img class="icon"
54
-                src="$(IMGROOT)/icon-Orbot.jpg" alt="Orbot Icon"></a>
55
-<div class="name"><a
56
-href="https://guardianproject.info/apps/orbot/">Orbot</a></div>
57
-<p>In collaboration with <a href="https://guardianproject.info">The
46
+Tor's resource utilization and state.</p> </div></div>
47
+
48
+<div class="projectbox">
49
+<a href="https://guardianproject.info/apps/orbot/"><img class="icon" src="$(IMGROOT)/icon-Orbot.jpg" alt="Orbot Icon" width="75" height="75"></a>
50
+<div class="projectdesc"><div class="name"><a href="https://guardianproject.info/apps/orbot/">Orbot</a></div>
51
+<p>In collaboration with <a href="https://guardianproject.info/">The
58 52
 Guardian Project</a>, we're developing Tor on the Google Android mobile
59
-operating system. A related application is <a
60
-href="https://guardianproject.info/apps/orlib/">Orlib</a>; a library for
53
+operating system. A related application is <a href="https://guardianproject.info/apps/orlib/">Orlib</a>; a library for
61 54
 use by any Android application to route Internet traffic through
62 55
 Orbot/Tor.</p>
63
-</td>
64
-<td>
65
-<a href="http://tails.boum.org/"><img class="icon"
66
-    src="$(IMGROOT)/icon-Tails.jpg" alt="Tails Icon"></a>
67
-<div class="name"><a href="https://tails.boum.org/">Tails</a></div>
56
+</div></div>
57
+
58
+<div class="projectbox">
59
+<a href="http://tails.boum.org/"><img class="icon" src="$(IMGROOT)/icon-Tails.jpg" alt="Tails Icon" width="75" height="75"></a>
60
+<div class="projectdesc"><div class="name"><a href="https://tails.boum.org/">Tails</a></div>
68 61
 <p>The Amnesic Incognito Live System is a live CD/USB distribution
69 62
 preconfigured so that everything is safely routed through Tor and leaves no
70 63
 trace on the local system.</p>
71
-</td>
72
-</tr>
73
-<tr>
74
-<td>
75
-<a href="http://torstatus.blutmagie.de/"><img class="icon"
76
-                src="$(IMGROOT)/icon-TorStatus.jpg" alt="TorStatus Icon"></a>
77
-<div class="name"><a href="http://torstatus.blutmagie.de/">TorStatus</a></div>
64
+</div></div>
65
+
66
+
67
+<div class="projectbox">
68
+<a href="http://torstatus.blutmagie.de/"><img class="icon" src="$(IMGROOT)/icon-TorStatus.jpg" alt="TorStatus Icon" width="75" height="75"></a>
69
+<div class="projectdesc"><div class="name"><a href="http://torstatus.blutmagie.de/">TorStatus</a></div>
78 70
 <p>Portal providing an overview of the Tor network, including a list of its
79
-current relays and details on each. Mirrors are also available from <a
80
-href="http://torstatus.cyberphunk.org/">cyberphunk</a> and others.</p>
81
-</td>
82
-<td>
83
-<a href="https://metrics.torproject.org/"><img class="icon" src="$(IMGROOT)/onion.jpg" height="80px"/></a>
84
-<div class="name"><a href="https://metrics.torproject.org/">Metrics Portal</a></div>
71
+current relays and details on each. Mirrors are also available from <a href="http://torstatus.cyberphunk.org/">cyberphunk</a> and others.</p>
72
+</div></div>
73
+
74
+<div class="projectbox">
75
+<a href="https://metrics.torproject.org/"><img class="icon" src="$(IMGROOT)/onion.jpg" height="80px" alt="" width="78"></a>
76
+<div class="projectdesc"><div class="name"><a href="https://metrics.torproject.org/">Metrics Portal</a></div>
85 77
 <p>Analytics for the Tor network, including graphs of its available bandwidth
86 78
 and estimated userbase. This is a great resource for researchers interested in
87 79
 detailed statistics about Tor.</p>
88
-</td>
89
-</tr>
90
-<tr>
91
-<td>
92
-<a href="https://cloud.torproject.org"><img class="icon"
93
-              src="$(IMGROOT)/icon-Cloud.jpg" alt="Cloud Icon"></a>
94
-<div class="name"><a href="https://cloud.torproject.org/">Tor Cloud</a></div>
80
+</div></div>
81
+
82
+
83
+<div class="projectbox">
84
+<a href="https://cloud.torproject.org/"><img class="icon" src="$(IMGROOT)/icon-Cloud.jpg" alt="Cloud Icon" width="75" height="75"></a>
85
+<div class="projectdesc"><div class="name"><a href="https://cloud.torproject.org/">Tor Cloud</a></div>
95 86
 <p>The Tor Cloud project gives you a user-friendly way of deploying
96 87
 bridges to help users access an uncensored Internet via the Amazon EC2
97 88
 cloud. By setting up a bridge, you donate bandwidth to the Tor network and
98 89
 help improve the safety and speed at which users can access the Internet.
99
-Get started with <a href="https://cloud.torproject.org">Tor Cloud</a>.</p>
100
-</td>
101
-<td>
102
-<a href="<page projects/obfsproxy>"><img class="icon" src="$(IMGROOT)/onion.jpg" height="80px"/></a>
103
-<div class="name"><a href="<page projects/obfsproxy>">Obfsproxy</a></div>
90
+Get started with <a href="https://cloud.torproject.org/">Tor Cloud</a>.</p>
91
+</div></div>
92
+<div class="projectbox">
93
+<a href="https://www.torproject.org/projects/obfsproxy.html.en"><img class="icon" src="$(IMGROOT)/onion.jpg" height="80px" alt="" width="78"></a>
94
+<div class="projectdesc"><div class="name"><a href="https://www.torproject.org/projects/obfsproxy.html.en">Obfsproxy</a></div>
104 95
 <p>Obfsproxy is a pluggable transports proxy written in C. It shapes
105 96
 Tor traffic, making it harder for censors to detect and block the Tor
106 97
 protocol.</p>
107
-</td>
108
-</tr>
109
-
110
-<tr>
111
-<td>
112
-<a href="https://shadow.cs.umn.edu/"><img class="icon"
113
-    src="http://shadow.cs.umn.edu/shadow-favicon.png" height="80px"/></a>
114
-<div class="name"><a href="https://shadow.cs.umn.edu/">Shadow</a></div>
98
+</div>
99
+</div>
100
+
101
+<div class="projectbox">
102
+<a href="https://shadow.cs.umn.edu/"><img src="$(IMGROOT)/shadow-favicon.png" height="80px" alt=""></a>
103
+<div class="projectdesc"><div class="name"><a href="https://shadow.cs.umn.edu/">Shadow</a></div>
115 104
 <p>Shadow is a discrete-event network simulator that runs the real
116 105
 Tor software as a plug-in. Shadow is open-source software that enables
117 106
 accurate, efficient, controlled, and repeatable Tor experimentation.</p>
118
-</td>
119
-</tr>
107
+</div>
108
+</div>
109
+
120 110
 
121 111
 #<td class="beige">
122 112
 #<div class="name">Project Name</div>