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
     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>

     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 +}
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