wok-4.x rev 7865
tazpkg-web: Update CSS style
author | Christophe Lincoln <pankso@slitaz.org> |
---|---|
date | Mon Jan 03 00:01:34 2011 +0100 (2011-01-03) |
parents | e681209feb60 |
children | c23a615a931a |
files | tazpkg-web/stuff/html/header.html tazpkg-web/stuff/html/menu.html tazpkg-web/stuff/style/pics/website/header-img.png tazpkg-web/stuff/style/pics/website/header.png tazpkg-web/stuff/style/pics/website/logo.png tazpkg-web/stuff/style/slitaz.css |
line diff
1.1 --- a/tazpkg-web/stuff/html/header.html Sun Jan 02 08:22:10 2011 +0000 1.2 +++ b/tazpkg-web/stuff/html/header.html Mon Jan 03 00:01:34 2011 +0100 1.3 @@ -26,5 +26,5 @@ 1.4 <a href="http://pkgs.slitaz.org/"><img id="logo" 1.5 src="http://pkgs.slitaz.org/pics/website/logo.png" title="pkgs.slitaz.org" alt="pkgs.slitaz.org" 1.6 style="border: 0px solid ; width: 200px; height: 74px;" /></a> 1.7 - <p id="titre">#!/tazpkg/packages</p> 1.8 + <p id="titre">#!/Packages</p> 1.9 </div>
2.1 --- a/tazpkg-web/stuff/html/menu.html Sun Jan 02 08:22:10 2011 +0000 2.2 +++ b/tazpkg-web/stuff/html/menu.html Mon Jan 03 00:01:34 2011 +0100 2.3 @@ -26,9 +26,9 @@ 2.4 <h4>SliTaz Network</h4> 2.5 <ul> 2.6 <li><a href="http://www.slitaz.org/">Main Website</a></li> 2.7 - <li><a href="http://forum.slitaz.org/">Community Forum</a></li> 2.8 + <li><a href="http://doc.slitaz.org/">Documentation</a></li> 2.9 + <li><a href="http://forum.slitaz.org/">Support Forum</a></li> 2.10 <li><a href="http://labs.slitaz.org/">SliTaz Labs</a></li> 2.11 - <li><a href="http://boot.slitaz.org/">SliTaz Web Boot</a></li> 2.12 <li><a href="http://twitter.com/slitaz">SliTaz on Twitter</a></li> 2.13 <li><a href="http://www.distrowatch.com/slitaz">SliTaz on DistroWatch</a></li> 2.14 </ul>
3.1 Binary file tazpkg-web/stuff/style/pics/website/header-img.png has changed
4.1 Binary file tazpkg-web/stuff/style/pics/website/header.png has changed
5.1 Binary file tazpkg-web/stuff/style/pics/website/logo.png has changed
6.1 --- a/tazpkg-web/stuff/style/slitaz.css Sun Jan 02 08:22:10 2011 +0000 6.2 +++ b/tazpkg-web/stuff/style/slitaz.css Mon Jan 03 00:01:34 2011 +0100 6.3 @@ -12,6 +12,7 @@ 6.4 color: black; 6.5 font: 13px sans-serif, vernada, arial; 6.6 margin: 0; 6.7 + border-top: 34px solid #f1f1f1; 6.8 } 6.9 6.10 /* Accessibility */ 6.11 @@ -19,57 +20,62 @@ 6.12 #access { 6.13 position: absolute; 6.14 top: 4px; 6.15 - right: 4px; 6.16 + right: 0px; 6.17 text-align: right; 6.18 - width: 100%; 6.19 + width: auto; 6.20 margin: 0; 6.21 + padding: 4px 4px 4px 20px; 6.22 font-size: 11px; 6.23 font-weight: bold; 6.24 } 6.25 6.26 #access a { 6.27 - background: inherit; 6.28 - color: white; 6.29 + background: transparent; 6.30 + color: #0F314E; 6.31 text-decoration: none; 6.32 } 6.33 6.34 #access a:hover { 6.35 background: inherit; 6.36 - color: #222222; 6.37 + color: #b64b22; 6.38 } 6.39 6.40 /* Header and title */ 6.41 6.42 #header{ 6.43 - background: #f0ba08 url(pics/website/header.png) repeat-x top; 6.44 + /*background: #f0ba08 url(pics/website/header.png) repeat-x top;*/ 6.45 + background: #351a0a url(pics/website/header-img.png) no-repeat top right; 6.46 color: black; 6.47 width: 100%; 6.48 - height: 50px; 6.49 + height: 42px; 6.50 border-top: 1px solid black; 6.51 border-bottom: 1px solid black; 6.52 margin-bottom: 30px; 6.53 + -moz-box-shadow: 0 1px 5px #333; 6.54 + -webkit-box-shadow: 0 1px 5px #333; 6.55 + box-shadow: 0 1px 5px #333; 6.56 } 6.57 6.58 #titre { 6.59 position: absolute; 6.60 - font-size: 16px; 6.61 + font-size: 14px; 6.62 font-weight: bolder ; 6.63 - margin-left: 200px; 6.64 - margin-top: 28px; 6.65 + left: 180px; 6.66 + top: 4px; 6.67 } 6.68 6.69 #logo { 6.70 position: absolute; 6.71 float: left; 6.72 - margin-left: 16px; 6.73 - margin-top: 0px; 6.74 + left: 16px; 6.75 + top: -10px; 6.76 } 6.77 6.78 /* Navigation */ 6.79 6.80 #nav { 6.81 position: absolute; 6.82 - top: 76px; 6.83 + top: 102px; 6.84 right: 80px; 6.85 color: #555555; 6.86 float: right; 6.87 @@ -79,19 +85,11 @@ 6.88 font-size: 12px; 6.89 } 6.90 6.91 -#nav ul { 6.92 - -moz-border-radius: 8px; 6.93 - -webkit-border-radius: 8px; 6.94 - list-style-type: none; 6.95 - margin: 10px 0; 6.96 - padding: 10px 24px 10px 24px; 6.97 - background-color: #eaeaea; 6.98 -} 6.99 - 6.100 #nav .nav_box ul { 6.101 list-style-type: none; 6.102 margin: 0; 6.103 padding: 10px 24px 10px 0px; 6.104 + background-color: inherit; 6.105 } 6.106 6.107 #nav li { 6.108 @@ -99,7 +97,7 @@ 6.109 } 6.110 6.111 #nav h4 { 6.112 - font-size: 110%; 6.113 + font-size: 120%; 6.114 color: #666666; 6.115 font-weight: bold; 6.116 margin: 0; 6.117 @@ -116,7 +114,7 @@ 6.118 } 6.119 6.120 #nav a:hover { 6.121 - color: #DF8F06; 6.122 + color: #b64b22; 6.123 text-decoration: none; 6.124 display: block; 6.125 } 6.126 @@ -125,18 +123,39 @@ 6.127 margin: 2px 0px 1px 0px; 6.128 border: 0px; 6.129 border-top: 1px solid #BDBDBD; 6.130 +} 6.131 6.132 +#nav ul { 6.133 + -moz-border-radius: 8px; 6.134 + -webkit-border-radius: 8px; 6.135 + list-style-type: none; 6.136 + margin: 10px 0; 6.137 + padding: 10px 24px 10px 24px; 6.138 + background-color: #eaeaea; 6.139 } 6.140 6.141 .nav_box { 6.142 - -moz-border-radius: 8px; 6.143 - -webkit-border-radius: 8px; 6.144 margin: 10px 0; 6.145 padding: 10px 24px 10px 24px; 6.146 background-color: #eaeaea; 6.147 text-align: justify; 6.148 + -moz-border-radius: 8px; 6.149 + -webkit-border-radius: 8px; 6.150 + border-radius: 8px; 6.151 + -moz-box-shadow: 0 1px 3px #666; 6.152 + -webkit-box-shadow: 0 1px 3px #666; 6.153 + box-shadow: 0 1px 3px #666; 6.154 + /* CSS3 transition */ 6.155 + -webkit-transition-property: background-color; 6.156 + -webkit-transition-duration: 2s; 6.157 + -moz-transition-property: background-color; 6.158 + -moz-transition-duration: 2s; 6.159 + transition-property: background-color; 6.160 + transition-duration: 2s; 6.161 } 6.162 6.163 +.nav_box:hover { background-color: #f8f8f8; } 6.164 + 6.165 #nav .nav_box p { 6.166 line-height: 1.3em; 6.167 } 6.168 @@ -160,19 +179,25 @@ 6.169 6.170 /* Page content */ 6.171 6.172 -#content, #content_bottom, #content_top { 6.173 +#content { 6.174 background: white; 6.175 color: black; 6.176 text-align: justify; 6.177 -} 6.178 - 6.179 -#content { 6.180 height: auto; 6.181 margin: 6px 320px 0px 0px; 6.182 padding: 0px 40px 60px 80px; 6.183 } 6.184 6.185 -#content li { 6.186 +#content-full { 6.187 + background: white; 6.188 + color: black; 6.189 + text-align: justify; 6.190 + height: auto; 6.191 + margin: 6px 0px 0px 0px; 6.192 + padding: 0px 80px 35% 80px; 6.193 +} 6.194 + 6.195 +#content li, #content-full li { 6.196 line-height: 1.5em; 6.197 text-align: left; 6.198 } 6.199 @@ -219,6 +244,10 @@ 6.200 padding: 4px 0px 4px 0px; 6.201 } 6.202 6.203 +#news a { 6.204 + text-decoration: none; 6.205 +} 6.206 + 6.207 #gallery { 6.208 text-align: center; 6.209 } 6.210 @@ -251,37 +280,117 @@ 6.211 .infobox { 6.212 margin: 10px; 6.213 padding: 12px; 6.214 - background: #f2f2f2; 6.215 - border: 1px solid #eaeaea; 6.216 + background: #f8f8f8; 6.217 -moz-border-radius: 8px; 6.218 -webkit-border-radius: 8px; 6.219 + border-radius: 8px; 6.220 + -moz-box-shadow: 0 1px 3px #666; 6.221 + -webkit-box-shadow: 0 1px 3px #666; 6.222 + box-shadow: 0 1px 3px #666; 6.223 +} 6.224 + 6.225 +.imagebox { 6.226 + min-width: 300px; 6.227 + margin: 10px 15%; 6.228 + padding: 8px; 6.229 + background: transparent; 6.230 + text-align: center; 6.231 + /* CSS3 transition */ 6.232 + -webkit-transition-property: background-color; 6.233 + -webkit-transition-duration: 3s; 6.234 + -moz-transition-property: background-color; 6.235 + -moz-transition-duration: 3s; 6.236 + transition-property: background-color; 6.237 + transition-duration: 3s; 6.238 +} 6.239 + 6.240 +.imagebox:hover, .imagebox img { 6.241 + -moz-border-radius: 8px; 6.242 + -webkit-border-radius: 8px; 6.243 + border-radius: 8px; 6.244 + -moz-box-shadow: 0 1px 3px #666; 6.245 + -webkit-box-shadow: 0 1px 3px #666; 6.246 + box-shadow: 0 1px 3px #666; 6.247 +} 6.248 + 6.249 +.block { 6.250 + /*padding-bottom: 35%;*/ 6.251 + color: black; 6.252 + min-height: 200px; 6.253 +} 6.254 + 6.255 +.block h3 img { 6.256 + padding: 0 2px 2px 0; 6.257 + margin: 0; 6.258 +} 6.259 + 6.260 +.block ul { 6.261 + list-style-type: square; 6.262 +} 6.263 + 6.264 +.block_left { 6.265 + width: 46%; 6.266 + float: left; 6.267 + background-color: #eaeaea; 6.268 + margin: 4px 2px; 6.269 + padding: 0 6px; 6.270 +} 6.271 + 6.272 +.block_right { 6.273 + width: 46%; 6.274 + float: right; 6.275 + background-color: #eaeaea; 6.276 + margin: 4px 2px; 6.277 + padding: 0 6px; 6.278 +} 6.279 + 6.280 +.block_left, .block_right { 6.281 + -moz-border-radius: 8px; 6.282 + -webkit-border-radius: 8px; 6.283 + border-radius: 8px; 6.284 + -moz-box-shadow: 0 1px 3px #666; 6.285 + -webkit-box-shadow: 0 1px 3px #666; 6.286 + box-shadow: 0 1px 3px #666; 6.287 + /* CSS3 transition */ 6.288 + -webkit-transition-property: background-color; 6.289 + -webkit-transition-duration: 2s; 6.290 + -moz-transition-property: background-color; 6.291 + -moz-transition-duration: 2s; 6.292 + transition-property: background-color; 6.293 + transition-duration: 2s; 6.294 + /* For browsers that don't support RGBa 6.295 + background: rgb(0, 0, 0);*/ 6.296 + /* RGBa with 0.6 opacity 6.297 + background: rgba(0, 0, 0, 0.2);*/ 6.298 +} 6.299 + 6.300 +.block_left:hover, .block_right:hover, .imagebox:hover, #slidebox:hover { 6.301 + background-color: #f2b21d; 6.302 } 6.303 6.304 /* HTML styles */ 6.305 6.306 h1 { 6.307 - color: blue; 6.308 + color: #444444; 6.309 background: inherit; 6.310 text-align: left; 6.311 - margin: 0px 0px 10px 0px; 6.312 - font-size: 140%; 6.313 + margin: 0px 0px 4px 0px; 6.314 + font-size: 150%; 6.315 font-weight: bold; 6.316 } 6.317 6.318 h2 { 6.319 - color: #DF8F06; 6.320 - /* border-top: 1px solid #f3f3f3; */ 6.321 - border-left: 8px solid #f3f3f3; 6.322 - padding: 4px 0px 4px 4px; 6.323 - margin: 0; 6.324 - font-size: 140%; 6.325 + color: #b64b22; 6.326 + padding: 0; 6.327 + margin: 4px 0 0 0; 6.328 + font-size: 130%; 6.329 font-weight: bold; 6.330 } 6.331 6.332 h3 { 6.333 font-weight: bold; 6.334 - color: #6c0023; 6.335 - background: inherit; 6.336 + color: #390012; 6.337 + background: transparent; 6.338 } 6.339 6.340 a { 6.341 @@ -364,3 +473,88 @@ 6.342 background: #F3F3F3; 6.343 border: 1px solid #DEDEDE; 6.344 } 6.345 + 6.346 +.year:after { 6.347 + /* content: "2007-2010"; */ 6.348 + content: "2010"; 6.349 +} 6.350 + 6.351 +/* Slideshow */ 6.352 + 6.353 +@-webkit-keyframes 'AutoSlide' { 6.354 + 0% { 6.355 + left: 0px; /*1ère image*/ 6.356 + } 6.357 + 10% { 6.358 + left: 0px; /*idem pour attente*/ 6.359 + } 6.360 + 25% { 6.361 + left: -240px; /*2ème image*/ 6.362 + } 6.363 + 35% { 6.364 + left: -240px; /*idem pour attente*/ 6.365 + } 6.366 + 70% { 6.367 + left: -480px; /*3ème image*/ 6.368 + } 6.369 + 75% { 6.370 + left: -480px; /*idem pour attente*/ 6.371 + } 6.372 + 80% { 6.373 + left: -720px; /*idem pour attente*/ 6.374 + } 6.375 + 90% { 6.376 + left: -720px; /*idem pour attente*/ 6.377 + } 6.378 + 100% { 6.379 + left: 0px; /*1ère image*/ 6.380 + } 6.381 +} 6.382 + 6.383 +#slidebox { 6.384 + margin: 10px 15%; 6.385 + padding: 8px; 6.386 + min-width: 300px; 6.387 + /* CSS3 transition */ 6.388 + -webkit-transition-property: background-color; 6.389 + -webkit-transition-duration: 3s; 6.390 + -moz-transition-property: background-color; 6.391 + -moz-transition-duration: 3s; 6.392 + transition-property: background-color; 6.393 + transition-duration: 3s; 6.394 +} 6.395 +#slidebox:hover { 6.396 + -moz-box-shadow: 0 1px 3px #666; 6.397 + -webkit-box-shadow: 0 1px 3px #666; 6.398 + box-shadow: 0 1px 3px #666; 6.399 +} 6.400 +#slidebox:hover, #slidebox img { 6.401 + -moz-border-radius: 8px; 6.402 + -webkit-border-radius: 8px; 6.403 + border-radius: 8px; 6.404 +} 6.405 + 6.406 +#slideshow { 6.407 + position: relative; 6.408 + width: 240px; 6.409 + height: 150px; 6.410 + margin: 10px auto; 6.411 + overflow: hidden; 6.412 +} 6.413 + 6.414 +#sContent li { 6.415 + display: inline; 6.416 +} 6.417 +#sContent { 6.418 + position: absolute; 6.419 + top: 0; 6.420 + left: 0; 6.421 + width: 1000px; 6.422 + margin: 0; 6.423 + padding: 0; 6.424 + /*CSS3 keyframes animation*/ 6.425 + -webkit-animation-name: AutoSlide; 6.426 + -webkit-animation-duration: 10s; 6.427 + -webkit-animation-iteration-count: infinite; 6.428 + -webkit-animation-timing-function: ease-in-out; 6.429 +}