daux.io/less/import/structure.less

/* ===========================================================================================
Base CSS
============================================================================================== */

//Fonts
.roboto-slab {
    &.light {
        font-family: 'Roboto Slab', @font-family-sans-serif;
        font-weight: 100;
    }

    &.book {
        font-family: 'Roboto Slab', @font-family-sans-serif;
        font-weight: 300;
    }

    &.regular {
        font-family: 'Roboto Slab', @font-family-sans-serif;
        font-weight: 400;
    }

    &.bold {
        font-family: 'Roboto Slab', @font-family-sans-serif;
        font-weight: 700;
    }
}

//Typography
h1, h2, h3, h4, h5, h6 {
    .roboto-slab.book;
}

pre {
    padding: 0;
}

/* ===========================================================================================
Homepage
============================================================================================== */

.homepage-hero {
    padding-top: 60px !important;
    background-color: @light;
    .kill-box-shadow;
    border-radius: 0px;
    border: none;
    color: @dark;
    overflow: hidden;
    padding-bottom: 0;
    margin-bottom: 0;

    .text-center {
        .roboto-slab.bold;
        margin: 10px 0px;
    }

    h2 {
        margin: 20px 0px;
    }
}

.hero-buttons.container-fluid {
    padding: 20px 0px;
    background-color: @sidebar-hover;

    .btn-hero.btn {
        .roboto-slab.bold;
        padding: 20px 30px;
        .kill-background-image;
        .kill-box-shadow;
        border-radius: 0px;
        text-shadow: none;
        border: none;
        .opacity(0.80);
        margin: 0px 10px;
        text-transform: uppercase;
        border: 5px solid @dark;

        @media (max-width: 767px) {
            display: block; margin-bottom: 10px;
        }

        &:hover {
            .opacity(1.0);
        }

        &.btn-secondary {
            background-color: @sidebar-hover;
            color: @dark;
        }

        &.btn-primary {
            background-color: @dark;
            color: @sidebar-background;
        }
    }
}

.homepage-content.container-fluid {
    // color: white;
    // background-color: @text;
    background-color: white;
    padding: 40px 0px;

    .lead {
        .roboto-slab.regular;
    }

    ul, ol {
        padding: 20px 0px;
        margin: 0 0 10px 0px;

        li {
            list-style: none;
            padding-bottom: 5px;

            &:before {
                content: '';
                width: 0px;
                height: 0px;
                border: 3px solid transparent;
                border-left: 3px solid @light;
                float: left;
                display: block;
                margin: 6px;
            }
        }
    }

    @media (max-width: 767px) {
        padding: 40px 20px;
    }
}

.homepage-footer.container-fluid {
    background-color: @dark;
    .kill-box-shadow;
    border-radius: 0px;
    color: light;
    border: none;

    @media (max-width: 767px) {
        padding: 0 20px;
    }

    .footer-nav {
        &:extend(.list-unstyled all);
        margin: 40px 0px;

        li {
            a {
                .roboto-slab.bold;
                font-size: 16px;
                line-height: 32px;

                &:hover {
                    color: @light;
                    text-decoration: underline;
                }
            }
        }
    }

    .twitter {
        margin-top: 20px;
    }

        .twitter:first-child {
            margin-top: 40px;
        }
}

/* ===========================================================================================
Docs Body & Page Structure
============================================================================================== */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: @light;
    color: @text;
}

//100% Height Columns
.container-fluid {

    &.fluid-height {
        height: 100%;
    }
}

.columns {
    height: 100%;
    padding-top: @navbar-height;

    .left-column {
        background-color: @sidebar-background;
        border-right: 1px solid @lines;
        overflow-x: hidden;
    }

    .right-column {
        .content-page {
            padding: 20px;
            min-height: 100%;
            background-color: white;
        }
    }
}

.content-area, .article-tree {
    overflow: auto;
    height: 100%;
    padding: 0px;
}

//mobile friendly sub-nav
.responsive-collapse {
    padding: 10px 15px;
    display: none;
    background-color: @lines;
    border-bottom: 1px solid @lines;

    @media (max-width: 767px) {
        display: block;
    }
}

.sub-nav-collapse {
    @media (max-width: 768px) {
        display: none;
    }

    @media (min-width: 768px) {
        display: block;
    }
}

//CSS For Fluid Tables
@media only screen and (max-width: 800px) {

    /* Force table to not be like tables anymore */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
        border: none;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    tr {
        margin-bottom: 10px;
        border-bottom: 2px solid #ccc;

        td, th {
            border: 1px solid #ccc;
            border-bottom: none;
        }
    }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
        white-space: normal;
        text-align: left;
    }

        td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }

        /* Label the data */
        td:before {
            content: attr(data-title);
        }
}