updates; new layout idea

pages/bash.mako

@@ -6,12 +6,10 @@
     ]
 %>\
 <%def name="bash()">${choice(bashes)}</%def>\
-<%include file="/support/header.mako" args="environ=environ, title='Home'"/>
-            <div id="content">
-                <ul>
-                    % for bash in bashes:
-                        <li>${bash}</li>
-                    % endfor
-                </ul>
-            </div>
+<%include file="/support/header.mako" args="environ=environ, title='Bash'"/>
+            <ol>
+            % for bash in bashes:
+                <li>${bash}</li>
+            % endfor
+            </ol>
 <%include file="/support/footer.mako" args="environ=environ"/>

pages/copyvios.mako

@@ -0,0 +1,2 @@
+<%include file="/support/header.mako" args="environ=environ, title='Copyvio Detector'"/>
+<%include file="/support/footer.mako" args="environ=environ"/>

pages/debug.mako

@@ -1,9 +1,9 @@
-<%include file="/support/header.mako" args="environ=environ, title='Home'"/>
-            <div id="content">
-            % for key, value in environ.items():
-                % if key != "PATH":
-                    <p><b>${key}</b>: ${value}</p>
-                % endif
-            % endfor
-            </div>
+<%include file="/support/header.mako" args="environ=environ, title='Debug'"/>
+        <ul>
+        % for key, value in environ.items():
+            % if key not in ["wsgi.input", "wsgi.errors", "PATH"]:
+                <li><b>${key}</b>: ${value}</li>
+            % endif
+        % endfor
+        </ul>
 <%include file="/support/footer.mako" args="environ=environ"/>

pages/index.mako

@@ -1,4 +1,2 @@
-<%include file="/support/header.mako" args="environ=environ, title='Home'"/>
-            <div id="content">
-            </div>
+<%include file="/support/header.mako" args="environ=environ, title='Home', slug='home'"/>
 <%include file="/support/footer.mako" args="environ=environ"/>

pages/support/header.mako

@@ -1,10 +1,13 @@
-<%page args="environ, title"/>\
+<%page args="environ, title, slug=None"/>\
 <%!
     from os import path
 %>\
 <%
     root = path.dirname(environ["SCRIPT_NAME"])
+    this = environ["PATH_INFO"]
     pretty = path.split(root)[0]
+    if not slug:
+        slug = path.split(this)[1]
 %>\
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
@@ -14,4 +17,8 @@
         <link rel="stylesheet" href="${root}/static/css/main.css" type="text/css" />
     </head>
     <body>
+        <div id="header">
+            <h1 id="head"><a class="dark" href="${pretty}">earwig</a><span class="light">@</span><a class="mid" href="http://wiki.toolserver.org/">toolserver</a><span class="light">:</span><a class="dark" href="${this}">${slug}</a></h1>
+            <h2 id="links"><span class="light">&gt;</span> <a class="dark" href="${pretty}/index">home</a> <span class="light">&#124;</span> <a class="dark" href="${pretty}/copyvios">copyvios</a></h2> 
+        </div>
         <div id="container">

static/css/main.css

@@ -2,19 +2,26 @@ body {
     font-family: helvetica, arial, clean, sans-serif;
     font-size: 14px;
     color: #000;
-    background-color: #EEE;
+    background-color: #E0E0E0;
 }
 
-div#container {
-    width: 800px;
-    margin: 20px auto 90px auto;
+ul, ol {
+    line-height: 1.75;
+}
+
+div#header {
+    margin: 20px;
+    padding: 2px 15px 2px 15px;
     border: 1px solid #999;
-    border-radius: 10px;
     background-color: #FFF;
 }
 
-div#content {
+div#container {
+    line-height: 1.5;
+    margin: 0 20px 90px 20px;
     padding: 2px 15px 2px 15px;
+    border: 1px solid #999;
+    background-color: #FFF;
 }
 
 div#footer {
@@ -39,17 +46,34 @@ div#foot-divider {
     border-bottom: 1px solid #999;
 }
 
+h1#head {
+    font-size: 3em;
+    margin: 15px 0 12px 0;
+}
+
+h2#links {
+    font-size: 1.75em;
+    margin: 8px 0 8px 0;
+}
+
 table#footer-box {
     width: 100%;
     height: 100%;
 }
 
-a:link { color: #373; text-decoration: none; }
+span.light { color: #CCC; }
+
+a:link    { color: #373; text-decoration: none; }
 a:visited { color: #373; text-decoration: none; }
-a:hover { color: #040; text-decoration: underline; }
-a:active { color: #404; text-decoration: underline; }
+a:hover   { color: #040; text-decoration: underline; }
+a:active  { color: #404; text-decoration: underline; }
+
+a.dark:link    { color: #777; }
+a.dark:visited { color: #777; }
+a.dark:hover   { color: #555; }
+a.dark:active  { color: #333; }
 
-a.incognito:link { color: #000; text-decoration: none; }
-a.incognito:visited { color: #000; text-decoration: none; }
-a.incognito:hover { color: #000; text-decoration: underline; }
-a.incognito:active { color: #000; text-decoration: none; }
+a.mid:link    { color: #AAA; }
+a.mid:visited { color: #AAA; }
+a.mid:hover   { color: #888; }
+a.mid:active  { color: #666; }