// ============================================================================ // :: Layout // ============================================================================ /** * In this file we add everything that is related to the highest level of layout * styling: or the tag. */ // ============================================================================ // :: Base // ============================================================================ /** * Border-box is used to make responsive layouts more manageable. It allows to * include padding and border in an elements width and height. * By adding box-sizing directly onto the and inheriting it on every * element we make it easier to overwrite the box-sizing property within other * components or libraries that were build on a different box-sizing standard. * * "the most humbe and undersung, yet awesome and usefull CSS Property" * - Chris Coyier - css-tricks * * Mark your calendars, we celebrate "International box-sizing Awareness Day" on * the 1st of February!!! */ html { box-sizing: border-box; } body { overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; color: $text-color; } *, *::before, *::after { box-sizing: inherit; } // ============================================================================ // :: Body // ============================================================================ body { &.is-modal-open { overflow: hidden; } }