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