style.less

@base: #131C23;
@complement: #362B1C;
@text-color: #52606A;

.text {
    color: @text-color;
    font-family: 'Open Sans', sans-serif;
}

body {
    background-color: @base;
    .text;
}
nav {
    background-color: darken(@base, 5%);
}
.lighten-hover(@base-color) {
    background-color: @base-color;
    &:hover {
        background-color: lighten(@base-color, 5%);
    }
}
.btn {
    .lighten-hover(lighten(@base, 5%));
}
#crons {
    display: flex;
    flex-wrap: wrap;
    .activity {
        width:312px;
        height:312px;
        padding: 1em;
        border: 1px solid transparent;
        .name {
            font-size: 2em;
        }
        &.active {
            border-color: lighten(@base, 5%);
        }
    }
}
#newActivity {
    background-color: @complement;
    .btn {
        .lighten-hover(lighten(@complement, 5%));
    }
}