# HG changeset patch # User Christophe Lincoln # Date 1294751254 -3600 # Node ID 84af4a5de08951e8cb759477a4e4b1178d87df58 # Parent 65cf4ba258b7ac30c0f2e1794c24cf25a69547d7 Up: tazpkg-web (2.0) - Up CSS and layout diff -r 65cf4ba258b7 -r 84af4a5de089 tazpkg-web/receipt --- a/tazpkg-web/receipt Tue Jan 11 13:40:16 2011 +0100 +++ b/tazpkg-web/receipt Tue Jan 11 14:07:34 2011 +0100 @@ -1,7 +1,7 @@ # SliTaz package receipt. PACKAGE="tazpkg-web" -VERSION="1.1" +VERSION="2.0" CATEGORY="network" SHORT_DESC="SliTaz packages Web interfaces (http://pkgs.slitaz.org/)." MAINTAINER="pankso@slitaz.org" diff -r 65cf4ba258b7 -r 84af4a5de089 tazpkg-web/stuff/html/footer.html --- a/tazpkg-web/stuff/html/footer.html Tue Jan 11 13:40:16 2011 +0100 +++ b/tazpkg-web/stuff/html/footer.html Tue Jan 11 14:07:34 2011 +0100 @@ -1,26 +1,32 @@ - + - -
-

-Last modification : _DATE_ - -Top of the page -

-

-Copyright © _YEAR_ SliTaz - -GNU General Public License -

-
- - -
-

-Valid XHTML 1.0 -

+ + diff -r 65cf4ba258b7 -r 84af4a5de089 tazpkg-web/stuff/html/header.html --- a/tazpkg-web/stuff/html/header.html Tue Jan 11 13:40:16 2011 +0100 +++ b/tazpkg-web/stuff/html/header.html Tue Jan 11 14:07:34 2011 +0100 @@ -15,16 +15,16 @@ - - + + - + diff -r 65cf4ba258b7 -r 84af4a5de089 tazpkg-web/stuff/search.cgi --- a/tazpkg-web/stuff/search.cgi Tue Jan 11 13:40:16 2011 +0100 +++ b/tazpkg-web/stuff/search.cgi Tue Jan 11 14:07:34 2011 +0100 @@ -238,21 +238,15 @@ - + _EOF_ } @@ -265,34 +259,35 @@ $(ls $WOK/ | wc -l) packages and $(unlzma -c $PACKAGES_REPOSITORY/files.list.lzma | wc -l) files in $SLITAZ_VERSION database - -
-
-
-
+
- -
-

-Dernière modification : $DATE - -Top of the page -

-

-Copyright © $(date +%Y) SliTaz - -GNU General Public License -

- -
- - -
-

-Valid XHTML 1.0 -

+ + @@ -423,18 +418,11 @@ xhtml_header cat << _EOT_ - -
-
-
-
-
- -

$package

-

$search

+

$package

+

$search

_EOT_ search_form xhtml_footer @@ -442,18 +430,11 @@ xhtml_header cat << _EOT_ - -
-
-
-
-
- -

$package

-

$search

+

$package

+

$search

_EOT_ search_form if [ "$OBJECT" = "Depends" ]; then diff -r 65cf4ba258b7 -r 84af4a5de089 tazpkg-web/stuff/style/pics/website/header-img.png Binary file tazpkg-web/stuff/style/pics/website/header-img.png has changed diff -r 65cf4ba258b7 -r 84af4a5de089 tazpkg-web/stuff/style/slitaz.css --- a/tazpkg-web/stuff/style/slitaz.css Tue Jan 11 13:40:16 2011 +0100 +++ b/tazpkg-web/stuff/style/slitaz.css Tue Jan 11 14:07:34 2011 +0100 @@ -1,10 +1,10 @@ /* CSS style for SliTaz GNU/Linux website - www.slitaz.org - (c) 2007 Pankso + www.slitaz.org - (c) 2011 Pankso */ html { - height: 102%; + min-height: 102%; } body { @@ -40,20 +40,21 @@ color: #b64b22; } +#access img { + vertical-align: middle; +} + /* Header and title */ -#header{ +#header { /*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: 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; + border-bottom: 1px solid #999; + margin-bottom: 33px; } #titre { @@ -69,9 +70,11 @@ float: left; left: 16px; top: -10px; + width: 200px; + height: 74px; } -/* Navigation */ +/* Side bar Navigation */ #nav { position: absolute; @@ -119,15 +122,10 @@ display: block; } -#nav hr { - margin: 2px 0px 1px 0px; - border: 0px; - border-top: 1px solid #BDBDBD; -} - #nav ul { -moz-border-radius: 8px; -webkit-border-radius: 8px; + border-radius: 8px; list-style-type: none; margin: 10px 0; padding: 10px 24px 10px 24px; @@ -172,11 +170,6 @@ background: inherit; } -#nav hr { - height: 0px; - border: 0px solid #eaeaea; -} - /* Page content */ #content { @@ -193,8 +186,8 @@ color: black; text-align: justify; height: auto; - margin: 6px 0px 0px 0px; - padding: 0px 80px 35% 80px; + margin: 0; + padding: 0px 80px 40px 80px; } #content li, #content-full li { @@ -202,41 +195,6 @@ text-align: left; } -/* Legal informations */ - -#copy { - font-size: 11px ; - text-align: left ; - background: transparent; - color: #a8a8a8; - padding-top: 10px; - margin: 0 0 0 80px; -} - -#copy a { - background: inherit; - color: #a8a8a8; -} - -#copy a:hover { - background: inherit; - color: #666666; -} - -/* Footer */ - -#bottom { - float: none; - background: inherit; - color: black; - width: auto; - clear: both; - padding: 0; - margin: 0 0 0 80px; - text-align: left; - vertical-align: middle; -} - #news li { list-style-type: square; border-bottom: 1px dotted #BEBEBE; @@ -252,80 +210,29 @@ text-align: center; } -#gallery table { - margin: 30px 0px 30px 0px; +/* Box and block. */ + +.infobox { + margin: 20px 60px; + padding: 12px; + background: #f8f8f8; } -/* Clouds */ - -#cloud { - padding: 20px 0px 20px 0px; - line-height: 3em; - text-align: center; -} -#cloud a { padding: 4px; color: #956411; } -#cloud a.tag1 { font-size: 0.7em; font-weight: 100; } -#cloud a.tag2 { font-size: 0.8em; font-weight: 200; } -#cloud a.tag3 { font-size: 0.9em; font-weight: 300; } -#cloud a.tag4 { font-size: 1.0em; font-weight: 400; } -#cloud a.tag5 { font-size: 1.2em; font-weight: 500; } -#cloud a.tag6 { font-size: 1.4em; font-weight: 600; } -#cloud a.tag7 { font-size: 1.6em; font-weight: 700; } -#cloud a.tag8 { font-size: 1.8em; font-weight: 800; } -#cloud a.tag9 { font-size: 2.2em; font-weight: 900; } -#cloud a.tag10 { font-size: 2.5em; font-weight: 900; } - -/* CSS class. */ - -.infobox { - margin: 10px; - padding: 12px; - 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; -} +.infobox img { vertical-align: middle; } +/* .infobox:hover { background-color: #f2b21d; } */ +.infobox:hover { background-color: #FBFBFB; } .block { /*padding-bottom: 35%;*/ color: black; min-height: 200px; -} - -.block h3 img { - padding: 0 2px 2px 0; - margin: 0; + margin-bottom: 40px; } .block ul { - list-style-type: square; + list-style-type: none; + margin: 0; + padding: 0 20px; } .block_left { @@ -333,7 +240,7 @@ float: left; background-color: #eaeaea; margin: 4px 2px; - padding: 0 6px; + padding: 0 10px 10px 10px; } .block_right { @@ -341,10 +248,28 @@ float: right; background-color: #eaeaea; margin: 4px 2px; - padding: 0 6px; + padding: 0 10px 10px 10px; } -.block_left, .block_right { +#block_top { + color: black; + background-color: #eaeaea; + min-height: 180px; + margin-bottom: 40px; + margin-right: 340px; + padding: 0 10px; +} + +#block_nav { + width: 300px; + min-height: 180px; + float: right; + background-color: #eaeaea; + margin: 0; + padding: 0 10px; +} + +.infobox, .block_left, .block_right, #block_top, #block_nav, #footer { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; @@ -358,44 +283,178 @@ -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; +#block_nav { + font-weight: bold; +} + +#block_nav a { + text-decoration: none; +} + +#block_nav li a:hover { + color: #b64b22; +} + +#block_nav ul { + margin: 0; + list-style-type: none; +} + +#block_nav h3 { + font-size: 110%; +} + +.block_left:hover, .block_right:hover, #block_top:hover, +#block_nav:hover, #footer:hover { + background-color: #f8f8f8; +} + +.right_box { + width: 50%; + float: right; +} + +.floor { + color: #999999; + font-size: 20px; + -webkit-transform: rotate(-45deg) skew(15deg, 15deg); + -moz-transform: rotate(-45deg) skew(15deg, 15deg); + -o-transform: rotate(-45deg) skew(15deg, 15deg); + -ms-transform: rotate(-45deg) skew(15deg, 15deg); + transform: rotate(-45deg) skew(15deg, 15deg); +} + +/* Button */ + +.button { margin-left: 20px; } + +.button a { + background-color: #b64b22; + color: #ffffff; + margin-right: 6px; + padding: 6px 10px; + font-size: 14px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + -moz-box-shadow: 0 1px 3px #666; + -webkit-box-shadow: 0 1px 3px #666; + box-shadow: 0 1px 3px #666; +} + +.button a:hover, input[type=submit]:hover { + background-color: #a3431f; + color: #ffffff; +} + +input[type=submit] { + border: 1px solid #b64b22; + background-color: #b64b22; + color: white; + font-weight: bold; + cursor: pointer; + padding: 2px 10px; + font-size: 14px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + -moz-box-shadow: 0 0 5px #666; + -webkit-box-shadow: 0 0 5px#666; + box-shadow: 0 0 5px #666; +} + +input[type=text] { + border: 1px solid #333333; + padding: 3px; + width: 100%; + max-width: 500px; +} + +/* Clouds */ + +#cloud { + padding: 10px 0px; + line-height: 3em; + text-align: center; +} +#cloud a { padding: 0 2px; color: #956411; } +#cloud a.tag1 { font-size: 0.7em; font-weight: 100; } +#cloud a.tag2 { font-size: 0.8em; font-weight: 200; } +#cloud a.tag3 { font-size: 0.9em; font-weight: 300; } +#cloud a.tag4 { font-size: 1.0em; font-weight: 400; } +#cloud a.tag5 { font-size: 1.2em; font-weight: 500; } +#cloud a.tag6 { font-size: 1.4em; font-weight: 600; } +#cloud a.tag7 { font-size: 1.6em; font-weight: 700; } +#cloud a.tag8 { font-size: 1.8em; font-weight: 800; } +#cloud a.tag9 { font-size: 2.2em; font-weight: 900; } +#cloud a.tag10 { font-size: 2.5em; font-weight: 900; } + +/* Slideshow. */ + +#slideshow +{ + overflow: hidden; + margin: 10px auto 10px; + position: relative; + width: 260px; + height: 163px; +} + +#slideshow img +{ + border: 0; + width: 260px; + height: 163px; +} + +#twitter { + margin-top: 20px; + -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; } /* HTML styles */ h1 { color: #444444; - background: inherit; + background: transparent; text-align: left; margin: 0px 0px 4px 0px; font-size: 150%; font-weight: bold; + padding: 5px 0 0 10px; } h2 { color: #b64b22; padding: 0; - margin: 4px 0 0 0; + margin: 20px 0 0 0; font-size: 130%; font-weight: bold; } h3 { font-weight: bold; - color: #390012; + color: #666666; background: transparent; } + +h3 img { + vertical-align: middle; + width: 20px; + height: 20px; + padding-right: 4px; +} a { text-decoration: underline; - color: #0F314E; + color: #103A5E; background: inherit; } @@ -472,89 +531,57 @@ color: black; background: #F3F3F3; border: 1px solid #DEDEDE; + border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; +} + +p.get a { + font-weight: bold; + text-decoration: none; +} + +.pkgs-search { + text-align: center; + padding: 40px 20px 80px 20px; } .year:after { - /* content: "2007-2010"; */ - content: "2010"; + /* content: "2007-2011"; */ + content: "2011"; } -/* Slideshow */ +/* Footer */ -@-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 { +#footer { + margin: 0px 80px 80px 80px; + padding: 10px; + background: #eaeaea; + color: #666666; + height: 180px; + clear: both; + border-radius: 8px; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; -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; +#footer a { + background: inherit; + color: #666666; } - -#slideshow { - position: relative; - width: 240px; - height: 150px; - margin: 10px auto; - overflow: hidden; +#footer a:hover { + background: inherit; + color: #333333; } - -#sContent li { - display: inline; +#footer ul { + list-style-type: none; } -#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; +#footer li { + padding: 2px; } +#footer h4 { + margin: 0 20px; + font-size: 125%; +} diff -r 65cf4ba258b7 -r 84af4a5de089 tazpkg-web/stuff/tazpkg-web --- a/tazpkg-web/stuff/tazpkg-web Tue Jan 11 13:40:16 2011 +0100 +++ b/tazpkg-web/stuff/tazpkg-web Tue Jan 11 14:07:34 2011 +0100 @@ -49,18 +49,11 @@ { cat >> $PAGES_DIR/$page.html << _EOF_ - -
-
-
-
-
- -

Packages $RELEASE

-

$h2

+

Packages $RELEASE

+

$h2

_EOF_ }