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