# HG changeset patch # User Christophe Lincoln # Date 1294009294 -3600 # Node ID 20cb71cc862f3265f338ea6d720261a021860230 # Parent e681209feb6075835867febe34ebb37a8629a681 tazpkg-web: Update CSS style diff -r e681209feb60 -r 20cb71cc862f tazpkg-web/stuff/html/header.html --- a/tazpkg-web/stuff/html/header.html Sun Jan 02 08:22:10 2011 +0000 +++ b/tazpkg-web/stuff/html/header.html Mon Jan 03 00:01:34 2011 +0100 @@ -26,5 +26,5 @@ -

#!/tazpkg/packages

+

#!/Packages

diff -r e681209feb60 -r 20cb71cc862f tazpkg-web/stuff/html/menu.html --- a/tazpkg-web/stuff/html/menu.html Sun Jan 02 08:22:10 2011 +0000 +++ b/tazpkg-web/stuff/html/menu.html Mon Jan 03 00:01:34 2011 +0100 @@ -26,9 +26,9 @@

SliTaz Network

diff -r e681209feb60 -r 20cb71cc862f tazpkg-web/stuff/style/pics/website/header-img.png Binary file tazpkg-web/stuff/style/pics/website/header-img.png has changed diff -r e681209feb60 -r 20cb71cc862f tazpkg-web/stuff/style/pics/website/header.png Binary file tazpkg-web/stuff/style/pics/website/header.png has changed diff -r e681209feb60 -r 20cb71cc862f tazpkg-web/stuff/style/pics/website/logo.png Binary file tazpkg-web/stuff/style/pics/website/logo.png has changed diff -r e681209feb60 -r 20cb71cc862f tazpkg-web/stuff/style/slitaz.css --- a/tazpkg-web/stuff/style/slitaz.css Sun Jan 02 08:22:10 2011 +0000 +++ b/tazpkg-web/stuff/style/slitaz.css Mon Jan 03 00:01:34 2011 +0100 @@ -12,6 +12,7 @@ color: black; font: 13px sans-serif, vernada, arial; margin: 0; + border-top: 34px solid #f1f1f1; } /* Accessibility */ @@ -19,57 +20,62 @@ #access { position: absolute; top: 4px; - right: 4px; + right: 0px; text-align: right; - width: 100%; + width: auto; margin: 0; + padding: 4px 4px 4px 20px; font-size: 11px; font-weight: bold; } #access a { - background: inherit; - color: white; + background: transparent; + color: #0F314E; text-decoration: none; } #access a:hover { background: inherit; - color: #222222; + color: #b64b22; } /* Header and title */ #header{ - background: #f0ba08 url(pics/website/header.png) repeat-x top; + /*background: #f0ba08 url(pics/website/header.png) repeat-x top;*/ + background: #351a0a url(pics/website/header-img.png) no-repeat top right; color: black; width: 100%; - height: 50px; + height: 42px; border-top: 1px solid black; border-bottom: 1px solid black; margin-bottom: 30px; + -moz-box-shadow: 0 1px 5px #333; + -webkit-box-shadow: 0 1px 5px #333; + box-shadow: 0 1px 5px #333; } #titre { position: absolute; - font-size: 16px; + font-size: 14px; font-weight: bolder ; - margin-left: 200px; - margin-top: 28px; + left: 180px; + top: 4px; } #logo { position: absolute; float: left; - margin-left: 16px; - margin-top: 0px; + left: 16px; + top: -10px; } /* Navigation */ #nav { position: absolute; - top: 76px; + top: 102px; right: 80px; color: #555555; float: right; @@ -79,19 +85,11 @@ font-size: 12px; } -#nav ul { - -moz-border-radius: 8px; - -webkit-border-radius: 8px; - list-style-type: none; - margin: 10px 0; - padding: 10px 24px 10px 24px; - background-color: #eaeaea; -} - #nav .nav_box ul { list-style-type: none; margin: 0; padding: 10px 24px 10px 0px; + background-color: inherit; } #nav li { @@ -99,7 +97,7 @@ } #nav h4 { - font-size: 110%; + font-size: 120%; color: #666666; font-weight: bold; margin: 0; @@ -116,7 +114,7 @@ } #nav a:hover { - color: #DF8F06; + color: #b64b22; text-decoration: none; display: block; } @@ -125,18 +123,39 @@ margin: 2px 0px 1px 0px; border: 0px; border-top: 1px solid #BDBDBD; +} +#nav ul { + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + list-style-type: none; + margin: 10px 0; + padding: 10px 24px 10px 24px; + background-color: #eaeaea; } .nav_box { - -moz-border-radius: 8px; - -webkit-border-radius: 8px; margin: 10px 0; padding: 10px 24px 10px 24px; background-color: #eaeaea; text-align: justify; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; + -moz-box-shadow: 0 1px 3px #666; + -webkit-box-shadow: 0 1px 3px #666; + box-shadow: 0 1px 3px #666; + /* CSS3 transition */ + -webkit-transition-property: background-color; + -webkit-transition-duration: 2s; + -moz-transition-property: background-color; + -moz-transition-duration: 2s; + transition-property: background-color; + transition-duration: 2s; } +.nav_box:hover { background-color: #f8f8f8; } + #nav .nav_box p { line-height: 1.3em; } @@ -160,19 +179,25 @@ /* Page content */ -#content, #content_bottom, #content_top { +#content { background: white; color: black; text-align: justify; -} - -#content { height: auto; margin: 6px 320px 0px 0px; padding: 0px 40px 60px 80px; } -#content li { +#content-full { + background: white; + color: black; + text-align: justify; + height: auto; + margin: 6px 0px 0px 0px; + padding: 0px 80px 35% 80px; +} + +#content li, #content-full li { line-height: 1.5em; text-align: left; } @@ -219,6 +244,10 @@ padding: 4px 0px 4px 0px; } +#news a { + text-decoration: none; +} + #gallery { text-align: center; } @@ -251,37 +280,117 @@ .infobox { margin: 10px; padding: 12px; - background: #f2f2f2; - border: 1px solid #eaeaea; + background: #f8f8f8; -moz-border-radius: 8px; -webkit-border-radius: 8px; + border-radius: 8px; + -moz-box-shadow: 0 1px 3px #666; + -webkit-box-shadow: 0 1px 3px #666; + box-shadow: 0 1px 3px #666; +} + +.imagebox { + min-width: 300px; + margin: 10px 15%; + padding: 8px; + background: transparent; + text-align: center; + /* CSS3 transition */ + -webkit-transition-property: background-color; + -webkit-transition-duration: 3s; + -moz-transition-property: background-color; + -moz-transition-duration: 3s; + transition-property: background-color; + transition-duration: 3s; +} + +.imagebox:hover, .imagebox img { + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; + -moz-box-shadow: 0 1px 3px #666; + -webkit-box-shadow: 0 1px 3px #666; + box-shadow: 0 1px 3px #666; +} + +.block { + /*padding-bottom: 35%;*/ + color: black; + min-height: 200px; +} + +.block h3 img { + padding: 0 2px 2px 0; + margin: 0; +} + +.block ul { + list-style-type: square; +} + +.block_left { + width: 46%; + float: left; + background-color: #eaeaea; + margin: 4px 2px; + padding: 0 6px; +} + +.block_right { + width: 46%; + float: right; + background-color: #eaeaea; + margin: 4px 2px; + padding: 0 6px; +} + +.block_left, .block_right { + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; + -moz-box-shadow: 0 1px 3px #666; + -webkit-box-shadow: 0 1px 3px #666; + box-shadow: 0 1px 3px #666; + /* CSS3 transition */ + -webkit-transition-property: background-color; + -webkit-transition-duration: 2s; + -moz-transition-property: background-color; + -moz-transition-duration: 2s; + transition-property: background-color; + transition-duration: 2s; + /* For browsers that don't support RGBa + background: rgb(0, 0, 0);*/ + /* RGBa with 0.6 opacity + background: rgba(0, 0, 0, 0.2);*/ +} + +.block_left:hover, .block_right:hover, .imagebox:hover, #slidebox:hover { + background-color: #f2b21d; } /* HTML styles */ h1 { - color: blue; + color: #444444; background: inherit; text-align: left; - margin: 0px 0px 10px 0px; - font-size: 140%; + margin: 0px 0px 4px 0px; + font-size: 150%; font-weight: bold; } h2 { - color: #DF8F06; - /* border-top: 1px solid #f3f3f3; */ - border-left: 8px solid #f3f3f3; - padding: 4px 0px 4px 4px; - margin: 0; - font-size: 140%; + color: #b64b22; + padding: 0; + margin: 4px 0 0 0; + font-size: 130%; font-weight: bold; } h3 { font-weight: bold; - color: #6c0023; - background: inherit; + color: #390012; + background: transparent; } a { @@ -364,3 +473,88 @@ background: #F3F3F3; border: 1px solid #DEDEDE; } + +.year:after { + /* content: "2007-2010"; */ + content: "2010"; +} + +/* Slideshow */ + +@-webkit-keyframes 'AutoSlide' { + 0% { + left: 0px; /*1ère image*/ + } + 10% { + left: 0px; /*idem pour attente*/ + } + 25% { + left: -240px; /*2ème image*/ + } + 35% { + left: -240px; /*idem pour attente*/ + } + 70% { + left: -480px; /*3ème image*/ + } + 75% { + left: -480px; /*idem pour attente*/ + } + 80% { + left: -720px; /*idem pour attente*/ + } + 90% { + left: -720px; /*idem pour attente*/ + } + 100% { + left: 0px; /*1ère image*/ + } +} + +#slidebox { + margin: 10px 15%; + padding: 8px; + min-width: 300px; + /* CSS3 transition */ + -webkit-transition-property: background-color; + -webkit-transition-duration: 3s; + -moz-transition-property: background-color; + -moz-transition-duration: 3s; + transition-property: background-color; + transition-duration: 3s; +} +#slidebox:hover { + -moz-box-shadow: 0 1px 3px #666; + -webkit-box-shadow: 0 1px 3px #666; + box-shadow: 0 1px 3px #666; +} +#slidebox:hover, #slidebox img { + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; +} + +#slideshow { + position: relative; + width: 240px; + height: 150px; + margin: 10px auto; + overflow: hidden; +} + +#sContent li { + display: inline; +} +#sContent { + position: absolute; + top: 0; + left: 0; + width: 1000px; + margin: 0; + padding: 0; + /*CSS3 keyframes animation*/ + -webkit-animation-name: AutoSlide; + -webkit-animation-duration: 10s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: ease-in-out; +}