sprintdoc/css/base_structure.less

/**
 * This file provides styles for the general layout structure.
 *
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */


/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* Col Grid */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

.make-grid(xs);

@media screen {
    .container {
        margin: 0 @margin-big;
    }
}

@media @screen_min-xxs {
    html {
        font-size: 114%; //16px
    }
}

@media @screen_min-xs {
    html {
        font-size: 114%; //16px
    }
}

@media @screen_min-sm {
    .make-grid(sm);
    html {
        font-size: 100%; //16px
    }
}

@media @screen_min-md {
    .make-grid(md);
    html {
        font-size: 81.25%; //13px
    }
}

@media @screen_min-lg {
    .make-grid(lg);
    html {
        font-size: 87.5%; //14px
    }
}

@media @screen_min-xlg {
    html {
        font-size: 93.75%; //15px
    }
}

@media @screen_min-xxlg {
    html {
        font-size: 100%; //16px
    }
}

/* + + + + +  z-indeces  + + + + + */
@media @screen_min-md {
    .nav-direct p {
        z-index: 1000;
    }

    .top-header {
        z-index: 900;
    }

    .tools .row > .col-xs-12 {
        z-index: 1;
    }

    .header .row > .col-xs-12 {
        z-index: 2;
    }

    .content .row > .col-xs-12 {
        z-index: 3;
    }

    .top-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .header,
    .tools {
        .row {
            position: relative;

            > .col-xs-12 {
                width: 23%;
                box-sizing: border-box;
            }
        }
    }

    .header {
        .row > .col-xs-12 {
            position: relative;
            height: 150px;
            min-height: 6rem;
            display: table;
        }
    }

    .tools {
        .row > .col-xs-12 {
            position: absolute;
        }
    }

    .content {
        .row > .col-xs-12 {
            position: relative;
            width: 100%;
            background-color: #fff;
        }
    }

    .claim {
        display: table-cell;
        height: 100%;
        vertical-align: middle;

        .logo {
            /*position: absolute;
            bottom: 1em;
            overflow: visible;*/
            padding: 1rem 0 .3rem;

            img {
                height: 4.6rem;
                width: auto;
                border-style: solid;
                border-color: transparent;
                border-width: 2px 0;
            }

            a:hover,
            a:focus,
            a:active {
                img {
                    border-width: 0;
                }
            }
        }
    }

    .showSidebar {
        .content {
            .row > .col-xs-12 {
                width: 73%;
                float: right;
            }
        }
    }

    .wide-content {
        .content {
            .row > .col-xs-12 {
                width: auto;
                float: none;
            }
        }

        &.showSidebar {
            .content {
                .row > .col-xs-12 {
                    margin-left: @toggle-showsidebar_width;
                }
            }
        }
    }

    .main-sidebar {
        &.search {
            > img {
                width: 100%;
                height: auto;
            }
        }
    }
}

@media @screen_max-md {
    .container {
        margin: 0 1.25rem;
    }

    #dokuwiki__usertools {
        margin-top: 0;
        max-width: 75%;
        position: absolute;
        top: 0;
        margin-right: 0;
        right: 1.25rem;
    }

    .content {
        position: relative;

        #dokuwiki__pagetools {
            top: 0;
        }

        .row > .col-xs-12 #dokuwiki__content::before {
            display: none;
        }
    }

    #dokuwiki__header {
        .logo {
            /*width: 200px;
            max-width: 33%;
            margin: .8rem 0;*/
        }
    }

    .tools {
        .main-sidebar {
            display: none;
        }
    }
}

@media @screen_max-md {
    .claim {
        min-height: 3rem;

        .logo {
            .mobile-only {
                margin: .8rem 1rem .6rem 0;
            }
        }
    }
}

@media @screen_max-xxs {
    @mobileMargin: 4px;

    .container {
        margin: 0 @mobileMargin;
    }

    body.show-mobile-sidebar #dokuwiki__aside {
        left: @mobileMargin;
    }

    #dokuwiki__usertools {
        right: @mobileMargin;
    }

    #dokuwiki__footer {
        .main-footer {
            > * {
                padding-left: 2rem;
                padding-right: 2rem;
            }
        }
    }
}