hypothetical/resources/assets/sass/app.scss

// Core
@import "_var";
@import "_fonts";

// Libraries
@import "bootstrap/scss/bootstrap.scss";

// Functionality
@import "functions/**/*.scss";
@import "mixins/**/*.scss";

// Supplementary
@import "classes/**/*.scss";
@import "partials/**/*.scss";
@import "sections/**/*.scss";
@import "pages/**/*.scss";

//
// Main Website Styles
//

[data-whatinput="initial"], [data-whatinput="keyboard"] {
    :focus {
        outline: 1px dotted $c-base;
    }
}

[data-whatinput="mouse"], [data-whatinput="touch"] {
    :focus {
        outline: none !important;
    }
}

html {
    width: 100%;
    font-size: $base-font-size;

    &.no-scroll {
        overflow-y: hidden;
    }
}

body {
    @include font-sans;
    width: 100%;
    color: $c-text;
    -webkit-overflow-scrolling: touch;
}

.page-container {
    display: flex;
    min-height: 100vh;
    flex-direction: column;

    @media (max-width: $nav-mobile-max) {
        padding-top: $nav-height-mobile;
    }

    @media (min-width: $nav-desktop-min) {
        padding-top: $nav-height-desktop;
    }

    .main-content {
        display: flex;
        flex-grow: 1;

        > div {
            width: 100%;
        }
    }
}