Browse code

apply patch from jeremy to fix the project layout, standardize project icons, and css fixes for both rtl and ltr languages.

Andrew Lewman authored on07/08/2011 23:16:31
Showing11 changed files
... ...
@@ -181,6 +181,15 @@ table tr img {
181 181
 	background-position: left top;
182 182
 }
183 183
 
184
+.project {
185
+  float: right;
186
+  }
187
+  
188
+.project img {
189
+  margin-right: 0px;
190
+  margin-left: 6px;
191
+  }
192
+
184 193
 .meta {
185 194
 	float: left;
186 195
 }
... ...
@@ -417,13 +417,34 @@ table tr img {
417 417
 	text-align: center;
418 418
 	padding: 4px 0;
419 419
 }
420
-
421 420
 .fauxhead {
422 421
 	background: url(../images/table-arrow.jpg) right top no-repeat;
423 422
 	width: 100%;
424 423
 	height: 11px;
425 424
 }
426 425
 
426
+#home-our-projects td {
427
+  height: 92px;
428
+  width: 296px;
429
+  padding: 6px;
430
+  }
431
+
432
+.project {
433
+  float: left;
434
+  padding: 6px;
435
+  border: 1px solid #CAC8A7;
436
+  height: 76px;
437
+  width: 284px;
438
+  -webkit-border-radius: 10px;
439
+  -moz-border-radius: 10px;
440
+  border-radius: 10px;
441
+  }  
442
+
443
+.project img {
444
+  border: none;
445
+  margin-right: 6px;
446
+  }
447
+
427 448
 .beige { background: #f5f5df; }
428 449
 .gray { background: #e0e0e0; }
429 450
 
... ...
@@ -502,7 +523,7 @@ td.intro { padding: 0 0 10px; }
502 523
 	}
503 524
 	
504 525
 .featured-project { width: 313px; }
505
-	
526
+
506 527
 /* FORM ------------*/
507 528
 
508 529
 input, select {
... ...
@@ -662,13 +683,13 @@ small {
662 683
 	text-align: center;
663 684
 	color: #222222;
664 685
 	border: 2px solid #cbcbaf;
665
-   background-color: #ffffed;
686
+	background-color: #ffffed;
666 687
 	padding: 20px 20px;
667 688
 	width: 163px;
668 689
 	margin: 0px 0px 0px 10px;
669
-   -webkit-border-radius: 5px;
670
-   -moz-border-radius: 5px;
671
-   border-radius: 5px;
690
+	-webkit-border-radius: 5px;
691
+	-moz-border-radius: 5px;
692
+	border-radius: 5px;
672 693
 	}
673 694
 
674 695
 	.dbox p {
... ...
@@ -697,18 +718,18 @@ small {
697 718
 
698 719
 		.dbox input:focus ,
699 720
 		.dbox select:focus {
700
-		   -moz-box-shadow: 0px 0px 4px #cbcbaf;
701
-		   -webkit-box-shadow: 0px 0px 4px #cbcbaf;
702
- 		   box-shadow: 0px 0px 4px #cbcbaf;
703
- 		   border:2px solid #cbcbaf;	
704
-		   background-color: #FFFFFF;
705
-			}
721
+		  -moz-box-shadow: 0px 0px 4px #cbcbaf;
722
+		  -webkit-box-shadow: 0px 0px 4px #cbcbaf;
723
+ 		  box-shadow: 0px 0px 4px #cbcbaf;
724
+ 		  border:2px solid #cbcbaf;	
725
+		  background-color: #FFFFFF;
726
+		  }
706 727
 
707 728
 		.dbox input.radio {
708
-			border: 0px solid;
709
-			background: #ffffed;
710
-			padding: 0px 0px;
711
-			}
729
+		  border: 0px solid;
730
+		  background: #ffffed;
731
+		  padding: 0px 0px;
732
+		  }
712 733
 
713 734
 	.dbox select.cur {
714 735
 		margin-right: 5px;
... ...
@@ -733,14 +754,14 @@ small {
733 754
 		width: 122px;
734 755
 		margin-top: 0px;
735 756
 		display: block;
736
-	   background-color: transparent;
737
-	   color: transparent;
738
-	   border:0px solid transparent;
739
-	   -webkit-border-radius: 5px;
740
-	   -moz-border-radius: 5px;
741
-	   border-radius: 5px;
742
-	   margin: 10px auto 10px auto;
743
-	   padding: 0px 0px 0px 0px;
757
+		background-color: transparent;
758
+		color: transparent;
759
+		border:0px solid transparent;
760
+		-webkit-border-radius: 5px;
761
+		-moz-border-radius: 5px;
762
+		border-radius: 5px;
763
+		margin: 10px auto 10px auto;
764
+		padding: 0px 0px 0px 0px;
744 765
 		}
745 766
 
746 767
 	.dbox span {
... ...
@@ -847,9 +868,9 @@ small {
847 868
 		width: 115px;
848 869
 		margin-top: -3px;
849 870
 		display: inline-block;
850
-	   background-color: transparent;
851
-	   color: transparent;
852
-	   border:0px solid transparent;
871
+		background-color: transparent;
872
+		color: transparent;
873
+		border:0px solid transparent;
853 874
 		}
854 875
 
855 876
 .dbox.dsmall {
... ...
@@ -868,9 +889,9 @@ small {
868 889
 		height: auto;
869 890
 		margin-top: 0px;
870 891
 		display: block;
871
-	   background-color: transparent;
872
-	   color: transparent;
873
-	   border:0px solid transparent;
892
+		background-color: transparent;
893
+		color: transparent;
894
+		border:0px solid transparent;
874 895
 		}
875 896
 	
876 897
 	.dbox.dsmall div label {
... ...
@@ -216,6 +216,11 @@ table h2,
216 216
 	padding-left: 10px;
217 217
 	margin: 0;
218 218
 }
219
+
220
+.project p {
221
+  line-height: 18px;
222
+}
223
+
219 224
 table h3 { font-size: 1.167em; }
220 225
 table p {
221 226
 	margin: 0; 
... ...
@@ -57,17 +57,21 @@
57 57
                 license: LGPL v2
58 58
               -->
59 59
               <td>
60
+                <div class="project">
60 61
                 <a href="http://tails.boum.org/"><img
61 62
                 src="$(IMGROOT)/icon-Tails.jpg" alt="Tails Icon"></a>
62 63
                 <h3><a href="http://tails.boum.org/">Tails</a></h3>
63 64
                 <p>Live CD/USB distribution preconfigured to use Tor safely.</p>
65
+                </div>
64 66
               </td>
65 67
               <td>
68
+                <div class="project">
66 69
                 <a href="https://guardianproject.info/apps/orbot/"><img
67 70
                 src="$(IMGROOT)/icon-Orbot.jpg" alt="Orbot Icon"></a>
68 71
                 <h3><a href="https://guardianproject.info/apps/orbot/">Orbot</a></h3>
69 72
                 <p>Tor for <a href="https://code.google.com/android/">Google
70 73
                 Android</a> devices.</p>
74
+                </div>
71 75
               </td>
72 76
             </tr>
73 77
             <tr>
... ...
@@ -77,10 +81,12 @@
77 81
                 license: LGPL v3
78 82
               -->
79 83
               <td>
84
+                <div class="project">
80 85
                 <a href="http://torstatus.blutmagie.de/"><img
81 86
                 src="$(IMGROOT)/icon-TorStatus.jpg" alt="TorStatus Icon"></a>
82 87
                 <h3><a href="http://torstatus.blutmagie.de/">TorStatus</a></h3>
83 88
                 <p>Site providing an overview of the Tor network.</p>
89
+                </div>
84 90
               </td>
85 91
               <!-- Icon from the Crystal set
86 92
                 author: Everaldo Coelho
... ...
@@ -88,43 +94,53 @@
88 94
                 license: LGPL v2
89 95
               -->
90 96
               <td>
97
+                <div class="project">
91 98
                 <a href="http://www.atagar.com/arm/"><img
92 99
                 src="$(IMGROOT)/icon-Arm.jpg" alt="Arm Icon"></a>
93 100
                 <h3><a href="http://www.atagar.com/arm/">Arm</a></h3>
94 101
                 <p>Terminal application for monitoring and configuring Tor.</p>
102
+                </div>
95 103
               </td>
96 104
             </tr>
97 105
             <tr>
98 106
               <td>
107
+                <div class="project">
99 108
                 <a href="<page torbutton/index>"><img
100 109
                 src="$(IMGROOT)/icon-TorButton.jpg" alt="Torbutton Icon"></a>
101 110
                 <h3><a href="<page torbutton/index>">Torbutton</a></h3>
102 111
                 <p>Torbutton is a 1-click way for Firefox users to enable
103 112
                 or disable Tor in Firefox.</p>
113
+                </div>
104 114
               </td>
105 115
               <td>
116
+                <div class="project">
106 117
                 <a href="https://check.torproject.org/"><img
107 118
                 src="$(IMGROOT)/icon-TorCheck.jpg" alt="Tor Check Icon"></a>
108 119
                 <h3><a href="https://check.torproject.org/">Check</a></h3>
109 120
                 <p>Check determines if you are successfully browsing
110 121
                 with Tor.</p>
122
+                </div>
111 123
               </td>
112 124
             </tr>
113 125
             <tr>
114 126
               <td>
127
+                <div class="project">
115 128
               <a href="<page projects/vidalia>"><img
116 129
               src="$(IMGROOT)/icon-Vidalia.jpg" alt="Vidalia Icon"></a>
117 130
               <h3><a href="<page projects/vidalia>">Vidalia</a></h3>
118 131
               <p>Vidalia is a graphical way to control and view Tor's
119 132
               connections and settings.</p>
133
+                 </div>
120 134
               </td>
121 135
               <td>
136
+                <div class="project">
122 137
               <a href="<page projects/torbrowser>"><img
123 138
               src="$(IMGROOT)/icon-TorBrowser.jpg" alt="TorBrowser Icon"></a>
124 139
               <h3><a href="<page projects/torbrowser>">Tor
125 140
               Browser</a></h3>
126 141
               <p>Tor Browser contains everything you need to safely
127 142
               browse the Internet. </p>
143
+                </div>
128 144
               </td>
129 145
             </tr>
130 146
           </table>
131 147
Binary files a/images/icon-Arm.jpg and b/images/icon-Arm.jpg differ
132 148
Binary files a/images/icon-Tails.jpg and b/images/icon-Tails.jpg differ
133 149
Binary files a/images/icon-TorBrowser.jpg and b/images/icon-TorBrowser.jpg differ
134 150
Binary files a/images/icon-TorButton.jpg and b/images/icon-TorButton.jpg differ
135 151
Binary files a/images/icon-TorCheck.jpg and b/images/icon-TorCheck.jpg differ
136 152
Binary files a/images/icon-TorStatus.jpg and b/images/icon-TorStatus.jpg differ
137 153
Binary files a/images/icon-Vidalia.jpg and b/images/icon-Vidalia.jpg differ