The main app page is starting to take form.

Created stylesheet for page.
Added real content and structure to the app page.

www/css/rounded.scss

@@ -6,8 +6,8 @@
   border-radius: $radius;
 }
 
-@mixin rounded2($side, $radius: 10px) {
+@mixin rounded2($side1, $side2, $radius: 10px) {
-    -moz-border-radius-#{$side}: $radius;
+    -moz-border-radius-#{$side1}#{$side2}: $radius;
-    -webkit-border-#{$side}-radius: $radius;
+    -webkit-border-#{$side1}-#{$side2}-radius: $radius;
-    border-#{$side}-radius: $radius;
+    border-#{$side1}-#{$side2}-radius: $radius;
 }

www/css/ts-screen.css

@@ -0,0 +1,114 @@
+/*
+ * author: Jonathan Bernard
+ * TimeStamper main CSS for screen media types
+ */
+/*
+    $obg: #D9CEB2;
+    $bor: #948C75;
+    $ibg: #D5DED9;
+    $txt: #7A6A53;
+    $bbg: #99B2B7;
+*/
+/*
+$obg:  #979681;
+$obor: #E6DEC7;
+$ibg:  #657A8B;
+$bbor: #B34C2B;
+$bbg:  #252D42;
+$txt:  #E6DEC7;
+*/
+/* _rounded.scss */
+html {
+  background: url("../img/loving_blu.png") repeat; }
+
+body {
+  width: 50%;
+  background-color: #657a8b;
+  margin: auto;
+  padding: 1em;
+  border: solid #b34c2b;
+  border-top: 0;
+  -moz-border-radius-bottomleft: 1em;
+  -webkit-border-bottom-left-radius: 1em;
+  border-bottom-left-radius: 1em;
+  -moz-border-radius-bottomright: 1em;
+  -webkit-border-bottom-right-radius: 1em;
+  border-bottom-right-radius: 1em; }
+
+@media all and (min-device-width: 480) {
+  body {
+    width: 50%; } }
+
+@media all and (max-device-width: 480) {
+  body {
+    width: 80%; } }
+
+.bar {
+  font-family: Helvetica, sans-serif;
+  color: #252d42;
+  background-color: #e6dec7;
+  border-color: #979681;
+  border-style: solid;
+  border-width: 0.2em;
+  border-bottom-width: 0;
+  padding: 0.1em 1em 0.1em 1em; }
+
+.last-bar {
+  border-bottom-width: 0.2em;
+  -moz-border-radius-bottomright: 0.5em;
+  -webkit-border-bottom-right-radius: 0.5em;
+  border-bottom-right-radius: 0.5em;
+  -moz-border-radius-bottomleft: 0.5em;
+  -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-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-info {
+  display: none; }
+
+#timeline {
+  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-info {
+  display: none; }

www/css/ts-screen.scss

@@ -0,0 +1,148 @@
+/*
+ * author: Jonathan Bernard
+ * TimeStamper main CSS for screen media types
+ */
+
+/*
+    $obg: #D9CEB2;
+    $bor: #948C75;
+    $ibg: #D5DED9;
+    $txt: #7A6A53;
+    $bbg: #99B2B7;
+*/
+
+/*
+$obg:  #979681;
+$obor: #E6DEC7;
+$ibg:  #657A8B;
+$bbor: #B34C2B;
+$bbg:  #252D42;
+$txt:  #E6DEC7;
+*/
+
+$obg:  #252D42;
+$obor: #B34C2B;
+$ibg:  #657A8B;
+$bbor: #979681;
+$bbg:  #E6DEC7;
+$txt:  #252D42;
+$greyTxt:  darken($bbor, 20%);
+
+$iBorWidth: 0.2em;
+
+@import "rounded";
+
+html {
+    //background-color: $obg;
+    background: url('../img/loving_blu.png') repeat;
+}
+
+body {
+    width: 50%;
+    background-color: $ibg;
+    margin: auto;
+    padding: 1em;
+    border: solid $obor;
+    border-top: 0;
+    @include rounded2(bottom, left, 1em);
+    @include rounded2(bottom, right, 1em);
+}
+
+@media all and (min-device-width: 480) { body { width: 50%; }}
+
+@media all and (max-device-width: 480) { body { width: 80%; }}
+
+.bar {
+
+    font-family: Helvetica, sans-serif;
+    color: $txt;
+    background-color: $bbg;
+    border-color: $bbor;
+    border-style: solid;
+    border-width: $iBorWidth;
+    border-bottom-width: 0;
+    padding: 0.1em 1em 0.1em 1em;
+}
+
+.last-bar {
+    border-bottom-width: $iBorWidth;
+    @include rounded2(bottom, right, 0.5em);
+    @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);
+}
+
+#user-info {
+    display: none;
+}
+
+#timeline {
+    font-weight: bold;
+
+    #timeline-name {
+
+        &:hover {
+            text-decoration: underline;
+            color: lighten($txt, 20%);
+        }
+
+        text-decoration: none;
+        color: $txt;
+    }
+
+    #timeline-desc { color: $greyTxt; }
+}
+
+#timeline-info {
+    display: none;
+}

www/css/ts.css

@@ -1,73 +0,0 @@
-/*
- * author: Jonathan Bernard
- * TimeStamper main CSS
- */
-/*
-    $obg: #D9CEB2;
-    $bor: #948C75;
-    $ibg: #D5DED9;
-    $txt: #7A6A53;
-    $bbg: #99B2B7;
-*/
-/*
-$obg:  #979681;
-$obor: #E6DEC7;
-$ibg:  #657A8B;
-$bbor: #B34C2B;
-$bbg:  #252D42;
-$txt:  #E6DEC7;
-*/
-/* _rounded.scss */
-html {
-  background: url("/img/loc.png") repeat; }
-
-body {
-  background-color: #657a8b;
-  width: 50%;
-  margin: auto;
-  padding: 1em;
-  border: solid #b34c2b;
-  border-top: 0;
-  -moz-border-radius-bottomleft: 1em;
-  -webkit-border-bottomleft-radius: 1em;
-  border-bottomleft-radius: 1em;
-  -moz-border-radius-bottomright: 1em;
-  -webkit-border-bottomright-radius: 1em;
-  border-bottomright-radius: 1em; }
-
-.bar {
-  font-family: Helvetica, sans-serif;
-  color: #252d42;
-  background-color: #e6dec7;
-  border-color: #979681;
-  border-style: solid;
-  border-width: 0.1em 0.1em 0 0.1em;
-  padding: 0.1em 1em 0.1em 1em; }
-
-.last-bar {
-  border-bottom-width: 0.1em;
-  -moz-border-radius-bottomright: 0.5em;
-  -webkit-border-bottomright-radius: 0.5em;
-  border-bottomright-radius: 0.5em;
-  -moz-border-radius-bottomleft: 0.5em;
-  -webkit-border-bottomleft-radius: 0.5em;
-  border-bottomleft-radius: 0.5em; }
-
-#user {
-  overflow: hidden;
-  -moz-border-radius-topleft: 0.5em;
-  -webkit-border-topleft-radius: 0.5em;
-  border-topleft-radius: 0.5em;
-  -moz-border-radius-topright: 0.5em;
-  -webkit-border-topright-radius: 0.5em;
-  border-topright-radius: 0.5em; }
-  #user #fullname {
-    float: left; }
-  #user #username {
-    float: right; }
-
-#user-info {
-  display: none; }
-
-#timeline-info {
-  display: none; }

www/css/ts.scss

@@ -1,87 +0,0 @@
-/*
- * author: Jonathan Bernard
- * TimeStamper main CSS
- */
-
-/*
-    $obg: #D9CEB2;
-    $bor: #948C75;
-    $ibg: #D5DED9;
-    $txt: #7A6A53;
-    $bbg: #99B2B7;
-*/
-
-/*
-$obg:  #979681;
-$obor: #E6DEC7;
-$ibg:  #657A8B;
-$bbor: #B34C2B;
-$bbg:  #252D42;
-$txt:  #E6DEC7;
-*/
-
-$obg:  #252D42;
-$obor: #B34C2B;
-$ibg:  #657A8B;
-$bbor: #979681;
-$bbg:  #E6DEC7;
-$txt:  #252D42;
-
-@import "rounded";
-
-html {
-    //background-color: $obg;
-    background: url('/img/loc.png') repeat;
-}
-
-body {
-    background-color: $ibg;
-    width: 50%;
-    margin: auto;
-    padding: 1em;
-    border: solid $obor;
-    border-top: 0;
-    @include rounded2(bottomleft, 1em);
-    @include rounded2(bottomright, 1em);
-}
-
-.bar {
-    
-    font-family: Helvetica, sans-serif;
-    color: $txt;
-    background-color: $bbg;
-    border-color: $bbor;
-    border-style: solid;
-    border-width: 0.1em 0.1em 0 0.1em;
-    padding: 0.1em 1em 0.1em 1em;
-}
-
-.last-bar {
-    border-bottom-width: 0.1em;
-    @include rounded2(bottomright, 0.5em);
-    @include rounded2(bottomleft, 0.5em);
-}
-
-#user {
-
-    overflow: hidden;
-
-    #fullname {
-        float: left;
-    }
-
-    #username {
-        float: right;
-    }
-
-    @include rounded2(topleft, 0.5em);
-    @include rounded2(topright, 0.5em);
-}
-
-#user-info {
-    display: none;
-}
-
-#timeline-info {
-    display: none;
-}

www/ts/index.yaws

@@ -2,22 +2,32 @@
 <html>
 
     <head>
-        <link rel="stylesheet" href="/css/ts.css" type="text/css"/>
+        <link rel="stylesheet" media="screen" href="../css/ts-screen.css" type="text/css"/>
     </head>
 
     <body>
+
         <div id="user" class="bar">
-            <span id="fullname">Jonathan Bernard</span>
+            <div>
-            <span id="username">jdbernard</span>
+                <a href="/ts/edit-user.yaws" id="fullname"
+                    onclick="toggleUserInfo()">Jonathan Bernard</a>
+                <a href="/ts/logout.yaws" id="username"
+                    onclick="showUserMenu()">jdbernard</a>
+            </div>
         </div>
+
         <div id="user-info" class="bar">
             <form action="/ts/update-user.yaws" onsubmit="updateUser(); false">
                 <input type="text" disabled="true"/>
             </form>
         </div>
+
         <div id="timeline" class="bar">
-            <span id="timeline_name">work</span>
+            <a href="/ts/edit-timeline.yaws" id="timeline-name"
+                onclick="toggleTimelineInfo()">work</a> |
+            <span id="timeline-desc">an accounting of time spent at work</span>
         </div>
+
         <div id="timeline-info" class="bar">
             <form action="/ts/update-timeline.yaws" onsubmit="updateTimeline(); false">
                 <!-- TODO -->