new layout based on YUI CSS reset/fonts/grids

6 files changed, 59 insertions, 26 deletions

diff --git a/root/ttsite.css b/root/static/style/ttsite.css
index 2c0f26f..2c0f26f 100644
--- a/root/ttsite.css
+++ b/root/static/style/ttsite.css
diff --git a/root/static/style/yui/base-min.css b/root/static/style/yui/base-min.css
new file mode 100644
index 0000000..c354440
--- /dev/null
+++ b/root/static/style/yui/base-min.css
@@ -0,0 +1,7 @@
+/*
+Copyright (c) 2010, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 2.8.2r1
+*/
+body{margin:10px;}h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong,dt{font-weight:bold;}optgroup{font-weight:normal;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;}em{font-style:italic;}del{text-decoration:line-through;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}sup{vertical-align:super;}sub{vertical-align:sub;}p,fieldset,table,pre{margin-bottom:1em;}button,input[type="checkbox"],input[type="radio"],input[type="reset"],input[type="submit"]{padding:1px;}
\ No newline at end of file
diff --git a/root/static/style/yui/reset-fonts-grids.css b/root/static/style/yui/reset-fonts-grids.css
new file mode 100644
index 0000000..70bf2a0
--- /dev/null
+++ b/root/static/style/yui/reset-fonts-grids.css
@@ -0,0 +1,7 @@
+/*
+Copyright (c) 2010, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 2.8.2r1
+*/
+html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}body{text-align:center;}#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.25em;}#doc2{width:73.076em;*width:71.25em;}#doc3{margin:auto 10px;width:auto;}#doc4{width:74.923em;*width:73.05em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main,.yui-g .yui-u .yui-g{width:100%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.30769em;*width:12.00em;}.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}.yui-t2 .yui-b{float:left;width:13.8461em;*width:13.50em;}.yui-t2 #yui-main .yui-b{margin-left:14.8461em;*margin-left:14.55em;}.yui-t3 .yui-b{float:left;width:23.0769em;*width:22.50em;}.yui-t3 #yui-main .yui-b{margin-left:24.0769em;*margin-left:23.62em;}.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.50em;}.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.55em;}.yui-t5 .yui-b{float:right;width:18.4615em;*width:18.00em;}.yui-t5 #yui-main .yui-b{margin-right:19.4615em;*margin-right:19.125em;}.yui-t6 .yui-b{float:right;width:23.0769em;*width:22.50em;}.yui-t6 #yui-main .yui-b{margin-right:24.0769em;*margin-right:23.62em;}.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}#yui-main .yui-b{float:none;width:auto;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;}.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{width:32%;margin-left:1.99%;}.yui-gb .yui-u{*margin-left:1.9%;*width:31.9%;}.yui-gc div.first,.yui-gd .yui-u{width:66%;}.yui-gd div.first{width:32%;}.yui-ge div.first,.yui-gf .yui-u{width:74.2%;}.yui-ge .yui-u,.yui-gf div.first{width:24%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}.yui-g .yui-g .yui-u{width:48.1%;}.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}.yui-g .yui-gc div.first,.yui-gd .yui-g{width:66%;}.yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}.yui-g .yui-gb .yui-u{_margin-left:1.0%;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}.yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;}.yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-g{width:24%;}.yui-gf .yui-g{width:74.2%;}.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{float:right;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first{float:left;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}.yui-ge div.first .yui-gd .yui-u{width:65%;}.yui-ge div.first .yui-gd div.first{width:32%;}#hd:after,#bd:after,#ft:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#hd,#bd,#ft,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}
\ No newline at end of file
diff --git a/root/template/header b/root/template/header
index 84b795d..9bfe555 100644
--- a/root/template/header
+++ b/root/template/header
@@ -6,7 +6,10 @@
         <li><a href="[% c.uri_for(page.page) %]">[% page.title %]</a></li>
     [% END %]
     [% IF c.user.username %]
-        <li>[ <a href="[% c.uri_for("/user") %]">[% c.user.username %]</a> ]<a href="/user/logout">[% l('Log out') %]</a></li>
+        <li><strong><a href="[% c.uri_for("/user") %]">[% c.user.username %]</a></strong></li>
+        <li><a href="/user/logout">[% l('Log out') %]</a></li>
+    [% ELSE %]
+        <li><a href="/">[% l('Login') %]</a></li>
     [% END %]
     </ul>
 </div>
diff --git a/root/template/html b/root/template/html
index 93488ef..abac43a 100644
--- a/root/template/html
+++ b/root/template/html
@@ -4,9 +4,12 @@
 <head>
     <meta charset="utf-8" />
     <title>[% template.title or site.title or c.config.apptitle %]</title>
-    <meta content="description" value="" />
+    <meta content="description" value="Mageia.org online user account panel" />
+    <meta content="keywords" value="mageia, user, account, password" />
     <meta content="robots" value="index,nofollow" />
-    <link rel="stylesheet" href="/ttsite.css" />
+    <link rel="stylesheet" type="text/css" href="/static/style/yui/reset-fonts-grids.css">
+    <link rel="stylesheet" type="text/css" href="/static/style/yui/base-min.css">
+    <link rel="stylesheet" type="text/css" href="/static/style/ttsite.css" />
 </head>
 <body>
 [% content %]
diff --git a/root/template/layout b/root/template/layout
index 8c80b34..a097a47 100644
--- a/root/template/layout
+++ b/root/template/layout
@@ -1,24 +1,37 @@
-<div id="header">[% PROCESS template/header %]</div>
-
-<ul id="nav">
-[% FOREACH subpage IN subpages %]
-    <li><a href="[% c.uri_for(subpage.page) %]">[% l(subpage.title) %]</a></li>
-[% END %]
-</ul>
-
-<div class="inside">
-[% IF errors %]
-    <span class="error">
-    [% FOREACH error IN errors %]
-        [% error %]
-        <br/>
-    [% END %]
-    </span>
-[% END %]
+<div id="doc4" class="yui-t7">
+    <div id="hd" role="banner">
+    [% PROCESS template/header %]
+    </div>
+    <div id="bd" role="main">
+        <div class="yui-g">
+            <ul id="nav">
+            [% FOREACH subpage IN subpages %]
+                <li><a href="[% c.uri_for(subpage.page) %]">[% l(subpage.title) %]</a></li>
+            [% END %]
+            </ul>
+            
+            <div class="inside">
+            [% IF errors %]
+                <span class="error">
+                [% FOREACH error IN errors %]
+                    [% error %]
+                    <br/>
+                [% END %]
+                </span>
+            [% END %]
+            </div>
+            <div id="content">[% content %]</div>
+        </div>
+        <div class="yui-g">
+            <div class="yui-u first">
+            <!-- YOUR DATA GOES HERE -->
+            </div>
+            <div class="yui-u">
+            <!-- YOUR DATA GOES HERE -->
+            </div>
+        </div>
+    </div>
+    <div id="ft" role="contentinfo">
+    [% PROCESS template/footer %]
+    </div>
 </div>
-
-<div id="content">
-    [% content %]
-</div>
-
-<div id="footer">[% PROCESS template/footer %]</div>