website rev 693
Style improvment: use CSS 3 new functions (transition, box-shadow, opacity)
| author | Christophe Lincoln <pankso@slitaz.org> |
|---|---|
| date | Fri Dec 24 15:32:15 2010 +0100 (2010-12-24) |
| parents | 0baf4e9ecdd7 |
| children | a1cd38534626 |
| files | cn/chinese_top.jpg en/index.html i18n.html index.php pics/website/cn-fff.png slitaz.css |
line diff
1.1 Binary file cn/chinese_top.jpg has changed
2.1 --- a/en/index.html Sat Dec 11 13:25:36 2010 +0100 2.2 +++ b/en/index.html Fri Dec 24 15:32:15 2010 +0100 2.3 @@ -32,7 +32,7 @@ 2.4 <a href="../es/index.html" title="Página de Inicio">Español</a> | 2.5 <a href="../fr/index.html" title="Page principale en français">Français</a> | 2.6 <a href="../pt/index.html" title="Página principal">Português</a> | 2.7 - <a href="../cn/index.html" title="Chinese"><img src="../cn/chinese_top.jpg" title="Chinese" alt="cn"></img></a> | 2.8 + <a href="../cn/index.html" title="Chinese"><img src="../pics/website/cn-fff.png" title="Chinese" alt="cn"></img></a> | 2.9 <a href="../i18n.html" title="Internationalisation">i18n</a> 2.10 </div> 2.11 <a href="http://www.slitaz.org/"><img id="logo"
3.1 --- a/i18n.html Sat Dec 11 13:25:36 2010 +0100 3.2 +++ b/i18n.html Fri Dec 24 15:32:15 2010 +0100 3.3 @@ -32,7 +32,7 @@ 3.4 <a href="es/index.html">Español</a> | 3.5 <a href="fr/index.html">Français</a> | 3.6 <a href="pt/index.html">Português</a> | 3.7 - <a href="cn/index.html"><img src="cn/chinese_top.jpg" title="Chinese" alt="cn" /></a> 3.8 + <a href="cn/index.html"><img src="pics/website/cn-fff.png" title="Chinese" alt="cn" /></a> 3.9 </div> 3.10 <a href="http://www.slitaz.org/"><img id="logo" 3.11 src="pics/website/logo.png" title="www.slitaz.org" alt="www.slitaz.org" 3.12 @@ -56,7 +56,8 @@ 3.13 <div class="nav_box"> 3.14 <h4>SliTaz Network</h4> 3.15 <ul> 3.16 - <li><a href="http://forum.slitaz.org/">Community Forum</a></li> 3.17 + <li><a href="http://forum.slitaz.org/">Support Forum</a></li> 3.18 + <li><a href="http://scn.slitaz.org/">Community Network</a></li> 3.19 <li><a href="http://labs.slitaz.org/">SliTaz Laboratories</a></li> 3.20 <li><a href="http://pkgs.slitaz.org/">Packages Database</a></li> 3.21 <li><a href="http://boot.slitaz.org/">SliTaz Web Boot</a></li> 3.22 @@ -95,7 +96,7 @@ 3.23 <a href="fr/index.html">Français</a> - 3.24 <a href="pt/index.html">Português</a> - 3.25 <a href="cn/index.html"><img 3.26 - src="cn/chinese_i18n.jpg" 3.27 + src="pics/website/cn.png" 3.28 style="vertical-align: middle;" 3.29 title="Chinese" alt="cn" /></a> 3.30 </div>
4.1 --- a/index.php Sat Dec 11 13:25:36 2010 +0100 4.2 +++ b/index.php Fri Dec 24 15:32:15 2010 +0100 4.3 @@ -37,11 +37,10 @@ 4.4 <h4><img 4.5 src="pics/website/locale.png" 4.6 style="vertical-align: middle; width: 20px; height: 20px;" 4.7 - alt="language" /> 4.8 -Language</h4> 4.9 + alt="language" />Language</h4> 4.10 <div style="width: 50%; position: absolute; right: 0px;"> 4.11 <ul> 4.12 -<li><a href="id/index.html">Indonesian</a></li> 4.13 + <li><a href="id/index.html">Indonesian</a></li> 4.14 <li><a href="pt/index.html">Português</a></li> 4.15 <li><a href="cn/index.html" title="Chinese"> 4.16 <img
5.1 Binary file pics/website/cn-fff.png has changed
6.1 --- a/slitaz.css Sat Dec 11 13:25:36 2010 +0100 6.2 +++ b/slitaz.css Fri Dec 24 15:32:15 2010 +0100 6.3 @@ -18,13 +18,31 @@ 6.4 6.5 #access { 6.6 position: absolute; 6.7 - top: 4px; 6.8 - right: 4px; 6.9 + top: 0px; 6.10 + right: 0px; 6.11 text-align: right; 6.12 - width: 100%; 6.13 + width: auto; 6.14 margin: 0; 6.15 + padding: 4px 4px 4px 20px; 6.16 font-size: 11px; 6.17 font-weight: bold; 6.18 + /* CSS3 transition */ 6.19 + -webkit-transition-property: background-color; 6.20 + -webkit-transition-duration: 1s; 6.21 + -moz-transition-property: background-color; 6.22 + -moz-transition-duration: 1s; 6.23 + transition-property: background-color; 6.24 + transition-duration: 1s; 6.25 +} 6.26 + 6.27 +#access:hover { 6.28 + background-color: #b64b22; 6.29 + -moz-border-radius-bottomleft: 8px; 6.30 + -webkit-border-radius-bottomleft: 8px; 6.31 + border-bottom-left-radius: 8px; 6.32 + -moz-box-shadow: 0 1px 3px #666; 6.33 + -webkit-box-shadow: 0 1px 3px #666; 6.34 + box-shadow: 0 1px 3px #666; 6.35 } 6.36 6.37 #access a { 6.38 @@ -79,15 +97,6 @@ 6.39 font-size: 12px; 6.40 } 6.41 6.42 -#nav ul { 6.43 - -moz-border-radius: 8px; 6.44 - -webkit-border-radius: 8px; 6.45 - list-style-type: none; 6.46 - margin: 10px 0; 6.47 - padding: 10px 24px 10px 24px; 6.48 - background-color: #eaeaea; 6.49 -} 6.50 - 6.51 #nav .nav_box ul { 6.52 list-style-type: none; 6.53 margin: 0; 6.54 @@ -99,7 +108,7 @@ 6.55 } 6.56 6.57 #nav h4 { 6.58 - font-size: 110%; 6.59 + font-size: 120%; 6.60 color: #666666; 6.61 font-weight: bold; 6.62 margin: 0; 6.63 @@ -125,18 +134,30 @@ 6.64 margin: 2px 0px 1px 0px; 6.65 border: 0px; 6.66 border-top: 1px solid #BDBDBD; 6.67 - 6.68 } 6.69 6.70 -.nav_box { 6.71 - -moz-border-radius: 8px; 6.72 - -webkit-border-radius: 8px; 6.73 +.nav_box, #nav ul { 6.74 margin: 10px 0; 6.75 padding: 10px 24px 10px 24px; 6.76 background-color: #eaeaea; 6.77 text-align: justify; 6.78 + -moz-border-radius: 8px; 6.79 + -webkit-border-radius: 8px; 6.80 + border-radius: 8px; 6.81 + -moz-box-shadow: 0 1px 3px #666; 6.82 + -webkit-box-shadow: 0 1px 3px #666; 6.83 + box-shadow: 0 1px 3px #666; 6.84 + /* CSS3 transition */ 6.85 + -webkit-transition-property: background-color; 6.86 + -webkit-transition-duration: 2s; 6.87 + -moz-transition-property: background-color; 6.88 + -moz-transition-duration: 2s; 6.89 + transition-property: background-color; 6.90 + transition-duration: 2s; 6.91 } 6.92 6.93 +.nav_box:hover, #nav ul:hover { background-color: #f8f8f8; } 6.94 + 6.95 #nav .nav_box p { 6.96 line-height: 1.3em; 6.97 } 6.98 @@ -160,19 +181,25 @@ 6.99 6.100 /* Page content */ 6.101 6.102 -#content, #content_bottom, #content_top { 6.103 +#content { 6.104 background: white; 6.105 color: black; 6.106 text-align: justify; 6.107 -} 6.108 - 6.109 -#content { 6.110 height: auto; 6.111 margin: 6px 320px 0px 0px; 6.112 padding: 0px 40px 60px 80px; 6.113 } 6.114 6.115 -#content li { 6.116 +#content-full { 6.117 + background: white; 6.118 + color: black; 6.119 + text-align: justify; 6.120 + height: auto; 6.121 + margin: 6px 0px 0px 0px; 6.122 + padding: 0px 80px 35% 80px; 6.123 +} 6.124 + 6.125 +#content li, #content-full li { 6.126 line-height: 1.5em; 6.127 text-align: left; 6.128 } 6.129 @@ -255,10 +282,58 @@ 6.130 .infobox { 6.131 margin: 10px; 6.132 padding: 12px; 6.133 - background: #f2f2f2; 6.134 - border: 1px solid #eaeaea; 6.135 + background: #f8f8f8; 6.136 -moz-border-radius: 8px; 6.137 -webkit-border-radius: 8px; 6.138 + border-radius: 8px; 6.139 + -moz-box-shadow: 0 1px 3px #666; 6.140 + -webkit-box-shadow: 0 1px 3px #666; 6.141 + box-shadow: 0 1px 3px #666; 6.142 +} 6.143 + 6.144 +.block { 6.145 + /*padding-bottom: 35%;*/ 6.146 + color: black; 6.147 +} 6.148 + 6.149 +.block h3 img { 6.150 + padding: 2px; 6.151 +} 6.152 + 6.153 +.block_left { 6.154 + width: 46%; 6.155 + float: left; 6.156 + background-color: #f5f5f5; 6.157 + margin: 4px 2px; 6.158 + padding: 0 6px; 6.159 +} 6.160 + 6.161 +.block_right { 6.162 + width: 46%; 6.163 + float: right; 6.164 + background-color: #f5f5f5; 6.165 + margin: 4px 2px; 6.166 + padding: 0 6px; 6.167 +} 6.168 + 6.169 +.block_left, .block_right { 6.170 + -moz-border-radius: 8px; 6.171 + -webkit-border-radius: 8px; 6.172 + border-radius: 8px; 6.173 + -moz-box-shadow: 0 1px 3px #666; 6.174 + -webkit-box-shadow: 0 1px 3px #666; 6.175 + box-shadow: 0 1px 3px #666; 6.176 + /* CSS3 transition */ 6.177 + -webkit-transition-property: background-color; 6.178 + -webkit-transition-duration: 2s; 6.179 + -moz-transition-property: background-color; 6.180 + -moz-transition-duration: 2s; 6.181 + transition-property: background-color; 6.182 + transition-duration: 2s; 6.183 +} 6.184 + 6.185 +.block_left:hover, .block_right:hover { 6.186 + background-color: #f2b21d; 6.187 } 6.188 6.189 /* HTML styles */