blog/src/components/Layout.module.scss

@import 'variables';
@import 'mixins';

#___gatsby {
    // display: flex;
    // min-height: 100vh;
    // flex-direction: column;
    position: relative;
}

.site__content,
.footer__content {
    padding: 0 $spacer;
    width: 100%;

    @media (min-width: $screen-sm) {
        padding: 0 ($spacer * 2);
    }
}

// topbar and footer as fixed
// site background
/////////////////////////////////////

.site__document {
    width: 100%;
    padding-top: ($spacer * 2);
    background-color: $page-background-color;
    border-top: 1px solid rgba(255, 255, 255, .7);
    border-bottom: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 1px 4px rgba($brand-main, .1),
        0 -1px 4px rgba($brand-main, .2);
    transform: translate3d(0, 0, 0);

    :global(.has-menu-open) & {
        transform: translate3d(0, ($spacer * 8), 0);
    }

    @media (min-width: $screen-sm) {
        @include transition;

        margin-top: $spacer * 2.65;
        position: relative;
        z-index: 2;

        :global(.has-menu-open) & {
            transform: translate3d(0, ($spacer * 5), 0);
        }
    }
}