personal-display/mockup/css/display.scss

/* 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; }
    }
}