Changed the header and link presentation.

www/css/ts-screen.css

@@ -51,7 +51,24 @@ body {
   border-style: solid;
   border-width: 0.2em;
   border-bottom-width: 0;
-  padding: 0.1em 1em 0.1em 1em; }
+  padding: 0.1em 1em 0.1em 1em;
+  overflow: hidden; }
+  .bar div.control-links {
+    color: #979681;
+    float: right;
+    display: block;
+    height: 100%;
+    font-weight: bold;
+    font-size: smaller; }
+    .bar div.control-links:hover {
+      color: #252d42; }
+    .bar div.control-links a {
+      color: inherit;
+      text-decoration: none;
+      margin-right: 0.5em; }
+      .bar div.control-links a:hover {
+        color: #b34c2b;
+        text-decoration: underline; }
 
 .last-bar {
   border-bottom-width: 0.2em;
@@ -62,53 +79,32 @@ body {
   -webkit-border-bottom-left-radius: 0.5em;
   border-bottom-left-radius: 0.5em; }
 
-.control-links {
-  margin: 0;
-  padding: 0;
-  list-style-type: none; }
-  .control-links li {
-    margin: 0;
-    padding: 0; }
-    .control-links li a {
-      text-decoration: none; }
-
 #user {
-  font-weight: bold;
   -moz-border-radius-topleft: 0.5em;
   -webkit-border-top-left-radius: 0.5em;
   border-top-left-radius: 0.5em;
   -moz-border-radius-topright: 0.5em;
   -webkit-border-top-right-radius: 0.5em;
   border-top-right-radius: 0.5em; }
-  #user div {
-    overflow: hidden;
-    margin: 0;
-    padding: 0; }
   #user #fullname, #user #username {
-    text-decoration: none;
+    font-weight: bold;
     font-size: x-large;
-    color: #252d42; }
-    #user #fullname:hover, #user #username:hover {
-      text-decoration: underline;
-      color: #4a5a83; }
-  #user #show-user-link, #user #fullname {
     float: left; }
-  #user #logout-link, #user #username {
-    float: right; }
+  #user #username {
+    padding-left: 0.2em;
+    color: #626150; }
+  #user .control-links {
+    padding-top: 0.6em; }
 
 #user-info {
   display: none; }
 
-#timeline {
+#timeline #timeline-name, #timeline #timeline-desc {
   font-weight: bold; }
-  #timeline #timeline-name {
-    text-decoration: none;
-    color: #252d42; }
-    #timeline #timeline-name:hover {
-      text-decoration: underline;
-      color: #4a5a83; }
-  #timeline #timeline-desc {
-    color: #626150; }
+#timeline #timeline-desc {
+  color: #626150; }
+#timeline .control-links {
+  padding-top: 0.2em; }
 
 #timeline-info {
   display: none; }

www/css/ts-screen.scss

@@ -62,6 +62,30 @@ body {
     border-width: $iBorWidth;
     border-bottom-width: 0;
     padding: 0.1em 1em 0.1em 1em;
+    overflow: hidden;
+
+    div.control-links {
+
+        color: lighten($greyTxt, 20%);
+        float: right;
+        display: block;
+        height: 100%;
+        font-weight: bold;
+        font-size: smaller;
+
+        &:hover { color: $txt; }
+
+        a {
+            color: inherit; //lighten($greyTxt, 20%);
+            text-decoration: none;
+            margin-right: 0.5em;
+            &:hover {
+                color: $obor;
+                text-decoration: underline;
+            }
+        }
+    }
+
 }
 
 .last-bar {
@@ -70,56 +94,23 @@ body {
     @include rounded2(bottom, left, 0.5em);
 }
 
-.left-header {
-}
-
-.right-header {
-}
-
-.control-links {
-
-    li {
-
-        a {
-            text-decoration: none
-        }
-
-        margin: 0;
-        padding: 0;
-    }
-    
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-
-}
-
 #user {
 
-    div { 
-        overflow: hidden;
-        margin: 0;
-        padding: 0;
-    }
-
-    #fullname, #username {
-
-        &:hover {
-            text-decoration: underline;
-            color: lighten($txt, 20%);
-        }
-
-        text-decoration: none;
-        font-size: x-large;
-        color: $txt;
-    }
-
-    #show-user-link, #fullname { float: left; }
-    #logout-link, #username { float: right; }
-
-    font-weight: bold;
     @include rounded2(top, left, 0.5em);
     @include rounded2(top, right, 0.5em);
+
+    #fullname, #username {
+        font-weight: bold;
+        font-size: x-large;
+        float: left;
+    }
+
+    #username {
+        padding-left: 0.2em;
+        color: $greyTxt;
+    }
+
+    .control-links { padding-top: 0.6em; }
 }
 
 #user-info {
@@ -127,20 +118,12 @@ body {
 }
 
 #timeline {
-    font-weight: bold;
 
-    #timeline-name {
-
-        &:hover {
-            text-decoration: underline;
-            color: lighten($txt, 20%);
-        }
-
-        text-decoration: none;
-        color: $txt;
-    }
+    #timeline-name, #timeline-desc { font-weight: bold; }
 
     #timeline-desc { color: $greyTxt; }
+
+    .control-links { padding-top: 0.2em; }
 }
 
 #timeline-info {

www/ts/index.yaws

@@ -8,11 +8,13 @@
     <body>
 
         <div id="user" class="bar">
-            <div>
-                <a href="/ts/edit-user.yaws" id="fullname"
-                    onclick="toggleUserInfo()">Jonathan Bernard</a>
-                <a href="/ts/logout.yaws" id="username"
-                    onclick="showUserMenu()">jdbernard</a>
+            <span id="fullname">Jonathan Bernard</span>
+            <span id="username">- jdbernard</span>
+            <div class="control-links">
+                <a href="/ts/logout.yaws" class="control-link"
+                    onclick="showUserMenu()">logout</a>
+                <a href="/ts/edit-user.yaws" class="control-link"
+                    onclick="logout()">user info</a>
             </div>
         </div>
 
@@ -23,9 +25,14 @@
         </div>
 
         <div id="timeline" class="bar">
-            <a href="/ts/edit-timeline.yaws" id="timeline-name"
-                onclick="toggleTimelineInfo()">work</a> |
+            <span id="timeline-name">work |</span>
             <span id="timeline-desc">an accounting of time spent at work</span>
+            <div class="control-links">
+                <a href="/ts/edit-timeline.yaws" class="control-link"
+                    onclick="toggleTimelineInfo()">timeline info</a>
+                <a href="/ts/select-timeline.yaws" class="control-link"
+                    onclick="showTimelineMenu()">change timelines</a>
+            </div>
         </div>
 
         <div id="timeline-info" class="bar">