Initial commit with UI mockup.

mockup/css/display.scss

@@ -0,0 +1,158 @@
+/* Personal Status Display
+   Author: Jonathan Bernard <jdbernard@gmail.com> */
+
+/* Theme: [She Sells Seashells](http://www.colourlovers.com/palette/57650/She_Sells_Seashells)
+$color1:   #ffefd3;
+$color2:   #fffee4;
+$color3:   #d0ecea;
+$color4:   #49aca5;
+$color5:   #6d5f49;
+
+$fgColor: $color5;
+$mutedFgColor: lighten($fgColor, 15%);
+$bgColor: $color2;
+$bgColor2: $color1;
+$accent1: $color3;
+$accent2: $color4;
+ */
+ 
+/* Theme: [Between The Clouds](http://www.colourlovers.com/palette/1083480/Between_The_Clouds)
+$color1:   #73c8a9;
+$color2:   #dee1b6;
+$color3:   #e1b866;
+$color4:   #bd5532;
+$color5:   #373b44;
+
+$fgColor: $color5;
+$mutedFgColor: lighten($fgColor, 15%);
+$bgColor: lighten($color2, 10%);
+$bgColor2: $color3;
+$accent1: $color1;
+$accent2: $color4;
+ */
+
+/* Theme: [Less Squinting!](http://www.colourlovers.com/palette/1066563/Less_Squinting!)
+$color1:   #B2CBA3;
+$color2:   #E0DF9F;
+$color3:   #E7A83E;
+$color4:   #9A736E;
+$color5:   #EA525F;
+
+$fgColor: darken($color4, 10%);
+$mutedFgColor: lighten($fgColor, 15%);
+$bgColor: lighten($color2, 15%);
+$bgColor2: $color1;
+$accent1: $color3;
+$accent2: $color5;
+ */
+ 
+/* Theme: [with you](http://www.colourlovers.com/palette/908111/with_you)
+$color1:   #785D56;
+$color2:   #BE4C54;
+$color3:   #C6B299;
+$color4:   #E6D5C1;
+$color5:   #FFF4E3;
+
+$fgColor: $color1;
+$mutedFgColor: lighten($fgColor, 15%);
+$bgColor: lighten($color5, 5%);
+$bgColor2: $color4;
+$accent1: $color3;
+$accent2: $color2;
+ */
+
+/* Theme: [Autumn Oak](http://www.colourlovers.com/palette/29411/Autumn_Oak)
+ */
+$color1:   #111111;
+$color2:   #FCF7D1;
+$color3:   #A9A17A;
+$color4:   #B52C00;
+$color5:   #8C0005;
+
+/* Normal
+$fgColor: $color1;
+$mutedFgColor: lighten($fgColor, 15%);
+$bgColor: $color2;
+$bgColor2: $color3;
+$accent1: $color5;
+$accent2: $color4;
+*/
+
+/* Inverted */
+$mutedFgColor: $color2;
+$fgColor: lighten($mutedFgColor, 15%);
+$bgColor: $color1;
+$bgColor2: $color3;
+$accent1: $color5;
+$accent2: $color4;
+ 
+/// Global Rules
+* {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box; }
+
+html {
+    background-color: $bgColor;
+    color: $fgColor;
+    font-size: 150%; }
+
+/* HTML5 elements */
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section { 
+    display:block; }
+
+p, ul, li { margin: 0.5em 0; }
+
+a { color: $accent2; }
+
+body { 
+    font-family: Advent Pro, Rosario, Jura, Average Sans, Cantarell;
+    margin: 0.5rem 1rem; }
+
+section {
+    padding: 0.2rem;
+
+    & > h3 {
+        border-bottom: solid 2px $accent1;
+        color: $accent2;
+        font-family: Play, Jura, Exo, Rationale, Quicksand, Average Sans, sans-serif;
+        font-size: larger;
+        margin: 0.2rem 0.2rem 0.2rem -0.2rem;
+        padding-left: 0.2rem; }
+
+    .task-notes {
+        color: $mutedFgColor;
+        font-size: 75%;
+        max-height: 10em;
+        overflow-y: scroll;
+    }
+
+    .next-action {
+        margin-bottom: 0.5rem;
+
+        .date, .project {
+            background: $bgColor2;
+            border-radius: 5px;
+            color: $mutedFgColor;
+            font-size: 66%;
+            max-width: 33%;
+            padding: 0 0.5em;
+            white-space: nowrap; }
+
+        .details {
+            color: $mutedFgColor;
+            display: block;
+            font-size: 75%; }
+
+        .project:before {
+            content: 'Project: ';
+            font-family: Play;
+            font-variant: small-caps; }
+
+        .date:before {
+            content: 'Due: ';
+            font-family: Play;
+            font-variant: small-caps; }
+    }
+}