dokuwiki-template-fafo/css/area_header.less

/**
 * This file provides the design styles for the page header.
 */

#dokuwiki__header {
    @header-font-opacity: 1;

    @media @screen_max-xs {
        min-height: 120px;
    }

    /* + + +  wiki logo  + + + */
    @media @screen_min-md {
        .logo {
            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;
                }
            }
        }
    }

    @media @screen_max-md {
        .logo {
            display: table-cell;

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

    /* + + + + +  DESKTOP  -  wiki title + claim  + + + + + */
    .main-title.desktop-only {
        @media @screen_min-md {
            display: table-cell;
            vertical-align: middle;
        }

        @media @screen_max-md {
            display: block;
        }

        p.title {
            @media @screen_max-md {
                display: none;
            }
        }

        p.claim {
            @media @screen_max-md {
                display: block;
                padding-bottom: 1rem;
            }

            @media @screen_max-xs {
                padding-right: (@toggle-size + @headericons-margin-xxs);
            }
        }
    }

    /* + + + + +  MOBILE  -  wiki title wrapper  + + + + + */
    .main-title:not([class*="desktop-only"]) {
        @media @screen_max-md {
            display: table-cell;
            vertical-align: middle;
        }

        @media @screen_max-xs {
            padding-right: (@toggle-size + @headericons-margin-xxs);
        }
    }

    /* + + +  wiki title  + + + */
    p.title {
        opacity: @header-font-opacity;
        color: @ini_text_webframe;
        line-height: @line-height-default;
        margin-bottom: .5rem;

        @media @screen_min-md {
            font-size: @font-size-big;
        }

        @media @screen_max-md {
            font-size: (@font-size-default + .25);
            padding-top: .5rem;
            padding-left: 1rem;
        }
    }

    /* + + + + +  DESKTOP  -  wiki claim, logo, title wrapper  + + + + + */
    @media @screen_min-md {
        div.claim {
            display: table-cell;
            height: 100%;
            vertical-align: middle;
        }
    }

    /* + + +  wiki claim  + + + */
    p.claim {
        opacity: @header-font-opacity;
        color: @ini_text_webframe;
        font-size: @font-size-default;
        margin-bottom: 0;

        @media @screen_max-md {
            padding-top: .5rem;
        }
    }

    /* + + +  mobile nav togglelink  + + + */
    .menu-togglelink {
        position: relative;
        margin: @headericons-margin-xxs -(@very-small-spacing) 0 0;

        a {
            .fontello();
            .icon-menu();
            .btn-hover();

            display: block;
            min-height: @toggle-size;
            min-width: @toggle-size;
            box-sizing: border-box;
            border: 1px solid @ini_border;
            border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
            font-size: 1rem;
            text-align: center;
            text-decoration: none;
            line-height: 1;

            &::before {
                font-size: 1.5rem;
                margin: .1rem 0 0;
            }
        }
    }

    /* + + +  mobile select for doku wiki tools   + + + */
    .menu-tool-select {
        position: relative;
        z-index: 1000;
        display: none;
        @media @screen_max-xxs {
            display: block;
        }

        select {
            display:  block;
            width:100%;
        }
    }

    /* + + + + +  with magic matcher  + + + + + */
    &.has-magicmatcher {
        .logo {
            @media @screen_min-md {
                padding-top: 3rem;
            }
        }

        .main-title.desktop-only {
            @media @screen_min-md {
                vertical-align: bottom;
                padding-top: @height-context-bar;
                padding-bottom: 1rem;
            }

            p.title {
                @media @screen_min-md {
                    margin-right: 16rem;
                }
            }

            p.claim {
                @media @screen_max-md {
                    display: block;
                    padding-bottom: 1rem;
                }
            }
        }
    }
}

/* + + + + +  layout option compact  + + + + + */
.header-compact {
    #dokuwiki__header {
        min-height: 2.7rem;
        margin-bottom: 0.5rem;

        .main-title.desktop-only p.claim,
        p.claim {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 35em;
        }

        // desktop
        @media @screen_min-md {
            div.claim {
                vertical-align: top;
            }

            .main-title.desktop-only {
                vertical-align: top;
            }

            .main-title.desktop-only,
            .logo {
                padding-top: 0.4rem;
            }

            .logo img {
                height: 3.6rem;
            }
        }

        // mobile middle
        @media @screen_max-md {

            .main-title.desktop-only p.claim,
            p.claim {
                display: none;
            }

            .logo {
                display: block;
                position: absolute;
                top: 0;
                left: 3rem;

                .mobile-only {
                    margin: .4rem;
                    height: 1.75rem;
                }
            }

            .main-title:not([class*="desktop-only"]) {
                display: inline-block;
                vertical-align: top;
                padding-left: 1.75rem;
            }

            p.title {
                font-size: 1rem;
            }
        }
        
        @media @screen_max-xxs {
            min-height: 70px; // needed for menu select toolbar

            .logo {
                left: 2rem;
            }

            .menu-tool-select {
                padding-top: .3rem;
            }
        }
    }
}