ejplatform/ej-server

/*
 GENERIC PAGE ELEMENTS
 ======================================================================== */

$page-title-font-size: 1.1 * $font-size-h1 !default;

// Background images
$card-background-image-url: url(/static/img/icons/bg.png) !default;
$page-background-image-url: url(/static/img/page-bg.svg) !default;


.Page {
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    height: 100vh;
    overflow: hidden;
    padding: $header-top-nav-height 0 $header-top-nav-height 0;

    @include breakpoint('sm') {
        padding: ($header-height-tablet + $top-header-height) 0 $header-top-nav-height 0;
    }

    @include breakpoint('sm') {
        &.talks {
            padding: $header-top-nav-height 0 0 0;
        }
    }

    &-content-container {
        display: flex;

        .NavMenu {
            position: fixed;
        }
    }

    @media only screen and (min-width: 960px) {
        &-content.logged-in, #docs {
            padding-left: 400px !important;
        }
    }

    @media only screen and (max-width: 960px) {
        .NavMenu-fixed {
            display: none;
        }
    }

    &-mainContainer {
        background: $page-background-image-url center no-repeat;
        background-size: contain;
        box-sizing: border-box;
        height: 100vh;
        display: flex;
        flex-flow: column;
        overflow-x: hidden;
        overflow-y: auto;
    }

    &-title {
        background: color('primary');
        color: color('primary', contrast);
        margin: 0 0 $spacing-unit 0;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);

        h1 {
            @extend .container-1;

            font-size: $page-title-font-size;
            padding: $spacing-unit-tiny ($spacing-unit - $spacing-unit-tiny);
        }

        em {
            font-weight: bold;
            font-style: normal;
        }
    }

    &-content {
        flex-grow: 1;
        margin: 0 auto $header-bottom-nav-height + $top-header-height auto;
        padding: 0;
    }
}