[tor-commits] r25461: {website} properly style the icons in the project page (in website/trunk: css projects/en)
Arturo Filasto
art at torproject.org
Tue Feb 21 23:25:22 UTC 2012
Author: art
Date: 2012-02-21 23:25:22 +0000 (Tue, 21 Feb 2012)
New Revision: 25461
Modified:
website/trunk/css/layout.css
website/trunk/projects/en/projects.wml
Log:
properly style the icons in the project page
Modified: website/trunk/css/layout.css
===================================================================
--- website/trunk/css/layout.css 2012-02-21 23:15:55 UTC (rev 25460)
+++ website/trunk/css/layout.css 2012-02-21 23:25:22 UTC (rev 25461)
@@ -50,23 +50,23 @@
height: 97px;
display: block;
}
-
+
#nav {
float: right;
}
-
+
#nav ul {
height: 50px;
float: right;
margin-bottom: 0;
}
-
+
#nav ul li {
float: left;
display: inline;
width: auto;
}
-
+
#calltoaction {
height: 30px;
float: right;
@@ -74,7 +74,7 @@
margin-right: 5px;
text-align: center;
}
-
+
#calltoaction ul {
padding: 0;
margin: 0px;
@@ -90,7 +90,7 @@
width: 100px;
margin-left: 0px;
}
-
+
#calltoaction ul li a:link,
#calltoaction ul li a:visited {
display: block;
@@ -112,7 +112,7 @@
font-weight: bold;
text-shadow: 1px 1px 0px #111111;
}
-
+
#calltoaction ul li:first-child a:link,
#calltoaction ul li:first-child a:visited,
#calltoaction ul li:hover:first-child a {
@@ -149,7 +149,7 @@
background: url(../images/cta-buttons.jpg) top right no-repeat #885ca4;
color: #FFFFFF;
}
-
+
#calltoaction ul li:hover:last-child a {
background: url(../images/cta-buttons.jpg) bottom right no-repeat #ff9800;
}
@@ -164,7 +164,7 @@
padding: 23px 15px;
margin-bottom: 15px;
}
-
+
#download a:link,
#download a:visited {
margin: -17px 0 0;
@@ -175,7 +175,7 @@
padding: 35px 0 0 80px;
text-decoration: none;
}
-
+
#download a .download-tor {
background: url(../images/button-download-arrow.png) right center no-repeat;
font-family: "Arial Narrow", Arial, sans-serif;
@@ -194,13 +194,13 @@
font-size: 0.833em;
line-height: 0.833em;
}
-
+
#download a:hover {
background-position: 0 -114px;
}
#download a:hover .version,
#download a:hover .info { color: #f1c6a1; }
-
+
#banner ul {
background: #387520 url(../images/banner-gradient.jpg) left top repeat-x;
border: 1px solid #366b32;
@@ -209,7 +209,7 @@
margin: 0 15px 0 0;
padding: 10px 10px 10px 30px;
}
-
+
#banner ul li {
list-style: url(../images/white-bullet.png) outside;
padding: 5px 0;
@@ -230,48 +230,52 @@
width: 620px;
margin-right: 20px;
}
-
+
#maincol {
float: right;
width: 710px;
margin-bottom: 20px;
}
-
+
#maincol-left {
float: left;
width: 710px;
margin-bottom: 20px;
}
-
+
+ #maincol .topforty .icon img {
+ border: none;
+ }
+
.subcol {
width: 280px;
float: left;
margin: 0 0 25px;
}
-
+
#content .first {
margin-right: 20px;
}
/* SIDEBAR ------------*/
-
+
#home #sidecol {
float: right;
width: 300px;
}
-
+
#sidecol {
float: left;
width: 230px;
margin-right: 20px;
}
-
+
#sidecol-right {
float: right;
width: 230px;
margin-left: 20px;
}
-
+
#torusers { margin: 0 0 27px; }
.user {
margin: 0 0 12px;
@@ -283,7 +287,7 @@
margin: 3px 10px 0 0;
}
.user p { margin: 0; }
-
+
/* IMGSHADOW ------------*/
.img-shadow {
@@ -309,13 +313,13 @@
background-color: #f7f8f0;
border: 1px solid #eeefe8;
}
-
+
.img-shadow .infoblock,
.img-shadow .important-infoblock {
padding: 15px;
width: 188px;
}
-
+
.img-shadow .custom-infoblock {
padding: 15px;
height: 120px;
@@ -327,8 +331,8 @@
.img-shadow .custom-infoblock p {
margin: 0;
}
-
-
+
+
/* SIDENAV ------------*/
/*Note: #sidenav-sub is used on the downloads page as a tertiary navigation*/
@@ -338,39 +342,39 @@
padding: 10px 0 0;
width: 218px;
}
-
+
#sidenav ul li,
.sidenav-sub ul li { border-bottom: 1px solid #ddd; }
-
+
#sidenav ul li.dropdown a:link,
#sidenav ul li.dropdown a:visited { background: url(../images/sidenav-arrow.gif) left center no-repeat; }
#sidenav ul li.dropdown a.active { background: url(../images/sidenav-arrow-active.gif) left center no-repeat; }
-
+
.sidenav-sub ul li.dropdown a:link,
- .sidenav-sub ul li.dropdown a:visited {
+ .sidenav-sub ul li.dropdown a:visited {
background: url(../images/sidenav-arrow.gif) left top no-repeat;
margin-top: 12px;
}
-
+
#sidenav ul li a:link,
#sidenav ul li a:visited {
display: block;
height: auto;
padding: 8px 15px 8px 26px;
}
-
+
#sidenav ul li ul li a:link,
#sidenav ul li ul li a:visited {
padding-left: 37px;
}
-
+
.sidenav-sub ul li a:link,
.sidenav-sub ul li a:visited {
display: block;
padding: 0 15px 10px 26px;
line-height: 16px;
}
-
+
#sidenav ul li.active {
background: url(../images/sidenav-active.png) left center no-repeat;
width: 230px;
@@ -381,7 +385,7 @@
#sidenav ul li ul li ul li a:visited {
padding-left: 48px;
}
-
+
/* TABLE ------------*/
table { width: 100%; }
@@ -433,7 +437,7 @@
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
- }
+ }
.project img {
border: none;
@@ -531,7 +535,7 @@
font-size:0px;
line-height:0px;
}
-
+
.on:before {
top: 14px;
left: 10px;
@@ -539,7 +543,7 @@
border-right:7px solid transparent;
border-top:7px solid #FFFFFF;
}
-
+
.off:before {
top: 9px;
left: 14px;
@@ -547,8 +551,8 @@
border-top:7px solid transparent; /* right arrow slant */
border-left:7px solid #FFFFFF; /* bottom, add background color here */
}
-
- .accordionContent {
+
+ .accordionContent {
width: 708px;
float: left;
_float: none; /* Float works in all browsers but IE6 */
@@ -748,7 +752,7 @@
background: url(../images/table-title.jpg) left top no-repeat;
height: 33px;
display: block;
- }
+ }
.paypal {
float: left;
@@ -757,7 +761,7 @@
max-width: 365px;
}
.paypal span { padding-right: 20px; }
-
+
.warning-top {
padding: 10px 10px 10px 60px;
margin: 0px 10px 0px 10px;
@@ -806,7 +810,7 @@
width: auto;
margin-right: 10px;
}
-
+
.featured-project { width: 313px; }
/* FORM ------------*/
@@ -821,7 +825,7 @@
}
.donate-btn {
- background: left top no-repeat;
+ background: left top no-repeat;
height: 26px;
width: 92px;
text-indent: -9999px;
@@ -872,7 +876,7 @@
}
.go:hover { background: #6ab334; }
-
+
/* FOOTER ------------*/
#footer {
@@ -898,28 +902,28 @@
border-right: 1px solid #ddd;
float: left;
}
-
+
#footer .newsletter {
padding: 0 0 15px 30px;
width: auto;
margin-left: 308px;
}
-
+
#footer input.textfield {
width: 220px;
height: 26px;
}
-
+
#footer input {
margin: 0;
}
-
+
#footer .col {
float: left;
width: 100px;
margin-left: 20px;
}
-
+
#footer .first { margin-left: 30px; }
#footer .wider { width: 201px; }
@@ -947,7 +951,7 @@
border-right: 1px solid #444444;
margin-left: -4px;
}
-
+
.hlist li.last {
border-right: 0px solid #444444;
}
@@ -962,7 +966,7 @@
font-weight: bold;
padding: 0px 8px;
}
-
+
.dbox {
float: none;
text-align: center;
@@ -1006,7 +1010,7 @@
-moz-box-shadow: 0px 0px 4px #cbcbaf;
-webkit-box-shadow: 0px 0px 4px #cbcbaf;
box-shadow: 0px 0px 4px #cbcbaf;
- border:2px solid #cbcbaf;
+ border:2px solid #cbcbaf;
background-color: #FFFFFF;
}
@@ -1026,7 +1030,7 @@
margin-right: 0px;
text-align: left;
}
-
+
.dbox select#t3 {
width: 100%;
margin-bottom: 20px;
@@ -1053,7 +1057,7 @@
float: left;
padding-right: 0px;
}
-
+
.dbox div label {
padding: 0px 10px 0px 0px;
}
@@ -1063,7 +1067,7 @@
text-align: center;
margin: -15px auto 0px auto;
}
-
+
.dbox small,
.dbox.donate #ppinfo {
margin: 0px auto 0px auto;
@@ -1100,11 +1104,11 @@
padding-bottom: 0px;
margin-bottom: 0px;
}
-
+
.dbox.donate .drow {
margin: 0px 0px 0px 20px;
}
-
+
.dbox.donate .drow div {
padding: 0px 0 0 0px;
width: auto;
@@ -1124,12 +1128,12 @@
.dbox.donate p {
padding: 5px 20px 15px 40px;
}
-
+
.dbox.donate span {
float: left;
padding-right: 0px;
}
-
+
.dbox.donate div label {
padding: 0px 10px 0px 0px;
}
@@ -1155,7 +1159,7 @@
.dbox.donate ul.amounts li label {
padding: 0px 0px 0px 5px;
}
-
+
.dbox.donate input.donate-btn {
background: url(../images/btn_donateCC_LG.gif) left top no-repeat transparent;
height: 26px;
@@ -1187,7 +1191,7 @@
color: transparent;
border:0px solid transparent;
}
-
+
.dbox.dsmall div label {
padding: 0px 0px 0px 0px;
}
@@ -1200,7 +1204,7 @@
bottom: 20px;
margin: 0px auto;
}
-
+
.givv p {
text-align: justify;
margin-top: 10px;
Modified: website/trunk/projects/en/projects.wml
===================================================================
--- website/trunk/projects/en/projects.wml 2012-02-21 23:15:55 UTC (rev 25460)
+++ website/trunk/projects/en/projects.wml 2012-02-21 23:25:22 UTC (rev 25461)
@@ -15,7 +15,7 @@
<table class="topforty">
<tr>
<td>
-<a href="<page torbutton/index>"><img
+<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
@@ -23,7 +23,7 @@
to your privacy when using a web browser.</p>
</td>
<td>
-<a href="<page projects/torbrowser>"><img
+<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>
<p>The Tor Browser Bundle contains everything you need to safely
@@ -33,7 +33,7 @@
</tr>
<tr>
<td>
-<a href="<page projects/vidalia>"><img
+<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
@@ -41,7 +41,7 @@
Tor without getting into configuration files and code.</p>
</td>
<td>
-<a href="http://www.atagar.com/arm/"><img
+<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>
<p>Arm is a terminal status monitor for Tor, intended for
@@ -50,7 +50,7 @@
Tor's resource utilization and state.</p> </td> </tr>
<tr>
<td>
-<a href="https://guardianproject.info/apps/orbot/"><img
+<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>
@@ -62,7 +62,7 @@
Orbot/Tor.</p>
</td>
<td>
-<a href="http://tails.boum.org/"><img
+<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>
<p>The Amnesic Incognito Live System is a live CD/USB distribution
@@ -72,7 +72,7 @@
</tr>
<tr>
<td>
-<a href="http://torstatus.blutmagie.de/"><img
+<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>
<p>Portal providing an overview of the Tor network, including a list of its
@@ -80,7 +80,7 @@
href="http://torstatus.cyberphunk.org/">cyberphunk</a> and others.</p>
</td>
<td>
-<a href="https://metrics.torproject.org/"><img src="$(IMGROOT)/onion.jpg"/>Metrics Portal</a>
+<a href="https://metrics.torproject.org/"><img class="icon" src="$(IMGROOT)/onion.jpg"/>Metrics Portal</a>
<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
@@ -89,7 +89,7 @@
</tr>
<tr>
<td>
-<a href="https://cloud.torproject.org"><img
+<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>
<p>The Tor Cloud project gives you a user-friendly way of deploying
@@ -99,7 +99,7 @@
Get started with <a href="https://cloud.torproject.org">Tor Cloud</a>.</p>
</td>
<td>
-<a href="<page projects/obfsproxy>"><img src="$(IMGROOT)/onion.jpg"/></a>
+<a href="<page projects/obfsproxy>"><img class="icon" src="$(IMGROOT)/onion.jpg"/></a>
<div class="name"><a href="<page projects/obfsproxy>">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
More information about the tor-commits
mailing list