/// /// Identity by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// /* Basic */ // Ensures page width is always >=320px. @include breakpoint('<=xsmall') { html, body { min-width: 320px; } } // Set box model to border-box. // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { // Stops initial animations until page loads. &.is-preload { *, *:before, *:after { @include vendor('animation', 'none !important'); @include vendor('transition', 'none !important'); } } } html { height: 100%; } body { height: 100%; background-color: _palette(bg); @include vendor('background-image', ( 'url("images/overlay.png")', 'linear-gradient(60deg, #{transparentize(_palette(accent1), 0.5)} 5%, #{transparentize(_palette(accent2), 0.65)})', 'url("../../images/bg.jpg")' )); background-repeat: repeat, no-repeat, no-repeat; background-size: 100px 100px, cover, cover; background-position: top left, center center, bottom center; background-attachment: fixed, fixed, fixed; &:after { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: inherit; opacity: 0; z-index: 1; background-color: _palette(bg); @include vendor('background-image', ( 'url("images/overlay.png")', 'linear-gradient(60deg, #{transparentize(_palette(accent1), 0.5)} 5%, #{transparentize(_palette(accent2), 0.65)})' )); background-repeat: repeat, no-repeat; background-size: 100px 100px, cover; background-position: top left, center center; @include vendor('transition', 'opacity #{_duration(bg)} ease-out'); } &.is-preload { &:after { opacity: 1; } } }