slitaz-configs rev 74
Improve webhome page and match last theme
author | Christophe Lincoln <pankso@slitaz.org> |
---|---|
date | Thu Jan 06 14:09:28 2011 +0100 (2011-01-06) |
parents | f67cc653bc28 |
children | 79325586e507 |
files | rootfs/usr/share/webhome/index.html rootfs/usr/share/webhome/pics/website/header-img.png rootfs/usr/share/webhome/pics/website/search.png rootfs/usr/share/webhome/slitaz.css |
line diff
1.1 --- a/rootfs/usr/share/webhome/index.html Wed Jan 05 00:27:35 2011 +0100 1.2 +++ b/rootfs/usr/share/webhome/index.html Thu Jan 06 14:09:28 2011 +0100 1.3 @@ -7,11 +7,6 @@ 1.4 <meta name="author" content="Christophe Lincoln"/> 1.5 <link rel="shortcut icon" href="favicon.ico" /> 1.6 <link rel="stylesheet" type="text/css" href="slitaz.css" /> 1.7 - <style type="text/css"> 1.8 - .block_right { 1.9 - padding-bottom: 25px; 1.10 - } 1.11 - </style> 1.12 </head> 1.13 <body> 1.14 1.15 @@ -29,26 +24,26 @@ 1.16 <!-- Content --> 1.17 <div id="content-full"> 1.18 1.19 -<h1>Browse the web</h1> 1.20 - 1.21 <!-- Block begin --> 1.22 <div class="block"> 1.23 - <!-- Left block begin --> 1.24 - <div class="block_left"> 1.25 - <h3><img src="pics/website/network.png" alt="network.png"/>SliTaz</h3> 1.26 + <!-- Nav block begin --> 1.27 + <div id="block_nav" style="min-height: 200px;"> 1.28 + <h3><img src="pics/website/network.png" alt="png" />SliTaz</h3> 1.29 <ul> 1.30 <li><a href="http://www.slitaz.org/">Main Website</a></li> 1.31 <li><a href="http://doc.slitaz.org/">Documentation</a></li> 1.32 <li><a href="http://forum.slitaz.org/">Support Forum</a></li> 1.33 + <li><a href="http://scn.slitaz.org/">Community Network</a></li> 1.34 <li><a href="http://pkgs.slitaz.org/">Packages</a></li> 1.35 - <li><a href="http://scn.slitaz.org/">Community</a></li> 1.36 - </ul> 1.37 - <!-- Left block end --> 1.38 + <li><a href="http://twitter.com/slitaz">SliTaz on Twitter</a></li> 1.39 + <li><a href="http://distrowatch.com/slitaz">SliTaz on DistroWatch</a></li> 1.40 + </ul> 1.41 + <!-- Nav block end --> 1.42 </div> 1.43 - <!-- Right block begin --> 1.44 - <div class="block_right"> 1.45 - <h3><img src="pics/website/search.png" alt="search.png" />Search</h3> 1.46 - <form method="get" action="http://www.google.com/search"> 1.47 + <!-- Top block begin --> 1.48 + <div id="block_top" style="min-height: 200px;"> 1.49 + <h1 style="margin-bottom: 50px;">Search the web</h1> 1.50 + <form method="get" action="http://www.google.com/search"> 1.51 <p> 1.52 <input type="text" name="q" size="24" style="width: 70%;" 1.53 maxlength="255" /> 1.54 @@ -63,7 +58,7 @@ 1.55 <input type="submit" name="go" value="Wikipedia" /> 1.56 </p> 1.57 </form> 1.58 - <!-- Right block end --> 1.59 + <!-- Top block end --> 1.60 </div> 1.61 <!-- Block end --> 1.62 </div>
2.1 Binary file rootfs/usr/share/webhome/pics/website/header-img.png has changed
3.1 Binary file rootfs/usr/share/webhome/pics/website/search.png has changed
4.1 --- a/rootfs/usr/share/webhome/slitaz.css Wed Jan 05 00:27:35 2011 +0100 4.2 +++ b/rootfs/usr/share/webhome/slitaz.css Thu Jan 06 14:09:28 2011 +0100 4.3 @@ -4,7 +4,7 @@ 4.4 */ 4.5 4.6 html { 4.7 - height: 102%; 4.8 + min-height: 102%; 4.9 } 4.10 4.11 body { 4.12 @@ -42,18 +42,15 @@ 4.13 4.14 /* Header and title */ 4.15 4.16 -#header{ 4.17 +#header { 4.18 /*background: #f0ba08 url(pics/website/header.png) repeat-x top;*/ 4.19 background: #351a0a url(pics/website/header-img.png) no-repeat top right; 4.20 color: black; 4.21 width: 100%; 4.22 height: 42px; 4.23 border-top: 1px solid black; 4.24 - border-bottom: 1px solid black; 4.25 - margin-bottom: 30px; 4.26 - -moz-box-shadow: 0 1px 5px #333; 4.27 - -webkit-box-shadow: 0 1px 5px #333; 4.28 - box-shadow: 0 1px 5px #333; 4.29 + border-bottom: 1px solid #999; 4.30 + margin-bottom: 33px; 4.31 } 4.32 4.33 #titre { 4.34 @@ -73,7 +70,7 @@ 4.35 height: 74px; 4.36 } 4.37 4.38 -/* Navigation */ 4.39 +/* Side bar Navigation */ 4.40 4.41 #nav { 4.42 position: absolute; 4.43 @@ -121,15 +118,10 @@ 4.44 display: block; 4.45 } 4.46 4.47 -#nav hr { 4.48 - margin: 2px 0px 1px 0px; 4.49 - border: 0px; 4.50 - border-top: 1px solid #BDBDBD; 4.51 -} 4.52 - 4.53 #nav ul { 4.54 -moz-border-radius: 8px; 4.55 -webkit-border-radius: 8px; 4.56 + border-radius: 8px; 4.57 list-style-type: none; 4.58 margin: 10px 0; 4.59 padding: 10px 24px 10px 24px; 4.60 @@ -174,11 +166,6 @@ 4.61 background: inherit; 4.62 } 4.63 4.64 -#nav hr { 4.65 - height: 0px; 4.66 - border: 0px solid #eaeaea; 4.67 -} 4.68 - 4.69 /* Page content */ 4.70 4.71 #content { 4.72 @@ -195,8 +182,8 @@ 4.73 color: black; 4.74 text-align: justify; 4.75 height: auto; 4.76 - margin: 6px 0px 0px 0px; 4.77 - padding: 0px 80px 35% 80px; 4.78 + margin: 0; 4.79 + padding: 0px 80px 40px 80px; 4.80 } 4.81 4.82 #content li, #content-full li { 4.83 @@ -204,41 +191,6 @@ 4.84 text-align: left; 4.85 } 4.86 4.87 -/* Legal informations */ 4.88 - 4.89 -#copy { 4.90 - font-size: 11px ; 4.91 - text-align: left ; 4.92 - background: transparent; 4.93 - color: #a8a8a8; 4.94 - padding-top: 10px; 4.95 - margin: 0 0 0 80px; 4.96 -} 4.97 - 4.98 -#copy a { 4.99 - background: inherit; 4.100 - color: #a8a8a8; 4.101 -} 4.102 - 4.103 -#copy a:hover { 4.104 - background: inherit; 4.105 - color: #666666; 4.106 -} 4.107 - 4.108 -/* Footer */ 4.109 - 4.110 -#bottom { 4.111 - float: none; 4.112 - background: inherit; 4.113 - color: black; 4.114 - width: auto; 4.115 - clear: both; 4.116 - padding: 0; 4.117 - margin: 0 0 0 80px; 4.118 - text-align: left; 4.119 - vertical-align: middle; 4.120 -} 4.121 - 4.122 #news li { 4.123 list-style-type: square; 4.124 border-bottom: 1px dotted #BEBEBE; 4.125 @@ -258,6 +210,134 @@ 4.126 margin: 30px 0px 30px 0px; 4.127 } 4.128 4.129 +/* Box and block. */ 4.130 + 4.131 +.infobox { 4.132 + margin: 10px; 4.133 + padding: 12px; 4.134 + background: #f8f8f8; 4.135 +} 4.136 + 4.137 +.infobox img { vertical-align: middle; } 4.138 +.infobox:hover { background-color: #f2b21d; } 4.139 + 4.140 +.block { 4.141 + /*padding-bottom: 35%;*/ 4.142 + color: black; 4.143 + min-height: 200px; 4.144 + margin-bottom: 40px; 4.145 +} 4.146 + 4.147 +.block ul { 4.148 + list-style-type: none; 4.149 + margin: 0; 4.150 + padding: 0 20px; 4.151 +} 4.152 + 4.153 +.block_left { 4.154 + width: 46%; 4.155 + float: left; 4.156 + background-color: #eaeaea; 4.157 + margin: 4px 2px; 4.158 + padding: 0 10px 10px 10px; 4.159 +} 4.160 + 4.161 +.block_right { 4.162 + width: 46%; 4.163 + float: right; 4.164 + background-color: #eaeaea; 4.165 + margin: 4px 2px; 4.166 + padding: 0 10px 10px 10px; 4.167 +} 4.168 + 4.169 +#block_top { 4.170 + color: black; 4.171 + background-color: #eaeaea; 4.172 + min-height: 180px; 4.173 + margin-bottom: 40px; 4.174 + margin-right: 340px; 4.175 + padding: 0 10px; 4.176 +} 4.177 + 4.178 +#block_nav { 4.179 + width: 300px; 4.180 + min-height: 180px; 4.181 + float: right; 4.182 + background-color: #eaeaea; 4.183 + margin: 0; 4.184 + padding: 0 10px; 4.185 +} 4.186 + 4.187 +.infobox, .block_left, .block_right, #block_top, #block_nav, #footer { 4.188 + -moz-border-radius: 8px; 4.189 + -webkit-border-radius: 8px; 4.190 + border-radius: 8px; 4.191 + -moz-box-shadow: 0 1px 3px #666; 4.192 + -webkit-box-shadow: 0 1px 3px #666; 4.193 + box-shadow: 0 1px 3px #666; 4.194 + /* CSS3 transition */ 4.195 + -webkit-transition-property: background-color; 4.196 + -webkit-transition-duration: 2s; 4.197 + -moz-transition-property: background-color; 4.198 + -moz-transition-duration: 2s; 4.199 + transition-property: background-color; 4.200 + transition-duration: 2s; 4.201 +} 4.202 + 4.203 +#block_nav { 4.204 + font-weight: bold; 4.205 +} 4.206 + 4.207 +#block_nav a { 4.208 + text-decoration: none; 4.209 +} 4.210 + 4.211 +#block_nav li a:hover { 4.212 + color: #b64b22; 4.213 +} 4.214 + 4.215 +#block_nav ul { 4.216 + margin: 0; 4.217 + list-style-type: none; 4.218 +} 4.219 + 4.220 +#block_nav h3 { 4.221 + font-size: 110%; 4.222 +} 4.223 + 4.224 +.block_left:hover, .block_right:hover, #block_top:hover, 4.225 +#block_nav:hover, #footer:hover { 4.226 + background-color: #f8f8f8; 4.227 +} 4.228 + 4.229 +.right_box { 4.230 + width: 50%; 4.231 + float: right; 4.232 +} 4.233 + 4.234 +/* Button */ 4.235 + 4.236 +.button { margin-left: 20px; } 4.237 + 4.238 +.button a { 4.239 + background-color: #b64b22; 4.240 + color: #ffffff; 4.241 + margin-right: 6px; 4.242 + padding: 6px 10px; 4.243 + font-size: 14px; 4.244 + -moz-border-radius: 4px; 4.245 + -webkit-border-radius: 4px; 4.246 + border-radius: 4px; 4.247 + -moz-box-shadow: 0 1px 3px #666; 4.248 + -webkit-box-shadow: 0 1px 3px #666; 4.249 + box-shadow: 0 1px 3px #666; 4.250 +} 4.251 + 4.252 +.button a:hover { 4.253 + background-color: #a3431f; 4.254 + color: #ffffff; 4.255 +} 4.256 + 4.257 /* Clouds */ 4.258 4.259 #cloud { 4.260 @@ -277,121 +357,47 @@ 4.261 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; } 4.262 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; } 4.263 4.264 -/* CSS class. */ 4.265 +/* Slideshow. */ 4.266 4.267 -.infobox { 4.268 - margin: 10px; 4.269 - padding: 12px; 4.270 - background: #f8f8f8; 4.271 - -moz-border-radius: 8px; 4.272 - -webkit-border-radius: 8px; 4.273 - border-radius: 8px; 4.274 - -moz-box-shadow: 0 1px 3px #666; 4.275 - -webkit-box-shadow: 0 1px 3px #666; 4.276 - box-shadow: 0 1px 3px #666; 4.277 +#slideshow 4.278 +{ 4.279 + overflow: hidden; 4.280 + margin: 10px auto 10px; 4.281 + position: relative; 4.282 + width: 260px; 4.283 + height: 163px; 4.284 } 4.285 4.286 -.imagebox { 4.287 - min-width: 300px; 4.288 - margin: 10px 15%; 4.289 - padding: 8px; 4.290 - background: transparent; 4.291 - text-align: center; 4.292 - /* CSS3 transition */ 4.293 - -webkit-transition-property: background-color; 4.294 - -webkit-transition-duration: 3s; 4.295 - -moz-transition-property: background-color; 4.296 - -moz-transition-duration: 3s; 4.297 - transition-property: background-color; 4.298 - transition-duration: 3s; 4.299 -} 4.300 - 4.301 -.imagebox:hover, .imagebox img { 4.302 - -moz-border-radius: 8px; 4.303 - -webkit-border-radius: 8px; 4.304 - border-radius: 8px; 4.305 - -moz-box-shadow: 0 1px 3px #666; 4.306 - -webkit-box-shadow: 0 1px 3px #666; 4.307 - box-shadow: 0 1px 3px #666; 4.308 -} 4.309 - 4.310 -.block { 4.311 - /*padding-bottom: 35%;*/ 4.312 - color: black; 4.313 - min-height: 200px; 4.314 -} 4.315 - 4.316 -.block h3 img { 4.317 - padding: 0 2px 2px 0; 4.318 - margin: 0; 4.319 -} 4.320 - 4.321 -.block ul { 4.322 - list-style-type: square; 4.323 -} 4.324 - 4.325 -.block_left { 4.326 - width: 46%; 4.327 - float: left; 4.328 - background-color: #eaeaea; 4.329 - margin: 4px 2px; 4.330 - padding: 0 6px; 4.331 -} 4.332 - 4.333 -.block_right { 4.334 - width: 46%; 4.335 - float: right; 4.336 - background-color: #eaeaea; 4.337 - margin: 4px 2px; 4.338 - padding: 0 6px; 4.339 -} 4.340 - 4.341 -.block_left, .block_right { 4.342 - -moz-border-radius: 8px; 4.343 - -webkit-border-radius: 8px; 4.344 - border-radius: 8px; 4.345 - -moz-box-shadow: 0 1px 3px #666; 4.346 - -webkit-box-shadow: 0 1px 3px #666; 4.347 - box-shadow: 0 1px 3px #666; 4.348 - /* CSS3 transition */ 4.349 - -webkit-transition-property: background-color; 4.350 - -webkit-transition-duration: 2s; 4.351 - -moz-transition-property: background-color; 4.352 - -moz-transition-duration: 2s; 4.353 - transition-property: background-color; 4.354 - transition-duration: 2s; 4.355 - /* For browsers that don't support RGBa 4.356 - background: rgb(0, 0, 0);*/ 4.357 - /* RGBa with 0.6 opacity 4.358 - background: rgba(0, 0, 0, 0.2);*/ 4.359 -} 4.360 - 4.361 -.block_left:hover, .block_right:hover, .imagebox:hover, #slidebox:hover { 4.362 - background-color: #f2b21d; 4.363 +#slideshow img 4.364 +{ 4.365 + border: 0; 4.366 + width: 260px; 4.367 + height: 163px; 4.368 } 4.369 4.370 /* HTML styles */ 4.371 4.372 h1 { 4.373 color: #444444; 4.374 - background: inherit; 4.375 + background: transparent; 4.376 text-align: left; 4.377 margin: 0px 0px 4px 0px; 4.378 font-size: 150%; 4.379 font-weight: bold; 4.380 + padding: 5px 0 0 10px; 4.381 } 4.382 4.383 h2 { 4.384 color: #b64b22; 4.385 padding: 0; 4.386 - margin: 4px 0 0 0; 4.387 + margin: 20px 0 0 0; 4.388 font-size: 130%; 4.389 font-weight: bold; 4.390 } 4.391 4.392 h3 { 4.393 font-weight: bold; 4.394 - color: #390012; 4.395 + color: #666666; 4.396 background: transparent; 4.397 } 4.398 4.399 @@ -399,11 +405,12 @@ 4.400 vertical-align: middle; 4.401 width: 20px; 4.402 height: 20px; 4.403 + padding-right: 4px; 4.404 } 4.405 4.406 a { 4.407 text-decoration: underline; 4.408 - color: #0F314E; 4.409 + color: #103A5E; 4.410 background: inherit; 4.411 } 4.412 4.413 @@ -486,3 +493,37 @@ 4.414 /* content: "2007-2011"; */ 4.415 content: "2011"; 4.416 } 4.417 + 4.418 +/* Footer */ 4.419 + 4.420 +#footer { 4.421 + margin: 0px 80px 80px 80px; 4.422 + padding: 10px; 4.423 + background: #eaeaea; 4.424 + color: #666666; 4.425 + height: 180px; 4.426 + border-radius: 8px; 4.427 + -moz-border-radius: 8px; 4.428 + -webkit-border-radius: 8px; 4.429 + -moz-box-shadow: 0 1px 3px #666; 4.430 + -webkit-box-shadow: 0 1px 3px #666; 4.431 + box-shadow: 0 1px 3px #666; 4.432 +} 4.433 +#footer a { 4.434 + background: inherit; 4.435 + color: #666666; 4.436 +} 4.437 +#footer a:hover { 4.438 + background: inherit; 4.439 + color: #333333; 4.440 +} 4.441 +#footer ul { 4.442 + list-style-type: none; 4.443 +} 4.444 +#footer li { 4.445 + padding: 2px; 4.446 +} 4.447 +#footer h4 { 4.448 + margin: 0 20px; 4.449 + font-size: 125%; 4.450 +}