scratch-www/src/main.scss

@import "colors";
@import "frameless";

/* Tags */
html,
body {
    display: block;
    margin: 0;
    background-color: $ui-purple-dark;
    padding: 0;
    color: $type-gray;
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

/* Typography */
h1,
h2,
h3,
h4 {
    margin: 0;
    border: 0;
    padding: 0;

    color: $header-gray;
    font-weight: bold;
}

h1 {
    font-size: 2.5rem;
    font-weight: bold;
}

h2 {
    font-size: 2rem;
    font-weight: bold;
}

h3 {
    font-size: 1.4rem;
    font-weight: bold;
}

h4 {
    font-size: 1rem;
    font-weight: bold;
}

h5 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .85rem;
    font-weight: bold;
}

p {
    &.legal {
        font-size: .8rem;
    }

    &.intro {
        font-size: 1.1rem;
    }

    &.callout {
        // margin: 1.5em 0;
        // border-top: 1px solid $ui-border;
        // border-bottom: 1px solid $ui-border;
        // padding: 1em 0;

        margin: 1.5em 0;
        border: 1px solid $active-gray;
        border-radius: .5rem;
        background-color: $ui-blue-10percent;
        padding: 1.25em;

        &.orange {
            background-color: $ui-orange-10percent;
        }
    }

    a {
        white-space: nowrap;
    }
}

b,
strong {
    font-weight: bold;
}

/* Links */
a {
    cursor: pointer;
    color: $ui-purple-dark;
    font-weight: bold;

    &:link,
    &:visited,
    &:active {
        text-decoration: none;
        color: $link-purple;
    }

    &:hover {
        text-decoration: none;
        color: $ui-purple-darker;
    }
}

/* Classes */
.empty {
    border: 1px solid $active-gray;
    border-radius: 5px;
    background-color: $ui-blue-10percent;
    padding: 10px;
    text-align: center;
    line-height: 2rem;
    color: $type-gray;

    h4 {
        color: $type-gray;
    }
}

h1,
h2,
h3,
h4,
h5,
p {
    line-height: 1.7em;
    color: $type-gray;
}

p {
    font-size: 1rem;
    font-weight: normal;
}

input {
    outline-color: $ui-purple-dark;
}

::selection {
    background-color: $ui-blue-25percent;
}

ol,
ul {
    padding-left: 20px;

    line-height: 1.5em;
    font-size: 1rem;
    font-weight: normal;

    li {
        margin: .75em 0;
    }
}

dl {
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: normal;

    dt {
        font-weight: bold;
    }

    dd {
        margin: 0;
    }
}

#view {
    display: inline-block;

    /* NOTE: Margin should match height in navigation.scss */
    margin-top: 50px;
    background-color: $background-color;
    padding: 20px 0;
    min-width: 100%;
    min-height: 680px;
}