Trying to tighten up the design. More functionality implemented.

www/css/ts-screen.scss

@@ -5,24 +5,39 @@
 
 @import "rounded";
 
-$txtClr: #222;
+$darkTxt: #222;
+$lightTxt: #eee;
+$darkBg: #222;
+$lightBg: #eee;
+$medBg: #CCC;
 
 * {
-    color: $txtClr;
+    color: inherit;
     margin: 0;
     padding: 0;
 }
 
 body {
-    width: 70%;
+    color: $darkTxt;
+    width: 75%;
     margin: auto;
 }
 
+input {
+    border: solid thin lighten($darkTxt, 20%);
+    -webkit-box-shadow: inset 0px 2px 4px #CCC;
+    box-shadow: inset 0px 2px 4px #CCC;
+    margin-bottom: 0.5em;
+    font-family: Cantarell;
+}
+
 #top {
+    background: $darkBg;
+    color: $lightTxt;
+    padding: 0.5rem 0;
     position: fixed;
     top: 0px;
-    background: white;
-    width: 70%;
+    width: 75%;
 
     #fade-bar {
         background: url('img/fade.png') repeat-x;
@@ -34,6 +49,8 @@ body {
 #user {
 
     font-family: "Josefin Sans";
+    margin-top: -0.3rem;
+    padding: 0 2rem;
     width: 100%;
 
     .fullname, .username {
@@ -43,7 +60,7 @@ body {
 
     .fullname-input { display: none; }
 
-    &.fullname-edit {
+    &.edit-fullname{
         .fullname-input { display: inline-block; }
         .fullname { display: none; }
     }
@@ -51,33 +68,22 @@ body {
     .drop-menu { display: inline-block; }
 
     .drop-menu .drop-menu-items {
-
-        float: right;
+        margin-top: -0.5em;
+        text-align: right;
+        right: 0;
         list-style: none;
-
-        li {
-            float: right;
-            text-align: center;
-            //margin-top: -0.5em;
-            padding-right: 1em;
-        }
+        width: 10em;
     }
 
-    a {
-        display: inline-block;
-        text-decoration: none;
 
-        &:hover {
-            text-decoration: underline;
-        }
-    }
 }
 
 #timeline {
 
-    border-bottom: thin solid black;
+    border-bottom: thin solid $lightBg;
     font-family: Arvo;
     font-size: 1.5em;
+    padding: 0 2rem;
 
     .timeline-desc {
         display: inline-block;
@@ -108,42 +114,34 @@ body {
         .drop-menu-items  {
             text-align: right;
             right: 0;
+            width: 172.41%;
+
+            .timeline-link {
+                font-size: medium;
+            }
         }
     }
 }
 
-#new-entry {
-    margin-top: 5.5em;
-    padding: 0.5em 0.5em;
+#entry-list {
+    margin-top: 6rem;
+    padding-bottom: 1rem;
+}
 
-    .mark-input, .timestamp-input {
-        border: solid thin lighten($txtClr, 20%);
-        -webkit-box-shadow: inset 0px 2px 4px #CCC;
-        box-shadow: inset 0px 2px 4px #CCC;
-        margin-bottom: 0.5em;
-        font-family: Cantarell;
-    }
+#new-entry {
+    margin-top: 0.5rem;
+    padding: 0 2rem;
 
     .mark-input { width: 78%; }
 
-    .edit-mark {
-        .mark-input { display: inline-block; }
-        .mark { display: none; }
-    }
-
-    .edit-timestamp {
-        .timestamp-input { display: inline-block; }
-        .timestamp { display: none; }
-    }
 }
 
 #entries {
     
-    padding: 0.5em 0.5em;
-
     .entry {
 
         font-family: Cantarell;
+        padding: 0 2rem;
 
         div { display: inline-block; }
 
@@ -157,38 +155,66 @@ body {
 
         .notes { display: none; }
             
+        &.edit-mark {
+            .mark-input { display: inline-block; }
+            .mark { display: none; }
+        }
+
+        &.edit-timestamp {
+            .timestamp-input { display: inline-block; }
+            .timestamp { display: none; }
+        }
+
     }
 
 }
 
+.day-seperator {
+    background: $medBg;
+    color: $darkBg;
+    font-family: Cantarell;
+    font-weight: bold;
+    margin-top: 1rem;
+    padding: 0 2rem;
+}
+
 .drop-menu {
     position: relative;
     
     .drop-menu-items {
-        background: white;
         display: none;
         list-style: none;
         position: absolute;
+
+        li {
+            display: inline-block;
+            padding-left: 0.5em;
+        }
     }
 
-    &:hover .drop-menu-items, .drop-menu-items:hover {
-        display: block;
-    }
+    &:hover .drop-menu-items, .drop-menu-items:hover { display: block; }
 
+    a {
+        display: inline-block;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
 }
 
 .footer {
 
-    border-top: thin solid black;
-    color: lighten($txtClr, 40%);
+    background: $darkBg;
+    color: $lightTxt;
     font-family: Bentham;
-    margin: 1em 0;
-    padding-top: 1em;
+    padding: 1rem 0;
     text-align: center;
     width: 100%;
 
     a {
-        color: lighten($txtClr, 40%);
+        color: lighten($lightTxt, 20%);
         text-decoration: none;
 
         &:hover { text-decoration: underline; }