// ============================================================================ // :: 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; } *, *:before, *:after { box-sizing: inherit; } body { /** * Works only on safari and is meant to fix the body-overflow issue that has * plagued safari and every developer for 3 years. This works together with * the -webkit-overflow-scrolling: touch; property in root.scss. */ @include respond-to($breakpoint-tablet-default) { position: fixed; top: 0; left: 0; width: 100%; } }